Farzin/85472/R&D/Remove CashierStore initialization from core packa…

…ge (binary-com#7278) * refactor(cashier): 🔥 remove `mobx-react-lite` from `cashier` * refactor(cashier): ♻️ replace `connect` with `useStore` for remaining components * refactor(cashier): ♻️ fix test files to use `StoreProvider` * refactor(cashier): 🔥 remove `connect` from `cashier` * refactor(cashier): 🔥 remove extra store related types from `cashier` * fix(stores): 🐛 stop persisting the stores when store is unmount * feat(cashier): ✨ add `useCashierStore` hook * refactor(cashier): ♻️ replace `modules.cashier` with `useCashierStore` hook * refactor(cashier): ♻️ remove `useStore` hook return type override * fix(cashier): 📝 resolve PR conflicts * test(cashier): ✅ fix the tests * chore(cashier): 🚚 rename `cashier_providers.tsx` to `cashier-providers.tsx` * Shayan/52349/react17 migration (binary-com#6908) * refactor: react version is upgraded to version 17 * fix: fixed typo * fix: changed declaration file location * fix: temporarily commented our two test cases that are failing * fix: fixed react-content-loader props * fix: fixed some bugs * fix: fixed z-index issue for popover in DBot page * fix: fixed popover position issue in DBot page * chore: an small change on how to turn string to array * fix: merge upstream develop into my branch and resolved conflicts * fix: resolved pr comments * fix: removed rc-drawer and refactored mobile drawer * fix: fixed test cases * fix: resolved pr comments * fix: resolved pr comment * fix: fixed typo * fix: resolved pr comments * fix: fixed slide-in component bug * fix: resolved pr comments * fix: resolved pr comments * fix: removed unnecessary lines * fix: resolved pr comments * Update packages/account/src/Components/personal-details/__tests__/personal-details.spec.js Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> * Update packages/account/src/Components/personal-details/__tests__/personal-details.spec.js Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> * Update packages/account/src/Components/personal-details/personal-details.jsx Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> * fix: fixed mt5 modal not appear on screen when clicking on trade button * fix: fixed Bug #84787 Co-authored-by: Shayan Khaleghparast <100833613+iman-fs@users.noreply.github.com> Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> * test(cashier): ✅ fix the tests * test(cashier): ✅ fix the tests * fix: add optional chaining in getMinDuration function (binary-com#7344) * fix: 🐛 resolved issue with trade. odal (binary-com#7291) * feat(api): 🧑‍💻 improve `@deriv/api` typings * chore(cashier): ✏️ fix React 17 type issue with `PropsWithChildren` * Revert "fix: 🐛 resolved issue with trade. odal (binary-com#7291)" (binary-com#7364) This reverts commit b6f7e4c. * Farzin/85054/Call `resetWithrawForm` on `CryptoWithdrawForm` component `onunmount` (binary-com#7331) * fix(cashier): 🐛 call `resetWithrawForm` on `CryptoWithdrawForm` component `onunmount` * test(cashier): ✅ fix failing test Co-authored-by: Farzin Mirzaie <farzin@deriv.com> * Niloofar Sadeghi / Task - Refactor tests in the language.spec.js file (binary-com#7325) * refactor: language tests * fix: typo Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech> * refactor: proposal tests (binary-com#7327) Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech> * Niloofar Sadeghi / Task - Refactor tests in the error.spec.js file (binary-com#7324) * refactor: errors validator tests * fix: typo Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech> * Niloofar Sadeghi / Task - Refactor tests in the binary-link.spec.tsx file (binary-com#7288) * refactor: binary-link tests * refactor: improve testids namings Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech> * refactor: money tests (binary-com#7353) * refactor: toggle-positions tests (binary-com#7287) Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech> * refactor: toggle-button tests (binary-com#7328) Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech> * Niloofar Sadeghi / Task - Refactor tests in the toggle-button-group.spec.tsx file (binary-com#7330) * refactor: toggle-button-group tests * fix: test issue Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech> * refactor: open-positions-table tests (binary-com#7374) * Niloofar Sadeghi / Task - Refactor tests in the marker-spot-label.spec.tsx file (binary-com#7355) * refactor: remove extra files from reports * refactor: marker-spot-label tests * Niloofar Sadeghi / Task - Refactor tests in the binary-link.spec.tsx file (binary-com#7286) * refactor: binary-link tests * test: added more tests Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech> * Niloofar Sadeghi / Task - Refactor tests in the contract-type-dialog.spec.tsx file (binary-com#7285) * refactor: contract-type-dialog tests * test: added more tests * fix: circle/ci issue Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech> * Niloofar Sadeghi / Task - Refactor tests in the platform-dropdown.spec.tsx file (binary-com#7282) * refactor: platform-dropdown tests * refactor: improve testids namings Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech> Co-authored-by: Farzin Mirzaie <farzin@deriv.com> Co-authored-by: Shayan Khaleghparast <100833613+shayan-deriv@users.noreply.github.com> Co-authored-by: Shayan Khaleghparast <100833613+iman-fs@users.noreply.github.com> Co-authored-by: Niloofar Sadeghi <93518187+niloo-fs@users.noreply.github.com> Co-authored-by: kate-deriv <121025168+kate-deriv@users.noreply.github.com> Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com> Co-authored-by: Farrah Mae Ochoa <farrah@deriv.com> Co-authored-by: Matin shafiei <matin@deriv.com> Co-authored-by: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com> Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>
carolsachdeva · Feb 9, 2023 · 64889f5 · 64889f5
1 parent dd624f1
commit 64889f5
Show file tree

Hide file tree

Showing 96 changed files with 503 additions and 487 deletions.
diff --git a/packages/api/src/useSubscription.ts b/packages/api/src/useSubscription.ts
@@ -1,6 +1,6 @@
-import { TSocketRequestProps, TSocketResponseData, TSocketSubscribableEndpointNames } from '../types';
-import { useWS as useWSShared } from '@deriv/shared';
 import { useState } from 'react';
+import { useWS as useWSShared } from '@deriv/shared';
+import { TSocketSubscribableEndpointNames, TSocketAcceptableProps, TSocketResponseData } from '../types';
 
 const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) => {
     const [is_loading, setIsLoading] = useState(false);
@@ -22,7 +22,7 @@ const useSubscription = <T extends TSocketSubscribableEndpointNames>(name: T) =>
         setIsLoading(false);
     };
 
-    const subscribe = (...props: TSocketRequestProps<T> extends never ? [undefined?] : [TSocketRequestProps<T>]) => {
+    const subscribe = (...props: TSocketAcceptableProps<T>) => {
         setIsLoading(true);
         setSubscribed(true);
 

diff --git a/packages/api/src/useWS.ts b/packages/api/src/useWS.ts
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import { useWS as useWSShared } from '@deriv/shared';
-import { TSocketEndpointNames, TSocketRequestProps, TSocketResponseData } from '../types';
+import { TSocketEndpointNames, TSocketAcceptableProps, TSocketResponseData } from '../types';
 
 const useWS = <T extends TSocketEndpointNames>(name: T) => {
     const [is_loading, setIsLoading] = useState(false);
@@ -9,7 +9,7 @@ const useWS = <T extends TSocketEndpointNames>(name: T) => {
     const WS = useWSShared();
 
     const send = useCallback(
-        async (...props: TSocketRequestProps<T> extends never ? [undefined?] : [TSocketRequestProps<T>]) => {
+        async (...props: TSocketAcceptableProps<T>) => {
             setIsLoading(true);
 
             try {

diff --git a/packages/api/types.ts b/packages/api/types.ts
@@ -123,6 +123,12 @@ type TSocketRequestCleaned<T extends TSocketEndpointNames> = Omit<
     (T extends KeysMatching<TSocketRequest<T>, 1> ? T : never) | 'passthrough' | 'req_id' | 'subscribe'
 >;
 
-export type TSocketRequestProps<T extends TSocketEndpointNames> = TSocketRequestCleaned<T> extends Record<string, never>
+type TSocketRequestProps<T extends TSocketEndpointNames> = TSocketRequestCleaned<T> extends Record<string, never>
     ? never
     : TSocketRequestCleaned<T>;
+
+export type TSocketAcceptableProps<T extends TSocketEndpointNames> = TSocketRequestProps<T> extends never
+    ? [undefined?]
+    : Partial<TSocketRequestProps<T>> extends TSocketRequestProps<T>
+    ? [TSocketRequestProps<T>?]
+    : [TSocketRequestProps<T>];
diff --git a/packages/cashier/@deriv-stores.d.ts b/packages/cashier/@deriv-stores.d.ts
diff --git a/packages/cashier/src/app.jsx b/packages/cashier/src/app.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { setWebsocket } from '@deriv/shared';
-import { StoreProvider } from '@deriv/stores';
 import { init } from 'Utils/server_time';
 import Routes from 'Containers/routes';
+import CashierProviders from './cashier-providers';
 
 const App = ({ passthrough: { WS, root_store } }) => {
     React.useEffect(() => {
@@ -12,9 +12,9 @@ const App = ({ passthrough: { WS, root_store } }) => {
     }, []);
 
     return (
-        <StoreProvider store={root_store}>
+        <CashierProviders store={root_store}>
             <Routes />
-        </StoreProvider>
+        </CashierProviders>
     );
 };
 

diff --git a/packages/cashier/src/cashier-providers.tsx b/packages/cashier/src/cashier-providers.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { StoreProvider } from '@deriv/stores';
+import { CashierStoreProvider } from './stores/useCashierStores';
+import { TRootStore } from './types/stores';
+
+const CashierProviders = ({ children, store }: React.PropsWithChildren<{ store: TRootStore }>) => {
+    return (
+        <StoreProvider store={store}>
+            <CashierStoreProvider>{children}</CashierStoreProvider>
+        </StoreProvider>
+    );
+};
+
+export default CashierProviders;
diff --git a/...ages/cashier/src/components/account-prompt-dialog/__tests__/account-prompt-dialog.spec.js b/...ages/cashier/src/components/account-prompt-dialog/__tests__/account-prompt-dialog.spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import AccountPromptDialog from '../account-prompt-dialog.jsx';
-import { StoreProvider } from '@deriv/stores';
+import CashierProviders from '../../../cashier-providers';
 
 jest.mock('@deriv/components', () => ({
     ...jest.requireActual('@deriv/components'),
@@ -31,7 +31,7 @@ describe('<AccountPromptDialog />', () => {
     };
     it('should render dialog', () => {
         render(<AccountPromptDialog />, {
-            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+            wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
         });
 
         expect(screen.getByText('Dialog')).toBeInTheDocument();

diff --git a/packages/cashier/src/components/account-prompt-dialog/account-prompt-dialog.jsx b/packages/cashier/src/components/account-prompt-dialog/account-prompt-dialog.jsx
@@ -4,16 +4,13 @@ import { Dialog } from '@deriv/components';
 import { isCryptocurrency } from '@deriv/shared';
 import { localize, Localize } from '@deriv/translations';
 import { useStore, observer } from '@deriv/stores';
+import { useCashierStore } from '../../stores/useCashierStores';
 
 const AccountPromptDialog = observer(() => {
-    const {
-        client: { accounts },
-        modules: {
-            cashier: {
-                account_prompt_dialog: { continueRoute, is_confirmed, last_location, onCancel, onConfirm, should_show },
-            },
-        },
-    } = useStore();
+    const { client } = useStore();
+    const { accounts } = client;
+    const { account_prompt_dialog } = useCashierStore();
+    const { continueRoute, is_confirmed, last_location, onCancel, onConfirm, should_show } = account_prompt_dialog;
 
     React.useEffect(continueRoute, [is_confirmed, last_location, continueRoute]);
 

diff --git a/packages/cashier/src/components/cashier-container/virtual/__tests__/virtual.spec.tsx b/packages/cashier/src/components/cashier-container/virtual/__tests__/virtual.spec.tsx
@@ -3,7 +3,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { createBrowserHistory } from 'history';
 import { Router } from 'react-router';
 import Virtual from '../virtual';
-import { StoreProvider } from '@deriv/stores';
+import CashierProviders from '../../../../cashier-providers';
 
 describe('<Virtual />', () => {
     const history = createBrowserHistory();
@@ -22,7 +22,7 @@ describe('<Virtual />', () => {
                 <Virtual />
             </Router>,
             {
-                wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+                wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
             }
         );
 
@@ -35,7 +35,7 @@ describe('<Virtual />', () => {
                 <Virtual />
             </Router>,
             {
-                wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+                wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
             }
         );
 
@@ -50,7 +50,7 @@ describe('<Virtual />', () => {
                 <Virtual />
             </Router>,
             {
-                wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+                wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
             }
         );
 
@@ -63,7 +63,7 @@ describe('<Virtual />', () => {
                 <Virtual />
             </Router>,
             {
-                wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+                wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
             }
         );