chrone: sperate client and server to different repos.

src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherDialogContent.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import * as Yup from 'yup';
+import { useHistory } from 'react-router-dom';
+
+import Toaster from 'components/AppToaster';
+
+import 'style/pages/Setup/PaymentViaVoucherDialog.scss';
+
+import { usePaymentByVoucher } from 'hooks/query';
+import { DialogContent } from 'components';
+import PaymentViaLicenseForm from './PaymentViaVoucherForm';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Payment via license dialog content.
+ */
+function PaymentViaLicenseDialogContent({
+  // #ownProps
+  subscriptionForm,
+
+  // #withDialog
+  closeDialog,
+}) {
+  const history = useHistory();
+
+  // Payment via voucher
+  const { mutateAsync: paymentViaVoucherMutate } = usePaymentByVoucher();
+
+  // Handle submit.
+  const handleSubmit = (values, { setSubmitting, setErrors }) => {
+    setSubmitting(true);
+
+    const mutateValues = {
+      plan_slug: `${values.plan_slug}-${values.period}ly`,
+      license_code: values.license_code,
+    };
+    // Payment via voucher mutate.
+    paymentViaVoucherMutate({ ...mutateValues })
+      .then(() => {
+        Toaster.show({
+          message: intl.get('payment_via_voucher.success_message'),
+          intent: Intent.SUCCESS,
+        });
+        return closeDialog('payment-via-voucher');
+      })
+      .then(() => {
+        history.push('initializing');
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          if (errors.find((e) => e.type === 'LICENSE.CODE.IS.INVALID')) {
+            setErrors({
+              license_code: 'payment_via_voucher.license_code_not_valid',
+            });
+          }
+        },
+      )
+      .finally((errors) => {
+        setSubmitting(false);
+      });
+  };
+
+  // Initial values.
+  const initialValues = {
+    license_code: '',
+    plan_slug: '',
+    period: '',
+    ...subscriptionForm,
+  };
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    license_code: Yup.string()
+      .required()
+      .min(10)
+      .max(10)
+      .label(intl.get('license_code')),
+  });
+
+  return (
+    <DialogContent>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+        component={PaymentViaLicenseForm}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(withDialogActions)(PaymentViaLicenseDialogContent);

src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
+import { Form, FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FormattedMessage as T } from 'components';
+import { compose } from 'redux';
+
+import { CLASSES } from 'common/classes';
+import { inputIntent } from 'utils';
+import { useAutofocus } from 'hooks';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+/**
+ * Payment via license form.
+ */
+function PaymentViaLicenseForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  const licenseNumberRef = useAutofocus();
+
+  // Handle close button click.
+  const handleCloseBtnClick = () => {
+    closeDialog('payment-via-voucher');
+  };
+
+  return (
+    <Form>
+      <div className={CLASSES.DIALOG_BODY}>
+        <p>
+          <T id={'payment_via_voucher.dialog.description'} />
+        </p>
+
+        <FastField name="license_code">
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'voucher_number'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="license_code" />}
+              className={'form-group--voucher_number'}
+            >
+              <InputGroup
+                large={true}
+                intent={inputIntent({ error, touched })}
+                {...field}
+                inputRef={(ref) => (licenseNumberRef.current = ref)}
+              />
+            </FormGroup>
+          )}
+        </FastField>
+      </div>
+
+      <div className={CLASSES.DIALOG_FOOTER}>
+        <div className={CLASSES.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCloseBtnClick} disabled={isSubmitting}>
+            <T id={'close'} />
+          </Button>
+
+          <Button
+            intent={Intent.PRIMARY}
+            disabled={false}
+            type="submit"
+            loading={isSubmitting}
+          >
+            <T id={'submit'} />
+          </Button>
+        </div>
+      </div>
+    </Form>
+  );
+}
+
+export default compose(withDialogActions)(PaymentViaLicenseForm);

src/containers/Dialogs/PaymentViaVoucherDialog/index.js

@@ -0,0 +1,37 @@
+import React, { lazy } from 'react';
+import { Dialog, DialogSuspense } from 'components';
+import { FormattedMessage as T } from 'components';
+
+import withDialogRedux from 'components/DialogReduxConnect';
+
+import { compose } from 'utils';
+
+// Lazy loading the content.
+const PaymentViaLicenseDialogContent = lazy(() =>
+  import('./PaymentViaVoucherDialogContent'),
+);
+
+/**
+ * Payment via license dialog.
+ */
+function PaymentViaLicenseDialog({ dialogName, payload, isOpen }) {
+  return (
+    <Dialog
+      name={dialogName}
+      title={<T id={'payment_via_voucher'} />}
+      className={'dialog--payment-via-voucher'}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      isOpen={isOpen}
+    >
+      <DialogSuspense>
+        <PaymentViaLicenseDialogContent
+          dialogName={dialogName}
+          subscriptionForm={payload}
+        />
+      </DialogSuspense>
+    </Dialog>
+  );
+}
+
+export default compose(withDialogRedux())(PaymentViaLicenseDialog);