shahzaib / KYC-805 / remove expiry date for nimc slip from manual upl…

…oad screen (binary-com#10702) * chore: remove expiry date for nimc slip from manaul upload screen * chore: update margin between fields * fix: update field name in uploader utils * chore: max character validation for input in manual upload screen * style: update manual upload screen paddings for responsive
aum-deriv · Oct 23, 2023 · af634e9 · af634e9
1 parent a753a0a
commit af634e9
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 52 deletions.
diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss b/packages/account/src/Components/poi/status/unsupported/card-details/card-details.scss
@@ -5,7 +5,7 @@
     display: flex;
 
     &--mobile {
-        padding: 2.4rem 1.6rem;
+        padding: 2.4rem;
     }
 
     h3 {
@@ -21,22 +21,25 @@
     }
     &__fields-wrap {
         display: flex;
-        margin-bottom: 0.7rem;
+        margin-bottom: 2rem;
 
         .manual-poi-details--mobile & {
             flex-wrap: wrap;
         }
-    }
-    &__field {
-        &:first-of-type {
-            margin-right: 2.4rem;
-            margin-bottom: 1.75rem;
 
-            .manual-poi-details--mobile & {
-                margin-right: 0;
+        .dc-datepicker {
+            margin-left: 2.4rem;
+        }
+
+        @include mobile {
+            .dc-input {
+                margin-bottom: 2rem;
             }
         }
     }
+    &__field {
+        margin-bottom: 1.75rem;
+    }
     &__divider {
         height: 2px;
         background-color: var(--general-section-1);
@@ -145,6 +148,7 @@
         display: flex;
         flex-wrap: wrap;
         margin-bottom: 1.7rem;
+        justify-content: center;
     }
     &__icons-item {
         flex: 0.25;
@@ -184,5 +188,10 @@
         .dc-btn:not(:last-of-type) {
             margin-right: 0.8rem;
         }
+        @include mobile {
+            height: auto;
+            padding-bottom: unset;
+            padding-top: 2rem;
+        }
     }
 }
diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/card-details.tsx b/packages/account/src/Components/poi/status/unsupported/card-details/card-details.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import DocumentsUpload from './documents-upload';
 import SelfieUpload from './selfie-upload';
-import { SELFIE_DOCUMENT } from '../constants';
+import { SELFIE_DOCUMENT, getDocumentIndex } from '../constants';
 import './card-details.scss';
 import { FormikValues } from 'formik';
 
 type TCardDetails = {
-    data: FormikValues;
+    data: ReturnType<typeof getDocumentIndex>[number]['details'];
     onComplete: (e: object) => void;
     goToCards: () => void;
     is_from_external?: boolean;

diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.tsx b/packages/account/src/Components/poi/status/unsupported/card-details/documents-upload.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Formik, Form, FormikValues } from 'formik';
-import { localize } from '@deriv/translations';
+import { Localize, localize } from '@deriv/translations';
 import { isMobile } from '@deriv/shared';
 import { Button, Icon, Text } from '@deriv/components';
 import InputField from './input-field';
 import Uploader from './uploader';
 import { setInitialValues, validateFields } from './utils';
-import { ROOT_CLASS } from '../constants';
+import { ROOT_CLASS, date_field, getDocumentIndex } from '../constants';
 
 const icons = [
     {
@@ -33,6 +33,7 @@ type TDocumentsUpload = {
     is_from_external?: boolean;
     goToCards: () => void;
     onSubmit: () => void;
+    data: ReturnType<typeof getDocumentIndex>[number]['details'];
 };
 
 type TIconsItem = {
@@ -48,18 +49,25 @@ const IconsItem = ({ data }: TIconsItem) => (
     </div>
 );
 
-const DocumentsUpload = ({
-    initial_values,
-    is_from_external,
-    data,
-    goToCards,
-    onSubmit,
-}: TDocumentsUpload & TIconsItem) => {
+const DocumentsUpload = ({ initial_values, is_from_external, data, goToCards, onSubmit }: TDocumentsUpload) => {
     const { fields, documents_title, documents } = data;
+    const is_expiry_date_required = fields.some(field => field.name === date_field.name);
 
-    const fields_title = localize('First, enter your {{label}} and the expiry date.', {
-        label: fields?.[0].label,
-    });
+    const fields_title = is_expiry_date_required ? (
+        <Localize
+            i18n_default_text='First, enter your {{label}} and the expiry date.'
+            values={{
+                label: fields?.[0].label,
+            }}
+        />
+    ) : (
+        <Localize
+            i18n_default_text='First, enter your {{label}}.'
+            values={{
+                label: fields?.[0].label,
+            }}
+        />
+    );
 
     return (
         <div
@@ -104,9 +112,11 @@ const DocumentsUpload = ({
                                     ))}
                                 </div>
                                 <div className={`${ROOT_CLASS}__icons`}>
-                                    {icons.map(item => (
-                                        <IconsItem key={item.icon} data={item} />
-                                    ))}
+                                    {icons.map(item =>
+                                        item.icon === 'IcPoiDocExpiry' && !is_expiry_date_required ? null : (
+                                            <IconsItem key={item.icon} data={item} />
+                                        )
+                                    )}
                                 </div>
                             </div>
                             <div className={`${ROOT_CLASS}__btns`}>

diff --git a/packages/account/src/Components/poi/status/unsupported/card-details/utils.ts b/packages/account/src/Components/poi/status/unsupported/card-details/utils.ts
@@ -13,7 +13,22 @@ export const checkIsEmpty = (value: unknown) => {
     return typeof value === 'string' ? !value.trim() : !value;
 };
 
-export const validateFields = (values: FormikValues, fields = [], documents = []) => {
+type TFields = {
+    name: string;
+    label: string;
+    type: string;
+    required: boolean;
+}[];
+
+type TDocument = {
+    document_type: string;
+    pageType: string;
+    name: string;
+    icon: string;
+    info: string;
+}[];
+
+export const validateFields = (values: FormikValues, fields: TFields = [], documents: TDocument = []) => {
     const errors: FormikErrors<FormikValues> = {};
 
     fields.forEach((field: { name: string; label: string; type: string; required: boolean }) => {
@@ -24,20 +39,24 @@ export const validateFields = (values: FormikValues, fields = [], documents = []
             errors[name] = localize('{{label}} is required.', {
                 label,
             });
+        } else if (type === 'text' && value.length > 30) {
+            errors[name] = localize('{{label}} must be less than 30 characters.', {
+                label,
+            });
         } else if (type === 'text' && !/^[\w\s-]{0,30}$/g.test(value)) {
             errors[name] = localize('Only letters, numbers, space, underscore, and hyphen are allowed for {{label}}.', {
                 label,
             });
         }
     });
 
-    documents.forEach((document: { name: string; label: string }) => {
-        const { name, label } = document;
+    documents.forEach((document: { name: string }) => {
+        const { name } = document;
         const value = values[name];
 
         if (checkIsEmpty(value)) {
-            errors[name] = localize('{{label}} is required.', {
-                label,
+            errors[name] = localize('{{name}} is required.', {
+                name,
             });
         } else if (value.errors?.length) {
             errors[name] = value.errors[0];

diff --git a/packages/account/src/Components/poi/status/unsupported/constants.ts b/packages/account/src/Components/poi/status/unsupported/constants.ts
@@ -27,7 +27,7 @@ export const SELFIE_DOCUMENT = {
     info: localize('Upload your selfie.'),
 };
 
-const date_field = {
+export const date_field = {
     name: 'expiry_date',
     label: localize('Expiry date'),
     type: 'date',
@@ -154,7 +154,6 @@ export const getDocumentIndex = ({ country_code }: FormikValues) => [
                               type: 'text',
                               required: true,
                           },
-                          { ...date_field, required: false },
                       ],
                       documents_title: localize('Next, upload both of the following documents.'),
                       documents: [

diff --git a/packages/account/src/Components/poi/status/unsupported/detail-component.tsx b/packages/account/src/Components/poi/status/unsupported/detail-component.tsx
@@ -8,7 +8,7 @@ import uploadFile from '../../../file-uploader-container/upload-file';
 import OnfidoUpload from '../../../../Sections/Verification/ProofOfIdentity/onfido-sdk-view-container';
 
 import CardDetails from './card-details';
-import { SELFIE_DOCUMENT } from './constants';
+import { SELFIE_DOCUMENT, getDocumentIndex } from './constants';
 import { FormikValues } from 'formik';
 
 const STATUS = {
@@ -18,24 +18,7 @@ const STATUS = {
 };
 
 type TDetailComponent = {
-    document: {
-        onfido_name?: string;
-        card: {
-            title: string;
-            description: string;
-            icon: string;
-        };
-        details: {
-            fields: {
-                name: string;
-                label: string;
-                type: string;
-                required: boolean;
-            }[];
-            documents_title: string;
-            documents: object[];
-        };
-    };
+    document: ReturnType<typeof getDocumentIndex>[number];
     onClickBack: () => void;
     root_class: string;
     country_code_key?: string;