Add signature section

src/modules/dashboard/components/VerificationPage/FormButtons/FormButtons.tsx

@@ -1,4 +1,5 @@
 import { FormikTouched, setNestedObjectValues, useFormikContext } from 'formik';
+import { isEmpty } from 'lodash';
 import React, { ReactNode, useCallback } from 'react';
 import { defineMessages, MessageDescriptor } from 'react-intl';
 
@@ -35,8 +36,13 @@ const FormButtons = ({
   prevText,
   errorMessage,
 }: Props) => {
-  const { values, handleSubmit, validateForm, setTouched } =
-    useFormikContext<ValuesType>() || {};
+  const {
+    values,
+    handleSubmit,
+    validateForm,
+    setTouched,
+    errors: formikErrors,
+  } = useFormikContext<ValuesType>() || {};
 
   const handleNextClick = useCallback(async () => {
     const errors = await validateForm(values);
@@ -62,6 +68,7 @@ const FormButtons = ({
           onClick={handleNextClick}
           text={nextText || MSG.continue}
           className={styles.nextButton}
+          disabled={!isEmpty(formikErrors)}
         />
       </div>
     </div>

src/modules/dashboard/components/VerificationPage/References/References.tsx

@@ -75,8 +75,9 @@ const References = ({ setActiveStep }: Props) => {
         ...oldFormValues,
         references: values,
       }));
+      setActiveStep(Step.Signature);
     },
-    [setFormValues],
+    [setActiveStep, setFormValues],
   );
 
   const handlePrevClick = useCallback(

src/modules/dashboard/components/VerificationPage/Signature/Signature.css

@@ -0,0 +1,65 @@
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+.formWrapper {
+  width: 460px;
+}
+
+.header {
+  margin-bottom: 16px;
+  font-size: var(--size-medium-l);
+  font-weight: var(--weight-bold);
+  line-height: 24px;
+  color: var(--dark);
+  letter-spacing: var(--spacing-medium);
+}
+
+.description {
+  margin-bottom: 28px;
+  font-size: var(--size-normal);
+  font-weight: var(--weight-normal);
+  line-height: 18px;
+  color: var(--dark);
+  letter-spacing: 0.1px;
+}
+
+.inputWrapper {
+  margin-bottom: 16px;
+  padding-top: 12px;
+}
+
+.inputWrapper input {
+  height: 44px;
+  font-family: var(--family-italic);
+  font-size: var(--size-large);
+  line-height: 18px;
+  color: black;
+  letter-spacing: var(--spacing-medium);
+}
+
+.inputWrapper button {
+  margin-bottom: 6px;
+  height: auto;
+}
+
+.labelClearWrapper {
+  display: flex;
+  align-items: center;
+  padding-bottom: 2px;
+  font-size: var(--size-smallish);
+  color: var(--dark);
+  letter-spacing: var(--spacing-medium);
+}
+
+.helpWrapper {
+  margin-top: 6px;
+  font-size: var(--size-tiny);
+  font-weight: var(--weight-bold);
+  color: var(--temp-grey-blue-7);
+  letter-spacing: var(--spacing-medium);
+}

src/modules/dashboard/components/VerificationPage/Signature/Signature.css.d.ts

@@ -0,0 +1,7 @@
+export const wrapper: string;
+export const formWrapper: string;
+export const header: string;
+export const description: string;
+export const inputWrapper: string;
+export const labelClearWrapper: string;
+export const helpWrapper: string;

src/modules/dashboard/components/VerificationPage/Signature/Signature.tsx

@@ -0,0 +1,141 @@
+import { Formik } from 'formik';
+import React, { useCallback, useState } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+import Button from '~core/Button';
+import { Input, InputLabel, InputStatus } from '~core/Fields';
+import { Step } from '~pages/VerificationPage/types';
+import { useVerificationContext } from '~pages/VerificationPage/VerificationDataContext';
+
+import ErrorsCounter from '../ErrorsCounter';
+import FormButtons from '../FormButtons';
+
+import { validationSchema } from './constants';
+import styles from './Signature.css';
+
+const MSG = defineMessages({
+  title: {
+    id: 'dashboard.VerificationPage.Signature.title',
+    defaultMessage: 'Sign and send',
+  },
+  description: {
+    id: 'dashboard.VerificationPage.Signature.description',
+    defaultMessage: `One last thing. You need to sign the document. `,
+  },
+  label: {
+    id: 'dashboard.VerificationPage.Signature.label',
+    defaultMessage: 'Type in your name and surname',
+  },
+  additionalText: {
+    id: 'dashboard.VerificationPage.Signature.additionalText',
+    defaultMessage: 'E.g. John Wood',
+  },
+  buttonText: {
+    id: 'dashboard.VerificationPage.Signature.buttonText',
+    defaultMessage: 'Submit',
+  },
+  clear: {
+    id: 'dashboard.VerificationPage.Signature.clear',
+    defaultMessage: 'Clear',
+  },
+});
+
+const displayName = 'dashboard.VerificationPage.Signature';
+
+interface Props {
+  setActiveStep: React.Dispatch<React.SetStateAction<Step>>;
+}
+
+const Signature = ({ setActiveStep }: Props) => {
+  const {
+    formValues: { signature },
+    setFormValues,
+  } = useVerificationContext();
+
+  const handleSubmit = useCallback(
+    (values) => {
+      setFormValues((oldFormValues) => ({
+        ...oldFormValues,
+        signature: values,
+      }));
+    },
+    [setFormValues],
+  );
+
+  const handlePrevClick = useCallback(
+    (values) => {
+      setFormValues((oldFormValues) => ({
+        ...oldFormValues,
+        signature: values,
+      }));
+      setActiveStep(Step.References);
+    },
+    [setActiveStep, setFormValues],
+  );
+
+  const [shouldValidate, setShouldValidate] = useState(false);
+  const handleValidate = useCallback(() => {
+    if (!shouldValidate) {
+      setShouldValidate(true);
+    }
+  }, [shouldValidate]);
+
+  return (
+    <Formik
+      initialValues={signature}
+      onSubmit={handleSubmit}
+      validationSchema={validationSchema}
+      validateOnBlur={shouldValidate}
+      validateOnChange={shouldValidate}
+      validate={handleValidate}
+    >
+      {({ values, errors, setValues }) => (
+        <div className={styles.wrapper}>
+          <div className={styles.formWrapper}>
+            <div className={styles.header}>
+              <FormattedMessage {...MSG.title} />
+            </div>
+            <div className={styles.description}>
+              <FormattedMessage {...MSG.description} />
+            </div>
+            <div className={styles.inputWrapper}>
+              <div className={styles.labelClearWrapper}>
+                <InputLabel label={MSG.label} />
+                <Button
+                  type="reset"
+                  text={MSG.clear}
+                  onClick={() => setValues({ signature: undefined })}
+                  appearance={{ theme: 'blue' }}
+                  disabled={!values.signature}
+                />
+              </div>
+              <Input
+                name="signature"
+                label={MSG.label}
+                help={MSG.additionalText}
+                elementOnly
+              />
+              {errors?.signature && !Array.isArray(errors.signature) ? (
+                <InputStatus error={errors?.signature} />
+              ) : (
+                <span className={styles.helpWrapper}>
+                  <FormattedMessage {...MSG.additionalText} />
+                </span>
+              )}
+            </div>
+            <FormButtons
+              onNextClick={() => {}}
+              onPrevClick={() => handlePrevClick(values)}
+              nextText={MSG.buttonText}
+              errorMessage={<ErrorsCounter />}
+            />
+          </div>
+        </div>
+      )}
+    </Formik>
+  );
+};
+
+Signature.displayName = displayName;
+
+export default Signature;

src/modules/dashboard/components/VerificationPage/Signature/constants.ts

@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl';
+import * as yup from 'yup';
+
+const MSG = defineMessages({
+  required: {
+    id: 'dashboard.VerificationPage.Details.required',
+    defaultMessage: 'Please provide your signature',
+  },
+});
+
+export const validationSchema = yup.object().shape({
+  signature: yup
+    .string()
+    .min(3)
+    .required(() => MSG.required),
+});

src/modules/dashboard/components/VerificationPage/Signature/index.ts

@@ -0,0 +1 @@
+export { default } from './Signature';

src/modules/dashboard/components/VerificationPage/Tabs/Tabs.tsx

@@ -23,22 +23,24 @@ export interface Props {
 const Tabs = ({ steps, activeId }: Props) => {
   return (
     <div className={styles.tabsWrapper}>
-      {steps.map((step, index) => (
-        <div
-          className={classNames(styles.stepItem, {
-            [styles.stepActive]: step.id === activeId,
-          })}
-        >
+      {steps.map((step, index) =>
+        step?.label ? (
           <div
-            className={classNames(styles.label, {
-              [styles.labelActive]: step.id === activeId,
+            className={classNames(styles.stepItem, {
+              [styles.stepActive]: step.id === activeId,
             })}
           >
-            <FormattedMessage {...MSG.step} values={{ nr: index + 1 }} />
+            <div
+              className={classNames(styles.label, {
+                [styles.labelActive]: step.id === activeId,
+              })}
+            >
+              <FormattedMessage {...MSG.step} values={{ nr: index + 1 }} />
+            </div>
+            <FormattedMessage {...step.label} />
           </div>
-          <FormattedMessage {...step.label} />
-        </div>
-      ))}
+        ) : null,
+      )}
     </div>
   );
 };