From 35f5980dc70c5308e88531e0a348f67df21afdc8 Mon Sep 17 00:00:00 2001 From: Arshad Rao <135801848+arshad-rao-deriv@users.noreply.github.com> Date: Thu, 4 Apr 2024 21:08:14 +0400 Subject: [PATCH] Arshad/ Ako / FEQ-1721 / Accounts-v2 Module Packages (#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 --- .gitignore | 1 + lerna.json | 2 +- packages/account-v2/package.json | 2 + packages/account-v2/src/components/index.ts | 11 ++ packages/account-v2/src/constants/index.ts | 1 + .../containers/POAForm/AddressDetailsForm.tsx | 2 +- .../POIFlowContainer/POIFlowContainer.tsx | 2 +- .../PersonalDetailsForm.tsx | 2 +- .../__tests__/PersonalDetailsForm.spec.tsx | 4 +- packages/account-v2/src/modules/index.ts | 5 - packages/account-v2/src/modules/package.json | 71 ++++++++ .../account-v2/src/modules/postcss.config.js | 6 + .../src/modules/scripts/webpack-entries.js | 17 ++ .../{ => src}/AddressFields/AddressFields.tsx | 6 +- .../__tests__/AddressFields.spec.tsx | 4 +- .../__tests__/validations.spec.ts | 0 .../modules/{ => src}/AddressFields/index.ts | 0 .../{ => src}/AddressFields/validations.ts | 0 .../FinancialAssessmentForm.tsx | 12 +- .../FinancialAssessmentForm.spec.tsx | 4 +- .../modules/src/FinancialAssessment/index.ts | 1 + .../FinancialAssessmentFields.tsx | 8 +- .../FinancialAssessmentFields.spec.tsx | 0 .../__tests__/validations.spec.ts | 0 .../FinancialAssessmentFields/index.ts | 0 .../FinancialAssessmentFields/validations.ts | 0 .../src/modules/{ => src}/IDVForm/IDVForm.tsx | 8 +- .../IDVForm/__tests__/IDVForm.spec.tsx | 2 +- .../src/modules/{ => src}/IDVForm/index.ts | 0 .../{ => src}/IDVService/IDVService.tsx | 8 +- .../src/modules/src/IDVService/index.ts | 1 + .../{ => src}/ManualUpload/ManualUpload.tsx | 4 +- .../__tests__/ManualUpload.spec.tsx | 6 +- .../src/modules/src/ManualUpload/index.ts | 1 + .../{ => src}/Onfido/OnfidoContainer.tsx | 12 +- .../Onfido/__tests__/OnfidoContainer.spec.tsx | 7 + .../src/modules/{ => src}/Onfido/index.ts | 0 .../{ => src}/POAForm/POAFormContainer.tsx | 12 +- .../__tests__/POAFormContainer.spec.tsx | 12 +- .../src/modules/src/POAForm/index.ts | 1 + .../account-v2/src/modules/src/index.d.ts | 40 +++++ .../account-v2/src/modules/src/index.scss | 8 + packages/account-v2/src/modules/src/index.ts | 8 + .../account-v2/src/modules/tailwind.config.ts | 10 ++ packages/account-v2/src/modules/tsconfig.json | 18 ++ .../account-v2/src/modules/webpack.config.ts | 159 ++++++++++++++++++ .../ManualUploadContainer.tsx | 2 +- .../account-v2/src/router/routesConfig.tsx | 4 +- packages/tradershub/package.json | 1 + packages/tradershub/tsconfig.json | 4 +- packages/tradershub/webpack.config.js | 1 + 51 files changed, 425 insertions(+), 65 deletions(-) create mode 100644 packages/account-v2/src/components/index.ts delete mode 100644 packages/account-v2/src/modules/index.ts create mode 100644 packages/account-v2/src/modules/package.json create mode 100644 packages/account-v2/src/modules/postcss.config.js create mode 100644 packages/account-v2/src/modules/scripts/webpack-entries.js rename packages/account-v2/src/modules/{ => src}/AddressFields/AddressFields.tsx (93%) rename packages/account-v2/src/modules/{ => src}/AddressFields/__tests__/AddressFields.spec.tsx (95%) rename packages/account-v2/src/modules/{ => src}/AddressFields/__tests__/validations.spec.ts (100%) rename packages/account-v2/src/modules/{ => src}/AddressFields/index.ts (100%) rename packages/account-v2/src/modules/{ => src}/AddressFields/validations.ts (100%) rename packages/account-v2/src/modules/{ => src}/FinancialAssessment/FinancialAssessmentForm.tsx (95%) rename packages/account-v2/src/modules/{ => src}/FinancialAssessment/__tests__/FinancialAssessmentForm.spec.tsx (98%) create mode 100644 packages/account-v2/src/modules/src/FinancialAssessment/index.ts rename packages/account-v2/src/modules/{ => src}/FinancialAssessmentFields/FinancialAssessmentFields.tsx (94%) rename packages/account-v2/src/modules/{ => src}/FinancialAssessmentFields/__tests__/FinancialAssessmentFields.spec.tsx (100%) rename packages/account-v2/src/modules/{ => src}/FinancialAssessmentFields/__tests__/validations.spec.ts (100%) rename packages/account-v2/src/modules/{ => src}/FinancialAssessmentFields/index.ts (100%) rename packages/account-v2/src/modules/{ => src}/FinancialAssessmentFields/validations.ts (100%) rename packages/account-v2/src/modules/{ => src}/IDVForm/IDVForm.tsx (94%) rename packages/account-v2/src/modules/{ => src}/IDVForm/__tests__/IDVForm.spec.tsx (98%) rename packages/account-v2/src/modules/{ => src}/IDVForm/index.ts (100%) rename packages/account-v2/src/modules/{ => src}/IDVService/IDVService.tsx (88%) create mode 100644 packages/account-v2/src/modules/src/IDVService/index.ts rename packages/account-v2/src/modules/{ => src}/ManualUpload/ManualUpload.tsx (77%) rename packages/account-v2/src/modules/{ => src}/ManualUpload/__tests__/ManualUpload.spec.tsx (97%) create mode 100644 packages/account-v2/src/modules/src/ManualUpload/index.ts rename packages/account-v2/src/modules/{ => src}/Onfido/OnfidoContainer.tsx (92%) rename packages/account-v2/src/modules/{ => src}/Onfido/__tests__/OnfidoContainer.spec.tsx (96%) rename packages/account-v2/src/modules/{ => src}/Onfido/index.ts (100%) rename packages/account-v2/src/modules/{ => src}/POAForm/POAFormContainer.tsx (93%) rename packages/account-v2/src/modules/{ => src}/POAForm/__tests__/POAFormContainer.spec.tsx (95%) create mode 100644 packages/account-v2/src/modules/src/POAForm/index.ts create mode 100644 packages/account-v2/src/modules/src/index.d.ts create mode 100644 packages/account-v2/src/modules/src/index.scss create mode 100644 packages/account-v2/src/modules/src/index.ts create mode 100644 packages/account-v2/src/modules/tailwind.config.ts create mode 100644 packages/account-v2/src/modules/tsconfig.json create mode 100644 packages/account-v2/src/modules/webpack.config.ts diff --git a/.gitignore b/.gitignore index 699d2d162762..89adc77b4482 100644 --- 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 index 3778cfa781c3..543c0054dc49 100644 --- 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 index 6e6662e69658..f7a35d86b542 100644 --- 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 new file mode 100644 index 000000000000..3f5626740848 --- /dev/null +++ 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 index 1cb6e857398f..6886fa515ab8 100644 --- 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 index bd05eb948773..5adb93e1e8d6 100644 --- 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 index 88a373dfabb1..e90297683b45 100644 --- 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 index e0f306df5de1..9e4be7a34846 100644 --- 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/packages/account-v2/src/containers/PersonalDetailsForm/__tests__/PersonalDetailsForm.spec.tsx b/packages/account-v2/src/containers/PersonalDetailsForm/__tests__/PersonalDetailsForm.spec.tsx index 1904e51391f0..4e2c3d7fff99 100644 --- a/packages/account-v2/src/containers/PersonalDetailsForm/__tests__/PersonalDetailsForm.spec.tsx +++ b/packages/account-v2/src/containers/PersonalDetailsForm/__tests__/PersonalDetailsForm.spec.tsx @@ -20,8 +20,8 @@ jest.mock('../SupportProfessionalClient', () => ({ SupportProfessionalClient: () =>
Support Professional Client Container
, })); -jest.mock('../../../modules/AddressFields', () => ({ - ...jest.requireActual('../../../modules/AddressFields'), +jest.mock('../../../modules/src/AddressFields', () => ({ + ...jest.requireActual('../../../modules/src/AddressFields'), AddressFields: () =>
Address Fields Container
, })); diff --git a/packages/account-v2/src/modules/index.ts b/packages/account-v2/src/modules/index.ts deleted file mode 100644 index 79c7e4706c0f..000000000000 --- a/packages/account-v2/src/modules/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { AddressFields } from './AddressFields'; -export { IDVForm } from './IDVForm'; -export { IDVService } from './IDVService/IDVService'; -export { ManualUpload } from './ManualUpload/ManualUpload'; -export { OnfidoContainer } from './Onfido'; diff --git a/packages/account-v2/src/modules/package.json b/packages/account-v2/src/modules/package.json new file mode 100644 index 000000000000..65e2b1244088 --- /dev/null +++ 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 new file mode 100644 index 000000000000..67cdf1a55fc3 --- /dev/null +++ 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 new file mode 100644 index 000000000000..f58ca8ef2369 --- /dev/null +++ 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/packages/account-v2/src/modules/AddressFields/AddressFields.tsx b/packages/account-v2/src/modules/src/AddressFields/AddressFields.tsx similarity index 93% rename from packages/account-v2/src/modules/AddressFields/AddressFields.tsx rename to packages/account-v2/src/modules/src/AddressFields/AddressFields.tsx index 8904810dab37..efa2566b2ecb 100644 --- a/packages/account-v2/src/modules/AddressFields/AddressFields.tsx +++ b/packages/account-v2/src/modules/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/packages/account-v2/src/modules/AddressFields/__tests__/AddressFields.spec.tsx b/packages/account-v2/src/modules/src/AddressFields/__tests__/AddressFields.spec.tsx similarity index 95% rename from packages/account-v2/src/modules/AddressFields/__tests__/AddressFields.spec.tsx rename to packages/account-v2/src/modules/src/AddressFields/__tests__/AddressFields.spec.tsx index b3f3249e1479..97e7d17c2b84 100644 --- a/packages/account-v2/src/modules/AddressFields/__tests__/AddressFields.spec.tsx +++ b/packages/account-v2/src/modules/src/AddressFields/__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(() =>
), })); diff --git a/packages/account-v2/src/modules/AddressFields/__tests__/validations.spec.ts b/packages/account-v2/src/modules/src/AddressFields/__tests__/validations.spec.ts similarity index 100% rename from packages/account-v2/src/modules/AddressFields/__tests__/validations.spec.ts rename to packages/account-v2/src/modules/src/AddressFields/__tests__/validations.spec.ts diff --git a/packages/account-v2/src/modules/AddressFields/index.ts b/packages/account-v2/src/modules/src/AddressFields/index.ts similarity index 100% rename from packages/account-v2/src/modules/AddressFields/index.ts rename to packages/account-v2/src/modules/src/AddressFields/index.ts diff --git a/packages/account-v2/src/modules/AddressFields/validations.ts b/packages/account-v2/src/modules/src/AddressFields/validations.ts similarity index 100% rename from packages/account-v2/src/modules/AddressFields/validations.ts rename to packages/account-v2/src/modules/src/AddressFields/validations.ts diff --git a/packages/account-v2/src/modules/FinancialAssessment/FinancialAssessmentForm.tsx b/packages/account-v2/src/modules/src/FinancialAssessment/FinancialAssessmentForm.tsx similarity index 95% rename from packages/account-v2/src/modules/FinancialAssessment/FinancialAssessmentForm.tsx rename to packages/account-v2/src/modules/src/FinancialAssessment/FinancialAssessmentForm.tsx index f6e959c3d2a1..f47c76d7bcaa 100644 --- a/packages/account-v2/src/modules/FinancialAssessment/FinancialAssessmentForm.tsx +++ b/packages/account-v2/src/modules/src/FinancialAssessment/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/packages/account-v2/src/modules/FinancialAssessment/__tests__/FinancialAssessmentForm.spec.tsx b/packages/account-v2/src/modules/src/FinancialAssessment/__tests__/FinancialAssessmentForm.spec.tsx similarity index 98% rename from packages/account-v2/src/modules/FinancialAssessment/__tests__/FinancialAssessmentForm.spec.tsx rename to packages/account-v2/src/modules/src/FinancialAssessment/__tests__/FinancialAssessmentForm.spec.tsx index eb6b5eba903c..dc5b4635a13d 100644 --- a/packages/account-v2/src/modules/FinancialAssessment/__tests__/FinancialAssessmentForm.spec.tsx +++ b/packages/account-v2/src/modules/src/FinancialAssessment/__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: () =>
DemoMessage
, })); diff --git a/packages/account-v2/src/modules/src/FinancialAssessment/index.ts b/packages/account-v2/src/modules/src/FinancialAssessment/index.ts new file mode 100644 index 000000000000..a61b04fb79c8 --- /dev/null +++ b/packages/account-v2/src/modules/src/FinancialAssessment/index.ts @@ -0,0 +1 @@ +export { FinancialAssessmentForm } from './FinancialAssessmentForm'; diff --git a/packages/account-v2/src/modules/FinancialAssessmentFields/FinancialAssessmentFields.tsx b/packages/account-v2/src/modules/src/FinancialAssessmentFields/FinancialAssessmentFields.tsx similarity index 94% rename from packages/account-v2/src/modules/FinancialAssessmentFields/FinancialAssessmentFields.tsx rename to packages/account-v2/src/modules/src/FinancialAssessmentFields/FinancialAssessmentFields.tsx index 477607e74c1c..1aaa23425fd0 100644 --- a/packages/account-v2/src/modules/FinancialAssessmentFields/FinancialAssessmentFields.tsx +++ b/packages/account-v2/src/modules/src/FinancialAssessmentFields/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/packages/account-v2/src/modules/FinancialAssessmentFields/__tests__/FinancialAssessmentFields.spec.tsx b/packages/account-v2/src/modules/src/FinancialAssessmentFields/__tests__/FinancialAssessmentFields.spec.tsx similarity index 100% rename from packages/account-v2/src/modules/FinancialAssessmentFields/__tests__/FinancialAssessmentFields.spec.tsx rename to packages/account-v2/src/modules/src/FinancialAssessmentFields/__tests__/FinancialAssessmentFields.spec.tsx diff --git a/packages/account-v2/src/modules/FinancialAssessmentFields/__tests__/validations.spec.ts b/packages/account-v2/src/modules/src/FinancialAssessmentFields/__tests__/validations.spec.ts similarity index 100% rename from packages/account-v2/src/modules/FinancialAssessmentFields/__tests__/validations.spec.ts rename to packages/account-v2/src/modules/src/FinancialAssessmentFields/__tests__/validations.spec.ts diff --git a/packages/account-v2/src/modules/FinancialAssessmentFields/index.ts b/packages/account-v2/src/modules/src/FinancialAssessmentFields/index.ts similarity index 100% rename from packages/account-v2/src/modules/FinancialAssessmentFields/index.ts rename to packages/account-v2/src/modules/src/FinancialAssessmentFields/index.ts diff --git a/packages/account-v2/src/modules/FinancialAssessmentFields/validations.ts b/packages/account-v2/src/modules/src/FinancialAssessmentFields/validations.ts similarity index 100% rename from packages/account-v2/src/modules/FinancialAssessmentFields/validations.ts rename to packages/account-v2/src/modules/src/FinancialAssessmentFields/validations.ts diff --git a/packages/account-v2/src/modules/IDVForm/IDVForm.tsx b/packages/account-v2/src/modules/src/IDVForm/IDVForm.tsx similarity index 94% rename from packages/account-v2/src/modules/IDVForm/IDVForm.tsx rename to packages/account-v2/src/modules/src/IDVForm/IDVForm.tsx index 4a5f22f48ec7..ef785e0eaad3 100644 --- a/packages/account-v2/src/modules/IDVForm/IDVForm.tsx +++ b/packages/account-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/packages/account-v2/src/modules/IDVForm/__tests__/IDVForm.spec.tsx b/packages/account-v2/src/modules/src/IDVForm/__tests__/IDVForm.spec.tsx similarity index 98% rename from packages/account-v2/src/modules/IDVForm/__tests__/IDVForm.spec.tsx rename to packages/account-v2/src/modules/src/IDVForm/__tests__/IDVForm.spec.tsx index 5a0a7244794a..0b98a2082d1a 100644 --- a/packages/account-v2/src/modules/IDVForm/__tests__/IDVForm.spec.tsx +++ b/packages/account-v2/src/modules/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/packages/account-v2/src/modules/IDVForm/index.ts b/packages/account-v2/src/modules/src/IDVForm/index.ts similarity index 100% rename from packages/account-v2/src/modules/IDVForm/index.ts rename to packages/account-v2/src/modules/src/IDVForm/index.ts diff --git a/packages/account-v2/src/modules/IDVService/IDVService.tsx b/packages/account-v2/src/modules/src/IDVService/IDVService.tsx similarity index 88% rename from packages/account-v2/src/modules/IDVService/IDVService.tsx rename to packages/account-v2/src/modules/src/IDVService/IDVService.tsx index d531bdf6919c..0b0bf6d9c8f5 100644 --- a/packages/account-v2/src/modules/IDVService/IDVService.tsx +++ b/packages/account-v2/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 new file mode 100644 index 000000000000..d791fa3626ee --- /dev/null +++ b/packages/account-v2/src/modules/src/IDVService/index.ts @@ -0,0 +1 @@ +export { IDVService } from './IDVService'; diff --git a/packages/account-v2/src/modules/ManualUpload/ManualUpload.tsx b/packages/account-v2/src/modules/src/ManualUpload/ManualUpload.tsx similarity index 77% rename from packages/account-v2/src/modules/ManualUpload/ManualUpload.tsx rename to packages/account-v2/src/modules/src/ManualUpload/ManualUpload.tsx index 6bbe4ac8bf75..8a16a3595ad5 100644 --- a/packages/account-v2/src/modules/ManualUpload/ManualUpload.tsx +++ b/packages/account-v2/src/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/packages/account-v2/src/modules/ManualUpload/__tests__/ManualUpload.spec.tsx b/packages/account-v2/src/modules/src/ManualUpload/__tests__/ManualUpload.spec.tsx similarity index 97% rename from packages/account-v2/src/modules/ManualUpload/__tests__/ManualUpload.spec.tsx rename to packages/account-v2/src/modules/src/ManualUpload/__tests__/ManualUpload.spec.tsx index 16c99c71a078..3a615d2d83c6 100644 --- a/packages/account-v2/src/modules/ManualUpload/__tests__/ManualUpload.spec.tsx +++ b/packages/account-v2/src/modules/src/ManualUpload/__tests__/ManualUpload.spec.tsx @@ -1,7 +1,7 @@ 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', () => ({ @@ -9,8 +9,8 @@ jest.mock('@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 new file mode 100644 index 000000000000..a77b538feb77 --- /dev/null +++ b/packages/account-v2/src/modules/src/ManualUpload/index.ts @@ -0,0 +1 @@ +export { ManualUpload } from './ManualUpload'; diff --git a/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx b/packages/account-v2/src/modules/src/Onfido/OnfidoContainer.tsx similarity index 92% rename from packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx rename to packages/account-v2/src/modules/src/Onfido/OnfidoContainer.tsx index f4b0e074a316..6f5ed41eaf4a 100644 --- a/packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx +++ b/packages/account-v2/src/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/packages/account-v2/src/modules/Onfido/__tests__/OnfidoContainer.spec.tsx b/packages/account-v2/src/modules/src/Onfido/__tests__/OnfidoContainer.spec.tsx similarity index 96% rename from packages/account-v2/src/modules/Onfido/__tests__/OnfidoContainer.spec.tsx rename to packages/account-v2/src/modules/src/Onfido/__tests__/OnfidoContainer.spec.tsx index 8bf714edf1d0..201f99343965 100644 --- a/packages/account-v2/src/modules/Onfido/__tests__/OnfidoContainer.spec.tsx +++ b/packages/account-v2/src/modules/src/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(() =>
MockedLazyComponent
), + }; +}); + beforeEach(() => { jest.clearAllMocks(); }); diff --git a/packages/account-v2/src/modules/Onfido/index.ts b/packages/account-v2/src/modules/src/Onfido/index.ts similarity index 100% rename from packages/account-v2/src/modules/Onfido/index.ts rename to packages/account-v2/src/modules/src/Onfido/index.ts diff --git a/packages/account-v2/src/modules/POAForm/POAFormContainer.tsx b/packages/account-v2/src/modules/src/POAForm/POAFormContainer.tsx similarity index 93% rename from packages/account-v2/src/modules/POAForm/POAFormContainer.tsx rename to packages/account-v2/src/modules/src/POAForm/POAFormContainer.tsx index 77251738b3ba..4d959093a6ad 100644 --- a/packages/account-v2/src/modules/POAForm/POAFormContainer.tsx +++ b/packages/account-v2/src/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(); diff --git a/packages/account-v2/src/modules/POAForm/__tests__/POAFormContainer.spec.tsx b/packages/account-v2/src/modules/src/POAForm/__tests__/POAFormContainer.spec.tsx similarity index 95% rename from packages/account-v2/src/modules/POAForm/__tests__/POAFormContainer.spec.tsx rename to packages/account-v2/src/modules/src/POAForm/__tests__/POAFormContainer.spec.tsx index 119e7579b590..9d82b9a6a862 100644 --- a/packages/account-v2/src/modules/POAForm/__tests__/POAFormContainer.spec.tsx +++ b/packages/account-v2/src/modules/src/POAForm/__tests__/POAFormContainer.spec.tsx @@ -3,18 +3,18 @@ import * as routerDOM from 'react-router-dom'; import { useActiveTradingAccount, useAuthorize } from '@deriv/api-v2'; import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import { ACCOUNT_V2_ROUTES, P2P_ROUTE } from '../../../constants/routes'; -import { usePOAInfo } from '../../../hooks/usePOAInfo'; -import { isNavigationFromDerivGO, isNavigationFromP2P } from '../../../utils/platform'; +import { ACCOUNT_V2_ROUTES, P2P_ROUTE } from '../../../../constants/routes'; +import { usePOAInfo } from '../../../../hooks/usePOAInfo'; +import { isNavigationFromDerivGO, isNavigationFromP2P } from '../../../../utils/platform'; import { POAFormContainer } from '../POAFormContainer'; jest.mock('@deriv/quill-design', () => ({ useBreakpoint: jest.fn(() => ({ isMobile: false })), })); -jest.mock('../../../utils/platform'); +jest.mock('../../../../utils/platform'); -jest.mock('../../../containers/POAForm/AddressDetailsForm', () => ({ +jest.mock('../../../../containers/POAForm/AddressDetailsForm', () => ({ AddressDetailsForm: ({ resubmitting }: { resubmitting: boolean }) => (
Address Details Form {resubmitting && 'resubmitting'}
), @@ -27,7 +27,7 @@ jest.mock('react-router-dom', () => ({ })); jest.mock('@deriv/api-v2'); -jest.mock('../../../hooks/usePOAInfo'); +jest.mock('../../../../hooks/usePOAInfo'); beforeEach(() => { (useAuthorize as jest.Mock).mockReturnValue({ data: {} }); diff --git a/packages/account-v2/src/modules/src/POAForm/index.ts b/packages/account-v2/src/modules/src/POAForm/index.ts new file mode 100644 index 000000000000..f70b7196549a --- /dev/null +++ b/packages/account-v2/src/modules/src/POAForm/index.ts @@ -0,0 +1 @@ +export { POAFormContainer } from './POAFormContainer'; diff --git a/packages/account-v2/src/modules/src/index.d.ts b/packages/account-v2/src/modules/src/index.d.ts new file mode 100644 index 000000000000..0a358b787cfc --- /dev/null +++ b/packages/account-v2/src/modules/src/index.d.ts @@ -0,0 +1,40 @@ +import { useKycAuthStatus } from '@deriv/api-v2'; + +export type TSupportedDocuments = Exclude< + Exclude['kyc_auth_status'], undefined>['identity']['supported_documents'], + undefined +>['idv']; + +type TManualDocumentTypes = 'driving_licence' | 'national_identity_card' | 'nimc_slip' | 'passport'; + +type TIDVFormProps = { + allowDefaultValue?: boolean; + allowIDVSkip?: boolean; + countryCode: string; + supportedDocuments: TSupportedDocuments; +}; + +type TOnfidoContainer = { + countryCode?: string; + isEnabledByDefault?: boolean; + onOnfidoSubmit?: () => void; + selectedDocument?: TManualDocumentTypes; +}; + +declare const ManualUpload: ({ countryCode }: { countryCode: string }) => JSX.Element, + POAFormContainer: () => JSX.Element | null, + IDVForm: (props: TIDVFormProps) => JSX.Element, + AddressFields: () => JSX.Element, + IDVService: () => JSX.Element, + OnfidoContainer: (props: TOnfidoContainer) => JSX.Element, + FinancialAssessmentFields: () => JSX.Element; + +export { + AddressFields, + FinancialAssessmentFields, + IDVForm, + IDVService, + ManualUpload, + OnfidoContainer, + POAFormContainer, +}; diff --git a/packages/account-v2/src/modules/src/index.scss b/packages/account-v2/src/modules/src/index.scss new file mode 100644 index 000000000000..d3187d726135 --- /dev/null +++ b/packages/account-v2/src/modules/src/index.scss @@ -0,0 +1,8 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +svg { + display: inline; + vertical-align: middle; +} diff --git a/packages/account-v2/src/modules/src/index.ts b/packages/account-v2/src/modules/src/index.ts new file mode 100644 index 000000000000..d7fffb182701 --- /dev/null +++ b/packages/account-v2/src/modules/src/index.ts @@ -0,0 +1,8 @@ +export * from './AddressFields'; +export * from './FinancialAssessment'; +export * from './FinancialAssessmentFields'; +export * from './IDVForm'; +export * from './IDVService'; +export * from './ManualUpload'; +export * from './Onfido'; +export * from './POAForm'; diff --git a/packages/account-v2/src/modules/tailwind.config.ts b/packages/account-v2/src/modules/tailwind.config.ts new file mode 100644 index 000000000000..ab873c976e01 --- /dev/null +++ b/packages/account-v2/src/modules/tailwind.config.ts @@ -0,0 +1,10 @@ +import type { Config } from 'tailwindcss'; + +export default { + presets: [require('../../tailwind.config.ts')], + content: ['../**/*.{jsx,tsx}'], + theme: { + extend: {}, + }, + plugins: [], +} satisfies Config; diff --git a/packages/account-v2/src/modules/tsconfig.json b/packages/account-v2/src/modules/tsconfig.json new file mode 100644 index 000000000000..6832fc533862 --- /dev/null +++ b/packages/account-v2/src/modules/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "skipLibCheck": true, + "outDir": "./dist/", + "sourceMap": true, + "module": "es6", + "target": "es5", + "jsx": "react", + + "baseUrl": "./", + "paths": { + "@deriv/*": ["../*/src"] + } + }, + "include": ["./src/**/*"], + "exclude": ["**/node_modules", "dist", "**/shared/*", "**/api/*"] +} diff --git a/packages/account-v2/src/modules/webpack.config.ts b/packages/account-v2/src/modules/webpack.config.ts new file mode 100644 index 000000000000..e4cea9d4ede9 --- /dev/null +++ b/packages/account-v2/src/modules/webpack.config.ts @@ -0,0 +1,159 @@ +import path from 'path'; +// @ts-ignore +import CopyPlugin from 'copy-webpack-plugin'; +import entries from './scripts/webpack-entries.json'; + +const isRelease = + process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging' || process.env.NODE_ENV === 'test'; + +export default () => ({ + devtool: isRelease ? 'source-map' : 'eval-cheap-module-source-map', + entry: entries, + externals: [ + { + '@deriv/quill-icons': '@deriv/quill-icons', + '@deriv-com/ui': '@deriv-com/ui', + 'react-calendar': 'react-calendar', + moment: 'moment', + yup: 'yup', + formik: 'formik', + 'react-dropzone': 'react-dropzone', + 'tailwind-merge': 'tailwind-merge', + '@deriv/api-v2': '@deriv/api-v2', + react: true, + 'react-dom': true, + 'react-router-dom': true, + }, + ], + mode: isRelease ? 'production' : 'development', + module: { + rules: [ + { + // https://github.com/webpack/webpack/issues/11467 + include: /node_modules/, + resolve: { + fullySpecified: false, + }, + test: /\.m?js/, + }, + { + exclude: /node_modules/, + test: /\.(js|jsx|ts|tsx)$/, + use: [ + { + loader: 'babel-loader', + options: { + cacheDirectory: true, + rootMode: 'upward', + }, + }, + ], + }, + { + loader: 'source-map-loader', + test: (input: string) => isRelease && input.endsWith('.js'), + }, + { + test: /\.(sc|sa|c)ss$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + modules: { + auto: (path: string) => path.includes('.module.'), + localIdentName: isRelease ? '[hash:base64]' : '[path][name]__[local]', + }, + url: true, + }, + }, + { + loader: 'postcss-loader', + }, + { + loader: 'resolve-url-loader', + options: { + keepQuery: true, + sourceMap: true, + }, + }, + 'sass-loader', + { + loader: 'sass-resources-loader', + options: { + // Provide path to the file with resources + resources: [ + './src/index.scss', + // eslint-disable-next-line global-require, import/no-dynamic-require + ...require('../../../shared/src/styles/index.js'), + ], + }, + }, + ], + }, + { + exclude: /node_modules/, + generator: { + filename: 'account-v2/assets/[name].[contenthash][ext]', + }, + include: /assets\//, + issuer: /\/packages\/account-v2\/[^/]+(?:\/[^/]+)*\.scss/, + test: /\.svg$/, + type: 'asset/resource', + }, + { + exclude: /node_modules/, + include: /assets\//, + issuer: /\/packages\/account-v2\/[^/]+(?:\/[^/]+)*\.tsx/, + test: /\.svg$/, + use: [ + { + loader: 'babel-loader', + options: { + cacheDirectory: true, + rootMode: 'upward', + }, + }, + { + loader: 'react-svg-loader', + options: { + jsx: true, + svgo: { + floatPrecision: 3, + plugins: [ + { removeTitle: false }, + { removeUselessStrokeAndFill: false }, + { removeUnknownsAndDefaults: false }, + { removeViewBox: false }, + ], + }, + }, + }, + ], + }, + ], + }, + output: { + filename: 'js/[name].js', + path: path.resolve(__dirname, 'dist'), + library: '@deriv-lib/account-v2-lib', + libraryTarget: 'umd', + umdNamedDefine: true, + }, + resolve: { + alias: { + src: path.resolve(__dirname, 'src'), + }, + extensions: ['.js', '.jsx', '.ts', '.tsx'], + }, + plugins: [ + new CopyPlugin({ + patterns: [ + { + from: path.resolve(__dirname, 'src', 'index.d.ts'), + to: path.resolve(__dirname, './dist/types', 'index.d.ts'), + }, + ], + }), + ], +}); diff --git a/packages/account-v2/src/pages/ManualUploadContainer/ManualUploadContainer.tsx b/packages/account-v2/src/pages/ManualUploadContainer/ManualUploadContainer.tsx index 66729008fb43..76e57a998257 100644 --- a/packages/account-v2/src/pages/ManualUploadContainer/ManualUploadContainer.tsx +++ b/packages/account-v2/src/pages/ManualUploadContainer/ManualUploadContainer.tsx @@ -5,7 +5,7 @@ import { TManualDocumentTypes } from '../../constants/manualFormConstants'; import { ManualForm } from '../../containers/ManualForm'; import { SelfieDocumentUpload } from '../../containers/SelfieDocumentUpload'; import { useManualForm } from '../../hooks'; -import { OnfidoContainer } from '../../modules/Onfido'; +import { OnfidoContainer } from '../../modules/src/Onfido'; import { getManualFormValidationSchema, getSelfieValidationSchema } from '../../utils/manualFormUtils'; type TManualUploadContainerProps = { diff --git a/packages/account-v2/src/router/routesConfig.tsx b/packages/account-v2/src/router/routesConfig.tsx index 380fa0842c1b..f890ffdd4eee 100644 --- a/packages/account-v2/src/router/routesConfig.tsx +++ b/packages/account-v2/src/router/routesConfig.tsx @@ -1,8 +1,8 @@ import { ACCOUNT_V2_ROUTES } from '../constants/routes'; import { PersonalDetailsForm } from '../containers/PersonalDetailsForm'; import { POICountrySelector } from '../containers/POICountrySelector'; -import { FinancialAssessmentForm } from '../modules/FinancialAssessment/FinancialAssessmentForm'; -import { POAFormContainer } from '../modules/POAForm/POAFormContainer'; +import { FinancialAssessmentForm } from '../modules/src/FinancialAssessment/FinancialAssessmentForm'; +import { POAFormContainer } from '../modules/src/POAForm/POAFormContainer'; import { AccountClosure, ConnectedApps, LoginHistory } from '../pages'; import { DummyRoute } from './components/DummyRoute'; diff --git a/packages/tradershub/package.json b/packages/tradershub/package.json index 5dc7c3296d47..be03a8311cf9 100644 --- a/packages/tradershub/package.json +++ b/packages/tradershub/package.json @@ -14,6 +14,7 @@ }, "dependencies": { "@deriv/api-v2": "^1.0.0", + "@deriv-lib/account-v2-lib": "1.0.0", "@deriv/quill-icons": "^1.21.0", "@deriv-com/ui": "^1.12.17", "@deriv-com/utils": "^0.0.11", diff --git a/packages/tradershub/tsconfig.json b/packages/tradershub/tsconfig.json index 8a248c1c6ac0..55b726f778c7 100644 --- a/packages/tradershub/tsconfig.json +++ b/packages/tradershub/tsconfig.json @@ -6,7 +6,9 @@ "paths": { "@deriv/*": ["../*/src"], "@/*": ["src/*"], - "@cfd/*": ["src/features/cfd/*"] + "@cfd/*": ["src/features/cfd/*"], + "@deriv-lib/account-v2-lib": ["../account-v2/src/modules"], + } }, "include": ["src", "./declarations.d.ts", "../../utils.d.ts"], diff --git a/packages/tradershub/webpack.config.js b/packages/tradershub/webpack.config.js index 6fedc8b19fe9..4313255c4cdf 100644 --- a/packages/tradershub/webpack.config.js +++ b/packages/tradershub/webpack.config.js @@ -186,6 +186,7 @@ module.exports = function (env) { alias: { '@': path.resolve(__dirname, 'src'), '@cfd': path.resolve(__dirname, 'src/features/cfd'), + '@deriv-lib/account-v2-lib': path.resolve(__dirname, '../account-v2/src/modules'), }, extensions: ['.js', '.jsx', '.ts', '.tsx'], },