Merge branch 'master' into sprint-10/account-package-refactor

.github/workflows/release_staging.yml

@@ -2,7 +2,7 @@ name: Deriv App Staging Workflow
 on:
   push:
     branches:
-    - master
+    - rc_*
 
 jobs:
   build_test_and_publish:

packages/account/src/Components/account-limits/__tests__/account-limits-article.spec.tsx

@@ -12,31 +12,8 @@ describe('<AccountLimitsArticle/>', () => {
         ).toBeInTheDocument();
     });
 
-    it('should show the descriptions for the account limit when is_from_derivgo is false', () => {
+    it('should show the descriptions for the account limit', () => {
         render(<AccountLimitsArticle />);
         expect(screen.getByText(/these are default limits that we apply to your accounts\./i)).toBeInTheDocument();
-        expect(
-            screen.getByText(/to learn more about trading limits and how they apply, please go to the/i)
-        ).toBeInTheDocument();
-        expect(screen.getByRole('link', { name: /help centre\./i })).toBeInTheDocument();
-    });
-
-    it('should go to help-centre page if the Help Centre link on the text is clicked', () => {
-        render(<AccountLimitsArticle />);
-        expect(screen.getByText('Help Centre.')).toHaveAttribute(
-            'href',
-            'https://deriv.com/help-centre/trading/#trading-limits'
-        );
-    });
-
-    it('should show the descriptions for the account limit when is_from_derivgo is true', () => {
-        render(<AccountLimitsArticle is_from_derivgo />);
-        expect(screen.getByText(/these are default limits that we apply to your accounts\./i)).toBeInTheDocument();
-
-        expect(screen.queryByRole('link', { name: '/help-centre/trading/#trading-limits' })).not.toBeInTheDocument();
-
-        expect(
-            screen.queryByText(/to learn more about trading limits and how they apply, please go to the/i)
-        ).not.toBeInTheDocument();
     });
 });

packages/account/src/Components/account-limits/__tests__/account-limits.spec.tsx

@@ -216,7 +216,7 @@ describe('<AccountLimits/>', () => {
         expect(screen.queryByTestId('account_limits_data')).toBeInTheDocument();
     });
 
-    it('should render AccountLimitsArticle component if should_show_article is true  and is_from_derivgo is false  in mobile mode', () => {
+    it('should render AccountLimitsArticle component if should_show_article is true in mobile mode', () => {
         (isMobile as jest.Mock).mockReturnValue(true);
         (isDesktop as jest.Mock).mockReturnValue(false);
         render(
@@ -225,29 +225,7 @@ describe('<AccountLimits/>', () => {
             </StoreProvider>
         );
         expect(screen.getByRole('heading', { name: /account limits/i })).toBeInTheDocument();
-        expect(
-            screen.queryByText(/to learn more about trading limits and how they apply, please go to the/i)
-        ).toBeInTheDocument();
-    });
-
-    it('should render AccountLimitsArticle component if should_show_article is true and is_from_derivgo is true in mobile mode', () => {
-        store = mockStore({
-            ...mock,
-            common: {
-                is_from_derivgo: true,
-            },
-        });
-        (isMobile as jest.Mock).mockReturnValue(true);
-        (isDesktop as jest.Mock).mockReturnValue(false);
-        render(
-            <StoreProvider store={store}>
-                <AccountLimits {...props} should_show_article />
-            </StoreProvider>
-        );
-        expect(screen.getByRole('heading', { name: /account limits/i })).toBeInTheDocument();
-        expect(
-            screen.queryByText(/to learn more about trading limits and how they apply, please go to the/i)
-        ).not.toBeInTheDocument();
+        expect(screen.getByText(/these are default limits that we apply to your accounts\./i)).toBeInTheDocument();
     });
 
     it('should not render AccountLimitsArticle component if should_show_article is false', () => {
@@ -526,14 +504,6 @@ describe('<AccountLimits/>', () => {
         );
         expect(screen.getByRole('heading', { name: /account limits/i })).toBeInTheDocument();
         expect(screen.getByText(/these are default limits that we apply to your accounts\./i)).toBeInTheDocument();
-        expect(
-            screen.getByText(/to learn more about trading limits and how they apply, please go to the/i)
-        ).toBeInTheDocument();
-        expect(
-            screen.getByRole('link', {
-                name: /help centre/i,
-            })
-        ).toHaveAttribute('href', 'https://deriv.com/help-centre/trading/#trading-limits');
     });
 
     it('should show AccountLimitsFooter if footer_ref is passed', () => {

packages/account/src/Components/account-limits/account-limits-article.tsx

@@ -1,31 +1,13 @@
 import * as React from 'react';
-import { StaticUrl } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
 import AccountArticle from 'Components/article';
 
-type TAccountLimitsArticle = {
-    is_from_derivgo?: boolean;
-};
+const getDescription = () => [
+    <Localize key={0} i18n_default_text='These are default limits that we apply to your accounts.' />,
+];
 
-const AccountLimitsArticle = ({ is_from_derivgo }: TAccountLimitsArticle) => {
-    const getDescription = () => {
-        const description = [
-            <Localize key={0} i18n_default_text='These are default limits that we apply to your accounts.' />,
-        ];
-
-        if (!is_from_derivgo) {
-            description.push(
-                <Localize
-                    key={1}
-                    i18n_default_text='To learn more about trading limits and how they apply, please go to the <0>Help Centre.</0>'
-                    components={[<StaticUrl key={0} className='link' href='/help-centre/trading/#trading-limits' />]}
-                />
-            );
-        }
-        return description;
-    };
-
-    return <AccountArticle title={localize('Account limits')} descriptions={getDescription()} />;
-};
+const AccountLimitsArticle = () => (
+    <AccountArticle title={localize('Account limits')} descriptions={getDescription()} />
+);
 
 export default AccountLimitsArticle;

packages/account/src/Components/account-limits/account-limits.tsx

@@ -36,7 +36,7 @@ const AccountLimits = observer(
         should_bypass_scrollbars,
         should_show_article = true,
     }: TAccountLimits) => {
-        const { client, common } = useStore();
+        const { client } = useStore();
         const {
             account_limits,
             account_status,
@@ -46,7 +46,6 @@ const AccountLimits = observer(
             is_virtual,
             is_switching,
         } = client;
-        const { is_from_derivgo } = common;
         const isMounted = useIsMounted();
         const [is_loading, setLoading] = React.useState(true);
         const [is_overlay_shown, setIsOverlayShown] = React.useState(false);
@@ -132,9 +131,7 @@ const AccountLimits = observer(
                             'da-account-limits--app-settings': is_app_settings,
                         })}
                     >
-                        {should_show_article && isMobile() && (
-                            <AccountLimitsArticle is_from_derivgo={is_from_derivgo} />
-                        )}
+                        {should_show_article && isMobile() && <AccountLimitsArticle />}
                         <div className='da-account-limits__table-wrapper'>
                             <ThemedScrollbars is_bypassed={!!should_bypass_scrollbars || isMobile()}>
                                 <table className='da-account-limits__table' data-testid='trading_limit_item_table'>

packages/api/src/hooks/index.ts

@@ -34,6 +34,6 @@ export { default as useTradingPlatformInvestorPasswordReset } from './useTrading
 export { default as useTradingPlatformPasswordChange } from './useTradingPlatformPasswordChange';
 export { default as useTransactions } from './useTransactions';
 export { default as useTransferBetweenAccounts } from './useTransferBetweenAccounts';
-export { default as useWalletAccountsList } from './useWalletAccountsList';
 export { default as useVerifyEmail } from './useVerifyEmail';
+export { default as useWalletAccountsList } from './useWalletAccountsList';
 export { default as useWalletMigration } from './useWalletMigration';

packages/api/src/hooks/useCryptoTransactions.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import useSubscription from '../useSubscription';
 import { getTruncatedString } from '@deriv/utils';
 
@@ -25,6 +25,9 @@ const useCryptoTransactions = () => {
     const { subscribe, data, ...rest } = useSubscription('cashier_payments');
     const [transactions, setTransactions] = useState<TModifiedTransaction[]>();
 
+    // Reset transactions data
+    const resetData = useCallback(() => setTransactions(undefined), []);
+
     useEffect(() => {
         setTransactions(old_transactions => {
             const new_transactions = data?.cashier_payments?.crypto as TModifiedTransaction[] | undefined;
@@ -91,6 +94,8 @@ const useCryptoTransactions = () => {
         data: sorted_transactions,
         /** Returns the last transaction if exists. */
         last_transaction,
+        /** Reset transactions data */
+        resetData,
         subscribe,
         ...rest,
     };

packages/api/src/hooks/usePOI.ts

@@ -0,0 +1,88 @@
+import { useMemo } from 'react';
+import useResidenceList from './useResidenceList';
+import useGetAccountStatus from './useGetAccountStatus';
+import useSettings from './useSettings';
+
+/** A custom hook to get the user's identity verification status. */
+const usePOI = () => {
+    const { data: get_account_status_data, ...rest } = useGetAccountStatus();
+    const { data: residence_list_data } = useResidenceList();
+    const { data: get_settings_data } = useSettings();
+
+    const previous_service = useMemo(() => {
+        const latest_poi_attempt = get_account_status_data?.authentication?.attempts?.latest;
+        return latest_poi_attempt?.service;
+    }, [get_account_status_data?.authentication?.attempts?.latest]);
+
+    /**
+     * @description Get the previous POI attempts details (if any)
+     */
+    const previous_poi = useMemo(() => {
+        if (!previous_service) {
+            return null;
+        }
+
+        const services = get_account_status_data?.authentication?.identity?.services;
+        if (services && services.manual) {
+            return {
+                service: previous_service,
+                status: services.manual.status,
+            };
+        }
+
+        const current_service = services?.[previous_service as 'idv' | 'onfido'];
+        return {
+            service: previous_service,
+            status: current_service?.status,
+            reported_properties: current_service?.reported_properties,
+            last_rejected: current_service?.last_rejected,
+            submissions_left: current_service?.submissions_left || 0,
+        };
+    }, [get_account_status_data?.authentication?.identity?.services, previous_service]);
+
+    /**
+     * @description Get the next step based on a few check. Returns configuration for document validation as well
+     */
+    const next_poi = useMemo(() => {
+        const user_country_code = get_settings_data?.citizen || get_settings_data?.country_code;
+        const matching_residence_data = residence_list_data?.find(r => r.value === user_country_code);
+        const is_idv_supported = matching_residence_data?.identity?.services?.idv?.is_country_supported;
+        const is_onfido_supported = matching_residence_data?.identity?.services?.onfido?.documents_supported;
+        const services = get_account_status_data?.authentication?.identity?.services;
+        const idv_submission_left = services?.idv?.submissions_left ?? 0;
+        const onfido_submission_left = services?.onfido?.submissions_left ?? 0;
+        if (is_idv_supported && idv_submission_left && !get_account_status_data?.status?.includes('idv_disallowed')) {
+            return {
+                service: 'idv',
+                submission_left: idv_submission_left,
+                document_supported: matching_residence_data?.identity?.services?.idv?.documents_supported,
+            };
+        } else if (is_onfido_supported && onfido_submission_left) {
+            return {
+                service: 'onfido',
+                submission_left: onfido_submission_left,
+                document_supported: matching_residence_data?.identity?.services?.onfido?.documents_supported,
+            };
+        }
+        return {
+            service: 'manual',
+        };
+    }, [
+        get_account_status_data?.authentication?.identity?.services,
+        get_account_status_data?.status,
+        get_settings_data?.citizen,
+        get_settings_data?.country_code,
+        residence_list_data,
+    ]);
+
+    return {
+        data: {
+            ...get_account_status_data?.authentication?.identity,
+            previous: previous_poi,
+            next: next_poi,
+        },
+        ...rest,
+    };
+};
+
+export default usePOI;

packages/api/src/hooks/useTransactions.ts

@@ -1,29 +1,42 @@
-import { useMemo } from 'react';
-
+import { useEffect, useMemo, useState } from 'react';
 import useInfiniteQuery from '../useInfiniteQuery';
-
+import { TSocketRequestPayload } from '../../types';
 import useAuthorize from './useAuthorize';
+import useInvalidateQuery from '../useInvalidateQuery';
+
+type TFilter = NonNullable<TSocketRequestPayload<'statement'>['payload']>['action_type'];
 
 /** A custom hook to get the summary of account transactions */
 const useTransactions = () => {
-    const { isSuccess } = useAuthorize();
+    const { isFetching, isSuccess } = useAuthorize();
+    const [filter, setFilter] = useState<TFilter>();
+    const invalidate = useInvalidateQuery();
     const { data, fetchNextPage, ...rest } = useInfiniteQuery('statement', {
         options: {
-            enabled: isSuccess,
+            enabled: !isFetching && isSuccess,
             getNextPageParam: (lastPage, pages) => {
                 if (!lastPage?.statement?.count) return;
 
                 return pages.length;
             },
         },
+        payload: {
+            action_type: filter,
+        },
     });
 
+    useEffect(() => {
+        invalidate('statement');
+    }, [filter, invalidate]);
+
+    // Flatten the data array.
     const flatten_data = useMemo(() => {
         if (!data?.pages?.length) return;
 
         return data?.pages?.flatMap(page => page?.statement?.transactions);
     }, [data?.pages]);
 
+    // Modify the data.
     const modified_data = useMemo(() => {
         if (!flatten_data?.length) return;
 
@@ -37,6 +50,8 @@ const useTransactions = () => {
         data: modified_data,
         /** Fetch the next page of transactions */
         fetchNextPage,
+        /** Filter the transactions by type */
+        setFilter,
         ...rest,
     };
 };

packages/appstore/src/components/cfds-listing/cfds-listing.scss

@@ -524,7 +524,6 @@
         &-description {
             display: flex;
             justify-content: center;
-            margin-top: 1.4rem;
         }
 
         &-app {

packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/google-drive.tsx

@@ -7,10 +7,9 @@ import { Localize, localize } from '@deriv/translations';
 import { useDBotStore } from 'Stores/useDBotStore';
 
 const GoogleDrive = observer(() => {
-    const { google_drive, load_modal, dashboard } = useDBotStore();
+    const { google_drive, load_modal } = useDBotStore();
     const { is_authorised } = google_drive;
     const { is_open_button_loading, onDriveConnect, onDriveOpen } = load_modal;
-    const { setOpenSettings } = dashboard;
 
     return (
         <div className='load-strategy__container'>
@@ -36,7 +35,6 @@ const GoogleDrive = observer(() => {
                             text={localize('Open')}
                             onClick={() => {
                                 onDriveOpen();
-                                setOpenSettings('import');
                             }}
                             is_loading={is_open_button_loading}
                             has_effect

packages/bot-web-ui/src/stores/google-drive-store.js

@@ -202,6 +202,7 @@ export default class GoogleDriveStore {
                     const file_name = file.name;
                     const fileId = file.id;
                     const { files } = gapi.client.drive;
+                    const { setOpenSettings } = this.root_store.dashboard;
 
                     const response = await files.get({
                         alt: 'media',
@@ -210,6 +211,7 @@ export default class GoogleDriveStore {
                     });
 
                     resolve({ xml_doc: response.body, file_name });
+                    setOpenSettings('import');
                 }
             };