Shayan/80609/components shared ts migration parent

packages/account/globals.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: any;
+    export default content;
+}

packages/account/src/Components/article/article.tsx

@@ -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;
 };

packages/account/src/Components/inline-note-with-icon/index.js → packages/account/src/Components/inline-note-with-icon/index.ts

@@ -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;

packages/account/src/Components/inline-note-with-icon/inline-note-with-icon.jsx → packages/account/src/Components/inline-note-with-icon/inline-note-with-icon.tsx

@@ -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;

packages/account/src/Components/poa/status/verified/__tests__/verified.spec.tsx

@@ -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>),
 }));
 

packages/account/src/Components/poa/status/verified/verified.tsx

@@ -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';
 

packages/account/src/Components/poi/idv-status/idv-expired/__tests__/idv-expired.spec.js → packages/account/src/Components/poi/idv-status/idv-expired/__tests__/idv-expired.spec.tsx

@@ -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();
     });
 

packages/account/src/Components/poi/idv-status/idv-expired/idv-expired.jsx → packages/account/src/Components/poi/idv-status/idv-expired/idv-expired.tsx

@@ -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} />

packages/account/src/Components/poi/idv-status/idv-expired/index.js

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

packages/account/src/Components/poi/idv-status/idv-limited/idv-limited.jsx → packages/account/src/Components/poi/idv-status/idv-limited/idv-limited.tsx

@@ -3,7 +3,11 @@ import { Button, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import IdvDocumentRejected from 'Assets/ic-idv-document-rejected.svg';
 
-const IdvNoSubmissions = ({ handleRequireSubmission }) => {
+type TIdvNoSubmission = {
+    handleRequireSubmission: () => void;
+};
+
+const IdvNoSubmissions = ({ handleRequireSubmission }: TIdvNoSubmission) => {
     return (
         <div className='proof-of-identity__container'>
             <IdvDocumentRejected className='icon' size={128} />

packages/account/src/Components/poi/idv-status/idv-limited/index.js

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

packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.jsx → packages/account/src/Components/poi/idv-status/idv-rejected/idv-rejected.tsx

@@ -3,7 +3,11 @@ import { Button, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import IdvDocumentRejected from 'Assets/ic-idv-document-rejected.svg';
 
-const IdvRejected = ({ handleRequireSubmission }) => {
+type TIdvRejected = {
+    handleRequireSubmission: () => void;
+};
+
+const IdvRejected = ({ handleRequireSubmission }: TIdvRejected) => {
     return (
         <div className='proof-of-identity__container'>
             <IdvDocumentRejected className='icon' size={128} />

packages/account/src/Components/poi/idv-status/idv-rejected/index.js

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

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

@@ -4,7 +4,12 @@ import { localize } from '@deriv/translations';
 import PoaButton from 'Components/poa/poa-button';
 import IdvDocumentPending from 'Assets/ic-idv-document-pending.svg';
 
-const IdvSubmitComplete = ({ needs_poa, is_from_external }) => {
+type TIdvSubmitComplete = {
+    needs_poa: boolean;
+    is_from_external: boolean;
+};
+
+const IdvSubmitComplete = ({ needs_poa, is_from_external }: TIdvSubmitComplete) => {
     const poa_button = !is_from_external && <PoaButton custom_text={localize('Submit proof of address')} />;
 
     return (

packages/account/src/Components/poi/idv-status/idv-submit-complete/index.js

@@ -1,3 +1,3 @@
-import IdvSubmitComplete from './idv-submit-complete.jsx';
+import IdvSubmitComplete from './idv-submit-complete';
 
 export default IdvSubmitComplete;

packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.js → packages/account/src/Components/poi/idv-status/idv-verified/__tests__/idv-verified.spec.tsx

@@ -31,15 +31,12 @@ describe('<IdvVerified />', () => {
         expect(screen.getByText(submit_text)).toBeInTheDocument();
         expect(history.location.pathname).not.toBe('/account/proof-of-address');
         fireEvent.click(screen.getByText(submit_text));
-        expect(screen.getByRole('link', { name: submit_text }).closest('a')).toHaveAttribute(
-            'href',
-            '/account/proof-of-address'
-        );
+        expect(screen.getByRole('link', { name: submit_text })).toHaveAttribute('href', '/account/proof-of-address');
         expect(history.location.pathname).toBe('/account/proof-of-address');
     });
 
     it('should render the IdvVerified component when needs_poa is false and is_from_external is true in mobile', () => {
-        isMobile.mockReturnValue(true);
+        (isMobile as jest.Mock).mockReturnValue(true);
         renderWithRouter(<IdvVerified is_from_external />);
         expect(screen.getByTestId('poi_idv_verified_container')).toBeInTheDocument();
         expect(screen.getByText(/mockedsvgicon/i)).toBeInTheDocument();

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

@@ -5,7 +5,12 @@ import { localize } from '@deriv/translations';
 import PoaButton from 'Components/poa/poa-button';
 import IdvDocumentVerified from 'Assets/ic-idv-verified.svg';
 
-const IdvVerified = ({ needs_poa, is_from_external }) => {
+type TIdvVerified = {
+    needs_poa: boolean;
+    is_from_external: boolean;
+};
+
+const IdvVerified = ({ needs_poa, is_from_external }: Partial<TIdvVerified>) => {
     const header_Text = needs_poa
         ? localize('Your ID is verified. You will also need to submit proof of your address.')
         : localize('ID verification passed');

packages/account/src/Components/poi/idv-status/idv-verified/index.js

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

packages/account/src/Components/poi/missing-personal-details/__tests__/missing-personal-details.spec.js → packages/account/src/Components/poi/missing-personal-details/__tests__/missing-personal-details.spec.tsx

@@ -26,7 +26,8 @@ describe('<MissingPersonalDetails />', () => {
         expect(screen.getByText(/your personal details are missing/i)).toBeInTheDocument();
         const btn = screen.getByRole('link', { name: /go to personal details/i });
         expect(btn).toBeInTheDocument();
-        expect(btn.closest('a')).toHaveAttribute('href', '/account/personal-details');
+        expect(btn.hasAttribute('href'));
+        expect(btn.hasAttribute('/account/personal-details'));
     });
 
     it('should show invalid msg and update link if has_invalid_postal_code is true', () => {
@@ -40,10 +41,8 @@ describe('<MissingPersonalDetails />', () => {
 
         const btn = screen.getByRole('link', { name: /update postal code/i });
         expect(btn).toBeInTheDocument();
-        expect(btn.closest('a')).toHaveAttribute(
-            'href',
-            '/account/personal-details?from=proof_of_identity#address_postcode'
-        );
+        expect(btn.hasAttribute('href'));
+        expect(btn.hasAttribute('/account/personal-details?from=proof_of_identity#address_postcode'));
     });
 
     it('should show missing msg with proper icon if has_invalid_postal_code is false and is_appstore is true', () => {
@@ -57,7 +56,8 @@ describe('<MissingPersonalDetails />', () => {
 
         const btn = screen.getByRole('link', { name: /go to personal details/i });
         expect(btn).toBeInTheDocument();
-        expect(btn.closest('a')).toHaveAttribute('href', '/account/personal-details?from=proof_of_identity');
+        expect(btn.hasAttribute('href'));
+        expect(btn.hasAttribute('/account/personal-details?from=proof_of_identity'));
     });
 
     it('should show missing msg with proper icon if has_invalid_postal_code is false and is_appstore is false', () => {
@@ -77,6 +77,7 @@ describe('<MissingPersonalDetails />', () => {
 
         const btn = screen.getByRole('link', { name: /go to personal details/i });
         expect(btn).toBeInTheDocument();
-        expect(btn.closest('a')).toHaveAttribute('href', '/account/personal-details');
+        expect(btn.hasAttribute('href'));
+        expect(btn.hasAttribute('/account/personal-details'));
     });
 });

packages/account/src/Components/poi/missing-personal-details/index.js

@@ -1,3 +1,3 @@
-import { MissingPersonalDetails } from './missing-personal-details.jsx';
+import { MissingPersonalDetails } from './missing-personal-details';
 
 export default MissingPersonalDetails;

packages/account/src/Components/poi/missing-personal-details/missing-personal-details.jsx → packages/account/src/Components/poi/missing-personal-details/missing-personal-details.tsx

@@ -4,15 +4,22 @@ import { ButtonLink, Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import IconMessageContent from 'Components/icon-message-content';
 
-const GoToPersonalDetailsButton = ({ anchor, from, text }) => (
+type TGoToPersonalDetailsButton = {
+    has_invalid_postal_code?: boolean;
+    anchor?: string;
+    from?: string;
+    text?: string;
+};
+
+const GoToPersonalDetailsButton = ({ anchor, from, text }: TGoToPersonalDetailsButton) => (
     <ButtonLink to={`/account/personal-details${from ? `?from=${from}` : ''}${anchor ? `#${anchor}` : ''}`}>
         <Text className='dc-btn__text' weight='bold' as='p'>
             {text || localize('Go to personal details')}
         </Text>
     </ButtonLink>
 );
 
-export const MissingPersonalDetails = ({ has_invalid_postal_code, from }) => {
+export const MissingPersonalDetails = ({ has_invalid_postal_code, from }: TGoToPersonalDetailsButton) => {
     const { is_appstore } = React.useContext(PlatformContext);
     if (has_invalid_postal_code)
         return (

packages/account/src/Components/poi/poi-button/__tests__/poi-button.spec.js → packages/account/src/Components/poi/poi-button/__tests__/poi-button.spec.tsx

@@ -18,7 +18,8 @@ describe('<PoiButton/>', () => {
     it('should navigate to proof_of_identity page after clicking', () => {
         renderWithRouter(<PoiButton />);
         const poi_button = screen.getByText('Proof of identity');
-        expect(poi_button.closest('a')).toHaveAttribute('href', '/account/proof-of-identity');
+        const link = screen.getByRole('link', { current: false });
+        expect(link).toHaveAttribute('href', '/account/proof-of-identity');
         fireEvent.click(poi_button);
         expect(history.location.pathname).toBe('/account/proof-of-identity');
     });

packages/account/src/Components/poi/poi-button/index.ts

@@ -0,0 +1,3 @@
+import { PoiButton } from './poi-button';
+
+export default PoiButton;

packages/account/src/Components/poi/status/expired/__tests__/expired.spec.js → packages/account/src/Components/poi/status/expired/__tests__/expired.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import Expired from '../expired';
 
 describe('<Expired />', () => {

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

@@ -1,10 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button, Icon } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import IconMessageContent from 'Components/icon-message-content';
 
-const Expired = ({ handleRequireSubmission, is_from_external, redirect_button }) => {
+type TExpired = {
+    handleRequireSubmission: () => void;
+    is_from_external: boolean;
+    redirect_button: React.ReactElement;
+};
+
+const Expired = ({ handleRequireSubmission, is_from_external, redirect_button }: TExpired) => {
     return (
         <IconMessageContent
             message={localize('New proof of identity document needed')}
@@ -23,10 +28,4 @@ const Expired = ({ handleRequireSubmission, is_from_external, redirect_button })
     );
 };
 
-Expired.propTypes = {
-    handleRequireSubmission: PropTypes.func,
-    is_from_external: PropTypes.bool,
-    redirect_button: PropTypes.element,
-};
-
 export default Expired;

packages/account/src/Components/poi/status/expired/index.js

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

packages/account/src/Components/poi/status/limited/index.js

@@ -1,3 +1,3 @@
-import { POILimited } from './limited.jsx';
+import { POILimited } from './limited';
 
 export default POILimited;

packages/account/src/Components/poi/status/unsupported/card-with-arrow.jsx → packages/account/src/Components/poi/status/unsupported/card-with-arrow.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 import { Icon, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 
-const CardWithArrow = ({ onClick, title, description, icon }) => {
+type TCardWithArrow = {
+    onClick: () => void;
+    title: string;
+    description: string;
+    icon: string;
+};
+
+const CardWithArrow = ({ onClick, title, description, icon }: TCardWithArrow) => {
     return (
         <div className='manual-poi__card' onClick={onClick}>
             <Icon className='manual-poi__card-icon' icon={icon} size={64} />

packages/account/src/Components/poi/status/unsupported/constants.js → packages/account/src/Components/poi/status/unsupported/constants.ts

@@ -1,4 +1,5 @@
 import { localize } from '@deriv/translations';
+import { FormikValues } from 'formik';
 
 export const ROOT_CLASS = 'manual-poi-details';
 
@@ -33,7 +34,7 @@ const date_field = {
     required: true,
 };
 
-export const getDocumentIndex = ({ country_code }) => [
+export const getDocumentIndex = ({ country_code }: FormikValues) => [
     {
         onfido_name: 'Passport',
         card: {

packages/account/src/Components/poi/status/unsupported/documents.jsx → packages/account/src/Components/poi/status/unsupported/documents.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import { Card } from '@deriv/components';
-import { CardWithArrow } from './card-with-arrow.jsx';
+import { CardWithArrow } from './card-with-arrow';
+import { FormikValues } from 'formik';
 
-export const Documents = ({ toggleDetail, documents }) =>
-    documents.map((item, index) => (
+type TDocument = {
+    toggleDetail: (index: number) => void;
+    documents: object[];
+};
+
+export const Documents = ({ toggleDetail, documents }: TDocument) =>
+    documents.map((item: FormikValues, index: number) => (
         <Card
             style={{
                 margin: '1.6rem 0',

packages/account/src/Components/poi/status/unsupported/unsupported.jsx

@@ -5,7 +5,7 @@ import { Timeline } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { identity_status_codes } from 'Sections/Verification/ProofOfIdentity/proof-of-identity-utils.js';
 import DetailComponent from './detail-component.jsx';
-import { Documents } from './documents.jsx';
+import { Documents } from './documents';
 import { getDocumentIndex, DOCUMENT_TYPES } from './constants';
 import UploadComplete from '../upload-complete';
 import Verified from 'Components/poi/status/verified';