Combined/wall 379 wall 376/onfido idv flow (binary-com#8875)

* feat: evgeniy-wall-376/likhith-wall-379/ onfido and idv verification ux improvement with example * refactor: example window styles and types improvvements * fix: circlci test error * chore: formik init * feat: ✨ incorporated IDV in Personal details for Real account sign up * feat: 🐛 resolved failing tests * chore: api updating form and styles * feat: accounts settings identity onfido impovements add * refactor: ♻️ incorporated review comments * fix: text content * feat: 🎨 migrated to TSx * feat: upgraded pack * refactor: inputs form in separate components * chore: example form ts * chore: example container ts * refactor: ts fix * chore: props passing data instead of connect * feat: 🎨 refactor stylings of shared component * feat: incorporated shared component into poi * feat: incorporated shared component into poi * fix: styles, unnecessary code remove * fix: styles for onfido * chore: fix styling * fix: lost styles restore * style: 🎨 resolved issue with onfido container for mobile * feat: 🎨 incorporated IDV new flow * chore: styles onfido * fix: 🐛 resolved tooltip issue * chore: css onfido page * feat: 🎨 incorporated testcases * fix: 🐛 resolved incorrect path * fix: 🐛 failing test case * chore: new confirm form tests * chore: onfido-sdk-view ts migration * chore: deeprequired type fix * Likhith/hide helper image on no avbl doc (#9) * style: 🎨 incorporated hiding of helper image based on avbl doc * style: 🎨 moved color to common variable * Shahzaib/kyc 42/success banner design updates (#10) * style: update positioning of success banner in KYC flow * style: update positioning of success banner in mt5 account flow * chore: renamed prop from is_mt5 to is_external * style: status message width * Likhith/kyc-34/ improve idv flow for poi (#11) * feat: 🎨 incorporated new changes * feat: ✨ incorporated idv for mt5 * refactor: review comments implementation * fix: ⚡ resolved code smells * fix: ⚡ resolved failing testcase * fix: ⚡ removed commented lines * fix: ⚡ removed minor code smells * fix: ⚡ removed minor code smells * feat: 🎨 code refactored * refactor: onfido window separate component * feat: 🎨 code refactored * feat: 🎨 code refactored (#16) * feat: 🐛 minor code smells * chore: error message banner for onfido flow * chore: renamed error message field name * Revert "Merge branch 'master' of https://github.com/binary-com/deriv-app into shahzaib/KYC-1/error-handling-for-onfido-flow" This reverts commit 44635a3, reversing changes made to f5b8fb9. * refactor: sonar cloud security issue * fix: circleci issue * fix: 🐛 removed a code smell * feat: 🎨 added new testcase * feat: 🎨 removed duplicated types * feat: minor bug fix * chore: onfido sdl view test * chore: onfido types rename, timeout comment * feat: reverted localize changes * feat: incorporated review comments * fix: resolved placeholder * feat: resolved radio button issue * fix: minor bug fix * refactor: custom math random create * refactor: deep required * refactor: revert commits with api hooks * fix: 🚑 reverted the radio button change * fix: errors object with empty fields * fix: date picker update value * fix: 🎨 formatted the code * fix: 🎨 formatted the code * chore: added cleartime out * chore: added cleartime out * refactor: ♻️ incorporated review comments * fix: removed code smells * refactor: onfido blue hint box loading fix * chore: removed unnecessary formik field * fix: 🚀 incorporated null checks * chore: resolved prop duplication in form fields * chore: updated name and types in idv form fields * chore: removed unnecessary formik field * fix: add name prop to date of birth custom component (#23) * Refactor/form fields (#24) * fix: add name prop to date of birth custom component * fix: test cases * refactor: update props from formik for date custom fields component * fix: personal-details import image error * fix: ♻️ incorporated review comments * fix: 🐛 build path issue * feat: removed unused import * style: poi form (#25) * fix: 🎨 fixed styling issue * fix: 🐛 import fix * refactor: is_external flag onfido remove * chore: fix render glitch in mt5 form (#29) * chore: fix render glitch in mt5 form * fix: dispose onfido_ref if any error occurs during onfido token fetching or sdk initialization * fix: add a check to display info message upon onfido initialization (cherry picked from commit 1cf15d2) * fix: asterisk in fields label * feat: 🐛 resolved the testcase issue * fix: empty line validation * feat: ✅ fix failing testcases * Likhith/kyc 95/document number reset (#30) * fix: 🐛 fix document number reset * fix: ✨ incorporated idv option fix * fix: 🐛 resolved the issue with DIEL * fix: fieldset padding in mobile screen (#31) * fix: css alignment form * fix: 🐛 resolved issue with tax field (#32) * fix: Place of birth issue * fix: 🐛 resolved issue with radio button (#33) --------- Co-authored-by: “yauheni-kryzhyk-deriv” <“yauheni@deriv.me”> Co-authored-by: yauheni-deriv <103182683+yauheni-deriv@users.noreply.github.com> Co-authored-by: Shahzaib <shahzaib@deriv.com> Co-authored-by: Matin shafiei <matin@deriv.com>
amina-deriv · Jun 1, 2023 · 947fea3 · 947fea3
1 parent 7e14fd0
commit 947fea3
Show file tree

Hide file tree

Showing 67 changed files with 3,301 additions and 2,090 deletions.
diff --git a/packages/account/build/webpack.config.js b/packages/account/build/webpack.config.js
@@ -49,7 +49,6 @@ module.exports = function (env) {
             'proof-of-identity': 'Sections/Verification/ProofOfIdentity/proof-of-identity.jsx',
             'proof-of-identity-container': 'Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx',
             'proof-of-identity-config': 'Configs/proof-of-identity-config',
-            'proof-of-identity-form-on-signup': 'Components/poi/poi-form-on-signup',
             'proof-of-identity-container-for-mt5':
                 'Sections/Verification/ProofOfIdentity/proof-of-identity-container-for-mt5',
             'poi-poa-docs-submitted': 'Components/poi-poa-docs-submitted/poi-poa-docs-submitted',

diff --git a/packages/account/jest.config.js b/packages/account/jest.config.js
@@ -9,6 +9,7 @@ module.exports = {
         '^Components/(.*)$': '<rootDir>/src/Components/$1',
         '^Constants/(.*)$': '<rootDir>/src/Constants/$1',
         '^Configs/(.*)$': '<rootDir>/src/Configs/$1',
+        '^Containers/(.*)$': '<rootDir>/src/Containers/$1',
         '^Duplicated/(.*)$': '<rootDir>/src/Duplicated/$1',
         '^Helpers/(.*)$': '<rootDir>/src/Helpers/$1',
         '^Services/(.*)$': '<rootDir>/src/Services/$1',

diff --git a/packages/account/src/Assets/ic-poi-name-dob-example.svg b/packages/account/src/Assets/ic-poi-name-dob-example.svg
diff --git a/packages/account/src/Components/address-details/address-details.tsx b/packages/account/src/Components/address-details/address-details.tsx
@@ -24,6 +24,7 @@ import {
     TLocationList,
 } from '@deriv/shared';
 import { splitValidationResultTypes } from '../real-account-signup/helpers/utils';
+import classNames from 'classnames';
 
 type TAddressDetails = {
     states_list: TLocationList[];
@@ -199,7 +200,7 @@ const AddressDetails = ({
                                             </Text>
                                         </div>
                                     )}
-                                    <div className='details-form__elements'>
+                                    <div className={classNames('details-form__elements', 'address-details-form ')}>
                                         <InputField
                                             name='address_line_1'
                                             required={is_svg || is_appstore || is_mf}

diff --git a/packages/account/src/Components/forms/form-fields.jsx b/packages/account/src/Components/forms/form-fields.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Field } from 'formik';
+import { DateOfBirthPicker, Input } from '@deriv/components';
+import { toMoment } from '@deriv/shared';
+
+export const DateOfBirthField = ({ name, portal_id, ...rest }) => (
+    <Field name={name}>
+        {({ field: { value }, form: { setFieldValue, errors, touched, setFieldTouched } }) => (
+            <DateOfBirthPicker
+                error={touched.date_of_birth && errors.date_of_birth}
+                name={name}
+                onBlur={() => setFieldTouched(name)}
+                onChange={({ target }) =>
+                    setFieldValue(name, target?.value ? toMoment(target.value).format('YYYY-MM-DD') : '', true)
+                }
+                value={value}
+                portal_id={portal_id}
+                {...rest}
+            />
+        )}
+    </Field>
+);
+
+export const FormInputField = ({ name, optional = false, warn, ...props }) => (
+    <Field name={name}>
+        {({ field, form: { errors, touched } }) => (
+            <Input
+                type='text'
+                required={!optional}
+                autoComplete='off'
+                maxLength={props.maxLength || 30}
+                error={touched[field.name] && errors[field.name]}
+                warn={warn}
+                {...field}
+                {...props}
+            />
+        )}
+    </Field>
+);
diff --git a/packages/account/src/Components/forms/idv-form.tsx b/packages/account/src/Components/forms/idv-form.tsx
diff --git a/packages/account/src/Components/forms/personal-details-form.jsx b/packages/account/src/Components/forms/personal-details-form.jsx
diff --git a/packages/account/src/Components/inline-note-with-icon/inline-note-with-icon.scss b/packages/account/src/Components/inline-note-with-icon/inline-note-with-icon.scss
@@ -2,7 +2,7 @@
     margin-top: 0.8rem;
     padding: 0.8rem;
     display: flex;
-    background: rgba(255, 173, 58, 0.16);
+    background: var(--status-alert-background);
     border-radius: 4px;
     gap: 0.8rem;
     line-height: 1.4rem;

diff --git a/packages/account/src/Components/inline-note-with-icon/inline-note-with-icon.tsx b/packages/account/src/Components/inline-note-with-icon/inline-note-with-icon.tsx
@@ -2,19 +2,22 @@ import React from 'react';
 import { Icon, Text } from '@deriv/components';
 
 type TInlineNoteWithIconExtend = {
-    icon: string;
+    icon?: string;
+    font_size?: string;
     message: React.ReactNode;
-    title: string;
+    title?: string;
 };
 
-const InlineNoteWithIcon = ({ icon, message, title }: TInlineNoteWithIconExtend) => {
+const InlineNoteWithIcon = ({ icon, message, font_size = 'xxxs', title }: TInlineNoteWithIconExtend) => {
     return (
         <div className='da-inline-note-with-icon'>
-            <div>
-                <Icon icon={icon} size={16} />
-            </div>
-            <Text as='p' size='xxxs' line_height='s'>
-                <strong>{title}: </strong>
+            {icon && (
+                <div>
+                    <Icon icon={icon} size={16} />
+                </div>
+            )}
+            <Text as='p' size={font_size} line_height='s'>
+                {title && <strong>{title}: </strong>}
                 {message}
             </Text>
         </div>

diff --git a/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js b/packages/account/src/Components/personal-details/__tests__/personal-details.spec.js
@@ -6,6 +6,8 @@ import { isDesktop, isMobile, PlatformContext } from '@deriv/shared';
 import { splitValidationResultTypes } from '../../real-account-signup/helpers/utils';
 import PersonalDetails from '../personal-details';
 
+jest.mock('Assets/ic-poi-name-dob-example.svg', () => jest.fn(() => 'PoiNameDobExampleImage'));
+
 jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
     Popover: jest.fn(props => props.is_open && <span>{props.message}</span>),
@@ -229,6 +231,7 @@ describe('<PersonalDetails/>', () => {
         getCurrentStep: jest.fn(() => 1),
         onSave: jest.fn(),
         onCancel: jest.fn(),
+        account_settings: {},
     };
 
     beforeAll(() => (ReactDOM.createPortal = jest.fn(component => component)));
@@ -253,6 +256,7 @@ describe('<PersonalDetails/>', () => {
 
         expect(screen.getByText(fake_alert_messaget)).toBeInTheDocument();
     });
+
     it('should not show fake_alert_message when is_appstore is false ', () => {
         renderwithRouter(
             <PlatformContext.Provider value={{ is_appstore: false }}>
@@ -298,6 +302,7 @@ describe('<PersonalDetails/>', () => {
             })
         ).toBeInTheDocument();
     });
+
     it('should show Name label when salutation is not passed', () => {
         const newprops = { ...props, value: {} };
         renderwithRouter(<PersonalDetails {...newprops} />);