chrone: sperate client and server to different repos.

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);