Farzin/73307/TS migration of deposit related stores

packages/cashier/src/stores/__tests__/deposit-store.spec.js

@@ -46,7 +46,7 @@ describe('DepositStore', () => {
             send: jest.fn(() => Promise.resolve({})),
         };
 
-        deposit_store = new DepositStore({ root_store, WS });
+        deposit_store = new DepositStore(WS, root_store);
     });
 
     it('should mount deposit properly', async () => {

packages/cashier/src/stores/__tests__/iframe-store.spec.js

@@ -21,7 +21,7 @@ beforeEach(() => {
             is_mobile: false,
         },
     };
-    iframe_store = new IframeStore({ WS, root_store });
+    iframe_store = new IframeStore(root_store);
 });
 
 describe('IframeStore', () => {
@@ -39,7 +39,7 @@ describe('IframeStore', () => {
         iframe_store.removeOnIframeLoaded();
 
         expect(removeEventListener).toHaveBeenCalledWith('message', expect.any(Function), false);
-        expect(iframe_store.onIframeLoaded).toBe('');
+        expect(iframe_store.onIframeLoaded).toBe(null);
     });
 
     it('should clear timeout cashier url', () => {
@@ -108,7 +108,7 @@ describe('IframeStore', () => {
     it('should set proper iframe_height for desktop and mobile view', async () => {
         const spyRemoveOnIframeLoaded = jest.spyOn(iframe_store, 'removeOnIframeLoaded');
 
-        expect(iframe_store.onIframeLoaded).toBe('');
+        expect(iframe_store.onIframeLoaded).toBe(null);
 
         await iframe_store.checkIframeLoaded();
 

packages/cashier/src/stores/cashier-store.js

@@ -18,11 +18,11 @@ export default class CashierStore {
         this.account_prompt_dialog = new AccountPromptDialogStore(root_store);
         this.account_transfer = new AccountTransferStore({ root_store, WS });
         this.crypto_fiat_converter = new CryptoFiatConverterStore({ root_store, WS });
-        this.deposit = new DepositStore({ root_store, WS });
+        this.deposit = new DepositStore(WS, root_store);
         this.error_dialog = new ErrorDialogStore();
         this.error = new ErrorStore();
         this.general_store = new GeneralStore({ root_store, WS });
-        this.iframe = new IframeStore({ root_store, WS });
+        this.iframe = new IframeStore(root_store);
         this.onramp = new OnRampStore({ root_store, WS });
         this.payment_agent = new PaymentAgentStore({ root_store, WS });
         this.payment_agent_transfer = new PaymentAgentTransferStore({ root_store, WS });

packages/cashier/src/stores/deposit-store.js → packages/cashier/src/stores/deposit-store.ts

@@ -1,9 +1,10 @@
 import { action, computed, observable } from 'mobx';
 import Constants from 'Constants/constants';
 import ErrorStore from './error-store';
+import { TRootStore, TWebSocket } from 'Types';
 
 export default class DepositStore {
-    constructor({ WS, root_store }) {
+    constructor(public WS: TWebSocket, public root_store: TRootStore) {
         this.root_store = root_store;
         this.WS = WS;
     }
@@ -12,7 +13,7 @@ export default class DepositStore {
     @observable error = new ErrorStore();
 
     @action.bound
-    async onMountDeposit() {
+    async onMountDeposit(): Promise<void> {
         const { client, modules } = this.root_store;
         const { active_container, is_crypto, onMountCommon, setLoading, setOnRemount } = modules.cashier.general_store;
         const {
@@ -30,7 +31,7 @@ export default class DepositStore {
         setOnRemount(this.onMountDeposit);
         await onMountCommon();
 
-        this.error.setErrorMessage('');
+        this.error.setErrorMessage({ code: '', message: '' }, null, false);
         setContainerHeight(0);
         setLoading(true);
 
@@ -78,7 +79,7 @@ export default class DepositStore {
     }
 
     @computed
-    get is_deposit_locked() {
+    get is_deposit_locked(): boolean {
         const {
             is_authentication_needed,
             is_tnc_needed,
@@ -113,7 +114,7 @@ export default class DepositStore {
     }
 
     @action.bound
-    submitFundsProtection() {
+    submitFundsProtection(): void {
         this.WS.send({ ukgc_funds_protection: 1, tnc_approval: 1 }).then(response => {
             if (response.error) {
                 this.error.setMessage(response.error.message);

packages/cashier/src/stores/error-store.js → packages/cashier/src/stores/error-store.ts

@@ -1,27 +1,28 @@
 import { action, observable } from 'mobx';
 import { getPropertyValue } from '@deriv/shared';
+import { TServerError } from 'Types';
 
 export default class ErrorStore {
     @observable message = '';
     @observable code = '';
     @observable fields = '';
     @observable is_show_full_page = false;
-    @observable onClickButton = null;
+    @observable onClickButton: VoidFunction | null = null;
     @observable is_ask_uk_funds_protection = false;
     @observable is_self_exclusion_max_turnover_set = false;
     @observable is_ask_authentication = false;
     @observable is_ask_financial_risk_approval = false;
 
     @action.bound
-    setErrorMessage(error, onClickButton, is_show_full_page) {
+    setErrorMessage(error: TServerError, onClickButton?: VoidFunction | null, is_show_full_page?: boolean): void {
         // for errors that need to show a button, reset the form
         const error_object = {
             onClickButton,
             code: error.code,
             message: error.message,
             is_show_full_page: is_show_full_page || /InvalidToken|WrongResponse/.test(error.code),
             ...(getPropertyValue(error, ['details', 'fields']) && {
-                fields: error.details.fields,
+                fields: error.details?.fields,
             }),
         };
 
@@ -37,7 +38,7 @@ export default class ErrorStore {
     }
 
     @action.bound
-    handleCashierError(error) {
+    handleCashierError(error: TServerError): void {
         switch (error.code) {
             case 'ASK_TNC_APPROVAL':
                 this.setErrorMessage(error, null, true);
@@ -68,27 +69,27 @@ export default class ErrorStore {
     }
 
     @action.bound
-    setMessage(value) {
+    setMessage(value: string): void {
         this.message = value;
     }
 
     @action.bound
-    setIsAskUkFundsProtection(value) {
+    setIsAskUkFundsProtection(value: boolean): void {
         this.is_ask_uk_funds_protection = value;
     }
 
     @action.bound
-    setIsSelfExclusionMaxTurnoverSet(value) {
+    setIsSelfExclusionMaxTurnoverSet(value: boolean): void {
         this.is_self_exclusion_max_turnover_set = value;
     }
 
     @action.bound
-    setIsAskAuthentication(value) {
+    setIsAskAuthentication(value: boolean): void {
         this.is_ask_authentication = value;
     }
 
     @action.bound
-    setIsAskFinancialRiskApproval(value) {
+    setIsAskFinancialRiskApproval(value: boolean): void {
         this.is_ask_financial_risk_approval = value;
     }
 }

packages/cashier/src/stores/iframe-store.js → packages/cashier/src/stores/iframe-store.ts

@@ -1,33 +1,34 @@
 import { action, observable } from 'mobx';
 import Constants from 'Constants/constants';
+import { TRootStore } from 'Types';
+
+type TOnIframeLoadedCallback = (ev: MessageEvent) => void;
 
 export default class IframeStore {
-    constructor({ WS, root_store }) {
+    constructor(public root_store: TRootStore) {
         this.root_store = root_store;
-        this.WS = WS;
     }
 
     @observable iframe_height = 0;
     @observable iframe_url = '';
     @observable is_session_timeout = true;
-
-    onIframeLoaded = '';
-    @observable timeout_session = '';
+    onIframeLoaded: TOnIframeLoadedCallback | null = null;
+    @observable timeout_session: NodeJS.Timeout | null = null;
 
     @action.bound
-    setSessionTimeout(is_session_time_out) {
+    setSessionTimeout(is_session_time_out: boolean): void {
         this.is_session_timeout = is_session_time_out;
         if (is_session_time_out) {
             this.removeOnIframeLoaded();
         }
     }
 
     @action.bound
-    async checkIframeLoaded() {
+    async checkIframeLoaded(): Promise<void> {
         const { modules, ui } = this.root_store;
 
         this.removeOnIframeLoaded();
-        this.onIframeLoaded = function (e) {
+        this.onIframeLoaded = (e: MessageEvent) => {
             if (/cashier|doughflow/.test(e.origin)) {
                 modules.cashier.general_store.setLoading(false);
                 // set the height of the container after content loads so that the
@@ -40,52 +41,59 @@ export default class IframeStore {
                 // do not remove the listener
                 // on every iframe screen change we need to update the height to more/less to match the new content
             }
-        }.bind(this);
+        };
         window.addEventListener('message', this.onIframeLoaded, false);
     }
 
-    removeOnIframeLoaded() {
+    removeOnIframeLoaded(): void {
         if (this.onIframeLoaded) {
             window.removeEventListener('message', this.onIframeLoaded, false);
-            this.onIframeLoaded = '';
+            this.onIframeLoaded = null;
         }
     }
 
     @action.bound
-    clearTimeoutCashierUrl() {
+    clearTimeoutCashierUrl(): void {
         if (this.timeout_session) {
             clearTimeout(this.timeout_session);
         }
     }
 
     @action.bound
-    setTimeoutCashierUrl() {
+    setTimeoutCashierUrl(): void {
         this.clearTimeoutCashierUrl();
         this.timeout_session = setTimeout(() => {
             this.setSessionTimeout(true);
         }, 60000);
     }
 
     @action.bound
-    setIframeUrl(url, container = this.root_store.modules.cashier.general_store.active_container) {
+    setIframeUrl(url: string): void {
         const { client, ui } = this.root_store;
 
         if (url) {
             this.iframe_url = `${url}&theme=${ui.is_dark_mode_on ? 'dark' : 'light'}`;
-            // after we set iframe url we can clear verification code
-            client.setVerificationCode('', Constants.map_action[container]);
+
+            const container = this.root_store.modules.cashier.general_store.active_container;
+
+            if (container in Constants.map_action) {
+                const container_key = container as keyof typeof Constants.map_action;
+
+                // after we set iframe url we can clear verification code
+                client.setVerificationCode('', Constants.map_action[container_key]);
+            }
         } else {
             this.iframe_url = url;
         }
     }
 
     @action.bound
-    setContainerHeight(height) {
+    setContainerHeight(height: number): void {
         this.iframe_height = height;
     }
 
     @action.bound
-    clearIframe() {
+    clearIframe(): void {
         this.setContainerHeight(0);
         this.setIframeUrl('');
         this.clearTimeoutCashierUrl();

packages/cashier/src/types/shared/websocket.types.ts

@@ -3,3 +3,12 @@ export type TServerError = {
     message: string;
     details?: { [key: string]: string };
 };
+
+type TWebSocketCall = {
+    cashier: (action: any, parameters: any) => Promise<any>;
+};
+
+export type TWebSocket = {
+    send: (obj: any) => Promise<any>;
+    authorized: TWebSocketCall;
+};

packages/cashier/src/types/stores/client-store.types.ts

@@ -56,4 +56,13 @@ export type TClientStore = {
         trading_platform_dxtrade_password_reset: string;
         trading_platform_mt5_password_reset: string;
     };
+    setVerificationCode: (code: string, action: string) => void;
+    updateAccountStatus: () => Promise<void>;
+    mt5_login_list: DetailsOfEachMT5Loginid[];
+    is_authentication_needed: boolean;
+    is_tnc_needed: boolean;
+    is_financial_account: boolean;
+    is_financial_information_incomplete: boolean;
+    is_trading_experience_incomplete: boolean;
+    is_eu: boolean;
 };

packages/cashier/src/types/stores/root-store.types.ts

@@ -1,10 +1,13 @@
 import { TClientStore } from './client-store.types';
 import { TCommonStore } from './common-store.types';
 import { TUiStore } from './ui-store.types';
+import CashierStore from '../../stores/cashier-store';
 
 export type TRootStore = {
     client: TClientStore;
     common: TCommonStore;
-    modules: any;
+    modules: {
+        cashier: CashierStore;
+    };
     ui: TUiStore;
 };

packages/cashier/tsconfig.json

@@ -15,5 +15,5 @@
         "outDir": "./dist",
         "baseUrl": "./"
     },
-    "include": ["src", "globals.d.ts"]
+    "include": ["src"]
 }