Merge pull request #58 from likhith-deriv/likhith/74159/migrate-uploa…

…d-complete

Likhith/74159/migrate upload complete

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',

packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.jsx → packages/account/src/Components/poi-poa-docs-submitted/poi-poa-docs-submitted.tsx

@@ -2,10 +2,22 @@ import React 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: React.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

packages/account/src/Components/poi-unsupported-failed/index.ts

@@ -0,0 +1,3 @@
+import UnsupportedFailed from './unsupported-failed';
+
+export default UnsupportedFailed;

packages/account/src/Components/poi-unsupported-failed/unsupported-failed.jsx → packages/account/src/Components/poi-unsupported-failed/unsupported-failed.tsx

@@ -1,10 +1,13 @@
 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 }) => (
+type TUnsupportedFailed = {
+    error: string;
+};
+
+const UnsupportedFailed = ({ error }: TUnsupportedFailed) => (
     <IconMessageContent
         message={localize('Proof of identity documents upload failed')}
         text={error}
@@ -13,8 +16,4 @@ const UnsupportedFailed = ({ error }) => (
     />
 );
 
-UnsupportedFailed.propTypes = {
-    error: PropTypes.string,
-};
-
 export default UnsupportedFailed;

packages/account/src/Components/poi/status/upload-complete/__tests__/upload-complete.spec.js → 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';
 import { BrowserRouter } from 'react-router-dom';
 
 jest.mock('Components/poa/poa-button', () => jest.fn(() => <div data-testid='dt_poa_button' />));
@@ -24,7 +24,7 @@ describe('<UploadComplete />', () => {
 
     const renderWithRouter = (component, is_appstore) =>
         render(
-            <PlatformContext.Provider value={{ is_appstore: is_appstore }}>
+            <PlatformContext.Provider value={{ is_appstore }}>
                 <BrowserRouter>{component}</BrowserRouter>
             </PlatformContext.Provider>
         );

packages/account/src/Components/poi/status/upload-complete/index.ts

@@ -0,0 +1,3 @@
+import { UploadComplete } from './upload-complete';
+
+export default UploadComplete;

packages/account/src/Components/poi/status/upload-complete/upload-complete.jsx → packages/account/src/Components/poi/status/upload-complete/upload-complete.tsx

@@ -1,14 +1,15 @@
 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, TPOIStatus } from 'Types';
+import classNames from 'classnames';
 
-export const UploadComplete = ({ needs_poa, redirect_button, is_from_external }) => {
-    const { is_appstore } = React.useContext(PlatformContext);
+export const UploadComplete = ({ needs_poa, redirect_button, is_from_external }: TPOIStatus) => {
+    const { is_appstore } = React.useContext<TPlatformContext>(PlatformContext);
     const message = localize('Your proof of identity was submitted successfully');
     if (!needs_poa) {
         return (
@@ -22,7 +23,7 @@ export const UploadComplete = ({ needs_poa, redirect_button, is_from_external })
                         <Icon icon='IcPoiVerified' size={128} />
                     )
                 }
-                className={is_appstore && 'account-management-dashboard'}
+                className={classNames({ 'account-management-dashboard': is_appstore })}
             >
                 {!is_from_external && (redirect_button || <ContinueTradingButton />)}
             </IconMessageContent>
@@ -38,7 +39,7 @@ export const UploadComplete = ({ needs_poa, redirect_button, is_from_external })
                     <Icon icon='IcPoiVerified' size={128} />
                 )
             }
-            className={is_appstore && 'account-management-dashboard'}
+            className={classNames({ 'account-management-dashboard': is_appstore })}
         >
             <React.Fragment>
                 <div className='account-management__text-container'>
@@ -56,10 +57,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;

packages/account/src/Components/poi/status/verified/__tests__/verified.spec.js → 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', () => () => <div data-testid='poa-button' />);
+jest.mock('Components/poa/poa-button', () => jest.fn(() => <div data-testid='poa-button' />));
 
 describe('<Verified/>', () => {
     const message = 'Your proof of identity is verified';
@@ -16,8 +16,9 @@ describe('<Verified/>', () => {
     });
 
     it('should show icon with message if needs_poa is false', () => {
-        const { container } = render(<Verified />);
-        expect(container.getElementsByClassName('dc-icon').length).toBe(1);
+        render(<Verified />);
+
+        expect(screen.getByTestId('dt_IcPoaVerified')).toBeInTheDocument();
         expect(screen.getByText(message)).toBeInTheDocument();
     });
 

packages/account/src/Components/poi/status/verified/index.ts

@@ -0,0 +1,3 @@
+import { Verified } from './verified';
+
+export default Verified;

packages/account/src/Components/poi/status/verified/verified.jsx → packages/account/src/Components/poi/status/verified/verified.tsx

@@ -1,23 +1,28 @@
 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<TPlatformContext>(PlatformContext);
     const message = localize('Your proof of identity is verified');
     if (!needs_poa) {
         return (
             <IconMessageContent
                 message={message}
                 icon={
                     is_appstore ? (
-                        <Icon icon='IcPoaVerifiedDashboard' height={128} width={237} />
+                        <Icon
+                            icon='IcPoaVerifiedDashboard'
+                            height={128}
+                            width={237}
+                            data_testid='dt_IcPoaVerifiedDashboard'
+                        />
                     ) : (
-                        <Icon icon='IcPoaVerified' size={128} />
+                        <Icon icon='IcPoaVerified' size={128} data_testid='dt_IcPoaVerified' />
                     )
                 }
                 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;

packages/account/src/Types/common-prop.type.ts

@@ -97,3 +97,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;
+};