hirad-deriv · hirad-deriv · Feb 9, 2023 · Feb 12, 2023 · Feb 12, 2023
diff --git a/README.md b/README.md
@@ -56,6 +56,11 @@ Before running or contribute to this project, you need to have the setup of the
     git clone git@github.com:binary-com/deriv-app.git
     ```
 
+> **Internal**: NX and Lerna integration
+>
+> -   Find and copy nx-cloud accessToken
+> -   Make a copy of `nx-cloud.env.example` from root directory of the project and name it `nx-cloud.env` and replace the `<token>` with provided token.
+
 3.  **Enter project directory**
 
     ```sh
@@ -68,37 +73,10 @@ Before running or contribute to this project, you need to have the setup of the
     npm run bootstrap
     ```
 
-**Note**: If you get the error `peer dependencies`, follow the instruction below:
-
-1. Discard any changes related `package-lock.json` (if applicable)
-2. Make sure that the Node version is the same as recommended version otherwise upgrade or downgrade it
-3. Run the following commands:
-
-    ```sh
-    $ npm ci
-    $ lerna link
-    $ lerna bootstrap --ci --hoist --strict
-    $ lerna link
-    $ npm run build
-    $ npm run bootstrap
-    ```
-
-    > **Note:** Internal behavior of bootstrap has changed to hoist "common" packages to root `node_modules` instead of individual packages.
-    > This behavior benefits us from having issues with multiple instances of the same library across dependencies, but it throws errors if the package versions are out of date. This was a trade-off we decided to So when you are adding a dependency which already exists in other packages, their version should be matched.
-    > In case of wanting a new version for a dependency, please update all packages.
-
-    [comment]: <> (3. If you wish to install and work with only a single, or multiple but specific packages, then follow `3i` for each package. However, if you wish to install and work with all packages, follow `3ii`.)
-    [comment]: <> (i. Run `npm run bootstrap {package name}`. Replace `{package name}` with the name of the package you want to work with. eg.: `trader`, `bot`)
-    [comment]: <> (ii. Install all packages with a hoisting strategy \(lift all common packages to a root `node_modules` and not package specific\), run `npm run hoist`)
-
-4. **Set custom domain:**
-
-    If you have a custom domain that you use for GH Pages, add a file named `CNAME` in `packages/core/scripts/` to be used for your GH Pages deployments
-
-5. **Build the project:**
+5.  **Build packages:**
 
     ```sh
-    npm run build
+    npm run build:all
     ```
 
 <br />
@@ -128,15 +106,16 @@ Before running or contribute to this project, you need to have the setup of the
 
 All packages must contain the following scripts to perform the stated actions:
 
-| Package param | Command            | Description                                                                                                                                                            |
-| :-----------: | ------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-|      ✅       | `start`            | Runs complete test and build suite and starts the dev server.                                                                                                          |
-|      ✅       | `serve`            | Runs build suite and starts the dev server. When serving `core`, takes optional `open` value as argument to open specific page. (e.g: `npm run serve core --open=bot`) |
-|      ✅       | `build`            | Runs build suite and outputs the result into `dist`. Takes optional `base` value as argument.                                                                          |
-|      ✅       | `test`             | Runs the test suite with eslint, stylelint and jest.                                                                                                                   |
-|      ✅       | `test:jest`        | Runs only the jest test suite.                                                                                                                                         |
-|      ✅       | `test:qa`          | Runs the e2e test suite.                                                                                                                                               |
-|      ✅       | `test:performance` | Runs the performance test suite.                                                                                                                                       |
+| Package param | Command                    | Description                                                                                                                                                            |
+| :-----------: | -------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|      ✅       | `start`                    | Runs complete test and build suite and starts the dev server.                                                                                                          |
+|      ✅       | `serve`                    | Runs build suite and starts the dev server. When serving `core`, takes optional `open` value as argument to open specific page. (e.g: `npm run serve core --open=bot`) |
+|      ✅       | `build:one <package_name>` | Runs build suite and outputs the result into `dist` for the passed package name.                                                                                       |
+|      ✅       | `build:all`                | Runs build suites for all of the packages and outputs the result into `dist`.                                                                                          |
+|      ✅       | `test`                     | Runs the test suite with eslint, stylelint and jest.                                                                                                                   |
+|      ✅       | `test:jest`                | Runs only the jest test suite.                                                                                                                                         |
+|      ✅       | `test:qa`                  | Runs the e2e test suite.                                                                                                                                               |
+|      ✅       | `test:performance`         | Runs the performance test suite.                                                                                                                                       |
 
 [comment]: <> (The following scripts are not to be used except for CI/CD environments)
 [comment]: <> (| ❌ | `deploy` | Runs `build` script, then pushes the output to GH Pages. |)
@@ -191,14 +170,34 @@ You can read more on the various lerna commands (and the [`clean` command](https
 
 <br />
 
+## Servable packages
+
+-   account
+-   appstore
+-   bot-web-ui
+-   cashier
+-   cfd
+-   components
+-   core
+-   p2p
+-   trader
+
+<br />
+
 ### Examples of Script Usage
 
+✅ `core` is required to run any of the other packages such as if you want to run the bot-web-ui the core must be instantiated before.
+
+```bash
+npm run serve core
+```
+
 If a script supports the "Package param", you can supply a `{package name}` for it to run the script in. At the moment, only 1 package name can be given to a script, if you wish to run in multiple, please use the `lerna` command that's used under the hood as per its docs.
 
-✅ In order to run the `start` script for the `bot` package, simply run:
+✅ In order to run the `bot` package, simply run:
 
 ```bash
-npm run start bot
+npm run serve bot-web-ui
 ```
 
 ✅ Likewise for `trader` (or any other package) with a different script:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
         "@nrwl/nx-cloud": "latest",
         "@testing-library/jest-dom": "^5.12.0",
         "@testing-library/react": "^12.0.0",
+        "@testing-library/react-hooks": "^7.0.2",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^27.4.1",
         "@types/node": "^17.0.27",

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: any;
+    export default content;
+}
@@ -11,7 +11,7 @@ type TDescriptionsItem = {
 
 export type TArticle = {
     title: string;
-    descriptions: Array<TDescriptionsItem | React.ReactElement>;
+    descriptions: Array<TDescriptionsItem & React.ReactElement>;
     onClickLearnMore?: () => void;
     className?: string;
 };

@@ -1,12 +1,14 @@
+import { getPlatformFromUrl } from '@deriv/shared';
 import React from 'react';
 
 export const useToggleValidation = (hash: string) => {
     const [is_validation_enabled, setIsValidationEnabled] = React.useState(false);
+    const { is_deriv_app } = getPlatformFromUrl();
 
     React.useEffect(() => {
         // This effect allows to toggle IDV validation
         // for repetitive and sequential numbers
-        if (hash && hash === '#toggle_id_validation') {
+        if (is_deriv_app || (hash && hash === '#toggle_id_validation')) {
             setIsValidationEnabled(true);
         } else {
             setIsValidationEnabled(false);

@@ -1,4 +1,4 @@
-import InlineNoteWithIcon from './inline-note-with-icon.jsx';
+import InlineNoteWithIcon from './inline-note-with-icon';
 import './inline-note-with-icon.scss';
 
 export default InlineNoteWithIcon;
@@ -1,8 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Icon, Text } from '@deriv/components';
 
-const InlineNoteWithIcon = ({ icon, message, title }) => {
+type TInlineNoteWithIconExtend = {
+    icon: string;
+    message: React.ReactNode;
+    title: string;
+};
+
+const InlineNoteWithIcon = ({ icon, message, title }: TInlineNoteWithIconExtend) => {
     return (
         <div className='da-inline-note-with-icon'>
             <div>
@@ -16,10 +21,4 @@ const InlineNoteWithIcon = ({ icon, message, title }) => {
     );
 };
 
-InlineNoteWithIcon.propTypes = {
-    icon: PropTypes.string.isRequired,
-    message: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-};
-
 export default InlineNoteWithIcon;
@@ -5,7 +5,7 @@ import { Verified } from '../verified';
 jest.mock('Components/poa/continue-trading-button/continue-trading-button', () => ({
     ContinueTradingButton: jest.fn(() => <div>ContinueTradingButton</div>),
 }));
-jest.mock('Components/poi/poi-button/poi-button.jsx', () => ({
+jest.mock('Components/poi/poi-button/poi-button', () => ({
     PoiButton: jest.fn(() => <div>PoiButton</div>),
 }));
 

@@ -4,7 +4,7 @@ import { Icon } from '@deriv/components';
 import { PlatformContext } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { TPlatformContext, TPoaStatusProps } from 'Types';
-import { PoiButton } from 'Components/poi/poi-button/poi-button.jsx';
+import { PoiButton } from 'Components/poi/poi-button/poi-button';
 import IconMessageContent from 'Components/icon-message-content';
 import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button';
 

@@ -87,10 +87,6 @@ const IdvDocumentSubmit = ({ handleBack, handleViewComplete, selected_country, i
         const is_sequential_number = isSequentialNumber(document_number);
         const is_recurring_number = isRecurringNumberRegex(document_number);
 
-        // QA can manually toggle this regex now through this feature flag.
-        // Otherwise it blocks their test suite.
-        const is_allowing_validation = validation_is_enabled;
-
         if (!document_type || !document_type.text || !document_type.value) {
             errors.document_type = localize('Please select a document type.');
         } else {
@@ -100,7 +96,7 @@ const IdvDocumentSubmit = ({ handleBack, handleViewComplete, selected_country, i
         if (!document_number) {
             errors.document_number =
                 localize('Please enter your document number. ') + getExampleFormat(document_type.example_format);
-        } else if (is_allowing_validation && (is_recurring_number || is_sequential_number)) {
+        } else if (validation_is_enabled && (is_recurring_number || is_sequential_number)) {
             errors.document_number = localize('Please enter a valid ID number.');
         } else {
             const format_regex = getRegex(document_type.value);

@@ -1,6 +1,5 @@
 import React from 'react';
 import { screen, render, fireEvent } from '@testing-library/react';
-import { Icon } from '@deriv/components';
 import { isDesktop, isMobile } from '@deriv/shared';
 import IdvExpired from '../idv-expired';
 
@@ -19,8 +18,8 @@ jest.mock('@deriv/shared', () => ({
 }));
 
 beforeEach(() => {
-    isDesktop.mockReturnValue(true);
-    isMobile.mockReturnValue(false);
+    (isDesktop as jest.Mock).mockReturnValue(true);
+    (isMobile as jest.Mock).mockReturnValue(false);
     jest.clearAllMocks();
 });
 
@@ -41,8 +40,8 @@ describe('<IdvExpired/>', () => {
     });
 
     it('should render IdvExpired component on mobile', () => {
-        isDesktop.mockReturnValue(false);
-        isMobile.mockReturnValue(true);
+        (isDesktop as jest.Mock).mockReturnValue(false);
+        (isMobile as jest.Mock).mockReturnValue(true);
         testComponentRender();
     });
 

@@ -3,7 +3,11 @@ import { Button, Icon, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 
-const IdvExpired = ({ handleRequireSubmission }) => {
+type TIdvExpired = {
+    handleRequireSubmission: () => void;
+};
+
+const IdvExpired = ({ handleRequireSubmission }: TIdvExpired) => {
     return (
         <div className='proof-of-identity__container' data-testid='idv_expired_container'>
             <Icon icon='IcPoiFailed' className='icon' size={128} />

@@ -1,3 +1,3 @@
-import IdvExpired from './idv-expired.jsx';
+import IdvExpired from './idv-expired';
 
 export default IdvExpired;