Merge 6f6db5c into 3ab799e

Author: thisyahlen-deriv

packages/tradershub/src/flows/RealAccountSIgnup/SignupWizard/Actions/index.tsx

@@ -6,22 +6,22 @@ import { Button } from '@deriv-com/ui';
 import { useSignupWizardContext } from '../../../../providers/SignupWizardProvider';
 
 type TActions = {
-    canGoNext?: boolean;
+    submitDisabled?: boolean;
 };
 
 /**
  * @name Actions
  * @description The Actions component is used to navigate between steps in the SignupWizard component.
  * Intended to be used as a child component of the Formik component.
  * @param {Object} props - React props object
- * @param {boolean} [props.canGoNext] - A boolean that determines whether the Next button is disabled
+ * @param {boolean} [props.submitDisabled] - A boolean that determines whether the Next button is disabled
  * @example
  * return (
- *     <Actions canGoNext />
+ *     <Actions submitDisabled />
  * );
  */
 
-const Actions = ({ canGoNext = true }: TActions) => {
+const Actions = ({ submitDisabled = false }: TActions) => {
     const {
         helpers: { canGoToNextStep, canGoToPrevStep, goToPrevStep },
     } = useSignupWizardContext();
@@ -44,7 +44,7 @@ const Actions = ({ canGoNext = true }: TActions) => {
                 )}
                 <Button
                     className='bg-solid-coral-700'
-                    disabled={!canGoNext}
+                    disabled={submitDisabled}
                     isFullWidth={isMobile}
                     onClick={() => handleSubmit()}
                     size={isMobile ? 'lg' : 'md'}

packages/tradershub/src/screens/CurrencySelector/CurrencySelector.tsx

@@ -33,7 +33,7 @@ const CurrencySelector = () => {
                             <hr className='opacity-100 my-1200' />
                             <Currencies type={CURRENCY_TYPES.CRYPTO} />
                         </div>
-                        <Actions canGoNext={!!values.currency} />
+                        <Actions submitDisabled={!values.currency} />
                     </Form>
                 )}
             </Formik>

packages/tradershub/src/screens/PersonalDetails/PersonalDetails.tsx

@@ -23,6 +23,7 @@ const PersonalDetails = () => {
 
     const initialValues = {
         accountOpeningReason: state.accountOpeningReason ?? '',
+        confirmation: false,
         dateOfBirth: state.dateOfBirth ?? '',
         firstName: state.firstName ?? '',
         lastName: state.lastName ?? '',
@@ -31,7 +32,6 @@ const PersonalDetails = () => {
         taxIdentificationNumber: state.taxIdentificationNumber ?? '',
         taxResidence: state.taxResidence ?? '',
     };
-
     return (
         <WizardScreenWrapper heading='Complete your personal details'>
             <Formik

packages/tradershub/src/screens/PersonalDetails/Sections/AdditionalInformation.tsx

@@ -61,6 +61,7 @@ const AdditionalInformation = () => {
                         text: residence.text,
                         value: residence.value ?? '',
                     }))}
+                    listHeight='sm'
                     name='placeOfBirth'
                     onSelect={selectedItem => {
                         setFieldValue('placeOfBirth', selectedItem);
@@ -76,6 +77,7 @@ const AdditionalInformation = () => {
                             text: residence.text,
                             value: residence.value ?? '',
                         }))}
+                        listHeight='sm'
                         name='taxResidence'
                         onSelect={selectedItem => {
                             setFieldValue('taxResidence', selectedItem);
@@ -102,6 +104,7 @@ const AdditionalInformation = () => {
                     errorMessage={touched.accountOpeningReason && errors.accountOpeningReason}
                     label='Account opening reason*'
                     list={AccountOpeningReasonList}
+                    listHeight='sm'
                     name='accountOpeningReason'
                     onSelect={selectedItem => {
                         setFieldValue('accountOpeningReason', selectedItem);

packages/tradershub/src/screens/PersonalDetails/Sections/Details.tsx

@@ -1,7 +1,8 @@
 import React, { Fragment, lazy, Suspense } from 'react';
 import { useFormikContext } from 'formik';
 import { useBreakpoint } from '@deriv/quill-design';
-import { Checkbox, InlineMessage, Input, Loader, Text } from '@deriv-com/ui';
+import { InlineMessage, Input, Loader, Text } from '@deriv-com/ui';
+import DetailsConfirmation from './DetailsConfirmation';
 
 const ExampleImage = lazy(() => import('@/assets/svgs/personal-details-example.svg'));
 
@@ -86,7 +87,7 @@ const Details = () => {
                     </div>
                 </div>
                 <div className='mt-800'>
-                    <Checkbox label='I confirm that the name and date of birth above match my chosen identity document.' />
+                    <DetailsConfirmation />
                 </div>
             </div>
         </Fragment>

packages/tradershub/src/screens/PersonalDetails/Sections/DetailsConfirmation.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Field, FieldProps, useFormikContext } from 'formik';
+import { Checkbox } from '@deriv-com/ui';
+
+const DetailsConfirmation = () => {
+    const { errors, values } = useFormikContext<{
+        confirmation: boolean;
+        dateOfBirth: string;
+        firstName: string;
+        lastName: string;
+    }>();
+
+    const isDisabled = Boolean(
+        !values.firstName ||
+            !values.lastName ||
+            !values.dateOfBirth ||
+            errors.firstName ||
+            errors.lastName ||
+            errors.dateOfBirth
+    );
+
+    return (
+        <Field name='confirmation' type='checkbox'>
+            {({ field, meta }: FieldProps) => (
+                <Checkbox
+                    disabled={isDisabled}
+                    error={Boolean(meta.error && meta.touched)}
+                    label='I confirm that the name and date of birth above match my chosen identity document.'
+                    {...field}
+                />
+            )}
+        </Field>
+    );
+};
+
+export default DetailsConfirmation;

packages/tradershub/src/screens/TermsOfUse/TermsOfUse.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Form, Formik, FormikValues } from 'formik';
+import { Form, Formik } from 'formik';
+import { termsOfUse } from '@/utils';
 import { Text } from '@deriv-com/ui';
 import Actions from '../../flows/RealAccountSIgnup/SignupWizard/Actions';
 import WizardScreenWrapper from '../../flows/RealAccountSIgnup/SignupWizard/WizardScreenWrapper';
@@ -17,22 +18,27 @@ const Divider = () => <hr className=' bg-system-light-primary-background' />;
  * @returns {React.ReactNode}
  */
 const TermsOfUse = () => {
-    const { dispatch } = useSignupWizardContext();
+    const { dispatch, helpers, setIsWizardOpen } = useSignupWizardContext();
 
     // Temporary function to handle form submission till we have the validations in place
-    const handleSubmit = (values: FormikValues) => {
-        dispatch({ payload: { firstName: values.firstName }, type: ACTION_TYPES.SET_PERSONAL_DETAILS });
+    const handleSubmit = () => {
+        dispatch({ type: ACTION_TYPES.RESET });
+        setIsWizardOpen(false);
+        helpers.setStep(1);
     };
+
     return (
         <WizardScreenWrapper heading='Terms of Use'>
             <Formik
-                // Temporary initial values
                 initialValues={{
-                    firstName: '',
+                    fatcaDeclaration: '',
+                    pepConfirmation: false,
+                    termsAndCondition: false,
                 }}
                 onSubmit={handleSubmit}
+                validationSchema={termsOfUse}
             >
-                {() => (
+                {({ isValid, values }) => (
                     <Form className='flex flex-col flex-grow w-full overflow-y-auto'>
                         <div className='flex-1 overflow-y-auto p-1200'>
                             <div className='flex flex-col gap-800'>
@@ -61,7 +67,14 @@ const TermsOfUse = () => {
                                 <PEPs />
                             </div>
                         </div>
-                        <Actions />
+                        <Actions
+                            submitDisabled={
+                                !values.pepConfirmation ||
+                                !values.termsAndCondition ||
+                                !values.fatcaDeclaration ||
+                                !isValid
+                            }
+                        />
                     </Form>
                 )}
             </Formik>

packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/FatcaDeclaration.tsx

@@ -13,7 +13,7 @@ const fatcaDeclaration = [
 ];
 
 const FatcaDeclaration = () => {
-    const { setFieldValue, values } = useFormikContext<{
+    const { errors, setFieldValue, touched, values } = useFormikContext<{
         fatcaDeclaration: string;
     }>();
     return (
@@ -35,6 +35,7 @@ const FatcaDeclaration = () => {
             <div>
                 <Dropdown
                     dropdownIcon={<LabelPairedChevronDownMdRegularIcon />}
+                    errorMessage={touched.fatcaDeclaration && errors.fatcaDeclaration}
                     label='Please select*'
                     list={[
                         { text: 'Yes', value: 'yes' },

packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/PEPConfirmation.tsx

@@ -0,0 +1,42 @@
+import React, { Fragment } from 'react';
+import { Field, FieldProps } from 'formik';
+import { Checkbox, Text } from '@deriv-com/ui';
+
+const PEPConfirmation = () => (
+    <Fragment>
+        <Field name='pepConfirmation' type='checkbox'>
+            {({ field, meta }: FieldProps) => (
+                <Checkbox
+                    label='I am not a PEP and never have been a PEP.'
+                    {...field}
+                    error={Boolean(meta.touched && meta.error)}
+                    id='pepConfirmation'
+                />
+            )}
+        </Field>
+        <Field name='termsAndCondition' type='checkbox'>
+            {({ field, meta }: FieldProps) => (
+                <Checkbox
+                    label={
+                        <Text color={meta.error && meta.touched ? 'error' : 'general'} size='sm'>
+                            I agree to the{' '}
+                            <a
+                                className='font-bold text-brand-coral hover:underline'
+                                href='/terms-and-conditions'
+                                rel='noopener noreferrer'
+                                target='_blank'
+                            >
+                                terms and conditions.
+                            </a>
+                        </Text>
+                    }
+                    {...field}
+                    error={Boolean(meta.touched && meta.error)}
+                    id='termsAndCondition'
+                />
+            )}
+        </Field>
+    </Fragment>
+);
+
+export default PEPConfirmation;

packages/tradershub/src/screens/TermsOfUse/TermsOfUseSections/PEPs.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
-import { getStaticUrl } from '@/helpers';
-import { Checkbox, Text } from '@deriv-com/ui';
+import { Text } from '@deriv-com/ui';
+import PEPConfirmation from './PEPConfirmation';
 
 const PEPs = () => (
     <Fragment>
@@ -11,22 +11,7 @@ const PEPs = () => (
             A politically exposed person (PEP) is someone appointed with a prominent public position. Close associates
             and family members of a PEP are also considered to be PEPs.
         </Text>
-        <Checkbox label='I am not a PEP and never have been a PEP.' />
-        <Checkbox
-            label={
-                <Text size='sm'>
-                    I agree to the{' '}
-                    <a
-                        className='font-bold text-brand-coral hover:underline'
-                        href={getStaticUrl('/terms-and-conditions')}
-                        rel='noopener noreferrer'
-                        target='_blank'
-                    >
-                        terms and conditions.
-                    </a>
-                </Text>
-            }
-        />
+        <PEPConfirmation />
     </Fragment>
 );