Farzin/85472/R&D/Remove CashierStore initialization from core package

packages/api/src/__tests__/useSubscription.spec.tsx

@@ -4,7 +4,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useWS as useWSShared } from '@deriv/shared';
 import useSubscription from '../useSubscription';
-import { TSocketRequestProps, TSocketSubscribableEndpointNames } from '../../types';
+import { TSocketSubscribableEndpointNames, TSocketAcceptableProps } from '../../types';
 
 jest.mock('@deriv/shared');
 
@@ -15,7 +15,7 @@ const UseSubscriptionExample = <T extends TSocketSubscribableEndpointNames>({
     request,
 }: {
     name: T;
-    request?: TSocketRequestProps<T>;
+    request?: TSocketAcceptableProps<T>;
 }) => {
     const WS = useSubscription(name);
 

packages/api/src/__tests__/useWS.spec.tsx

@@ -4,7 +4,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useWS as useWSShared } from '@deriv/shared';
 import useWS from '../useWS';
-import { TSocketEndpointNames, TSocketRequestProps, TSocketResponse } from '../../types';
+import { TSocketEndpointNames, TSocketAcceptableProps, TSocketResponse } from '../../types';
 
 jest.mock('@deriv/shared');
 
@@ -15,7 +15,7 @@ const UseWSExample = <T extends TSocketEndpointNames>({
     request,
 }: {
     name: T;
-    request?: TSocketRequestProps<T>;
+    request?: TSocketAcceptableProps<T>;
 }) => {
     const WS = useWS(name);
 

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

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 {

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

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

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;

packages/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();

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]);
 

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();
@@ -21,7 +21,7 @@ describe('<Virtual />', () => {
                 <Virtual />
             </Router>,
             {
-                wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+                wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
             }
         );
 
@@ -34,7 +34,7 @@ describe('<Virtual />', () => {
                 <Virtual />
             </Router>,
             {
-                wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+                wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
             }
         );
 
@@ -49,7 +49,7 @@ describe('<Virtual />', () => {
                 <Virtual />
             </Router>,
             {
-                wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+                wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
             }
         );
 
@@ -62,7 +62,7 @@ describe('<Virtual />', () => {
                 <Virtual />
             </Router>,
             {
-                wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+                wrapper: ({ children }) => <CashierProviders store={mockRootStore}>{children}</CashierProviders>,
             }
         );