From 4c481a74cf403d89dd97943e240fc1480dcce24c Mon Sep 17 00:00:00 2001
From: Hamid <hamid@re-work.dev>
Date: Tue, 27 Sep 2022 11:34:04 +0330
Subject: [PATCH] hamid/74066/migrate-shared-components-to-ts (#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>
---
 .../cashier-container/virtual/virtual.tsx     |  4 +-
 .../cashier-locked/cashier-locked.tsx         |  4 +-
 .../crypto-fiat-converter.tsx                 |  4 +-
 .../crypto-transactions-cancel-modal.tsx      |  4 +-
 .../crypto-transactions-history.tsx           |  4 +-
 .../crypto-transactions-renderer.tsx          |  4 +-
 .../crypto-transactions-status-modal.tsx      |  4 +-
 .../components/error-dialog/error-dialog.tsx  |  4 +-
 .../{error.spec.js => error.spec.tsx}         |  3 +-
 .../components/error/{error.jsx => error.tsx} | 40 +++++++++----
 .../cashier/src/components/error/index.js     |  3 -
 .../cashier/src/components/error/index.ts     |  3 +
 .../funds-protection/funds-protection.tsx     |  4 +-
 .../src/components/no-balance/no-balance.tsx  |  4 +-
 .../recent-transaction/recent-transaction.tsx |  4 +-
 ...s => resend-email-button-wrapper.spec.tsx} |  2 +-
 .../{index.js => index.ts}                    |  2 +-
 ...er.jsx => resend-email-button-wrapper.tsx} | 18 +++---
 .../{side-note.spec.js => side-note.spec.tsx} |  6 +-
 .../cashier/src/components/side-note/index.js |  3 -
 .../cashier/src/components/side-note/index.ts |  3 +
 .../{side-note.jsx => side-note.tsx}          | 59 +++++++++++++------
 ...e-note.spec.js => usdt-side-note.spec.tsx} |  0
 .../src/components/usdt-side-note/index.js    |  3 -
 .../src/components/usdt-side-note/index.ts    |  3 +
 ...{usdt-side-note.jsx => usdt-side-note.tsx} |  6 +-
 .../src/types/stores/root-store.types.ts      |  4 +-
 27 files changed, 123 insertions(+), 79 deletions(-)
 rename packages/cashier/src/components/error/__tests__/{error.spec.js => error.spec.tsx} (97%)
 rename packages/cashier/src/components/error/{error.jsx => error.tsx} (84%)
 delete mode 100644 packages/cashier/src/components/error/index.js
 create mode 100644 packages/cashier/src/components/error/index.ts
 rename packages/cashier/src/components/resend-email-button-wrapper/__tests__/{resend-email-button-wrapper.spec.js => resend-email-button-wrapper.spec.tsx} (95%)
 rename packages/cashier/src/components/resend-email-button-wrapper/{index.js => index.ts} (91%)
 rename packages/cashier/src/components/resend-email-button-wrapper/{resend-email-button-wrapper.jsx => resend-email-button-wrapper.tsx} (74%)
 rename packages/cashier/src/components/side-note/__tests__/{side-note.spec.js => side-note.spec.tsx} (75%)
 delete mode 100644 packages/cashier/src/components/side-note/index.js
 create mode 100644 packages/cashier/src/components/side-note/index.ts
 rename packages/cashier/src/components/side-note/{side-note.jsx => side-note.tsx} (61%)
 rename packages/cashier/src/components/usdt-side-note/__tests__/{usdt-side-note.spec.js => usdt-side-note.spec.tsx} (100%)
 delete mode 100644 packages/cashier/src/components/usdt-side-note/index.js
 create mode 100644 packages/cashier/src/components/usdt-side-note/index.ts
 rename packages/cashier/src/components/usdt-side-note/{usdt-side-note.jsx => usdt-side-note.tsx} (96%)

diff --git a/packages/cashier/src/components/cashier-container/virtual/virtual.tsx b/packages/cashier/src/components/cashier-container/virtual/virtual.tsx
index 1ec15974fac2..ac903c10066c 100644
--- a/packages/cashier/src/components/cashier-container/virtual/virtual.tsx
+++ b/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));
diff --git a/packages/cashier/src/components/cashier-locked/cashier-locked.tsx b/packages/cashier/src/components/cashier-locked/cashier-locked.tsx
index 806231bb3603..01f4b193b38f 100644
--- a/packages/cashier/src/components/cashier-locked/cashier-locked.tsx
+++ b/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,
diff --git a/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx b/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx
index fe2c7394af87..017d06270a8d 100644
--- a/packages/cashier/src/components/crypto-fiat-converter/crypto-fiat-converter.tsx
+++ b/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,
diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-cancel-modal.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-cancel-modal.tsx
index 773badbbd6e7..bd76cfa576f5 100644
--- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-cancel-modal.tsx
+++ b/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,
diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx
index 47c5a24fd6c4..66b312dbd8d1 100644
--- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-history.tsx
+++ b/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,
diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx
index d282b5444bbb..88af614491d5 100644
--- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-renderer.tsx
+++ b/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,
diff --git a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-status-modal.tsx b/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-status-modal.tsx
index 7cb3aa5fbc0e..c299ae10c408 100644
--- a/packages/cashier/src/components/crypto-transactions-history/crypto-transactions-status-modal.tsx
+++ b/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,
diff --git a/packages/cashier/src/components/error-dialog/error-dialog.tsx b/packages/cashier/src/components/error-dialog/error-dialog.tsx
index d30581334615..b8419cb429c7 100644
--- a/packages/cashier/src/components/error-dialog/error-dialog.tsx
+++ b/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);
diff --git a/packages/cashier/src/components/error/__tests__/error.spec.js b/packages/cashier/src/components/error/__tests__/error.spec.tsx
similarity index 97%
rename from packages/cashier/src/components/error/__tests__/error.spec.js
rename to packages/cashier/src/components/error/__tests__/error.spec.tsx
index c44e79e2c0bc..c07f8420fc67 100644
--- a/packages/cashier/src/components/error/__tests__/error.spec.js
+++ b/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}>
diff --git a/packages/cashier/src/components/error/error.jsx b/packages/cashier/src/components/error/error.tsx
similarity index 84%
rename from packages/cashier/src/components/error/error.jsx
rename to packages/cashier/src/components/error/error.tsx
index 5bbcc80ae37a..15f312a85105 100644
--- a/packages/cashier/src/components/error/error.jsx
+++ b/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;
diff --git a/packages/cashier/src/components/error/index.js b/packages/cashier/src/components/error/index.js
deleted file mode 100644
index 44f86e2b30ee..000000000000
--- a/packages/cashier/src/components/error/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Error from './error.jsx';
-
-export default Error;
diff --git a/packages/cashier/src/components/error/index.ts b/packages/cashier/src/components/error/index.ts
new file mode 100644
index 000000000000..882a0f2fb0a7
--- /dev/null
+++ b/packages/cashier/src/components/error/index.ts
@@ -0,0 +1,3 @@
+import Error from './error';
+
+export default Error;
diff --git a/packages/cashier/src/components/funds-protection/funds-protection.tsx b/packages/cashier/src/components/funds-protection/funds-protection.tsx
index 43c59cc12dca..7470280414e8 100644
--- a/packages/cashier/src/components/funds-protection/funds-protection.tsx
+++ b/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);
diff --git a/packages/cashier/src/components/no-balance/no-balance.tsx b/packages/cashier/src/components/no-balance/no-balance.tsx
index cc14972dad4f..b9be2e56d45d 100644
--- a/packages/cashier/src/components/no-balance/no-balance.tsx
+++ b/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,
diff --git a/packages/cashier/src/components/recent-transaction/recent-transaction.tsx b/packages/cashier/src/components/recent-transaction/recent-transaction.tsx
index 6fedbccfed3e..909b937e4914 100644
--- a/packages/cashier/src/components/recent-transaction/recent-transaction.tsx
+++ b/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,
diff --git a/packages/cashier/src/components/resend-email-button-wrapper/__tests__/resend-email-button-wrapper.spec.js b/packages/cashier/src/components/resend-email-button-wrapper/__tests__/resend-email-button-wrapper.spec.tsx
similarity index 95%
rename from packages/cashier/src/components/resend-email-button-wrapper/__tests__/resend-email-button-wrapper.spec.js
rename to packages/cashier/src/components/resend-email-button-wrapper/__tests__/resend-email-button-wrapper.spec.tsx
index 50f335d3b9c0..60677f609ea2 100644
--- a/packages/cashier/src/components/resend-email-button-wrapper/__tests__/resend-email-button-wrapper.spec.js
+++ b/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', () => {
diff --git a/packages/cashier/src/components/resend-email-button-wrapper/index.js b/packages/cashier/src/components/resend-email-button-wrapper/index.ts
similarity index 91%
rename from packages/cashier/src/components/resend-email-button-wrapper/index.js
rename to packages/cashier/src/components/resend-email-button-wrapper/index.ts
index e3af9c4d1a41..a434c00dc2e1 100644
--- a/packages/cashier/src/components/resend-email-button-wrapper/index.js
+++ b/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;
diff --git a/packages/cashier/src/components/resend-email-button-wrapper/resend-email-button-wrapper.jsx b/packages/cashier/src/components/resend-email-button-wrapper/resend-email-button-wrapper.tsx
similarity index 74%
rename from packages/cashier/src/components/resend-email-button-wrapper/resend-email-button-wrapper.jsx
rename to packages/cashier/src/components/resend-email-button-wrapper/resend-email-button-wrapper.tsx
index b8fb7f6a152a..b7af0537c0a3 100644
--- a/packages/cashier/src/components/resend-email-button-wrapper/resend-email-button-wrapper.jsx
+++ b/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,
diff --git a/packages/cashier/src/components/side-note/__tests__/side-note.spec.js b/packages/cashier/src/components/side-note/__tests__/side-note.spec.tsx
similarity index 75%
rename from packages/cashier/src/components/side-note/__tests__/side-note.spec.js
rename to packages/cashier/src/components/side-note/__tests__/side-note.spec.tsx
index 5821002a1b4b..8ad7b9f08032 100644
--- a/packages/cashier/src/components/side-note/__tests__/side-note.spec.js
+++ b/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();
     });
 });
diff --git a/packages/cashier/src/components/side-note/index.js b/packages/cashier/src/components/side-note/index.js
deleted file mode 100644
index 8d6b4de2f583..000000000000
--- a/packages/cashier/src/components/side-note/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import SideNote from './side-note.jsx';
-
-export default SideNote;
diff --git a/packages/cashier/src/components/side-note/index.ts b/packages/cashier/src/components/side-note/index.ts
new file mode 100644
index 000000000000..14616e45be1f
--- /dev/null
+++ b/packages/cashier/src/components/side-note/index.ts
@@ -0,0 +1,3 @@
+import SideNote from './side-note';
+
+export default SideNote;
diff --git a/packages/cashier/src/components/side-note/side-note.jsx b/packages/cashier/src/components/side-note/side-note.tsx
similarity index 61%
rename from packages/cashier/src/components/side-note/side-note.jsx
rename to packages/cashier/src/components/side-note/side-note.tsx
index e8c2e44a927f..c973b09c6191 100644
--- a/packages/cashier/src/components/side-note/side-note.jsx
+++ b/packages/cashier/src/components/side-note/side-note.tsx
@@ -1,13 +1,34 @@
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import React from 'react';
 import { DesktopWrapper, MobileWrapper, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 import { isMobile } from '@deriv/shared';
+import { TReactChildren, TSideNotesProps } from 'Types';
 import './side-note.scss';
 
-const SideNoteTitle = ({ children_length, side_notes_length, title }) => {
-    const length_of_notes = children_length || side_notes_length;
+type TSideNoteTitle = {
+    children_length?: number;
+    side_notes_length?: number;
+    title?: string | JSX.Element;
+};
+
+type TSideNoteBullet = {
+    children: TReactChildren;
+    id: number;
+};
+
+type TSideNoteProps = {
+    children?: TReactChildren[];
+    className?: string;
+    has_bullets?: boolean;
+    has_title?: boolean;
+    is_mobile?: boolean;
+    side_notes?: TSideNotesProps[];
+    title?: string | JSX.Element;
+};
+
+const SideNoteTitle = ({ children_length, side_notes_length, title }: TSideNoteTitle) => {
+    const length_of_notes = children_length || side_notes_length || 0;
 
     return (
         <Text className='side-note__title' weight='bold' as='p'>
@@ -17,14 +38,22 @@ const SideNoteTitle = ({ children_length, side_notes_length, title }) => {
     );
 };
 
-const SideNoteBullet = ({ children }) => (
-    <div className='side-note__bullet-wrapper'>
-        <div className='side-note__bullet' />
+const SideNoteBullet = ({ children, id }: TSideNoteBullet) => (
+    <div className='side-note__bullet-wrapper' data-testid={`dt_side_note_bullet_wrapper_${id}`}>
+        <div className='side-note__bullet' data-testid={`dt_side_note_bullet_${id}`} />
         <div>{children}</div>
     </div>
 );
 
-const SideNote = ({ children, className, has_bullets = true, has_title = true, is_mobile, side_notes, title }) => {
+const SideNote = ({
+    children,
+    className,
+    has_bullets = true,
+    has_title = true,
+    is_mobile,
+    side_notes,
+    title,
+}: TSideNoteProps) => {
     const Wrapper = is_mobile ? MobileWrapper : DesktopWrapper;
 
     return (
@@ -43,9 +72,11 @@ const SideNote = ({ children, className, has_bullets = true, has_title = true, i
                         {children && <>{children}</>}
 
                         {!children &&
-                            side_notes.map((note, i) =>
+                            side_notes?.map((note, i) =>
                                 has_bullets ? (
-                                    <SideNoteBullet key={i}>{note}</SideNoteBullet>
+                                    <SideNoteBullet id={i} key={i}>
+                                        {note}
+                                    </SideNoteBullet>
                                 ) : (
                                     <Text key={i} className='side-note__text' size='xxs' as='p'>
                                         {note}
@@ -59,14 +90,4 @@ const SideNote = ({ children, className, has_bullets = true, has_title = true, i
     );
 };
 
-SideNote.propTypes = {
-    children: PropTypes.any,
-    className: PropTypes.string,
-    has_bullets: PropTypes.bool,
-    has_title: PropTypes.bool,
-    is_mobile: PropTypes.bool,
-    side_notes: PropTypes.array,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-};
-
 export default SideNote;
diff --git a/packages/cashier/src/components/usdt-side-note/__tests__/usdt-side-note.spec.js b/packages/cashier/src/components/usdt-side-note/__tests__/usdt-side-note.spec.tsx
similarity index 100%
rename from packages/cashier/src/components/usdt-side-note/__tests__/usdt-side-note.spec.js
rename to packages/cashier/src/components/usdt-side-note/__tests__/usdt-side-note.spec.tsx
diff --git a/packages/cashier/src/components/usdt-side-note/index.js b/packages/cashier/src/components/usdt-side-note/index.js
deleted file mode 100644
index 7e41866b4036..000000000000
--- a/packages/cashier/src/components/usdt-side-note/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import USDTSideNote from './usdt-side-note.jsx';
-
-export default USDTSideNote;
diff --git a/packages/cashier/src/components/usdt-side-note/index.ts b/packages/cashier/src/components/usdt-side-note/index.ts
new file mode 100644
index 000000000000..c22317381df6
--- /dev/null
+++ b/packages/cashier/src/components/usdt-side-note/index.ts
@@ -0,0 +1,3 @@
+import USDTSideNote from './usdt-side-note';
+
+export default USDTSideNote;
diff --git a/packages/cashier/src/components/usdt-side-note/usdt-side-note.jsx b/packages/cashier/src/components/usdt-side-note/usdt-side-note.tsx
similarity index 96%
rename from packages/cashier/src/components/usdt-side-note/usdt-side-note.jsx
rename to packages/cashier/src/components/usdt-side-note/usdt-side-note.tsx
index cd4f06d2ab9e..58bc1b7e157f 100644
--- a/packages/cashier/src/components/usdt-side-note/usdt-side-note.jsx
+++ b/packages/cashier/src/components/usdt-side-note/usdt-side-note.tsx
@@ -3,7 +3,11 @@ import { Modal, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
 import './usdt-side-note.scss';
 
-const USDTSideNote = ({ type }) => {
+type TUSDTSideNoteProps = {
+    type: 'eusdt' | 'usdt';
+};
+
+const USDTSideNote = ({ type }: TUSDTSideNoteProps) => {
     const [is_modal_open, setModalOpen] = React.useState(false);
 
     const handleLearnMore = () => {
diff --git a/packages/cashier/src/types/stores/root-store.types.ts b/packages/cashier/src/types/stores/root-store.types.ts
index 323579fd932f..90d9c8315982 100644
--- a/packages/cashier/src/types/stores/root-store.types.ts
+++ b/packages/cashier/src/types/stores/root-store.types.ts
@@ -2,11 +2,9 @@ import { TClientStore } from './client-store.types';
 import { TCommonStore } from './common-store.types';
 import { TUiStore } from './ui-store.types';
 
-export type RootStore = {
+export type TRootStore = {
     client: TClientStore;
     common: TCommonStore;
     modules: any;
     ui: TUiStore;
 };
-
-export type TRootStore = RootStore;