Arshad/ Ako / FEQ-1721 / Accounts-v2 Module Packages (deriv-com#14026)

* feat: seperate package for account v2 modules * fix: fix the import path for the external modules * build: add mini extract plugin * build: update postcss config * build: add purge conf to tailwind config * feat: add module css file in cashier-v2 * build: improve the tsconf for the lib * build: use minicss extract on module webpack conf * build: use auto generated entry file for webpack * build: auto generate webpack entries file on prebuild * build: update tailwind config * feat: update barrel file * build: use MiniCssExtractPlugin loader * feat: add autogenerated entries file * feat: fix tailwind config for account-v2 modules, refactor * fix: resolve conflicts and types * fix: reduce build size, refactor * fix: unit tests * fix: sort lines * fix: removed duplicated dependencies * fix: Added index files to components folders changed the exports * fix: fix AddressField path * fix: fix AddressFields path in test * fix: updated path, added index file * fix: added webpack-entries.json to gitignore * fix: resolve conflicts * fix: fixed types * fix: remove unnecessary formatting * refactor: removed unnecessary changes from cashier --------- Co-authored-by: Ali(Ako) Hosseini <[email protected]>
heorhi-deriv · Apr 4, 2024 · 35f5980 · 35f5980
1 parent 223daba
commit 35f5980
Show file tree

Hide file tree

Showing 51 changed files with 425 additions and 65 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,6 +21,7 @@ packages/components/src/components/icon/icons-manifest.js
 packages/p2p/lib/
 packages/appstore/lib/
 packages/appstore/.out
+packages/account-v2/src/modules/scripts/webpack-entries.json
 packages/wallets/src/translations/messages.json
 .env
 nx-cloud.env

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
   "version": "independent",
   "npmClient": "npm",
-  "packages": ["packages/*"]
+  "packages": ["packages/*", "packages/account-v2/src/modules"]
 }
diff --git a/packages/account-v2/package.json b/packages/account-v2/package.json
@@ -22,7 +22,9 @@
         "i18n-iso-countries": "^6.8.0",
         "i18next": "^22.4.6",
         "react": "^17.0.2",
+        "react-calendar": "^4.7.0",
         "react-dom": "^17.0.2",
+        "react-dropzone": "11.0.1",
         "react-i18next": "^11.11.0",
         "react-modal": "^3.16.1",
         "react-router-dom": "^5.2.0",

diff --git a/packages/account-v2/src/components/index.ts b/packages/account-v2/src/components/index.ts
@@ -0,0 +1,11 @@
+export * from './AppOverlay';
+export * from './Card';
+export * from './CountrySelector';
+export * from './DatePicker';
+export * from './DemoMessage';
+export * from './Dropzone';
+export * from './ErrorMessage';
+export * from './FormFields';
+export * from './FormSubHeader';
+export * from './IconButton';
+export * from './IconWithMessage';
diff --git a/packages/account-v2/src/constants/index.ts b/packages/account-v2/src/constants/index.ts
@@ -5,3 +5,4 @@ export {
     type TAccountClosureFormActions,
 } from './accountClosureReasons';
 export * from './constants';
+export * from './routes';
diff --git a/packages/account-v2/src/containers/POAForm/AddressDetailsForm.tsx b/packages/account-v2/src/containers/POAForm/AddressDetailsForm.tsx
@@ -6,7 +6,7 @@ import { DerivLightIcPoaLockIcon, StandaloneXmarkBoldIcon } from '@deriv/quill-i
 import { Button, InlineMessage, Text, useDevice } from '@deriv-com/ui';
 import { IconWithMessage } from '../../components/IconWithMessage';
 import { ACCOUNT_V2_DEFAULT_ROUTE } from '../../constants/routes';
-import { AddressFields } from '../../modules/AddressFields';
+import { AddressFields } from '../../modules/src/AddressFields';
 import { DocumentSubmission } from './DocumentSubmission';
 
 type TAddressDetails = {

diff --git a/packages/account-v2/src/containers/POIFlowContainer/POIFlowContainer.tsx b/packages/account-v2/src/containers/POIFlowContainer/POIFlowContainer.tsx
@@ -3,7 +3,7 @@ import { useKycAuthStatus } from '@deriv/api-v2';
 import { Loader } from '@deriv-com/ui';
 import { POI_SERVICE } from '../../constants/constants';
 import { usePOIInfo } from '../../hooks';
-import { IDVService, ManualUpload, OnfidoContainer } from '../../modules';
+import { IDVService, ManualUpload, OnfidoContainer } from '../../modules/src';
 
 type TPOIFlowContainerProps = {
     countryCode: string;

diff --git a/packages/account-v2/src/containers/PersonalDetailsForm/PersonalDetailsForm.tsx b/packages/account-v2/src/containers/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -3,7 +3,7 @@ import { Form, Formik } from 'formik';
 import { Checkbox, Text } from '@deriv-com/ui';
 import { FormSubHeader } from '../../components/FormSubHeader';
 import { usePersonalDetails } from '../../hooks/usePersonalDetails';
-import { AddressFields } from '../../modules/AddressFields';
+import { AddressFields } from '../../modules/src/AddressFields';
 import { getPersonalDetailsValidationSchema } from '../../utils';
 import { PersonalDetails } from './PersonalDetails';
 import { SupportProfessionalClient } from './SupportProfessionalClient';

diff --git a/...ages/account-v2/src/containers/PersonalDetailsForm/__tests__/PersonalDetailsForm.spec.tsx b/...ages/account-v2/src/containers/PersonalDetailsForm/__tests__/PersonalDetailsForm.spec.tsx
@@ -20,8 +20,8 @@ jest.mock('../SupportProfessionalClient', () => ({
     SupportProfessionalClient: () => <div>Support Professional Client Container</div>,
 }));
 
-jest.mock('../../../modules/AddressFields', () => ({
-    ...jest.requireActual('../../../modules/AddressFields'),
+jest.mock('../../../modules/src/AddressFields', () => ({
+    ...jest.requireActual('../../../modules/src/AddressFields'),
     AddressFields: () => <div>Address Fields Container</div>,
 }));
 

diff --git a/packages/account-v2/src/modules/index.ts b/packages/account-v2/src/modules/index.ts
diff --git a/packages/account-v2/src/modules/package.json b/packages/account-v2/src/modules/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "@deriv-lib/account-v2-lib",
+  "version": "1.0.0",
+  "main": "dist/js/index.js",
+  "sideEffects": ["*.css"],
+  "types": "dist/types/index.d.ts",
+  "engines": {
+    "node": "18.x"
+  },
+  "scripts": {
+    "prebuild": "node scripts/webpack-entries.js",
+    "build": "NODE_ENV=production rimraf dist && NODE_OPTIONS='-r ts-node/register' webpack --progress --config \"./webpack.config.ts\"",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "i18n-iso-countries": "^6.8.0",
+    "i18next": "^22.4.6",
+    "usehooks-ts": "^2.7.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@deriv-com/ui": "1.11.2",
+    "@deriv/quill-icons": "^1.18.3",
+    "@deriv/api-v2": "1.0.0",
+    "yup": "^0.32.11",
+    "formik": "^2.1.4",
+    "react-calendar": "^4.7.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-dropzone": "11.0.1",
+    "react-i18next": "^11.11.0",
+    "react-router-dom": "^5.2.0",
+    "tailwind-merge": "^1.14.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/copy-webpack-plugin": "^10.1.0",
+    "@types/css-modules": "^1.0.2",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-modal": "^3.16.3",
+    "@types/react-router-dom": "^5.1.6",
+    "@types/webpack": "^5.28.5",
+    "@typescript-eslint/eslint-plugin": "5.45.0",
+    "@typescript-eslint/parser": "5.45.0",
+    "autoprefixer": "^10.4.16",
+    "copy-webpack-plugin": "^9.0.1",
+    "css-loader": "^5.0.1",
+    "eslint-plugin-local-rules": "2.0.0",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-sonarjs": "^0.23.0",
+    "eslint-plugin-sort-destructure-keys": "^1.5.0",
+    "eslint-plugin-typescript-sort-keys": "^2.3.0",
+    "postcss": "^8.4.24",
+    "postcss-import": "^16.0.1",
+    "style-loader": "^1.2.1",
+    "tailwindcss": "^3.3.6",
+    "tailwind-merge": "^1.14.0",
+    "typescript": "^4.6.3",
+    "webpack": "^5.81.0",
+    "webpack-bundle-analyzer": "^4.3.0",
+    "webpack-cli": "^4.7.2"
+  }
+}
diff --git a/packages/account-v2/src/modules/postcss.config.js b/packages/account-v2/src/modules/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
diff --git a/packages/account-v2/src/modules/scripts/webpack-entries.js b/packages/account-v2/src/modules/scripts/webpack-entries.js
@@ -0,0 +1,17 @@
+const fs = require('fs');
+const glob = require('glob');
+const path = require('path');
+
+const entries = { index: './src/index.ts' };
+const basePath = './src';
+
+glob.sync(`${basePath}/**/*.tsx`, { ignore: [`${basePath}/**/__tests__/**`, `${basePath}/**/*.d.ts`] }).forEach(
+    item => {
+        // Configure Webpack entry
+        const splitPath = item.split('/');
+        const entryName = splitPath[2]; // Adjust based on your directory structure
+        entries[entryName] = item;
+    }
+);
+
+fs.writeFileSync(path.join(__dirname, 'webpack-entries.json'), JSON.stringify(entries, null, 2), 'utf8');
diff --git a/...c/modules/AddressFields/AddressFields.tsx → ...dules/src/AddressFields/AddressFields.tsx b/...c/modules/AddressFields/AddressFields.tsx → ...dules/src/AddressFields/AddressFields.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useAuthorize, useSettings, useStatesList } from '@deriv/api-v2';
-import { FormDropDownField, FormInputField } from '../../components/FormFields';
-import { LANDING_COMPANY } from '../../constants/constants';
-import { isFieldDisabled } from '../../utils';
+import { FormDropDownField, FormInputField } from '../../../components/FormFields';
+import { LANDING_COMPANY } from '../../../constants/constants';
+import { isFieldDisabled } from '../../../utils';
 import { addressDetailValidations } from './validations';
 
 export const AddressFields = () => {

diff --git a/...ssFields/__tests__/AddressFields.spec.tsx → ...ssFields/__tests__/AddressFields.spec.tsx b/...ssFields/__tests__/AddressFields.spec.tsx → ...ssFields/__tests__/AddressFields.spec.tsx
@@ -10,8 +10,8 @@ jest.mock('@deriv/quill-design', () => ({
     useBreakpoint: jest.fn(() => ({ isMobile: false })),
 }));
 
-jest.mock('../../../components/FormFields/', () => ({
-    ...jest.requireActual('../../../components/FormFields'),
+jest.mock('../../../../components/FormFields/', () => ({
+    ...jest.requireActual('../../../../components/FormFields'),
     FormDropDownField: jest.fn(() => <div data-testid='dt_dropdown' />),
 }));
 

diff --git a/...dressFields/__tests__/validations.spec.ts → ...dressFields/__tests__/validations.spec.ts b/...dressFields/__tests__/validations.spec.ts → ...dressFields/__tests__/validations.spec.ts
diff --git a/...unt-v2/src/modules/AddressFields/index.ts → ...v2/src/modules/src/AddressFields/index.ts b/...unt-v2/src/modules/AddressFields/index.ts → ...v2/src/modules/src/AddressFields/index.ts
diff --git a/.../src/modules/AddressFields/validations.ts → .../modules/src/AddressFields/validations.ts b/.../src/modules/AddressFields/validations.ts → .../modules/src/AddressFields/validations.ts
diff --git a/...ialAssessment/FinancialAssessmentForm.tsx → ...ialAssessment/FinancialAssessmentForm.tsx b/...ialAssessment/FinancialAssessmentForm.tsx → ...ialAssessment/FinancialAssessmentForm.tsx
@@ -1,15 +1,15 @@
 import React, { Fragment } from 'react';
 import { Form, Formik } from 'formik';
 import { useHistory } from 'react-router-dom';
-import { ACCOUNT_MODAL_REF } from 'src/constants';
-import { shouldHideOccupation } from 'src/utils/financialAssessmentUtils';
 import { useAccountStatus, useActiveTradingAccount, useFinancialAssessment, useIsEuRegion } from '@deriv/api-v2';
 import { DerivLightIcPoaLockIcon, StandaloneXmarkBoldIcon } from '@deriv/quill-icons';
 import { ActionScreen, Button, InlineMessage, Loader, Modal, Text, useDevice } from '@deriv-com/ui';
-import IcSuccess from '../../assets/status-message/ic-success.svg';
-import { DemoMessage } from '../../components/DemoMessage';
-import { ACCOUNT_V2_DEFAULT_ROUTE, ACCOUNT_V2_ROUTES, DERIV_GO_URL, P2P_URL } from '../../constants/routes';
-import { isNavigationFromDerivGO, isNavigationFromP2P } from '../../utils/platform';
+import IcSuccess from '../../../assets/status-message/ic-success.svg';
+import { DemoMessage } from '../../../components/DemoMessage';
+import { ACCOUNT_MODAL_REF } from '../../../constants';
+import { ACCOUNT_V2_DEFAULT_ROUTE, ACCOUNT_V2_ROUTES, DERIV_GO_URL, P2P_URL } from '../../../constants/routes';
+import { shouldHideOccupation } from '../../../utils/financialAssessmentUtils';
+import { isNavigationFromDerivGO, isNavigationFromP2P } from '../../../utils/platform';
 import { FinancialAssessmentFields } from '../FinancialAssessmentFields';
 
 export const FinancialAssessmentForm = () => {

diff --git a/..._tests__/FinancialAssessmentForm.spec.tsx → ..._tests__/FinancialAssessmentForm.spec.tsx b/..._tests__/FinancialAssessmentForm.spec.tsx → ..._tests__/FinancialAssessmentForm.spec.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { ACCOUNT_MODAL_REF } from 'src/constants';
 import { useAccountStatus, useActiveTradingAccount, useFinancialAssessment, useIsEuRegion } from '@deriv/api-v2';
 import { useDevice } from '@deriv-com/ui';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { ACCOUNT_MODAL_REF } from '../../../../constants';
 import { FinancialAssessmentForm } from '../FinancialAssessmentForm';
 
-jest.mock('../../../components/DemoMessage', () => ({
+jest.mock('../../../../components/DemoMessage', () => ({
     DemoMessage: () => <div>DemoMessage</div>,
 }));
 

diff --git a/packages/account-v2/src/modules/src/FinancialAssessment/index.ts b/packages/account-v2/src/modules/src/FinancialAssessment/index.ts
@@ -0,0 +1 @@
+export { FinancialAssessmentForm } from './FinancialAssessmentForm';
diff --git a/...smentFields/FinancialAssessmentFields.tsx → ...smentFields/FinancialAssessmentFields.tsx b/...smentFields/FinancialAssessmentFields.tsx → ...smentFields/FinancialAssessmentFields.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { useFormikContext } from 'formik';
 import { useIsEuRegion } from '@deriv/api-v2';
-import { FormDropDownField } from '../../components/FormFields';
+import { FormDropDownField } from '../../../components/FormFields';
 import {
     accountTurnoverList,
     educationLevelList,
@@ -12,9 +12,9 @@ import {
     incomeSourceList,
     netIncomeList,
     sourceOfWealthList,
-} from '../../constants/financialInformationList';
-import { filterOccupationList, shouldHideOccupation } from '../../utils/financialAssessmentUtils';
-import type { TFinancialAssessmentFormValues } from '../types';
+} from '../../../constants/financialInformationList';
+import { filterOccupationList, shouldHideOccupation } from '../../../utils/financialAssessmentUtils';
+import type { TFinancialAssessmentFormValues } from '../../types';
 import { financialAssessmentValidations } from './validations';
 
 export const FinancialAssessmentFields = () => {

diff --git a/...ests__/FinancialAssessmentFields.spec.tsx → ...ests__/FinancialAssessmentFields.spec.tsx b/...ests__/FinancialAssessmentFields.spec.tsx → ...ests__/FinancialAssessmentFields.spec.tsx
diff --git a/...smentFields/__tests__/validations.spec.ts → ...smentFields/__tests__/validations.spec.ts b/...smentFields/__tests__/validations.spec.ts → ...smentFields/__tests__/validations.spec.ts
diff --git a/...odules/FinancialAssessmentFields/index.ts → ...es/src/FinancialAssessmentFields/index.ts b/...odules/FinancialAssessmentFields/index.ts → ...es/src/FinancialAssessmentFields/index.ts
diff --git a/.../FinancialAssessmentFields/validations.ts → .../FinancialAssessmentFields/validations.ts b/.../FinancialAssessmentFields/validations.ts → .../FinancialAssessmentFields/validations.ts
diff --git a/...ccount-v2/src/modules/IDVForm/IDVForm.tsx → ...nt-v2/src/modules/src/IDVForm/IDVForm.tsx b/...ccount-v2/src/modules/IDVForm/IDVForm.tsx → ...nt-v2/src/modules/src/IDVForm/IDVForm.tsx
@@ -1,16 +1,16 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useFormikContext } from 'formik';
 import { InferType } from 'yup';
-import { FormDropDownField, FormInputField } from '../../components/FormFields';
-import { TSupportedDocuments } from '../../types';
-import { getIDVNotApplicableOption } from '../../utils/defaultOptions';
+import { FormDropDownField, FormInputField } from '../../../components/FormFields';
+import { TSupportedDocuments } from '../../../types';
+import { getIDVNotApplicableOption } from '../../../utils/defaultOptions';
 import {
     generatePlaceholderText,
     getExampleFormat,
     getIDVFormValidationSchema,
     getSelectedDocumentConfigData,
     TDocument,
-} from '../../utils/idvFormUtils';
+} from '../../../utils/idvFormUtils';
 
 type TIDVFormProps = {
     allowDefaultValue?: boolean;

diff --git a/...odules/IDVForm/__tests__/IDVForm.spec.tsx → ...es/src/IDVForm/__tests__/IDVForm.spec.tsx b/...odules/IDVForm/__tests__/IDVForm.spec.tsx → ...es/src/IDVForm/__tests__/IDVForm.spec.tsx
@@ -2,7 +2,7 @@ import React, { ComponentProps } from 'react';
 import { Formik } from 'formik';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import * as utils from '../../../utils/idvFormUtils';
+import * as utils from '../../../../utils/idvFormUtils';
 import { IDVForm } from '../IDVForm';
 
 jest.mock('@deriv-com/ui', () => ({

diff --git a/...s/account-v2/src/modules/IDVForm/index.ts → ...count-v2/src/modules/src/IDVForm/index.ts b/...s/account-v2/src/modules/IDVForm/index.ts → ...count-v2/src/modules/src/IDVForm/index.ts
diff --git a/...-v2/src/modules/IDVService/IDVService.tsx → ...src/modules/src/IDVService/IDVService.tsx b/...-v2/src/modules/IDVService/IDVService.tsx → ...src/modules/src/IDVService/IDVService.tsx
@@ -1,10 +1,10 @@
 import React, { Fragment } from 'react';
 import { Formik } from 'formik';
 import { Button, Divider, Text } from '@deriv-com/ui';
-import { PersonalDetailsFormWithExample } from '../../containers';
-import { TSupportedDocuments } from '../../types';
-import { getIDVFormValidationSchema } from '../../utils/idvFormUtils';
-import { getNameDOBValidationSchema } from '../../utils';
+import { PersonalDetailsFormWithExample } from '../../../containers';
+import { TSupportedDocuments } from '../../../types';
+import { getNameDOBValidationSchema } from '../../../utils';
+import { getIDVFormValidationSchema } from '../../../utils/idvFormUtils';
 import { IDVForm } from '../IDVForm';
 
 type TIDVServiceProps = {

diff --git a/packages/account-v2/src/modules/src/IDVService/index.ts b/packages/account-v2/src/modules/src/IDVService/index.ts
@@ -0,0 +1 @@
+export { IDVService } from './IDVService';
diff --git a/...src/modules/ManualUpload/ManualUpload.tsx → ...modules/src/ManualUpload/ManualUpload.tsx b/...src/modules/ManualUpload/ManualUpload.tsx → ...modules/src/ManualUpload/ManualUpload.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { DocumentSelection } from '../../containers/DocumentSelection';
-import { ManualUploadContainer } from '../../pages/ManualUploadContainer/ManualUploadContainer';
+import { DocumentSelection } from '../../../containers/DocumentSelection';
+import { ManualUploadContainer } from '../../../pages/ManualUploadContainer/ManualUploadContainer';
 
 type TManualUploadProps = { countryCode: string };
 

diff --git a/...ualUpload/__tests__/ManualUpload.spec.tsx → ...ualUpload/__tests__/ManualUpload.spec.tsx b/...ualUpload/__tests__/ManualUpload.spec.tsx → ...ualUpload/__tests__/ManualUpload.spec.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useManualForm } from '../../../hooks';
+import { useManualForm } from '../../../../hooks';
 import { ManualUpload } from '../ManualUpload';
 
 jest.mock('@deriv-com/ui', () => ({
     ...jest.requireActual('@deriv-com/ui'),
     useDevice: () => ({ isMobile: false }),
 }));
 
-jest.mock('../../../hooks', () => ({
-    ...jest.requireActual('../../../hooks'),
+jest.mock('../../../../hooks', () => ({
+    ...jest.requireActual('../../../../hooks'),
     useManualForm: jest.fn().mockReturnValue({
         isExpiryDateRequired: true,
         isLoading: false,

diff --git a/packages/account-v2/src/modules/src/ManualUpload/index.ts b/packages/account-v2/src/modules/src/ManualUpload/index.ts
@@ -0,0 +1 @@
+export { ManualUpload } from './ManualUpload';
diff --git a/...v2/src/modules/Onfido/OnfidoContainer.tsx → ...rc/modules/src/Onfido/OnfidoContainer.tsx b/...v2/src/modules/Onfido/OnfidoContainer.tsx → ...rc/modules/src/Onfido/OnfidoContainer.tsx
@@ -4,12 +4,12 @@ import { useHistory } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 import { useOnfido } from '@deriv/api-v2';
 import { Button, Loader, Text } from '@deriv-com/ui';
-import IcAccountMissingDetails from '../../assets/proof-of-identity/ic-account-missing-details.svg';
-import { ErrorMessage } from '../../components/ErrorMessage';
-import { IconWithMessage } from '../../components/IconWithMessage';
-import { TManualDocumentTypes } from '../../constants/manualFormConstants';
-import { OnfidoView, PersonalDetailsFormWithExample } from '../../containers';
-import { getNameDOBValidationSchema } from '../../utils';
+import IcAccountMissingDetails from '../../../assets/proof-of-identity/ic-account-missing-details.svg';
+import { ErrorMessage } from '../../../components/ErrorMessage';
+import { IconWithMessage } from '../../../components/IconWithMessage';
+import { TManualDocumentTypes } from '../../../constants/manualFormConstants';
+import { OnfidoView, PersonalDetailsFormWithExample } from '../../../containers';
+import { getNameDOBValidationSchema } from '../../../utils';
 
 // TODO: Remove optional and default props when POI is ready
 type TOnfidoContainer = {

diff --git a/...Onfido/__tests__/OnfidoContainer.spec.tsx → ...Onfido/__tests__/OnfidoContainer.spec.tsx b/...Onfido/__tests__/OnfidoContainer.spec.tsx → ...Onfido/__tests__/OnfidoContainer.spec.tsx
@@ -25,6 +25,13 @@ jest.mock('@deriv/api-v2', () => ({
     })),
 }));
 
+jest.mock('../../../../assets/proof-of-identity/personal-details-example.svg', () => {
+    return {
+        __esModule: true,
+        default: jest.fn(() => <div>MockedLazyComponent</div>),
+    };
+});
+
 beforeEach(() => {
     jest.clearAllMocks();
 });

diff --git a/...es/account-v2/src/modules/Onfido/index.ts → ...ccount-v2/src/modules/src/Onfido/index.ts b/...es/account-v2/src/modules/Onfido/index.ts → ...ccount-v2/src/modules/src/Onfido/index.ts
diff --git a/.../src/modules/POAForm/POAFormContainer.tsx → .../modules/src/POAForm/POAFormContainer.tsx b/.../src/modules/POAForm/POAFormContainer.tsx → .../modules/src/POAForm/POAFormContainer.tsx
@@ -3,13 +3,11 @@ import { useHistory } from 'react-router-dom';
 import { useActiveTradingAccount } from '@deriv/api-v2';
 import { DerivLightApprovedPoaIcon, DerivLightDeclinedPoaIcon, DerivLightWaitingPoaIcon } from '@deriv/quill-icons';
 import { Button, Loader, Text } from '@deriv-com/ui';
-import { DemoMessage } from '../../components/DemoMessage';
-import { IconWithMessage } from '../../components/IconWithMessage';
-import { AUTH_STATUS_CODES } from '../../constants/constants';
-import { ACCOUNT_V2_ROUTES, P2P_ROUTE } from '../../constants/routes';
-import { AddressDetailsForm } from '../../containers/POAForm/AddressDetailsForm';
-import { usePOAInfo } from '../../hooks/usePOAInfo';
-import { isNavigationFromDerivGO, isNavigationFromP2P } from '../../utils/platform';
+import { DemoMessage, IconWithMessage } from '../../../components';
+import { ACCOUNT_V2_ROUTES, AUTH_STATUS_CODES, P2P_ROUTE } from '../../../constants';
+import { AddressDetailsForm } from '../../../containers/POAForm/AddressDetailsForm';
+import { usePOAInfo } from '../../../hooks/usePOAInfo';
+import { isNavigationFromDerivGO, isNavigationFromP2P } from '../../../utils/platform';
 
 export const POAFormContainer = () => {
     const { data: activeAccount } = useActiveTradingAccount();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { FinancialAssessmentForm } from './FinancialAssessmentForm';