From 1091674889fd98ca0c5782e119198629d01940fc Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Thu, 26 Dec 2024 17:08:19 +0800 Subject: [PATCH 01/10] feat: p2p standalone redirection banner --- .../components/AccountsList/AccountsList.tsx | 38 ++++++----- .../__tests__/AccountsList.spec.tsx | 25 +++++++- .../WalletsP2PRedirectionBanner.scss | 23 +++++++ .../WalletsP2PRedirectionBanner.tsx | 32 ++++++++++ .../WalletsP2PRedirectionBanner.spec.tsx | 63 +++++++++++++++++++ .../WalletsP2PRedirectionBanner/index.ts | 1 + packages/wallets/src/components/index.ts | 1 + packages/wallets/src/helpers/urls.ts | 29 +++++++++ 8 files changed, 195 insertions(+), 17 deletions(-) create mode 100644 packages/wallets/src/components/WalletsP2PRedirectionBanner/WalletsP2PRedirectionBanner.scss create mode 100644 packages/wallets/src/components/WalletsP2PRedirectionBanner/WalletsP2PRedirectionBanner.tsx create mode 100644 packages/wallets/src/components/WalletsP2PRedirectionBanner/__tests__/WalletsP2PRedirectionBanner.spec.tsx create mode 100644 packages/wallets/src/components/WalletsP2PRedirectionBanner/index.ts diff --git a/packages/wallets/src/components/AccountsList/AccountsList.tsx b/packages/wallets/src/components/AccountsList/AccountsList.tsx index 9432de212ad6..1ad173498b7a 100644 --- a/packages/wallets/src/components/AccountsList/AccountsList.tsx +++ b/packages/wallets/src/components/AccountsList/AccountsList.tsx @@ -1,10 +1,11 @@ import React, { FC, useCallback } from 'react'; -import { useIsEuRegion } from '@deriv/api-v2'; +import { useActiveWalletAccount, useIsEuRegion } from '@deriv/api-v2'; import { useTranslations } from '@deriv-com/translations'; import { Divider, Tab, Tabs, useDevice } from '@deriv-com/ui'; import { CFDPlatformsList } from '../../features'; import { OptionsAndMultipliersListing } from '../OptionsAndMultipliersListing'; import { WalletsTabsLoader } from '../SkeletonLoader'; +import { WalletsP2PRedirectionBanner } from '../WalletsP2PRedirectionBanner'; import './AccountsList.scss'; type TProps = { @@ -16,6 +17,7 @@ const AccountsList: FC = ({ accountsActiveTabIndex, onTabClickHandler }) const { isDesktop } = useDevice(); const { localize } = useTranslations(); const { data: isEuRegion, isLoading: isEuRegionLoading } = useIsEuRegion(); + const { data: activeWallet } = useActiveWalletAccount(); const optionsAndMultipliersTabTitle = isEuRegion ? localize('Multipliers') : localize('Options'); @@ -28,6 +30,7 @@ const AccountsList: FC = ({ accountsActiveTabIndex, onTabClickHandler })
+ {activeWallet?.account_type === 'doughflow' && } @@ -44,21 +47,24 @@ const AccountsList: FC = ({ accountsActiveTabIndex, onTabClickHandler }) } return ( - - - - - - - - - - + <> + {activeWallet?.account_type === 'doughflow' && } + + + + + + + + + + + ); }; diff --git a/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx b/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx index f60651097cd4..9a38636ecca9 100644 --- a/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx +++ b/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx @@ -1,6 +1,6 @@ import React, { ComponentProps, PropsWithChildren } from 'react'; import { WalletTourGuide } from 'src/components/WalletTourGuide'; -import { APIProvider, useIsEuRegion } from '@deriv/api-v2'; +import { APIProvider, useActiveWalletAccount, useIsEuRegion } from '@deriv/api-v2'; import { useDevice } from '@deriv-com/ui'; import { render, screen } from '@testing-library/react'; import WalletsAuthProvider from '../../../AuthProvider'; @@ -28,6 +28,7 @@ jest.mock( jest.mock('@deriv/api-v2', () => ({ ...jest.requireActual('@deriv/api-v2'), + useActiveWalletAccount: jest.fn(), useIsEuRegion: jest.fn(), })); @@ -41,6 +42,15 @@ const wrapper = ({ children }: PropsWithChildren) => ( describe('AccountsList', () => { beforeEach(() => { + (useActiveWalletAccount as jest.Mock).mockReturnValue({ + data: { + account_type: 'doughflow', + currency_config: { display_code: 'USD', fractional_digits: 2 }, + is_virtual: false, + loginid: 'CRW1234', + wallet_currency_type: 'USD', + }, + }); (useDevice as jest.Mock).mockReturnValue({ isDesktop: true }); (useIsEuRegion as jest.Mock).mockReturnValue({ data: false, @@ -137,6 +147,19 @@ describe('AccountsList', () => { expect(screen.getAllByText('Options')[0]).toBeInTheDocument(); }); + it('renders P2P redirection banner in desktop view', () => { + render(, { wrapper }); + + expect(screen.getByText('Easily exchange USD with local currency using Deriv P2P.')).toBeInTheDocument(); + }); + + it('renders P2P redirection banner in mobile view', () => { + (useDevice as jest.Mock).mockReturnValue({ isMobile: true }); + render(, { wrapper }); + + expect(screen.getByText('Easily exchange USD with local currency using Deriv P2P.')).toBeInTheDocument(); + }); + it('renders wallet tour guide in mobile view with isWalletSettled set to false', () => { (useDevice as jest.Mock).mockReturnValue({ isMobile: true }); diff --git a/packages/wallets/src/components/WalletsP2PRedirectionBanner/WalletsP2PRedirectionBanner.scss b/packages/wallets/src/components/WalletsP2PRedirectionBanner/WalletsP2PRedirectionBanner.scss new file mode 100644 index 000000000000..b66c7db042fa --- /dev/null +++ b/packages/wallets/src/components/WalletsP2PRedirectionBanner/WalletsP2PRedirectionBanner.scss @@ -0,0 +1,23 @@ +.wallets-p2p-redirection-banner { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #f8f9fa; + border-radius: 0.8rem; + margin: 2.4rem 0 0; + padding: 1.6rem; + gap: 1.6rem; + + @include mobile-or-tablet-screen { + margin: 1.6rem 1.6rem 0; + } + + &:hover { + background-color: var(--du-general-hover, #e6e9e9); + cursor: pointer; + } + + &__description { + flex: 1; + } +} diff --git a/packages/wallets/src/components/WalletsP2PRedirectionBanner/WalletsP2PRedirectionBanner.tsx b/packages/wallets/src/components/WalletsP2PRedirectionBanner/WalletsP2PRedirectionBanner.tsx new file mode 100644 index 000000000000..4f55e1147246 --- /dev/null +++ b/packages/wallets/src/components/WalletsP2PRedirectionBanner/WalletsP2PRedirectionBanner.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { + CurrencyP2PIcon, + LabelPairedChevronLeftCaptionRegularIcon, + LabelPairedChevronRightCaptionRegularIcon, +} from '@deriv/quill-icons'; +import { Localize } from '@deriv-com/translations'; +import { Text } from '@deriv-com/ui'; +import { redirectToStandaloneP2P } from '../../helpers/urls'; +import useIsRtl from '../../hooks/useIsRtl'; +import './WalletsP2PRedirectionBanner.scss'; + +const WalletsP2PRedirectionBanner: React.FC = () => { + const isRtl = useIsRtl(); + + return ( +
redirectToStandaloneP2P()} + onKeyDown={() => redirectToStandaloneP2P()} + > + + + + + {isRtl ? : } +
+ ); +}; + +export default WalletsP2PRedirectionBanner; diff --git a/packages/wallets/src/components/WalletsP2PRedirectionBanner/__tests__/WalletsP2PRedirectionBanner.spec.tsx b/packages/wallets/src/components/WalletsP2PRedirectionBanner/__tests__/WalletsP2PRedirectionBanner.spec.tsx new file mode 100644 index 000000000000..0873cc4af438 --- /dev/null +++ b/packages/wallets/src/components/WalletsP2PRedirectionBanner/__tests__/WalletsP2PRedirectionBanner.spec.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { fireEvent, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { redirectToStandaloneP2P } from '../../../helpers/urls'; +import useIsRtl from '../../../hooks/useIsRtl'; +import WalletsP2PRedirectionBanner from '../WalletsP2PRedirectionBanner'; + +jest.mock('@deriv/quill-icons', () => ({ + CurrencyP2PIcon: () =>
, + LabelPairedChevronLeftCaptionRegularIcon: () =>
, + LabelPairedChevronRightCaptionRegularIcon: () =>
, +})); + +jest.mock('../../../helpers/urls', () => ({ + redirectToStandaloneP2P: jest.fn(), +})); + +jest.mock('../../../hooks/useIsRtl', () => jest.fn()); + +describe('WalletsP2PRedirectionBanner', () => { + beforeEach(() => { + (useIsRtl as jest.Mock).mockReturnValue(false); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + it('renders the banner with default elements', () => { + render(); + + expect(screen.getByTestId('dt_currency_p2p_icon')).toBeInTheDocument(); + expect(screen.getByText('Easily exchange USD with local currency using Deriv P2P.')).toBeInTheDocument(); + expect(screen.getByTestId('dt_chevron_right_icon')).toBeInTheDocument(); + }); + + it('renders the chevron left icon in RTL mode', () => { + (useIsRtl as jest.Mock).mockReturnValue(true); + + render(); + + expect(screen.getByTestId('dt_chevron_left_icon')).toBeInTheDocument(); + expect(screen.queryByTestId('dt_chevron_right_icon')).not.toBeInTheDocument(); + }); + + it('calls redirectToStandaloneP2P on click', async () => { + render(); + + const banner = screen.getByTestId('dt_wallets_p2p_redirection_banner'); + await userEvent.click(banner); + + expect(redirectToStandaloneP2P).toHaveBeenCalledTimes(1); + }); + + it('calls redirectToStandaloneP2P on keydown', () => { + render(); + + const banner = screen.getByTestId('dt_wallets_p2p_redirection_banner'); + fireEvent.keyDown(banner); + + expect(redirectToStandaloneP2P).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/wallets/src/components/WalletsP2PRedirectionBanner/index.ts b/packages/wallets/src/components/WalletsP2PRedirectionBanner/index.ts new file mode 100644 index 000000000000..e5599dbaad71 --- /dev/null +++ b/packages/wallets/src/components/WalletsP2PRedirectionBanner/index.ts @@ -0,0 +1 @@ +export { default as WalletsP2PRedirectionBanner } from './WalletsP2PRedirectionBanner'; diff --git a/packages/wallets/src/components/index.ts b/packages/wallets/src/components/index.ts index 866d00a87c5a..a2ea233d6a94 100644 --- a/packages/wallets/src/components/index.ts +++ b/packages/wallets/src/components/index.ts @@ -42,6 +42,7 @@ export * from './WalletsContainer'; export * from './WalletsDisabledAccountsBanner'; export * from './WalletsDisclaimerBanner'; export * from './WalletsErrorScreen'; +export * from './WalletsP2PRedirectionBanner'; export * from './WalletsPercentageSelector'; export * from './WalletsResetMT5Password'; export * from './WalletStatusBadge'; diff --git a/packages/wallets/src/helpers/urls.ts b/packages/wallets/src/helpers/urls.ts index 7ae78534fb78..1f7453072e3d 100644 --- a/packages/wallets/src/helpers/urls.ts +++ b/packages/wallets/src/helpers/urls.ts @@ -21,6 +21,8 @@ export const derivUrls = Object.freeze({ DERIV_COM_PRODUCTION_EU: `https://eu.${domainUrl}`, DERIV_COM_STAGING: `https://staging.${domainUrl}`, DERIV_HOST_NAME: domainUrl, + DERIV_P2P_PRODUCTION: `https://p2p.${domainUrl}`, + DERIV_P2P_STAGING: `https://staging-p2p.${domainUrl}`, SMARTTRADER_PRODUCTION: `https://smarttrader.${domainUrl}`, SMARTTRADER_STAGING: `https://staging-smarttrader.${domainUrl}`, }); @@ -155,3 +157,30 @@ export const redirectToOutSystems = (currency = '') => { return (window.location.href = redirectURL.toString()); } }; + +export const redirectToStandaloneP2P = () => { + const clientAccounts = getAccountsFromLocalStorage() ?? {}; + if (!Object.keys(clientAccounts).length) return; + + const filteredAccountsWithTokens: Record = {}; + Object.keys(clientAccounts).forEach(loginid => { + const account = clientAccounts[loginid]; + if (account.account_category === 'trading' && account?.currency_type === 'fiat' && account.is_virtual === 0) { + filteredAccountsWithTokens[loginid] = { token: account.token }; // pass token for real fiat trading account only + } + }); + if (!Object.keys(filteredAccountsWithTokens).length) return; + + const expires = new Date(new Date().getTime() + 1 * 60 * 1000); // 1 minute + + Cookies.set('authtoken', JSON.stringify(filteredAccountsWithTokens), { + domain: URLConstants.baseDomain, + expires, + secure: true, + }); + + const baseUrl = isProduction() ? derivUrls.DERIV_P2P_PRODUCTION : derivUrls.DERIV_P2P_STAGING; + + const redirectURL = new URL(`${baseUrl}/redirect?from=tradershub`); + return (window.location.href = redirectURL.toString()); +}; From 762a696f5ed335433d4c47cc0090cc168c3e9b5e Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Thu, 26 Dec 2024 17:40:56 +0800 Subject: [PATCH 02/10] fix: update redirection link --- packages/wallets/src/helpers/urls.ts | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/packages/wallets/src/helpers/urls.ts b/packages/wallets/src/helpers/urls.ts index 1f7453072e3d..a7b7eaedbaa4 100644 --- a/packages/wallets/src/helpers/urls.ts +++ b/packages/wallets/src/helpers/urls.ts @@ -159,28 +159,8 @@ export const redirectToOutSystems = (currency = '') => { }; export const redirectToStandaloneP2P = () => { - const clientAccounts = getAccountsFromLocalStorage() ?? {}; - if (!Object.keys(clientAccounts).length) return; - - const filteredAccountsWithTokens: Record = {}; - Object.keys(clientAccounts).forEach(loginid => { - const account = clientAccounts[loginid]; - if (account.account_category === 'trading' && account?.currency_type === 'fiat' && account.is_virtual === 0) { - filteredAccountsWithTokens[loginid] = { token: account.token }; // pass token for real fiat trading account only - } - }); - if (!Object.keys(filteredAccountsWithTokens).length) return; - - const expires = new Date(new Date().getTime() + 1 * 60 * 1000); // 1 minute - - Cookies.set('authtoken', JSON.stringify(filteredAccountsWithTokens), { - domain: URLConstants.baseDomain, - expires, - secure: true, - }); - const baseUrl = isProduction() ? derivUrls.DERIV_P2P_PRODUCTION : derivUrls.DERIV_P2P_STAGING; - const redirectURL = new URL(`${baseUrl}/redirect?from=tradershub`); + const redirectURL = new URL(baseUrl); return (window.location.href = redirectURL.toString()); }; From 06c53557760ca819a79a47624b337859fec00191 Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Thu, 26 Dec 2024 18:23:13 +0800 Subject: [PATCH 03/10] fix: applied comment --- packages/wallets/src/helpers/urls.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wallets/src/helpers/urls.ts b/packages/wallets/src/helpers/urls.ts index a7b7eaedbaa4..e61289f07225 100644 --- a/packages/wallets/src/helpers/urls.ts +++ b/packages/wallets/src/helpers/urls.ts @@ -162,5 +162,5 @@ export const redirectToStandaloneP2P = () => { const baseUrl = isProduction() ? derivUrls.DERIV_P2P_PRODUCTION : derivUrls.DERIV_P2P_STAGING; const redirectURL = new URL(baseUrl); - return (window.location.href = redirectURL.toString()); + window.location.href = redirectURL.toString(); }; From f2756ae53af0ce4cf663182d4368d6cc020c21ff Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Fri, 27 Dec 2024 11:12:58 +0800 Subject: [PATCH 04/10] chore: added feature flag dependencycd --- .../src/components/AccountsList/AccountsList.tsx | 13 ++++++++++--- .../AccountsList/__tests__/AccountsList.spec.tsx | 11 ++++++++++- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/wallets/src/components/AccountsList/AccountsList.tsx b/packages/wallets/src/components/AccountsList/AccountsList.tsx index 1ad173498b7a..db8106206b43 100644 --- a/packages/wallets/src/components/AccountsList/AccountsList.tsx +++ b/packages/wallets/src/components/AccountsList/AccountsList.tsx @@ -1,5 +1,5 @@ import React, { FC, useCallback } from 'react'; -import { useActiveWalletAccount, useIsEuRegion } from '@deriv/api-v2'; +import { useActiveWalletAccount, useGrowthbookIsOn, useIsEuRegion } from '@deriv/api-v2'; import { useTranslations } from '@deriv-com/translations'; import { Divider, Tab, Tabs, useDevice } from '@deriv-com/ui'; import { CFDPlatformsList } from '../../features'; @@ -18,6 +18,9 @@ const AccountsList: FC = ({ accountsActiveTabIndex, onTabClickHandler }) const { localize } = useTranslations(); const { data: isEuRegion, isLoading: isEuRegionLoading } = useIsEuRegion(); const { data: activeWallet } = useActiveWalletAccount(); + const [isP2PWalletEnabled, isGBLoaded] = useGrowthbookIsOn({ + featureFlag: 'p2p_wallet_enabled', + }); const optionsAndMultipliersTabTitle = isEuRegion ? localize('Multipliers') : localize('Options'); @@ -30,7 +33,9 @@ const AccountsList: FC = ({ accountsActiveTabIndex, onTabClickHandler })
- {activeWallet?.account_type === 'doughflow' && } + {Boolean(isGBLoaded && isP2PWalletEnabled) && activeWallet?.account_type === 'doughflow' && ( + + )} @@ -48,7 +53,9 @@ const AccountsList: FC = ({ accountsActiveTabIndex, onTabClickHandler }) return ( <> - {activeWallet?.account_type === 'doughflow' && } + {Boolean(isGBLoaded && isP2PWalletEnabled) && activeWallet?.account_type === 'doughflow' && ( + + )} ({ ...jest.requireActual('@deriv/api-v2'), useActiveWalletAccount: jest.fn(), + useGrowthbookIsOn: jest.fn(), useIsEuRegion: jest.fn(), })); @@ -56,6 +57,7 @@ describe('AccountsList', () => { data: false, isLoading: false, }); + (useGrowthbookIsOn as jest.Mock).mockReturnValue([true]); }); afterAll(() => { @@ -160,6 +162,13 @@ describe('AccountsList', () => { expect(screen.getByText('Easily exchange USD with local currency using Deriv P2P.')).toBeInTheDocument(); }); + it('does not render P2P redirection banner if growthbook is not loaded', () => { + (useGrowthbookIsOn as jest.Mock).mockReturnValue([false]); + render(, { wrapper }); + + expect(screen.queryByText('Easily exchange USD with local currency using Deriv P2P.')).not.toBeInTheDocument(); + }); + it('renders wallet tour guide in mobile view with isWalletSettled set to false', () => { (useDevice as jest.Mock).mockReturnValue({ isMobile: true }); From 99d35601a540e3d99b5d0e55c87de4e07c0df73e Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Fri, 27 Dec 2024 11:14:54 +0800 Subject: [PATCH 05/10] fix: unit test --- .../components/AccountsList/__tests__/AccountsList.spec.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx b/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx index f0d2346d268a..86a97a90795e 100644 --- a/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx +++ b/packages/wallets/src/components/AccountsList/__tests__/AccountsList.spec.tsx @@ -57,7 +57,7 @@ describe('AccountsList', () => { data: false, isLoading: false, }); - (useGrowthbookIsOn as jest.Mock).mockReturnValue([true]); + (useGrowthbookIsOn as jest.Mock).mockReturnValue([true, true]); }); afterAll(() => { @@ -163,7 +163,7 @@ describe('AccountsList', () => { }); it('does not render P2P redirection banner if growthbook is not loaded', () => { - (useGrowthbookIsOn as jest.Mock).mockReturnValue([false]); + (useGrowthbookIsOn as jest.Mock).mockReturnValue([false, true]); render(, { wrapper }); expect(screen.queryByText('Easily exchange USD with local currency using Deriv P2P.')).not.toBeInTheDocument(); From ebbb614a257314fcc5d7618f22160d6b7de94e20 Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Fri, 27 Dec 2024 16:30:11 +0800 Subject: [PATCH 06/10] fix: test case --- .../DesktopWalletsList/__tests__/DesktopWalletsList.spec.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/wallets/src/components/DesktopWalletsList/__tests__/DesktopWalletsList.spec.tsx b/packages/wallets/src/components/DesktopWalletsList/__tests__/DesktopWalletsList.spec.tsx index 46f466aaada9..a9fd9af2d87e 100644 --- a/packages/wallets/src/components/DesktopWalletsList/__tests__/DesktopWalletsList.spec.tsx +++ b/packages/wallets/src/components/DesktopWalletsList/__tests__/DesktopWalletsList.spec.tsx @@ -14,6 +14,10 @@ jest.mock('@deriv/api-v2', () => ({ })), })); +jest.mock('../../AccountsList', () => ({ + AccountsList: () =>
Accounts List
, +})); + const wrapper = ({ children }: PropsWithChildren) => { return ( From 8259164a71fc4b15eb6f3fa5ec4fe2ff5ff239c9 Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Mon, 6 Jan 2025 11:47:51 +0800 Subject: [PATCH 07/10] fix: feature flag --- .../wallets/src/components/AccountsList/AccountsList.tsx | 6 +++--- .../components/AccountsList/__tests__/AccountsList.spec.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/wallets/src/components/AccountsList/AccountsList.tsx b/packages/wallets/src/components/AccountsList/AccountsList.tsx index db8106206b43..6062452ccd4f 100644 --- a/packages/wallets/src/components/AccountsList/AccountsList.tsx +++ b/packages/wallets/src/components/AccountsList/AccountsList.tsx @@ -18,7 +18,7 @@ const AccountsList: FC = ({ accountsActiveTabIndex, onTabClickHandler }) const { localize } = useTranslations(); const { data: isEuRegion, isLoading: isEuRegionLoading } = useIsEuRegion(); const { data: activeWallet } = useActiveWalletAccount(); - const [isP2PWalletEnabled, isGBLoaded] = useGrowthbookIsOn({ + const [isP2PWalletEnabled] = useGrowthbookIsOn({ featureFlag: 'p2p_wallet_enabled', }); @@ -33,7 +33,7 @@ const AccountsList: FC = ({ accountsActiveTabIndex, onTabClickHandler })
- {Boolean(isGBLoaded && isP2PWalletEnabled) && activeWallet?.account_type === 'doughflow' && ( + {Boolean(isP2PWalletEnabled) && activeWallet?.account_type === 'doughflow' && ( )} @@ -53,7 +53,7 @@ const AccountsList: FC = ({ accountsActiveTabIndex, onTabClickHandler }) return ( <> - {Boolean(isGBLoaded && isP2PWalletEnabled) && activeWallet?.account_type === 'doughflow' && ( + {Boolean(isP2PWalletEnabled) && activeWallet?.account_type === 'doughflow' && ( )} { data: false, isLoading: false, }); - (useGrowthbookIsOn as jest.Mock).mockReturnValue([true, true]); + (useGrowthbookIsOn as jest.Mock).mockReturnValue([true]); }); afterAll(() => { @@ -163,7 +163,7 @@ describe('AccountsList', () => { }); it('does not render P2P redirection banner if growthbook is not loaded', () => { - (useGrowthbookIsOn as jest.Mock).mockReturnValue([false, true]); + (useGrowthbookIsOn as jest.Mock).mockReturnValue([false]); render(, { wrapper }); expect(screen.queryByText('Easily exchange USD with local currency using Deriv P2P.')).not.toBeInTheDocument(); From bff4f711ccb3f486bd11f4e701f0096fe7fff1df Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Mon, 6 Jan 2025 13:54:44 +0800 Subject: [PATCH 08/10] fix: analytics config --- .../api-v2/src/hooks/useGrowthbookIsOn.ts | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/api-v2/src/hooks/useGrowthbookIsOn.ts b/packages/api-v2/src/hooks/useGrowthbookIsOn.ts index 56a2b7927c62..087a5027e734 100644 --- a/packages/api-v2/src/hooks/useGrowthbookIsOn.ts +++ b/packages/api-v2/src/hooks/useGrowthbookIsOn.ts @@ -1,6 +1,10 @@ -import { useState, useEffect } from 'react'; +import { useEffect, useMemo, useState } from 'react'; + import { Analytics } from '@deriv-com/analytics'; + +import useActiveWalletAccount from './useActiveWalletAccount'; import useIsGrowthbookIsLoaded from './useIsGrowthbookLoaded'; +import useSettings from './useSettings'; interface UseGrowthbookIsOneArgs { featureFlag: string; @@ -9,11 +13,28 @@ interface UseGrowthbookIsOneArgs { const useGrowthbookIsOn = ({ featureFlag }: UseGrowthbookIsOneArgs) => { const [featureIsOn, setFeatureIsOn] = useState(Analytics?.isFeatureOn(featureFlag)); const isGBLoaded = useIsGrowthbookIsLoaded(); + const { data: settings } = useSettings(); + const { data: activeWallet } = useActiveWalletAccount(); + + const client_accounts = localStorage.getItem('client.accounts'); + const client_accounts_list = client_accounts ? JSON.parse(client_accounts) : []; + const residence = + client_accounts_list.length > 0 && activeWallet?.loginid + ? client_accounts_list.find((account: typeof activeWallet) => account?.loginid === activeWallet?.loginid) + ?.residence + : settings?.country_code; + + const analytics_config = useMemo(() => { + return { + residence_country: residence || '', + }; + }, [residence]); useEffect(() => { if (isGBLoaded) { if (Analytics?.getInstances()?.ab) { const setFeatureValue = () => { + Analytics.setAttributes(analytics_config); const value = Analytics?.isFeatureOn(featureFlag); setFeatureIsOn(value); }; @@ -24,7 +45,7 @@ const useGrowthbookIsOn = ({ featureFlag }: UseGrowthbookIsOneArgs) => { }); } } - }, [isGBLoaded, featureFlag]); + }, [isGBLoaded, featureFlag, analytics_config]); return [featureIsOn, isGBLoaded]; }; From 8bad50f439f6be7e39392b13a784ad36edf93ff1 Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Mon, 6 Jan 2025 14:49:42 +0800 Subject: [PATCH 09/10] fix: analytics config --- packages/api-v2/src/hooks/useGrowthbookIsOn.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/api-v2/src/hooks/useGrowthbookIsOn.ts b/packages/api-v2/src/hooks/useGrowthbookIsOn.ts index 087a5027e734..6005d62a6340 100644 --- a/packages/api-v2/src/hooks/useGrowthbookIsOn.ts +++ b/packages/api-v2/src/hooks/useGrowthbookIsOn.ts @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useState } from 'react'; import { Analytics } from '@deriv-com/analytics'; @@ -24,17 +24,15 @@ const useGrowthbookIsOn = ({ featureFlag }: UseGrowthbookIsOneArgs) => { ?.residence : settings?.country_code; - const analytics_config = useMemo(() => { - return { - residence_country: residence || '', - }; - }, [residence]); + const analytics_config = { + residence_country: residence || '', + }; + Analytics?.setAttributes(analytics_config); useEffect(() => { if (isGBLoaded) { if (Analytics?.getInstances()?.ab) { const setFeatureValue = () => { - Analytics.setAttributes(analytics_config); const value = Analytics?.isFeatureOn(featureFlag); setFeatureIsOn(value); }; @@ -45,7 +43,7 @@ const useGrowthbookIsOn = ({ featureFlag }: UseGrowthbookIsOneArgs) => { }); } } - }, [isGBLoaded, featureFlag, analytics_config]); + }, [isGBLoaded, featureFlag]); return [featureIsOn, isGBLoaded]; }; From 0f8077b70c4dcea03f2ba5a985e2c1e026357ea6 Mon Sep 17 00:00:00 2001 From: lubega-deriv Date: Mon, 6 Jan 2025 15:18:55 +0800 Subject: [PATCH 10/10] fix: move analytics set attributes --- packages/api-v2/src/hooks/useGrowthbookIsOn.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/api-v2/src/hooks/useGrowthbookIsOn.ts b/packages/api-v2/src/hooks/useGrowthbookIsOn.ts index 6005d62a6340..4de5833c4b8c 100644 --- a/packages/api-v2/src/hooks/useGrowthbookIsOn.ts +++ b/packages/api-v2/src/hooks/useGrowthbookIsOn.ts @@ -27,11 +27,11 @@ const useGrowthbookIsOn = ({ featureFlag }: UseGrowthbookIsOneArgs) => { const analytics_config = { residence_country: residence || '', }; - Analytics?.setAttributes(analytics_config); useEffect(() => { if (isGBLoaded) { if (Analytics?.getInstances()?.ab) { + Analytics?.setAttributes(analytics_config); const setFeatureValue = () => { const value = Analytics?.isFeatureOn(featureFlag); setFeatureIsOn(value);