Merge branch 'evgeniy-wall-376/likhith-wall-379/verification_ux_impro…

…vement_with_example' into kyc_fe_improve_failure_messages_for_idv_wall-400
likhith-deriv · May 23, 2023 · c7d4caa · c7d4caa
2 parents 9475d27 + c242f36
commit c7d4caa
Show file tree

Hide file tree

Showing 11 changed files with 119 additions and 90 deletions.
diff --git a/packages/account/src/Components/forms/idv-form.tsx b/packages/account/src/Components/forms/idv-form.tsx
@@ -27,6 +27,7 @@ type TIDVForm = {
     selected_country: ResidenceList[0];
     hide_hint?: boolean;
     class_name?: string;
+    can_skip_document_verification: boolean;
 } & Partial<FormikHandlers> &
     FormikProps<TFormProps>;
 
@@ -40,13 +41,22 @@ const IDVForm = ({
     class_name,
     selected_country,
     hide_hint,
+    can_skip_document_verification = false,
 }: TIDVForm) => {
     const [document_list, setDocumentList] = React.useState<TDocumentList>([]);
     const [document_image, setDocumentImage] = React.useState<string | null>(null);
     const [selected_doc, setSelectedDoc] = React.useState('');
 
     const { documents_supported: document_data, has_visual_sample } = selected_country?.identity?.services?.idv ?? {};
 
+    const default_document = {
+        id: '',
+        text: '',
+        value: '',
+        example_format: '',
+        sample_image: '',
+    };
+
     React.useEffect(() => {
         if (document_data && selected_country && selected_country.value) {
             const document_types = Object.keys(document_data);
@@ -55,57 +65,49 @@ const IDVForm = ({
                 ? document_types.filter(d => d !== 'voter_id')
                 : document_types;
 
-            setDocumentList([
-                ...filtered_documents.map(key => {
-                    const { display_name, format } = document_data[key];
-                    const { new_display_name, example_format, sample_image } = getDocumentData(
-                        selected_country.value ?? '',
-                        key
-                    );
-                    const needs_additional_document = !!document_data[key].additional;
+            const new_document_list = filtered_documents.map(key => {
+                const { display_name, format } = document_data[key];
+                const { new_display_name, example_format, sample_image } = getDocumentData(
+                    selected_country.value ?? '',
+                    key
+                );
+                const needs_additional_document = !!document_data[key].additional;
 
-                    if (needs_additional_document) {
-                        return {
-                            id: key,
-                            text: new_display_name || display_name,
-                            additional: {
-                                display_name: document_data[key].additional?.display_name,
-                                format: document_data[key].additional?.format,
-                            },
-                            value: format,
-                            sample_image,
-                            example_format,
-                        };
-                    }
+                if (needs_additional_document) {
                     return {
                         id: key,
                         text: new_display_name || display_name,
+                        additional: {
+                            display_name: document_data[key].additional?.display_name,
+                            format: document_data[key].additional?.format,
+                        },
                         value: format,
                         sample_image,
                         example_format,
                     };
-                }),
-                IDV_NOT_APPLICABLE_OPTION,
-            ]);
+                }
+                return {
+                    id: key,
+                    text: new_display_name || display_name,
+                    value: format,
+                    sample_image,
+                    example_format,
+                };
+            });
+            if (can_skip_document_verification) {
+                setDocumentList([...new_document_list, IDV_NOT_APPLICABLE_OPTION]);
+            } else {
+                setDocumentList([...new_document_list]);
+            }
         }
-    }, [document_data, selected_country]);
+    }, [document_data, selected_country, can_skip_document_verification]);
 
     const resetDocumentItemSelected = () => {
-        setFieldValue(
-            'document_type',
-            {
-                id: '',
-                text: '',
-                value: '',
-                example_format: '',
-                sample_image: '',
-            },
-            true
-        );
+        setFieldValue('document_type', default_document, true);
     };
 
     const getDocument = (text: string) => {
-        return document_list.find(d => d.text === text);
+        return document_list.find(d => d.text === text) ?? default_document;
     };
 
     const onKeyUp = (e: { target: HTMLInputElement }, document_name: string) => {
@@ -118,6 +120,18 @@ const IDVForm = ({
         setFieldValue(document_name, current_input, true);
     };
 
+    const bindDocumentData = (item: TDocumentList[0]) => {
+        setFieldValue('document_type', item, true);
+        setSelectedDoc(item?.id);
+        if (item?.id === IDV_NOT_APPLICABLE_OPTION.id) {
+            setFieldValue('document_number', '', true);
+            setFieldValue('document_additional', '', true);
+        }
+        if (has_visual_sample) {
+            setDocumentImage(item.sample_image ?? '');
+        }
+    };
+
     return (
         <React.Fragment>
             <section className={classNames('idv-form', class_name)}>
@@ -165,11 +179,7 @@ const IDVForm = ({
                                                                         setSelectedDoc('');
                                                                         resetDocumentItemSelected();
                                                                     } else {
-                                                                        setFieldValue('document_type', item, true);
-                                                                        setSelectedDoc(item.id);
-                                                                        if (has_visual_sample) {
-                                                                            setDocumentImage(item.sample_image ?? '');
-                                                                        }
+                                                                        bindDocumentData(item);
                                                                     }
                                                                 }}
                                                                 required
@@ -191,19 +201,7 @@ const IDVForm = ({
                                                             onChange={e => {
                                                                 handleChange(e);
                                                                 const selected_document = getDocument(e.target.value);
-                                                                if (selected_document) {
-                                                                    setSelectedDoc(selected_document.id);
-                                                                    setFieldValue(
-                                                                        'document_type',
-                                                                        selected_document,
-                                                                        true
-                                                                    );
-                                                                    if (has_visual_sample) {
-                                                                        setDocumentImage(
-                                                                            selected_document.sample_image ?? ''
-                                                                        );
-                                                                    }
-                                                                }
+                                                                bindDocumentData(selected_document);
                                                             }}
                                                             use_text={true}
                                                             required

diff --git a/packages/account/src/Components/personal-details/personal-details.jsx b/packages/account/src/Components/personal-details/personal-details.jsx
@@ -187,6 +187,7 @@ const PersonalDetails = ({
                                                     handleBlur={handleBlur}
                                                     setFieldValue={setFieldValue}
                                                     hide_hint={true}
+                                                    can_skip_document_verification={true}
                                                 />
                                                 <FormSubHeader title={localize('Details')} />
                                             </React.Fragment>

diff --git a/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx b/packages/account/src/Components/poi/idv-document-submit/idv-document-submit.tsx
@@ -164,42 +164,44 @@ const IdvDocumentSubmit = ({
                 values,
             }) => (
                 <div className='proof-of-identity__container proof-of-identity__container--reset'>
-                    <FormSubHeader title={localize('Identity verification')} />
-                    <IDVForm
-                        errors={errors}
-                        touched={touched}
-                        values={values}
-                        handleChange={handleChange}
-                        handleBlur={handleBlur}
-                        setFieldValue={setFieldValue}
-                        hide_hint={false}
-                        selected_country={selected_country}
-                        is_from_external={is_from_external}
-                        class_name='idv-layout'
-                    />
-
-                    <FormSubHeader title={localize('Details')} />
-                    <div
-                        className={classNames({
-                            'account-form__poi-confirm-example_container': !shouldHideHelperImage(
-                                values?.document_type?.id
-                            ),
-                        })}
-                    >
-                        <PersonalDetailsForm
+                    <section className='form-body'>
+                        <FormSubHeader title={localize('Identity verification')} />
+                        <IDVForm
                             errors={errors}
                             touched={touched}
                             values={values}
                             handleChange={handleChange}
                             handleBlur={handleBlur}
                             setFieldValue={setFieldValue}
-                            setFieldTouched={setFieldTouched}
-                            is_qualified_for_idv={true}
-                            is_appstore
-                            should_hide_helper_image={shouldHideHelperImage(values?.document_type?.id)}
-                            editable_fields={changeable_fields}
+                            hide_hint={false}
+                            selected_country={selected_country}
+                            is_from_external={is_from_external}
+                            class_name='idv-layout'
                         />
-                    </div>
+
+                        <FormSubHeader title={localize('Details')} />
+                        <div
+                            className={classNames({
+                                'account-form__poi-confirm-example_container': !shouldHideHelperImage(
+                                    values?.document_type?.id
+                                ),
+                            })}
+                        >
+                            <PersonalDetailsForm
+                                errors={errors}
+                                touched={touched}
+                                values={values}
+                                handleChange={handleChange}
+                                handleBlur={handleBlur}
+                                setFieldValue={setFieldValue}
+                                setFieldTouched={setFieldTouched}
+                                is_qualified_for_idv={true}
+                                is_appstore
+                                should_hide_helper_image={shouldHideHelperImage(values?.document_type?.id)}
+                                editable_fields={changeable_fields}
+                            />
+                        </div>
+                    </section>
                     <FormFooter className='proof-of-identity__footer'>
                         {isDesktop() && (
                             <Button className='back-btn' onClick={handleBack} type='button' has_effect large secondary>

diff --git a/packages/account/src/Configs/personal-details-config.js b/packages/account/src/Configs/personal-details-config.js
@@ -237,6 +237,7 @@ const personalDetailsConfig = (
             account_status,
             residence,
             account_settings,
+            real_account_signup_target,
         },
         passthrough: ['residence_list', 'is_fully_authenticated', 'has_real_account'],
         icon: 'IcDashboardPersonalDetails',

diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss
@@ -2286,6 +2286,11 @@ $MIN_HEIGHT_FLOATING: calc(
                     padding: 1.6rem 2.4rem;
                 }
             }
+            .form-body {
+                @include desktop {
+                    z-index: 5;
+                }
+            }
         }
 
         .icon {

diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -558,6 +558,12 @@
             flex-direction: column;
             justify-content: center;
         }
+
+        @include desktop() {
+            .onfido-container {
+                padding-top: 1.6rem;
+            }
+        }
     }
 
     &__form {
@@ -577,7 +583,7 @@
         }
     }
     @include mobile {
-        overflow: hidden;
+        overflow: initial;
         grid-template-rows: 7rem minmax(10rem, 1fr);
         &__heading {
             padding: unset;

diff --git a/packages/core/src/sass/app/_common/components/onfido-container.scss b/packages/core/src/sass/app/_common/components/onfido-container.scss
@@ -11,12 +11,16 @@
         margin: auto;
     }
 
+    .account-form__poi-confirm-example_container {
+        margin-bottom: 0;
+    }
+
     .onfido-sdk-ui-Modal-inner {
         border-radius: 0.8rem;
     }
 
     @include mobile() {
-        gap: 0.4rem;
+        padding: 1.6rem;
 
         .onfido-sdk-ui-PageTitle-titleSpan {
             font-size: 2rem;
@@ -84,21 +88,27 @@
             width: 100%;
         }
         &_container {
+            border: 1px solid var(--general-active);
+            border-radius: 0.8rem;
+
             @include desktop() {
-                border: 1px solid var(--general-active);
-                border-radius: 0.8rem;
                 padding: 1.6rem;
             }
 
             @include mobile() {
-                margin-bottom: 4rem;
+                margin-bottom: 7rem;
+                padding: 1.6rem 1.6rem 0;
             }
 
             .account__scrollbars_container {
                 padding: 0;
 
                 &--grid-layout {
                     height: auto !important;
+
+                    @include mobile() {
+                        padding: 0 1.6rem;
+                    }
                 }
 
                 .account-form__section {
@@ -120,6 +130,10 @@
             padding: 1.6rem;
             max-width: 67rem;
 
+            @include mobile() {
+                padding-inline: 0;
+            }
+
             &--exit {
                 transform: scale(1, 0);
                 opacity: 0;

diff --git a/packages/core/src/sass/real-account-signup.scss b/packages/core/src/sass/real-account-signup.scss
@@ -73,7 +73,6 @@
 
                 @include mobile {
                     width: 100%;
-                    padding: 0 1.2rem;
                     overflow-y: unset;
                     justify-content: unset;
                 }

diff --git a/packages/reports/src/Containers/open-positions.tsx b/packages/reports/src/Containers/open-positions.tsx
@@ -682,6 +682,7 @@ export default withRouter(
         currency: client.currency,
         error: portfolio.error,
         getPositionById: portfolio.getPositionById,
+        is_accumulator: portfolio.is_accumulator,
         is_loading: portfolio.is_loading,
         is_multiplier: portfolio.is_multiplier,
         NotificationMessages: ui.notification_messages_ui,

diff --git a/packages/stores/src/mockStore.ts b/packages/stores/src/mockStore.ts
@@ -317,6 +317,7 @@ const mock = (): TStores & { is_mock: boolean } => {
             },
             getPositionById: jest.fn(),
             is_loading: false,
+            is_accumulator: false,
             is_multiplier: false,
             onClickCancel: jest.fn(),
             onClickSell: jest.fn(),

diff --git a/packages/stores/types.ts b/packages/stores/types.ts
@@ -284,6 +284,7 @@ type TPortfolioStore = {
     getPositionById: (id: number) => ProposalOpenContract;
     is_loading: boolean;
     is_multiplier: boolean;
+    is_accumulator: boolean;
     onClickCancel: (contract_id: number) => void;
     onClickSell: (contract_id: number) => void;
     onMount: () => void;