fix(Setup): fix organization setup.

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

@@ -4,18 +4,17 @@ import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
 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 withBillingActions from 'containers/Subscriptions/withBillingActions';
-import withSubscriptionsActions from 'containers/Subscriptions/withSubscriptionsActions';
-
 import { compose } from 'utils';
+import { Intent } from '@blueprintjs/core';
 
 /**
  * Payment via license dialog content.
@@ -26,30 +25,43 @@ function PaymentViaLicenseDialogContent({
 
   // #withDialog
   closeDialog,
-
-  // #withBillingActions
-  requestSubmitBilling,
-
-  // #withSubscriptionsActions
-  requestFetchSubscriptions,
 }) {
   const { formatMessage } = useIntl();
   const history = useHistory();
 
+  // Payment via voucher
+  const {
+    mutateAsync: paymentViaVoucherMutate,
+  } = usePaymentByVoucher();
+
   // Handle submit.
-  const handleSubmit = (values, { setSubmitting }) => {
+  const handleSubmit = (values, { setSubmitting, setErrors }) => {
     setSubmitting(true);
 
-    requestSubmitBilling({ ...values, ...subscriptionForm })
-      .then(() => {
-        return requestFetchSubscriptions();
-      })
+    paymentViaVoucherMutate({ ...values })
       .then(() => {
+        Toaster.show({
+          message: 'Payment has been done successfully.',
+          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: 'The license code is not valid, please try agin.',
+            });
+          }
+        },
+      )
       .finally((errors) => {
         setSubmitting(false);
       });
@@ -57,17 +69,18 @@ function PaymentViaLicenseDialogContent({
 
   // Initial values.
   const initialValues = {
-    license_number: '',
+    license_code: '',
     plan_slug: '',
     period: '',
+    ...subscriptionForm,
   };
   // Validation schema.
   const validationSchema = Yup.object().shape({
-    license_number: Yup.string()
+    license_code: Yup.string()
       .required()
       .min(10)
       .max(10)
-      .label(formatMessage({ id: 'license_number' })),
+      .label(formatMessage({ id: 'license_code' })),
   });
 
   return (
@@ -82,8 +95,4 @@ function PaymentViaLicenseDialogContent({
   );
 }
 
-export default compose(
-  withDialogActions,
-  withBillingActions,
-  withSubscriptionsActions,
-)(PaymentViaLicenseDialogContent);
+export default compose(withDialogActions)(PaymentViaLicenseDialogContent);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
-import { Form, FastField, ErrorMessage } from 'formik';
+import { Form, FastField, ErrorMessage, useFormikContext } from 'formik';
 import { FormattedMessage as T } from 'react-intl';
 import { compose } from 'redux';
 
@@ -15,12 +15,12 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
  * Payment via license form.
  */
 function PaymentViaLicenseForm({
-  // #ownProps
-  isSubmitting,
-
   // #withDialogActions
   closeDialog,
 }) {
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
   const licenseNumberRef = useAutofocus();
 
   // Handle close button click.
@@ -33,15 +33,17 @@ function PaymentViaLicenseForm({
       <div className={CLASSES.DIALOG_BODY}>
         <p>Please enter your preferred payment method below.</p>
 
-        <FastField name="license_number">
+        <FastField name="license_code">
           {({ field, meta: { error, touched } }) => (
             <FormGroup
               label={<T id={'voucher_number'} />}
               intent={inputIntent({ error, touched })}
-              helperText={<ErrorMessage name="voucher_number" />}
+              helperText={<ErrorMessage name="license_code" />}
               className={'form-group--voucher_number'}
             >
               <InputGroup
+                large={true}
+                intent={inputIntent({ error, touched })}
                 {...field}
                 inputRef={(ref) => (licenseNumberRef.current = ref)}
               />

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

@@ -7,16 +7,14 @@ import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'utils';
 
 // Lazy loading the content.
-const PaymentViaLicenseDialogContent = lazy(() => import('./PaymentViaVoucherDialogContent'));
+const PaymentViaLicenseDialogContent = lazy(() =>
+  import('./PaymentViaVoucherDialogContent'),
+);
 
 /**
  * Payment via license dialog.
  */
-function PaymentViaLicenseDialog({
-  dialogName,
-  payload,
-  isOpen
-}) {
+function PaymentViaLicenseDialog({ dialogName, payload, isOpen }) {
   return (
     <Dialog
       name={dialogName}
@@ -33,9 +31,7 @@ function PaymentViaLicenseDialog({
         />
       </DialogSuspense>
     </Dialog>
-  )
+  );
 }
 
-export default compose(
-  withDialogRedux(),
-)(PaymentViaLicenseDialog);
+export default compose(withDialogRedux())(PaymentViaLicenseDialog);