likhith/feat: 🎨 remove the sample images (binary-com#10465)

* feat: 🎨 remove the sample images * feat: 🎨 remove the sample images * chore: Trigger Build * fix: remove unused CSS * chore: Trigger Build --------- Co-authored-by: Shahzaib <shahzaib@deriv.com>
henry-deriv · Oct 11, 2023 · c70bffc · c70bffc
1 parent 246dabc
commit c70bffc
Show file tree

Hide file tree

Showing 21 changed files with 7 additions and 94 deletions.
diff --git a/packages/account/src/Components/forms/idv-form.tsx b/packages/account/src/Components/forms/idv-form.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Field, FieldProps } from 'formik';
 import { localize } from '@deriv/translations';
 import { formatInput, getIDVNotApplicableOption } from '@deriv/shared';
-import { Autocomplete, DesktopWrapper, Input, MobileWrapper, SelectNative, Text } from '@deriv/components';
+import { Autocomplete, DesktopWrapper, Input, MobileWrapper, SelectNative } from '@deriv/components';
 import {
     getDocumentData,
     preventEmptyClipboardPaste,
@@ -25,17 +25,15 @@ const IDVForm = ({
     can_skip_document_verification = false,
 }: TIDVForm) => {
     const [document_list, setDocumentList] = React.useState<TDocument[]>([]);
-    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 { documents_supported: document_data } = selected_country?.identity?.services?.idv ?? {};
 
     const default_document = {
         id: '',
         text: '',
         value: '',
         example_format: '',
-        sample_image: '',
     };
 
     const IDV_NOT_APPLICABLE_OPTION = React.useMemo(() => getIDVNotApplicableOption(), []);
@@ -50,8 +48,10 @@ const IDVForm = ({
 
             const new_document_list = filtered_documents.map(key => {
                 const { display_name, format } = document_data[key];
-                const { new_display_name, example_format, sample_image, additional_document_example_format } =
-                    getDocumentData(selected_country.value ?? '', key);
+                const { new_display_name, example_format, additional_document_example_format } = getDocumentData(
+                    selected_country.value ?? '',
+                    key
+                );
                 const needs_additional_document = !!document_data[key].additional;
 
                 if (needs_additional_document) {
@@ -64,15 +64,13 @@ const IDVForm = ({
                             example_format: additional_document_example_format,
                         },
                         value: format,
-                        sample_image,
                         example_format,
                     };
                 }
                 return {
                     id: key,
                     text: display_name ?? new_display_name, // Display document name from API if available, else use the one from the helper function
                     value: format,
-                    sample_image,
                     example_format,
                 };
             });
@@ -109,9 +107,6 @@ const IDVForm = ({
             setFieldValue('document_number', '', true);
             setFieldValue('document_additional', '', true);
         }
-        if (has_visual_sample) {
-            setDocumentImage(item.sample_image ?? '');
-        }
     };
 
     return (
@@ -124,11 +119,7 @@ const IDVForm = ({
                                 'proof-of-identity__container--idv': hide_hint,
                             })}
                         >
-                            <div
-                                className={classNames('proof-of-identity__inner-container', {
-                                    'proof-of-identity__inner-container--incl-image': document_image,
-                                })}
-                            >
+                            <div className={classNames('proof-of-identity__inner-container')}>
                                 <div className='proof-of-identity__fieldset-container'>
                                     <fieldset className={classNames({ 'proof-of-identity__fieldset': !hide_hint })}>
                                         <Field name='document_type'>
@@ -263,20 +254,6 @@ const IDVForm = ({
                                         </fieldset>
                                     )}
                                 </div>
-                                {document_image && (
-                                    <div className='proof-of-identity__sample-container'>
-                                        <Text size='xxs' weight='bold'>
-                                            {localize('Sample:')}
-                                        </Text>
-                                        <div className='proof-of-identity__image-container'>
-                                            <img
-                                                className='proof-of-identity__image'
-                                                src={document_image}
-                                                alt='document sample image'
-                                            />
-                                        </div>
-                                    </div>
-                                )}
                             </div>
                         </div>
                     </div>

diff --git a/...ges/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx b/...ges/account/src/Components/poi/idv-document-submit/__tests__/idv-document-submit.spec.tsx
@@ -20,12 +20,10 @@ jest.mock('Helpers/utils', () => ({
                 document_1: {
                     new_display_name: '',
                     example_format: '5436454364243',
-                    sample_image: '',
                 },
                 document_2: {
                     new_display_name: '',
                     example_format: 'A-52431',
-                    sample_image: '',
                 },
             },
         };

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
@@ -56,7 +56,6 @@ const IdvDocumentSubmit = observer(({ handleBack, handleViewComplete, selected_c
             text: '',
             value: '',
             example_format: '',
-            sample_image: '',
         },
         document_number: '',
         ...form_initial_values,

diff --git a/...c/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx b/...c/Components/poi/poi-form-on-signup/idv-doc-submit-on-signup/idv-doc-submit-on-signup.tsx
@@ -77,7 +77,6 @@ export const IdvDocSubmitOnSignup = ({
             text: '',
             value: '',
             example_format: '',
-            sample_image: '',
         },
         document_number: '',
         ...form_initial_values,

diff --git a/packages/account/src/Configs/personal-details-config.ts b/packages/account/src/Configs/personal-details-config.ts
@@ -176,7 +176,6 @@ export const personal_details_config = ({
                 text: '',
                 value: '',
                 example_format: '',
-                sample_image: '',
             },
             supported_in: ['svg'],
             rules: [],

diff --git a/packages/account/src/Constants/idv-document-config.ts b/packages/account/src/Constants/idv-document-config.ts
@@ -1,128 +1,104 @@
-import { getUrlBase } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 
-const getImageLocation = (image_name: string) => getUrlBase(`/public/images/common/${image_name}`);
-
 // Note: Ensure that the object keys matches BE API's keys. This is simply a mapping for FE templates
 
 const getIDVDocumentConfig = () => ({
     ke: {
         alien_card: {
             new_display_name: '',
             example_format: '123456',
-            sample_image: getImageLocation('ke_alien_card.png'),
         },
         national_id: {
             new_display_name: '',
             example_format: '12345678',
-            sample_image: getImageLocation('ke_national_identity_card.png'),
         },
         passport: {
             new_display_name: '',
             example_format: 'A12345678',
-            sample_image: getImageLocation('ke_passport.png'),
         },
     },
     za: {
         national_id: {
             new_display_name: localize('National ID'),
             example_format: '1234567890123',
-            sample_image: getImageLocation('za_national_identity_card.png'),
         },
         national_id_no_photo: {
             new_display_name: localize('National ID (No Photo)'),
             example_format: '1234567890123',
-            sample_image: '',
         },
     },
     ng: {
         bvn: {
             new_display_name: localize('Bank Verification Number'),
             example_format: '12345678901',
-            sample_image: '',
         },
         cac: {
             new_display_name: localize('Corporate Affairs Commission'),
             example_format: '12345678',
-            sample_image: '',
         },
         drivers_license: {
             new_display_name: '',
             example_format: 'ABC123456789',
-            sample_image: getImageLocation('ng_drivers_license.png'),
         },
         nin: {
             new_display_name: localize('National Identity Number'),
             example_format: '12345678901',
-            sample_image: '',
         },
         nin_slip: {
             new_display_name: localize('National Identity Number Slip'),
             example_format: '12345678901',
-            sample_image: getImageLocation('ng_nin_slip.png'),
         },
         tin: {
             new_display_name: localize('Taxpayer identification number'),
             example_format: '12345678-1234',
-            sample_image: '',
         },
         voter_id: {
             new_display_name: localize('Voter ID'),
             example_format: '1234567890123456789',
-            sample_image: getImageLocation('ng_voter_id.png'),
         },
     },
     gh: {
         drivers_license: {
             new_display_name: '',
             example_format: 'B1234567',
-            sample_image: '',
         },
         national_id: {
             new_display_name: localize('National ID'),
             example_format: 'GHA-123456789-1',
-            sample_image: '',
         },
         passport: {
             new_display_name: localize('Passport'),
             example_format: 'G1234567',
-            sample_image: '',
         },
         ssnit: {
             new_display_name: localize('Social Security and National Insurance Trust'),
             example_format: 'C123456789012',
-            sample_image: '',
         },
         voter_id: {
             new_display_name: localize('Voter ID'),
             example_format: '01234567890',
-            sample_image: '',
         },
     },
     br: {
         cpf: {
             new_display_name: localize('CPF'),
             example_format: '123.456.789-12',
-            sample_image: '',
         },
     },
     ug: {
         national_id: {
             new_display_name: localize('National ID'),
             example_format: 'CM12345678PE1D',
-            sample_image: getImageLocation('ug_national_identity_card.png'),
         },
         national_id_no_photo: {
             new_display_name: localize('National ID (No Photo)'),
             example_format: 'CM12345678PE1D',
-            sample_image: '',
         },
     },
     zw: {
         national_id: {
             new_display_name: localize('National ID'),
             example_format: '081234567F53',
-            sample_image: getImageLocation('zw_national_identity_card.png'),
         },
     },
     cl: {

diff --git a/packages/account/src/Helpers/__tests__/utils.spec.tsx b/packages/account/src/Helpers/__tests__/utils.spec.tsx
@@ -119,7 +119,6 @@ describe('getDocumentData', () => {
         expect(getDocumentData('zw', 'national_id')).toEqual({
             new_display_name: 'National ID',
             example_format: '081234567F53',
-            sample_image: '/public/images/common/zw_national_identity_card.png',
         });
     });
 });

diff --git a/packages/account/src/Helpers/utils.tsx b/packages/account/src/Helpers/utils.tsx
@@ -59,7 +59,6 @@ export const getDocumentData = (country_code: string, document_type: string) =>
     const DEFAULT_CONFIG = {
         new_display_name: '',
         example_format: '',
-        sample_image: '',
     };
     const IDV_DOCUMENT_DATA: any = getIDVDocuments(country_code);
     return IDV_DOCUMENT_DATA[document_type] ?? DEFAULT_CONFIG;

diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss
@@ -2224,27 +2224,6 @@ $MIN_HEIGHT_FLOATING: calc(
         }
     }
 
-    &__sample-container {
-        margin-left: 1.6rem;
-
-        @include mobile {
-            margin-left: unset;
-            width: 94%;
-        }
-    }
-
-    &__sample-container-external {
-        margin-top: 2.8rem;
-    }
-
-    &__image-container {
-        width: fit-content;
-        height: fit-content;
-        padding: 8px;
-        border-radius: 4px;
-        background-color: $color-grey-2;
-    }
-
     &__image {
         max-width: 24.5rem;
         border-radius: 4px;

diff --git a/packages/account/src/Types/common.type.ts b/packages/account/src/Types/common.type.ts
@@ -154,7 +154,6 @@ export type TDocument = {
     id: string;
     text: string;
     value?: string;
-    sample_image?: string;
     example_format?: string;
     additional?: {
         display_name?: string;

diff --git a/packages/core/src/public/images/common/static_images/ke_alien_card.png b/packages/core/src/public/images/common/static_images/ke_alien_card.png
diff --git a/packages/core/src/public/images/common/static_images/ke_national_identity_card.png b/packages/core/src/public/images/common/static_images/ke_national_identity_card.png
diff --git a/packages/core/src/public/images/common/static_images/ke_passport.png b/packages/core/src/public/images/common/static_images/ke_passport.png
diff --git a/packages/core/src/public/images/common/static_images/ng_drivers_license.png b/packages/core/src/public/images/common/static_images/ng_drivers_license.png
diff --git a/packages/core/src/public/images/common/static_images/ng_nin_slip.png b/packages/core/src/public/images/common/static_images/ng_nin_slip.png
diff --git a/packages/core/src/public/images/common/static_images/ng_voter_id.png b/packages/core/src/public/images/common/static_images/ng_voter_id.png
diff --git a/packages/core/src/public/images/common/static_images/ug_national_identity_card.png b/packages/core/src/public/images/common/static_images/ug_national_identity_card.png
diff --git a/packages/core/src/public/images/common/static_images/za_national_identity_card.png b/packages/core/src/public/images/common/static_images/za_national_identity_card.png
diff --git a/packages/core/src/public/images/common/static_images/zw_national_identity_card.png b/packages/core/src/public/images/common/static_images/zw_national_identity_card.png
diff --git a/packages/core/src/sass/app/_common/components/onfido-container.scss b/packages/core/src/sass/app/_common/components/onfido-container.scss
@@ -263,16 +263,6 @@
             }
         }
     }
-    .proof-of-identity__inner-container {
-        @include desktop {
-            &--incl-image {
-                display: grid;
-                align-items: center;
-                column-gap: 1.5rem;
-                grid-template-columns: auto 0.5fr;
-            }
-        }
-    }
 
     .additional-field {
         margin-top: 1.6rem;

diff --git a/packages/shared/src/utils/config/adapters.ts b/packages/shared/src/utils/config/adapters.ts
@@ -4,7 +4,6 @@ type TDocument = {
     id: string;
     text: string;
     value?: string;
-    sample_image?: string;
     example_format?: string;
     additional?: {
         display_name: string;