chore: fix remaining validations for idv page (binary-com#11651)

amina-deriv · Nov 22, 2023 · 9e82f3c · 9e82f3c
1 parent bc09647
commit 9e82f3c
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 20 deletions.
diff --git a/packages/wallets/src/components/FlowField/FlowTextField.tsx b/packages/wallets/src/components/FlowField/FlowTextField.tsx
@@ -17,7 +17,7 @@ export interface TFlowFieldProps extends WalletTextFieldProps {
  */
 const FlowTextField = forwardRef(
     (
-        { defaultValue, errorMessage, isInvalid, name, validationSchema, ...rest }: TFlowFieldProps,
+        { defaultValue, disabled, errorMessage, isInvalid, name, validationSchema, ...rest }: TFlowFieldProps,
         ref: Ref<HTMLInputElement>
     ) => {
         const [hasTouched, setHasTouched] = useState(false);
@@ -47,6 +47,7 @@ const FlowTextField = forwardRef(
                         <WalletTextField
                             {...rest}
                             defaultValue={defaultValue}
+                            disabled={disabled}
                             errorMessage={form.errors[name] || errorMessage}
                             isInvalid={(hasTouched && isInvalid) || (hasTouched && Boolean(form.errors[name]))}
                             name={field.name}

diff --git a/packages/wallets/src/features/accounts/screens/IDVDocumentUpload/IDVDocumentUpload.tsx b/packages/wallets/src/features/accounts/screens/IDVDocumentUpload/IDVDocumentUpload.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { usePOI } from '@deriv/api';
 import { FlowTextField, useFlow, WalletDropdown, WalletText } from '../../../../components';
 import { InlineMessage } from '../../../../components/Base';
@@ -16,6 +16,13 @@ const statusMessage: Partial<Record<TErrorMessageProps, string>> = {
     rejected: 'We were unable to verify the identity document with the details provided.',
 };
 
+// Temporary list of document types till we get the API
+const documentTypeList = [
+    { text: 'Drivers License', value: 'driverLicense' },
+    { text: 'Passport', value: 'passport' },
+    { text: 'Social Security and National Insurance Trust (SSNIT)', value: 'ssnit' },
+];
+
 const ErrorMessage: React.FC<{ status: TErrorMessageProps }> = ({ status }) => {
     const { isMobile } = useDevice();
 
@@ -32,12 +39,17 @@ const ErrorMessage: React.FC<{ status: TErrorMessageProps }> = ({ status }) => {
 
 const IDVDocumentUpload = () => {
     const { data: poiStatus } = usePOI();
-    const { setFormValues } = useFlow();
+    const { formValues, setFormValues } = useFlow();
 
-    const [selectedDocument, setSelectedDocument] = useState('documentNumber');
+    const textToValueMapper = documentTypeList.reduce((acc, curr) => {
+        acc[curr.text] = curr.value;
+        return acc;
+    }, {} as Record<string, string>);
 
     const validationSchema = useMemo(() => {
-        switch (selectedDocument) {
+        const documentType = textToValueMapper[formValues?.documentType];
+
+        switch (documentType) {
             case 'driverLicense':
                 return drivingLicenseValidator;
             case 'passport':
@@ -47,7 +59,7 @@ const IDVDocumentUpload = () => {
             default:
                 return requiredValidator;
         }
-    }, [selectedDocument]);
+    }, [formValues?.documentType, textToValueMapper]);
 
     const status = poiStatus?.current.status;
 
@@ -61,20 +73,22 @@ const IDVDocumentUpload = () => {
                     <WalletText weight='bold'>Identity verification</WalletText>
                 </div>
                 <WalletDropdown
+                    errorMessage={'Document type is required'}
+                    isRequired
                     label='Choose the document type'
-                    list={[
-                        { text: 'Drivers License', value: 'driverLicense' },
-                        { text: 'Passport', value: 'passport' },
-                        { text: 'Social Security and National Insurance Trust (SSNIT)', value: 'ssnit' },
-                    ]}
+                    list={documentTypeList}
                     name='documentType'
+                    onChange={inputValue => {
+                        setFormValues('documentType', inputValue);
+                    }}
                     onSelect={selectedItem => {
-                        setSelectedDocument(selectedItem);
                         setFormValues('documentType', selectedItem);
                     }}
-                    value={undefined}
+                    value={formValues?.documentType}
+                    variant='comboBox'
                 />
                 <FlowTextField
+                    disabled={!formValues.documentType}
                     label='Enter your document number'
                     name='documentNumber'
                     validationSchema={validationSchema}

diff --git a/packages/wallets/src/features/accounts/screens/PersonalDetails/PersonalDetails.tsx b/packages/wallets/src/features/accounts/screens/PersonalDetails/PersonalDetails.tsx
@@ -41,6 +41,7 @@ const PersonalDetails = () => {
                     variant='comboBox'
                 />
                 <WalletDropdown
+                    disabled={getSettings?.place_of_birth !== ''}
                     label='Place of birth*'
                     list={residenceList.map(residence => ({
                         text: residence.text as ReactNode,
@@ -69,7 +70,7 @@ const PersonalDetails = () => {
                 />
                 <FlowTextField
                     errorMessage={'Please fill in tax residence'}
-                    isInvalid={!formValues.taxResidence}
+                    isInvalid={!formValues.taxResidence || !formValues.taxIdentificationNumber}
                     label='Tax identification number*'
                     name='taxIdentificationNumber'
                 />

diff --git a/packages/wallets/src/features/accounts/validations.ts b/packages/wallets/src/features/accounts/validations.ts
@@ -1,17 +1,17 @@
 import * as Yup from 'yup';
 
 export const drivingLicenseValidator = Yup.string()
-    .matches(/^[A-Z]/, 'Please enter the correct format. Example: B1234567')
+    .matches(/^[A-Z]\d{7}$/, 'Please enter the correct format. Example: B1234567')
     .max(8)
     .required('Please enter your Driver License number. Example: B1234567');
 
 export const passportValidator = Yup.string()
-    .matches(/^[A-Z]/, 'Please enter the correct format. Example: G1234567')
+    .matches(/^[A-Z]\d{7}$/, 'Please enter the correct format. Example: G1234567')
     .max(8)
     .required('Please enter your Passport number. Example: G1234567');
 
 export const ssnitValidator = Yup.string()
-    .matches(/^[A-Z]/, 'Please enter the correct format. Example: C123456789012')
+    .matches(/^[A-Z]\d{12}$/, 'Please enter the correct format. Example: C123456789012')
     .max(13)
     .required('Please enter your SSNIT number. Example: C123456789012');
 

diff --git a/packages/wallets/src/features/cfd/flows/Verification/Verification.tsx b/packages/wallets/src/features/cfd/flows/Verification/Verification.tsx
@@ -112,9 +112,7 @@ const Verification: FC<TVerificationProps> = ({ selectedJurisdiction }) => {
                 show(<MT5PasswordModal marketType={selectedMarketType} platform={platform} />);
             }
         } else if (currentScreenId === 'poaScreen') {
-            if (!getSettings?.has_submitted_personal_details) {
-                switchScreen('personalDetailsScreen');
-            }
+            switchScreen('personalDetailsScreen');
         } else if (currentScreenId === 'personalDetailsScreen') {
             show(<MT5PasswordModal marketType={selectedMarketType} platform={platform} />);
         } else {