hamid/74066/migrate-shared-components-to-ts (binary-com#6342)

* Migrate Error to TS

* Migrate ResendEmailButtonWrapper to TS

* Migrate SideNote to TS

* Migrate USDTSideNote to TS

* Fix typo

* Rename RootStore to TRootStore

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

packages/cashier/src/components/cashier-container/virtual/virtual.tsx

@@ -6,7 +6,7 @@ import { Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 import './virtual.scss';
 
 type TVirtualProps = RouteComponentProps & {
@@ -51,7 +51,7 @@ const Virtual = ({ is_dark_mode_on, toggleAccountsDialog }: TVirtualProps) => {
     );
 };
 
-export default connect(({ ui }: RootStore) => ({
+export default connect(({ ui }: TRootStore) => ({
     is_dark_mode_on: ui.is_dark_mode_on,
     toggleAccountsDialog: ui.toggleAccountsDialog,
 }))(withRouter(Virtual));

packages/cashier/src/components/cashier-locked/cashier-locked.tsx

@@ -4,7 +4,7 @@ import { Icon, Text } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { formatDate } from '@deriv/shared';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 
 type TAccount = NonNullable<Authorize['account_list']>[0];
 
@@ -292,7 +292,7 @@ const CashierLocked = ({
     );
 };
 
-export default connect(({ client, modules }: RootStore) => ({
+export default connect(({ client, modules }: TRootStore) => ({
     account_status: client.account_status,
     accounts: client.accounts,
     current_currency_type: client.current_currency_type,

packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx

@@ -4,7 +4,7 @@ import { DesktopWrapper, Input, Icon, MobileWrapper, Text, useInterval } from '@
 import { getCurrencyDisplayCode } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore, TReactChangeEvent, TReactChildren } from 'Types';
+import { TRootStore, TReactChangeEvent, TReactChildren } from 'Types';
 import './crypto-fiat-converter.scss';
 
 type TTimerProps = {
@@ -170,7 +170,7 @@ const CryptoFiatConverter = ({
     );
 };
 
-export default connect(({ modules }: RootStore) => ({
+export default connect(({ modules }: TRootStore) => ({
     converter_from_amount: modules.cashier.crypto_fiat_converter.converter_from_amount,
     converter_from_error: modules.cashier.crypto_fiat_converter.converter_from_error,
     converter_to_error: modules.cashier.crypto_fiat_converter.converter_to_error,

packages/cashier/src/components/crypto-transactions-history/crypto-transactions-cancel-modal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Modal } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 
 type TCryptoTransactionsCancelModalProps = {
     cancelCryptoTransaction: (selected_crypto_transaction_id: string) => void;
@@ -45,7 +45,7 @@ const CryptoTransactionsCancelModal = ({
     );
 };
 
-export default connect(({ modules }: RootStore) => ({
+export default connect(({ modules }: TRootStore) => ({
     cancelCryptoTransaction: modules.cashier.transaction_history.cancelCryptoTransaction,
     hideCryptoTransactionsCancelModal: modules.cashier.transaction_history.hideCryptoTransactionsCancelModal,
     is_cancel_modal_visible: modules.cashier.transaction_history.is_crypto_transactions_cancel_modal_visible,

packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx

@@ -3,7 +3,7 @@ import { DataList, Icon, Loading, MobileWrapper, Table, Text } from '@deriv/comp
 import { isDesktop, isMobile, routes } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore, TCryptoTransactionDetails } from 'Types';
+import { TRootStore, TCryptoTransactionDetails } from 'Types';
 import CryptoTransactionsCancelModal from './crypto-transactions-cancel-modal';
 import CryptoTransactionsStatusModal from './crypto-transactions-status-modal';
 import CryptoTransactionsRenderer from './crypto-transactions-renderer';
@@ -102,7 +102,7 @@ const CryptoTransactionsHistory = ({
     );
 };
 
-export default connect(({ client, modules }: RootStore) => ({
+export default connect(({ client, modules }: TRootStore) => ({
     crypto_transactions: modules.cashier.transaction_history.crypto_transactions,
     currency: client.currency,
     is_loading: modules.cashier.transaction_history.is_loading,

packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx

@@ -5,7 +5,7 @@ import { epochToMoment, formatMoney, isMobile } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { getStatus } from 'Constants/transaction-status';
 import { connect } from 'Stores/connect';
-import { RootStore, TCryptoTransactionDetails } from 'Types';
+import { TRootStore, TCryptoTransactionDetails } from 'Types';
 
 type TCryptoTransactionsRendererProps = {
     row: TCryptoTransactionDetails;
@@ -304,7 +304,7 @@ const CryptoTransactionsRenderer = ({
     );
 };
 
-export default connect(({ client, modules }: RootStore) => ({
+export default connect(({ client, modules }: TRootStore) => ({
     currency: client.currency,
     cancelCryptoTransaction: modules.cashier.transaction_history.cancelCryptoTransaction,
     showCryptoTransactionsCancelModal: modules.cashier.transaction_history.showCryptoTransactionsCancelModal,

packages/cashier/src/components/crypto-transactions-history/crypto-transactions-status-modal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Modal } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { TReactMouseEvent, RootStore } from 'Types';
+import { TReactMouseEvent, TRootStore } from 'Types';
 
 type TCryptoTransactionsStatusModalProps = {
     hideCryptoTransactionsStatusModal: (e: TReactMouseEvent) => void;
@@ -34,7 +34,7 @@ const CryptoTransactionsStatusModal = ({
     );
 };
 
-export default connect(({ modules }: RootStore) => ({
+export default connect(({ modules }: TRootStore) => ({
     hideCryptoTransactionsStatusModal: modules.cashier.transaction_history.hideCryptoTransactionsStatusModal,
     is_status_modal_visible: modules.cashier.transaction_history.is_crypto_transactions_status_modal_visible,
     selected_crypto_status: modules.cashier.transaction_history.selected_crypto_status,

packages/cashier/src/components/error-dialog/error-dialog.tsx

@@ -4,7 +4,7 @@ import { Dialog } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { routes } from '@deriv/shared';
 import { connect } from 'Stores/connect';
-import { RootStore, TError, TReactElement } from 'Types';
+import { TRootStore, TError, TReactElement } from 'Types';
 
 type TErrorDialogProps = {
     disableApp: () => void;
@@ -148,7 +148,7 @@ const ErrorDialog = ({ disableApp, enableApp, error = {} }: TErrorDialogProps) =
     );
 };
 
-export default connect(({ ui }: RootStore) => ({
+export default connect(({ ui }: TRootStore) => ({
     disableApp: ui.disableApp,
     enableApp: ui.enableApp,
 }))(ErrorDialog);

packages/cashier/src/components/error/__tests__/error.spec.js → packages/cashier/src/components/error/__tests__/error.spec.tsx

@@ -62,13 +62,14 @@ describe('<Error />', () => {
     });
 
     it('should clear an error.message if one of the buttons ["Resend email", "Update my details", "Try again"] was clicked', () => {
-        let checkButton = (btn_name, error_code) => {
+        const checkButton = (btn_name, error_code) => {
             const history = createBrowserHistory();
             const error = {
                 code: error_code,
                 setErrorMessage(value) {
                     this.message = value;
                 },
+                message: '',
             };
             const { unmount } = render(
                 <Router history={history}>

packages/cashier/src/components/error/error.jsx → packages/cashier/src/components/error/error.tsx

@@ -1,11 +1,33 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Button, Icon, ButtonLink, StaticUrl, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import './error.scss';
 
-const ErrorComponent = ({ header, message, button_link, onClickButton, button_text, footer }) => (
+type TErrorComponentProps = {
+    button_link?: string;
+    button_text?: string;
+    footer?: JSX.Element;
+    header?: JSX.Element | string;
+    message?: JSX.Element;
+    onClickButton?: () => void;
+};
+
+type TErrorFields = {
+    [k: string]: string;
+};
+
+type TErrorProps = {
+    error: {
+        onClickButton?: () => void;
+        setErrorMessage?: (message: string) => void;
+        message?: JSX.Element | string;
+        code?: string;
+        fields?: string[];
+    };
+};
+
+const ErrorComponent = ({ header, message, button_link, onClickButton, button_text, footer }: TErrorComponentProps) => (
     <div className='cashier__wrapper cashier__wrapper-error'>
         <Icon icon='IcCashierError' className='error__icon' />
         {header && (
@@ -34,8 +56,8 @@ const ErrorComponent = ({ header, message, button_link, onClickButton, button_te
     </div>
 );
 
-const Error = ({ error }) => {
-    const error_fields = {
+const Error = ({ error }: TErrorProps) => {
+    const error_fields: TErrorFields = {
         address_city: localize('Town/City'),
         address_line_1: localize('First line of home address'),
         address_postcode: localize('Postal Code/ZIP'),
@@ -53,7 +75,7 @@ const Error = ({ error }) => {
     };
 
     const clearErrorMessage = () => {
-        error.setErrorMessage('');
+        error.setErrorMessage?.('');
     };
 
     let AccountError;
@@ -86,7 +108,9 @@ const Error = ({ error }) => {
                                 <Localize
                                     i18n_default_text={'Please update your {{details}} to continue.'}
                                     values={{
-                                        details: error.fields.map(field => error_fields[field] || field).join(', '),
+                                        details: error.fields
+                                            .map((field: string) => error_fields[field] || field)
+                                            .join(', '),
                                         interpolation: { escapeValue: false },
                                     }}
                                 />
@@ -126,8 +150,4 @@ const Error = ({ error }) => {
     return AccountError;
 };
 
-Error.propTypes = {
-    error: PropTypes.object,
-};
-
 export default Error;

packages/cashier/src/components/error/index.ts

@@ -0,0 +1,3 @@
+import Error from './error';
+
+export default Error;

packages/cashier/src/components/funds-protection/funds-protection.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Icon, Button, Text } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 import './funds-protection.scss';
 
 type TFundsProtectionProps = {
@@ -40,6 +40,6 @@ const FundsProtection = ({ submitFundsProtection }: TFundsProtectionProps) => {
     );
 };
 
-export default connect(({ modules }: RootStore) => ({
+export default connect(({ modules }: TRootStore) => ({
     submitFundsProtection: modules.cashier.deposit.submitFundsProtection,
 }))(FundsProtection);

packages/cashier/src/components/no-balance/no-balance.tsx

@@ -4,7 +4,7 @@ import { Button, Icon, Text } from '@deriv/components';
 import { routes, getCurrencyDisplayCode } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 
 type TNoBalanceProps = RouteComponentProps & {
     currency: string;
@@ -48,7 +48,7 @@ const NoBalance = ({ currency, history, is_deposit_locked, setTabIndex }: TNoBal
 };
 
 export default withRouter(
-    connect(({ client, modules }: RootStore) => ({
+    connect(({ client, modules }: TRootStore) => ({
         currency: client.currency,
         is_deposit_locked: modules.cashier.deposit.is_deposit_locked,
         setTabIndex: modules.cashier.general_store.setCashierTabIndex,

packages/cashier/src/components/recent-transaction/recent-transaction.tsx

@@ -4,7 +4,7 @@ import { ButtonLink, Text, Icon } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 import { epochToMoment } from '@deriv/shared';
 import { connect } from 'Stores/connect';
-import { RootStore } from 'Types';
+import { TRootStore } from 'Types';
 import { getStatus } from 'Constants/transaction-status';
 import './recent-transaction.scss';
 
@@ -132,7 +132,7 @@ const RecentTransaction = ({
     );
 };
 
-export default connect(({ modules, client }: RootStore) => ({
+export default connect(({ modules, client }: TRootStore) => ({
     crypto_transactions: modules.cashier.transaction_history.crypto_transactions,
     currency: client.currency,
     onMount: modules.cashier.transaction_history.onMount,

packages/cashier/src/components/resend-email-button-wrapper/__tests__/resend-email-button-wrapper.spec.js → packages/cashier/src/components/resend-email-button-wrapper/__tests__/resend-email-button-wrapper.spec.tsx

@@ -26,7 +26,7 @@ describe('<ResendEmailButtonWrapper/>', () => {
     it('Resend button should not be disabled when resend_timeout is greater then 60', () => {
         render(<ResendEmailButtonWrapper resend_timeout={70} resendVerificationEmail={resendVerificationEmail} />);
 
-        expect(screen.getByRole('button')).not.toBeDisabled();
+        expect(screen.getByRole('button')).toBeEnabled();
     });
 
     it('resendVerificationEmail function to be called when resend button is called', () => {

packages/cashier/src/components/resend-email-button-wrapper/index.js → packages/cashier/src/components/resend-email-button-wrapper/index.ts

@@ -1,3 +1,3 @@
-import ResendEmailButtonWrapper from './resend-email-button-wrapper.jsx';
+import ResendEmailButtonWrapper from './resend-email-button-wrapper';
 
 export default ResendEmailButtonWrapper;

packages/cashier/src/components/resend-email-button-wrapper/resend-email-button-wrapper.jsx → packages/cashier/src/components/resend-email-button-wrapper/resend-email-button-wrapper.tsx

@@ -1,10 +1,16 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Button } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
+import { TRootStore } from 'Types';
 
-const ResendEmailButtonWrapper = ({ resend_timeout, resendVerificationEmail }) => (
+type TResetEmailButtonWrapperProps = {
+    is_withdrawal: boolean;
+    resend_timeout: number;
+    resendVerificationEmail: () => void;
+};
+
+const ResendEmailButtonWrapper = ({ resend_timeout, resendVerificationEmail }: TResetEmailButtonWrapperProps) => (
     <Button
         className='verification-email__resend-button'
         classNameSpan='verification-email__resend-button-text'
@@ -23,13 +29,7 @@ const ResendEmailButtonWrapper = ({ resend_timeout, resendVerificationEmail }) =
     />
 );
 
-ResendEmailButtonWrapper.propTypes = {
-    is_withdrawal: PropTypes.bool,
-    resend_timeout: PropTypes.number,
-    resendVerificationEmail: PropTypes.func,
-};
-
-export default connect(({ modules }, props) => ({
+export default connect(({ modules }: TRootStore, props: TResetEmailButtonWrapperProps) => ({
     resend_timeout: props.is_withdrawal
         ? modules.cashier.withdraw.verification.resend_timeout
         : modules.cashier.payment_agent.verification.resend_timeout,

packages/cashier/src/components/side-note/__tests__/side-note.spec.js → packages/cashier/src/components/side-note/__tests__/side-note.spec.tsx

@@ -18,9 +18,9 @@ describe('<SideNote />', () => {
     });
 
     it('should show side note bullet dots when "has_bullets=true"', () => {
-        const { container } = render(<SideNote {...props} has_bullets />);
+        render(<SideNote {...props} has_bullets />);
 
-        expect(container.querySelector('.side-note__bullet-wrapper')).not.toBeNull();
-        expect(container.querySelector('.side-note__bullet')).not.toBeNull();
+        expect(screen.getByTestId('dt_side_note_bullet_wrapper_0')).toBeInTheDocument();
+        expect(screen.getByTestId('dt_side_note_bullet_0')).toBeInTheDocument();
     });
 });

packages/cashier/src/components/side-note/index.ts

@@ -0,0 +1,3 @@
+import SideNote from './side-note';
+
+export default SideNote;