feat: billing page in dashboard and setup.

client/src/containers/Dialogs/AccountFormDialog/AccountFormDialogContent.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { omit } from 'lodash';
 import { useQuery, queryCache } from 'react-query';
 import { AppToaster, DialogContent } from 'components';

client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherDialogContent.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Formik } from 'formik';
+
+import { useIntl } from 'react-intl';
+import * as Yup from 'yup';
+import { useHistory } from 'react-router-dom';
+
+import 'style/pages/Setup/PaymentViaVoucherDialog.scss';
+
+
+import { DialogContent } from 'components';
+import PaymentViaLicenseForm from './PaymentViaVoucherForm';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withBillingActions from 'containers/Subscriptions/withBillingActions';
+import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptionsActions';
+
+import { compose } from 'utils';
+
+/**
+ * Payment via license dialog content.
+ */
+function PaymentViaLicenseDialogContent({
+  // #ownProps
+  subscriptionForm,
+
+  // #withDialog
+  closeDialog,
+
+  // #withBillingActions
+  requestSubmitBilling,
+
+  // #withSubscriptionsActions
+  requestFetchSubscriptions,
+}) {
+  const { formatMessage } = useIntl();
+  const history = useHistory();
+
+  // Handle submit.
+  const handleSubmit = (values, { setSubmitting }) => {
+    setSubmitting(true);
+
+    requestSubmitBilling({ ...values, ...subscriptionForm })
+      .then(() => {
+        return requestFetchSubscriptions();
+      })
+      .then(() => {
+        return closeDialog('payment-via-voucher');
+      })
+      .then(() => {
+        history.push('initializing');
+      })
+      .finally((errors) => {
+        setSubmitting(false);
+      });
+  };
+
+  // Initial values.
+  const initialValues = {
+    license_number: '',
+    plan_slug: '',
+    period: '',
+  };
+  // Validation schema.
+  const validationSchema = Yup.object().shape({
+    license_number: Yup.string()
+      .required()
+      .min(10)
+      .max(10)
+      .label(formatMessage({ id: 'license_number' })),
+  });
+
+  return (
+    <DialogContent>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+        component={PaymentViaLicenseForm}
+      />
+    </DialogContent>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withBillingActions,
+  withSubscriptionsActions,
+)(PaymentViaLicenseDialogContent);

client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
+import { Form, FastField, ErrorMessage } from 'formik';
+import { FormattedMessage as T } from 'react-intl';
+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({
+  // #ownProps
+  isSubmitting,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const licenseNumberRef = useAutofocus();
+
+  // Handle close button click.
+  const handleCloseBtnClick = () => {
+    closeDialog('payment-via-voucher');
+  };
+
+  return (
+    <Form>
+      <div className={CLASSES.DIALOG_BODY}>
+        <p>Please enter your preferred payment method below.</p>
+
+        <FastField name="license_number">
+          {({ field, meta: { error, touched } }) => (
+            <FormGroup
+              label={<T id={'voucher_number'} />}
+              intent={inputIntent({ error, touched })}
+              helperText={<ErrorMessage name="voucher_number" />}
+              className={'form-group--voucher_number'}
+            >
+              <InputGroup
+                {...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);

client/src/containers/Dialogs/PaymentViaVoucherDialog/index.js

@@ -0,0 +1,41 @@
+import React, { lazy } from 'react';
+import { Dialog, DialogSuspense } from 'components';
+import { FormattedMessage as T } from 'react-intl';
+
+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);