From 1971534803fd06e0b96a738f1dd5346c1ad8fec0 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Mon, 5 Dec 2022 12:04:39 +0400 Subject: [PATCH 1/4] refactor: :art: migrated upload complete to tsx --- ...plete.spec.js => upload-complete.spec.tsx} | 4 ++-- .../poi/status/upload-complete/index.js | 3 --- .../poi/status/upload-complete/index.ts | 3 +++ ...pload-complete.jsx => upload-complete.tsx} | 22 ++++++++++--------- 4 files changed, 17 insertions(+), 15 deletions(-) rename packages/account/src/Components/poi/status/upload-complete/__tests__/{upload-complete.spec.js => upload-complete.spec.tsx} (96%) delete mode 100644 packages/account/src/Components/poi/status/upload-complete/index.js create mode 100644 packages/account/src/Components/poi/status/upload-complete/index.ts rename packages/account/src/Components/poi/status/upload-complete/{upload-complete.jsx => upload-complete.tsx} (82%) diff --git a/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.js b/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx similarity index 96% rename from packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.js rename to packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx index 79108be9713a..5efe53f39814 100644 --- a/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.js +++ b/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { Button } from '@deriv/components'; import { PlatformContext } from '@deriv/shared'; -import { UploadComplete } from '../upload-complete.jsx'; +import { UploadComplete } from '../upload-complete.js'; import { BrowserRouter } from 'react-router-dom'; jest.mock('Components/poa/poa-button', () => jest.fn(() =>
)); @@ -24,7 +24,7 @@ describe('', () => { const renderWithRouter = (component, is_appstore) => render( - + {component} ); diff --git a/packages/account/src/Components/poi/status/upload-complete/index.js b/packages/account/src/Components/poi/status/upload-complete/index.js deleted file mode 100644 index f3d8d64d38d5..000000000000 --- a/packages/account/src/Components/poi/status/upload-complete/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import { UploadComplete } from './upload-complete.jsx'; - -export default UploadComplete; diff --git a/packages/account/src/Components/poi/status/upload-complete/index.ts b/packages/account/src/Components/poi/status/upload-complete/index.ts new file mode 100644 index 000000000000..4e3f49a4220e --- /dev/null +++ b/packages/account/src/Components/poi/status/upload-complete/index.ts @@ -0,0 +1,3 @@ +import { UploadComplete } from './upload-complete'; + +export default UploadComplete; diff --git a/packages/account/src/Components/poi/status/upload-complete/upload-complete.jsx b/packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx similarity index 82% rename from packages/account/src/Components/poi/status/upload-complete/upload-complete.jsx rename to packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx index e768b443bc1d..718b54834ed9 100644 --- a/packages/account/src/Components/poi/status/upload-complete/upload-complete.jsx +++ b/packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx @@ -6,9 +6,17 @@ import { localize } from '@deriv/translations'; import PoaButton from 'Components/poa/poa-button'; import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button'; import IconMessageContent from 'Components/icon-message-content'; +import { TPlatformContext } from 'Types'; +import classNames from 'classnames'; -export const UploadComplete = ({ needs_poa, redirect_button, is_from_external }) => { - const { is_appstore } = React.useContext(PlatformContext); +type TUploadComplete = { + needs_poa?: boolean; + redirect_button?: React.ReactElement; + is_from_external?: boolean; +}; + +export const UploadComplete = ({ needs_poa, redirect_button, is_from_external }: TUploadComplete) => { + const { is_appstore } = React.useContext(PlatformContext); const message = localize('Your proof of identity was submitted successfully'); if (!needs_poa) { return ( @@ -22,7 +30,7 @@ export const UploadComplete = ({ needs_poa, redirect_button, is_from_external }) ) } - className={is_appstore && 'account-management-dashboard'} + className={classNames({ 'account-management-dashboard': is_appstore })} > {!is_from_external && (redirect_button || )} @@ -38,7 +46,7 @@ export const UploadComplete = ({ needs_poa, redirect_button, is_from_external }) ) } - className={is_appstore && 'account-management-dashboard'} + className={classNames({ 'account-management-dashboard': is_appstore })} >
@@ -56,10 +64,4 @@ export const UploadComplete = ({ needs_poa, redirect_button, is_from_external }) ); }; -UploadComplete.protoTypes = { - is_description_enabled: PropTypes.bool, - has_poa: PropTypes.bool, - redirect_button: PropTypes.object, -}; - export default UploadComplete; From f26f82acffa1e7e4c2c8d60bafc9efa239b89ff6 Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Mon, 5 Dec 2022 13:19:28 +0400 Subject: [PATCH 2/4] refactor: :art: migrated status to ts --- ...bmitted.jsx => poi-poa-docs-submitted.tsx} | 18 ++++++++++++--- .../poi-unsupported-failed/index.js | 3 --- .../poi-unsupported-failed/index.ts | 3 +++ ...rted-failed.jsx => unsupported-failed.tsx} | 7 +----- .../upload-complete/upload-complete.tsx | 11 ++------- .../{verified.spec.js => verified.spec.tsx} | 7 +++--- .../Components/poi/status/verified/index.js | 3 --- .../Components/poi/status/verified/index.ts | 3 +++ .../verified/{verified.jsx => verified.tsx} | 23 ++++++++----------- .../account/src/Types/common-prop.type.ts | 6 +++++ 10 files changed, 44 insertions(+), 40 deletions(-) rename packages/account/src/Components/poi-poa-docs-submitted/{poi-poa-docs-submitted.jsx => poi-poa-docs-submitted.tsx} (77%) delete mode 100644 packages/account/src/Components/poi-unsupported-failed/index.js create mode 100644 packages/account/src/Components/poi-unsupported-failed/index.ts rename packages/account/src/Components/poi-unsupported-failed/{unsupported-failed.jsx => unsupported-failed.tsx} (75%) rename packages/account/src/Components/poi/status/verified/__tests__/{verified.spec.js => verified.spec.tsx} (87%) delete mode 100644 packages/account/src/Components/poi/status/verified/index.js create mode 100644 packages/account/src/Components/poi/status/verified/index.ts rename packages/account/src/Components/poi/status/verified/{verified.jsx => verified.tsx} (74%) diff --git a/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx b/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx similarity index 77% rename from packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx rename to packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx index 0fd3a00f3c57..a2aef064ed17 100644 --- a/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx +++ b/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx @@ -1,11 +1,23 @@ -import React from 'react'; +import React, { MouseEventHandler } from 'react'; import { Button, Icon } from '@deriv/components'; import { localize } from '@deriv/translations'; import { getAuthenticationStatusInfo } from '@deriv/shared'; - import IconMessageContent from 'Components/icon-message-content'; +import { GetAccountStatus } from '@deriv/api-types'; + +type TPoiPoaDocsSubmitted = { + account_status: GetAccountStatus; + is_vanuatu_selected: boolean; + onClickOK: MouseEventHandler; + updateAccountStatus: () => void; +}; -const PoiPoaDocsSubmitted = ({ account_status, is_vanuatu_selected, onClickOK, updateAccountStatus }) => { +const PoiPoaDocsSubmitted = ({ + account_status, + is_vanuatu_selected, + onClickOK, + updateAccountStatus, +}: TPoiPoaDocsSubmitted) => { React.useEffect(() => { updateAccountStatus(); //eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/packages/account/src/Components/poi-unsupported-failed/index.js b/packages/account/src/Components/poi-unsupported-failed/index.js deleted file mode 100644 index 687c3a77ae61..000000000000 --- a/packages/account/src/Components/poi-unsupported-failed/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import UnsupportedFailed from './unsupported-failed.jsx'; - -export default UnsupportedFailed; diff --git a/packages/account/src/Components/poi-unsupported-failed/index.ts b/packages/account/src/Components/poi-unsupported-failed/index.ts new file mode 100644 index 000000000000..97772ea79910 --- /dev/null +++ b/packages/account/src/Components/poi-unsupported-failed/index.ts @@ -0,0 +1,3 @@ +import UnsupportedFailed from './unsupported-failed'; + +export default UnsupportedFailed; diff --git a/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.jsx b/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx similarity index 75% rename from packages/account/src/Components/poi-unsupported-failed/unsupported-failed.jsx rename to packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx index 2205bbb98080..b99c1f94894e 100644 --- a/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.jsx +++ b/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { Icon } from '@deriv/components'; import { localize } from '@deriv/translations'; import IconMessageContent from 'Components/icon-message-content'; -const UnsupportedFailed = ({ error }) => ( +const UnsupportedFailed = ({ error }: { error: string }) => ( ( /> ); -UnsupportedFailed.propTypes = { - error: PropTypes.string, -}; - export default UnsupportedFailed; diff --git a/packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx b/packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx index 718b54834ed9..a0c97bd56108 100644 --- a/packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx +++ b/packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx @@ -1,21 +1,14 @@ import React from 'react'; -import { PropTypes } from 'prop-types'; import { Icon, Text } from '@deriv/components'; import { PlatformContext } from '@deriv/shared'; import { localize } from '@deriv/translations'; import PoaButton from 'Components/poa/poa-button'; import { ContinueTradingButton } from 'Components/poa/continue-trading-button/continue-trading-button'; import IconMessageContent from 'Components/icon-message-content'; -import { TPlatformContext } from 'Types'; +import { TPlatformContext, TPOIStatus } from 'Types'; import classNames from 'classnames'; -type TUploadComplete = { - needs_poa?: boolean; - redirect_button?: React.ReactElement; - is_from_external?: boolean; -}; - -export const UploadComplete = ({ needs_poa, redirect_button, is_from_external }: TUploadComplete) => { +export const UploadComplete = ({ needs_poa, redirect_button, is_from_external }: TPOIStatus) => { const { is_appstore } = React.useContext(PlatformContext); const message = localize('Your proof of identity was submitted successfully'); if (!needs_poa) { diff --git a/packages/account/src/Components/poi/status/verified/__tests__/verified.spec.js b/packages/account/src/Components/poi/status/verified/__tests__/verified.spec.tsx similarity index 87% rename from packages/account/src/Components/poi/status/verified/__tests__/verified.spec.js rename to packages/account/src/Components/poi/status/verified/__tests__/verified.spec.tsx index a9a81e3b0846..5c0113bd9db7 100644 --- a/packages/account/src/Components/poi/status/verified/__tests__/verified.spec.js +++ b/packages/account/src/Components/poi/status/verified/__tests__/verified.spec.tsx @@ -3,7 +3,7 @@ import { screen, render } from '@testing-library/react'; import { Button } from '@deriv/components'; import { Verified } from '../verified'; -jest.mock('Components/poa/poa-button', () => () =>
); +jest.mock('Components/poa/poa-button', () => jest.fn(() =>
)); describe('', () => { const message = 'Your proof of identity is verified'; @@ -16,8 +16,9 @@ describe('', () => { }); it('should show icon with message if needs_poa is false', () => { - const { container } = render(); - expect(container.getElementsByClassName('dc-icon').length).toBe(1); + render(); + + expect(screen.getByTestId('dt_IcPoaVerified')).toBeInTheDocument(); expect(screen.getByText(message)).toBeInTheDocument(); }); diff --git a/packages/account/src/Components/poi/status/verified/index.js b/packages/account/src/Components/poi/status/verified/index.js deleted file mode 100644 index 518e1b1d799c..000000000000 --- a/packages/account/src/Components/poi/status/verified/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import { Verified } from './verified.jsx'; - -export default Verified; diff --git a/packages/account/src/Components/poi/status/verified/index.ts b/packages/account/src/Components/poi/status/verified/index.ts new file mode 100644 index 000000000000..0856ecf81547 --- /dev/null +++ b/packages/account/src/Components/poi/status/verified/index.ts @@ -0,0 +1,3 @@ +import { Verified } from './verified'; + +export default Verified; diff --git a/packages/account/src/Components/poi/status/verified/verified.jsx b/packages/account/src/Components/poi/status/verified/verified.tsx similarity index 74% rename from packages/account/src/Components/poi/status/verified/verified.jsx rename to packages/account/src/Components/poi/status/verified/verified.tsx index 4f245d233dca..927bd064979f 100644 --- a/packages/account/src/Components/poi/status/verified/verified.jsx +++ b/packages/account/src/Components/poi/status/verified/verified.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import { PropTypes } from 'prop-types'; import { Icon } from '@deriv/components'; import { PlatformContext } from '@deriv/shared'; import { localize } from '@deriv/translations'; import PoaButton from 'Components/poa/poa-button'; import IconMessageContent from 'Components/icon-message-content'; +import { TPlatformContext, TPOIStatus } from 'Types'; -export const Verified = ({ needs_poa, redirect_button, is_from_external }) => { - const { is_appstore } = React.useContext(PlatformContext); +export const Verified = ({ needs_poa, redirect_button, is_from_external }: TPOIStatus) => { + const { is_appstore } = React.useContext(PlatformContext); const message = localize('Your proof of identity is verified'); if (!needs_poa) { return ( @@ -15,9 +15,14 @@ export const Verified = ({ needs_poa, redirect_button, is_from_external }) => { message={message} icon={ is_appstore ? ( - + ) : ( - + ) } className='account-management-dashboard' @@ -49,12 +54,4 @@ export const Verified = ({ needs_poa, redirect_button, is_from_external }) => { ); }; -Verified.propTypes = { - has_poa: PropTypes.bool, - is_description_enabled: PropTypes.bool, - is_from_external: PropTypes.bool, - needs_poa: PropTypes.bool, - redirect_button: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]), -}; - export default Verified; diff --git a/packages/account/src/Types/common-prop.type.ts b/packages/account/src/Types/common-prop.type.ts index 3dd657d812de..ec8bff216550 100644 --- a/packages/account/src/Types/common-prop.type.ts +++ b/packages/account/src/Types/common-prop.type.ts @@ -96,3 +96,9 @@ export type TBinaryRoutes = { is_logged_in: boolean; is_logging_in: boolean; }; + +export type TPOIStatus = { + needs_poa?: boolean; + redirect_button?: React.ReactElement; + is_from_external?: boolean; +}; From dd8026bd979521044cc169ea1d127af656daa0ec Mon Sep 17 00:00:00 2001 From: Likhith Kolayari Date: Mon, 5 Dec 2022 15:50:33 +0400 Subject: [PATCH 3/4] refactor: :art: inorporated review comments --- packages/account/build/webpack.config.js | 2 +- .../poi-poa-docs-submitted/poi-poa-docs-submitted.tsx | 4 ++-- .../poi-unsupported-failed/unsupported-failed.tsx | 6 +++++- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/account/build/webpack.config.js b/packages/account/build/webpack.config.js index 34013034768a..eb6964ecf938 100644 --- a/packages/account/build/webpack.config.js +++ b/packages/account/build/webpack.config.js @@ -52,7 +52,7 @@ module.exports = function (env) { '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.jsx', + 'poi-poa-docs-submitted': 'Components/poi-poa-docs-submitted/poi-poa-docs-submitted', 'reset-trading-password-modal': 'Components/reset-trading-password-modal', 'risk-tolerance-warning-modal': 'Components/trading-assessment/risk-tolerance-warning-modal.jsx', 'self-exclusion': 'Components/self-exclusion', diff --git a/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx b/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx index a2aef064ed17..4c1e9684842d 100644 --- a/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx +++ b/packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx @@ -1,4 +1,4 @@ -import React, { MouseEventHandler } from 'react'; +import React from 'react'; import { Button, Icon } from '@deriv/components'; import { localize } from '@deriv/translations'; import { getAuthenticationStatusInfo } from '@deriv/shared'; @@ -8,7 +8,7 @@ import { GetAccountStatus } from '@deriv/api-types'; type TPoiPoaDocsSubmitted = { account_status: GetAccountStatus; is_vanuatu_selected: boolean; - onClickOK: MouseEventHandler; + onClickOK: React.MouseEventHandler; updateAccountStatus: () => void; }; diff --git a/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx b/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx index b99c1f94894e..bb8d839ed8e0 100644 --- a/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx +++ b/packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx @@ -3,7 +3,11 @@ import { Icon } from '@deriv/components'; import { localize } from '@deriv/translations'; import IconMessageContent from 'Components/icon-message-content'; -const UnsupportedFailed = ({ error }: { error: string }) => ( +type TUnsupportedFailed = { + error: string; +}; + +const UnsupportedFailed = ({ error }: TUnsupportedFailed) => ( Date: Mon, 5 Dec 2022 18:19:51 +0400 Subject: [PATCH 4/4] fix: :bug: resolved failing test --- .../status/upload-complete/__tests__/upload-complete.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx b/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx index 5efe53f39814..69d11f8333b9 100644 --- a/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx +++ b/packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { Button } from '@deriv/components'; import { PlatformContext } from '@deriv/shared'; -import { UploadComplete } from '../upload-complete.js'; +import { UploadComplete } from '../upload-complete'; import { BrowserRouter } from 'react-router-dom'; jest.mock('Components/poa/poa-button', () => jest.fn(() =>
));