Farzin/77435/add useSubscription hook (binary-com#6621)

* fix(cashier): 🐛 fix `tsconfig`

* feat(shared): ✨ expose `WS` object from `shared` package via `useWS`

* feat(cashier): ✨ add `useCountdown` hook

* feat(cashier): ✨ add `useWS` hook

* feat(cashier): ✨ add `useStore` hook and `StoreContext`

* feat(cashier): ✨ add `useVerifyEmail` hook

* test(cashier): ✅ add test for `useCountdown` hook

* test(cashier): ✅ add test for `useWS` hook

* fix(cashier): 📝 resolve PR comments

* fix(cashier): 📝 resolve PR comments

* fix(cashier): 📝 resolve PR comments

* fix(cashier): 📝 resolve PR comments

* refactor(cashier): ♻️ improve types for `useWS` hook

* feat(cashier): ✨ add `useSubscription` hook

* test(cashier): ✅ add test for `useSubscription` hook

* feat(cashier): ✨ add `useNeedAuthentication` hook

* feat(cashier): ✨ add `useNeedFinancialAssessment` hook

* feat(cashier): ✨ add `useRealSTPAccount` hook

* feat(cashier): ✨ add `useNeedTNC` hook

* feat(cashier): ✨ add `useDepositLocked` hook

* fix(cashier): 📝 resolve PR comments

* fix(cashier): 📝 resolve PR comments

packages/cashier/src/hooks/__tests__/useDepositLocked.spec.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead.
+import { render, screen } from '@testing-library/react';
+import { StoreProvider } from '../useStore';
+import useDepositLocked from '../useDepositLocked';
+import { TRootStore, DeepPartial } from '../../types';
+
+const UseDepositLockedExample = () => {
+    const is_deposit_locked = useDepositLocked();
+
+    return (
+        <>
+            <p data-testid={'dt_is_deposit_locked'}>{is_deposit_locked ? 'true' : 'false'}</p>
+        </>
+    );
+};
+
+describe('useDepositLocked', () => {
+    test('should be false if none of the conditions are met', () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_deposit_lock: false,
+                is_authentication_needed: false,
+                is_tnc_needed: false,
+                is_eu: false,
+                is_financial_account: false,
+                is_financial_information_incomplete: false,
+                is_trading_experience_incomplete: false,
+                mt5_login_list: [
+                    {
+                        account_type: 'demo',
+                        sub_account_type: 'financial',
+                    },
+                ],
+            },
+        };
+
+        render(<UseDepositLockedExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked');
+        expect(is_deposit_locked).toHaveTextContent('false');
+    });
+
+    test('should be true if is_deposit_lock is true', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_deposit_lock: true,
+                is_authentication_needed: false,
+                is_tnc_needed: false,
+                is_eu: false,
+                is_financial_account: false,
+                is_financial_information_incomplete: false,
+                is_trading_experience_incomplete: false,
+                mt5_login_list: [
+                    {
+                        account_type: 'demo',
+                        sub_account_type: 'financial',
+                    },
+                ],
+            },
+        };
+
+        render(<UseDepositLockedExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked');
+        expect(is_deposit_locked).toHaveTextContent('true');
+    });
+
+    test('should be true if is_need_tnc is true', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_deposit_lock: false,
+                is_authentication_needed: false,
+                is_tnc_needed: true,
+                is_eu: true,
+                is_financial_account: false,
+                is_financial_information_incomplete: false,
+                is_trading_experience_incomplete: false,
+                mt5_login_list: [
+                    {
+                        account_type: 'real',
+                        sub_account_type: 'financial_stp',
+                    },
+                ],
+            },
+        };
+
+        render(<UseDepositLockedExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked');
+        expect(is_deposit_locked).toHaveTextContent('true');
+    });
+
+    test('should be true if is_need_financial_assessment is true', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_deposit_lock: false,
+                is_authentication_needed: false,
+                is_tnc_needed: false,
+                is_eu: false,
+                is_financial_account: true,
+                is_financial_information_incomplete: true,
+                is_trading_experience_incomplete: false,
+                mt5_login_list: [
+                    {
+                        account_type: 'demo',
+                        sub_account_type: 'financial',
+                    },
+                ],
+            },
+        };
+
+        render(<UseDepositLockedExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked');
+        expect(is_deposit_locked).toHaveTextContent('true');
+    });
+
+    test('should be true if is_need_authentication is true', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_deposit_lock: false,
+                is_authentication_needed: true,
+                is_tnc_needed: false,
+                is_eu: true,
+                is_financial_account: false,
+                is_financial_information_incomplete: false,
+                is_trading_experience_incomplete: false,
+                mt5_login_list: [
+                    {
+                        account_type: 'real',
+                        sub_account_type: 'financial_stp',
+                    },
+                ],
+            },
+        };
+
+        render(<UseDepositLockedExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_deposit_locked = screen.getByTestId('dt_is_deposit_locked');
+        expect(is_deposit_locked).toHaveTextContent('true');
+    });
+});

packages/cashier/src/hooks/__tests__/useNeedAuthentication.spec.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead.
+import { render, screen } from '@testing-library/react';
+import { StoreProvider } from '../useStore';
+import useNeedAuthentication from '../useNeedAuthentication';
+import { TRootStore, DeepPartial } from '../../types';
+
+const UseNeedAuthenticationExample = () => {
+    const is_need_authentication = useNeedAuthentication();
+
+    return (
+        <>
+            <p data-testid={'dt_is_need_authentication'}>{is_need_authentication ? 'true' : 'false'}</p>
+        </>
+    );
+};
+
+describe('useNeedAuthentication', () => {
+    test('should be false if is_authentication_needed and is_eu both are false', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_authentication_needed: false,
+                is_eu: false,
+            },
+        };
+
+        render(<UseNeedAuthenticationExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_authentication = screen.getByTestId('dt_is_need_authentication');
+        expect(is_need_authentication).toHaveTextContent('false');
+    });
+
+    test('should be false if is_authentication_needed is false and is_eu is true', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_authentication_needed: false,
+                is_eu: true,
+            },
+        };
+
+        render(<UseNeedAuthenticationExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_authentication = screen.getByTestId('dt_is_need_authentication');
+        expect(is_need_authentication).toHaveTextContent('false');
+    });
+
+    test('should be false if is_authentication_needed is true and is_eu is false', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_authentication_needed: true,
+                is_eu: false,
+            },
+        };
+
+        render(<UseNeedAuthenticationExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_authentication = screen.getByTestId('dt_is_need_authentication');
+        expect(is_need_authentication).toHaveTextContent('false');
+    });
+
+    test('should be true if is_authentication_needed and is_eu both are true', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_authentication_needed: true,
+                is_eu: true,
+            },
+        };
+
+        render(<UseNeedAuthenticationExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_authentication = screen.getByTestId('dt_is_need_authentication');
+        expect(is_need_authentication).toHaveTextContent('true');
+    });
+});

packages/cashier/src/hooks/__tests__/useNeedFinancialAssessment.spec.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react';
+// Todo: After upgrading to react 18 we should use @testing-library/react-hooks instead.
+import { render, screen } from '@testing-library/react';
+import { StoreProvider } from '../useStore';
+import useNeedFinancialAssessment from '../useNeedFinancialAssessment';
+import { TRootStore, DeepPartial } from '../../types';
+
+const UseNeedFinancialAssessmentExample = () => {
+    const is_need_financial_assessment = useNeedFinancialAssessment();
+
+    return (
+        <>
+            <p data-testid={'dt_is_need_financial_assessment'}>{is_need_financial_assessment ? 'true' : 'false'}</p>
+        </>
+    );
+};
+
+describe('useNeedFinancialAssessment', () => {
+    test('should be false if is_financial_account, is_financial_information_incomplete and is_trading_experience_incomplete all are false', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_financial_account: false,
+                is_financial_information_incomplete: false,
+                is_trading_experience_incomplete: false,
+            },
+        };
+
+        render(<UseNeedFinancialAssessmentExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment');
+        expect(is_need_financial_assessment).toHaveTextContent('false');
+    });
+
+    test('should be false if is_financial_account and is_trading_experience_incomplete are false and is_financial_information_incomplete is true', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_financial_account: false,
+                is_financial_information_incomplete: true,
+                is_trading_experience_incomplete: false,
+            },
+        };
+
+        render(<UseNeedFinancialAssessmentExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment');
+        expect(is_need_financial_assessment).toHaveTextContent('false');
+    });
+
+    test('should be false if is_financial_account and is_financial_information_incomplete are false and is_trading_experience_incomplete is true', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_financial_account: false,
+                is_financial_information_incomplete: false,
+                is_trading_experience_incomplete: true,
+            },
+        };
+
+        render(<UseNeedFinancialAssessmentExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment');
+        expect(is_need_financial_assessment).toHaveTextContent('false');
+    });
+
+    test('should be false if is_financial_account is false but is_financial_information_incomplete and is_trading_experience_incomplete both are true', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_financial_account: false,
+                is_financial_information_incomplete: true,
+                is_trading_experience_incomplete: true,
+            },
+        };
+
+        render(<UseNeedFinancialAssessmentExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment');
+        expect(is_need_financial_assessment).toHaveTextContent('false');
+    });
+
+    test('should be false if is_financial_account is true but is_financial_information_incomplete and is_trading_experience_incomplete both are false', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_financial_account: true,
+                is_financial_information_incomplete: false,
+                is_trading_experience_incomplete: false,
+            },
+        };
+
+        render(<UseNeedFinancialAssessmentExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment');
+        expect(is_need_financial_assessment).toHaveTextContent('false');
+    });
+
+    test('should be true if is_financial_account and is_financial_information_incomplete are true and is_trading_experience_incomplete is false', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_financial_account: true,
+                is_financial_information_incomplete: true,
+                is_trading_experience_incomplete: false,
+            },
+        };
+
+        render(<UseNeedFinancialAssessmentExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment');
+        expect(is_need_financial_assessment).toHaveTextContent('true');
+    });
+
+    test('should be true if is_financial_account and is_trading_experience_incomplete are true and is_financial_information_incomplete is false', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_financial_account: true,
+                is_financial_information_incomplete: false,
+                is_trading_experience_incomplete: true,
+            },
+        };
+
+        render(<UseNeedFinancialAssessmentExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment');
+        expect(is_need_financial_assessment).toHaveTextContent('true');
+    });
+
+    test('should be true if is_financial_account, is_financial_information_incomplete and is_trading_experience_incomplete all are true', async () => {
+        const mockRootStore: DeepPartial<TRootStore> = {
+            client: {
+                is_financial_account: true,
+                is_financial_information_incomplete: true,
+                is_trading_experience_incomplete: true,
+            },
+        };
+
+        render(<UseNeedFinancialAssessmentExample />, {
+            wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
+        });
+
+        const is_need_financial_assessment = screen.getByTestId('dt_is_need_financial_assessment');
+        expect(is_need_financial_assessment).toHaveTextContent('true');
+    });
+});