From 9b7e7b953aad63794b04c92dab67b260e8821e7f Mon Sep 17 00:00:00 2001 From: aum-deriv <125039206+aum-deriv@users.noreply.github.com> Date: Tue, 18 Apr 2023 14:09:01 +0400 Subject: [PATCH] Aum/90082/derivez transfer icon fixed (#7932) * fix: DerivEZ icon is missing from Cashier Transfer Page * Revert "fix: DerivEZ icon is missing from Cashier Transfer Page" This reverts commit ef4b882b87da8dbb93e23c96e8add5296e50259b. * fix: DerivEZ icon is missing from Cashier Transfer Page * chore: Added test cases for all the icons for dropdowns in cashier transfer page * fix: Changed testid format for testing account icons in the dropdowns for cashier transfer page * chore: Replaced old icon of DerivEZ with new icon for dropdowns in account transfer page in cashier * chore: Fixed merge conflicts * chore: Fixed merge conflicts * chore: Fixed merge conflicts * chore: Removing comments --------- Co-authored-by: Aum Bhatt --- .../account-platform-icon.tsx | 3 + .../__tests__/account-transfer-form.spec.tsx | 166 ++++++++++++++++++ .../account-transfer-form.tsx | 2 +- .../src/stores/account-transfer-store.ts | 20 ++- .../components/icon/derivez/ic-derivez.svg | 8 +- 5 files changed, 189 insertions(+), 10 deletions(-) diff --git a/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx b/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx index a2fc8e3bca62..b0a5679ffef2 100644 --- a/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx +++ b/packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx @@ -30,6 +30,9 @@ const AccountPlatformIcon = ({ icon={account.platform_icon || `IcCurrency-${account?.currency?.toLowerCase()}`} size={size} className={icon_class_name} + data_testid={`dt_account_platform_icon_${ + account.platform_icon || `currency_${account?.currency?.toLowerCase()}` + }`} /> ); }; diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx index e003a17b2738..f38932bc95f7 100644 --- a/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx +++ b/packages/cashier/src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx @@ -11,6 +11,10 @@ jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({ let mockRootStore; +jest.mock('Assets/svgs/trading-platform', () => + jest.fn(props =>
TradingPlatformIcon
) +); + describe('', () => { beforeEach(() => { mockRootStore = { @@ -275,4 +279,166 @@ describe('', () => { expect(screen.getByText('You have 1 transfer remaining for today.')).toBeInTheDocument(); }); + + describe('', () => { + const accountsList = [ + { + currency: 'BTC', + is_mt: false, + is_dxtrade: false, + is_derivez: false, + is_crypto: true, + text: 'BTC', + value: 'CR90000249', + }, + { + currency: 'USD', + is_mt: false, + is_dxtrade: false, + is_derivez: false, + is_crypto: false, + text: 'USD', + value: 'CR90000212', + }, + { + currency: 'USD', + platform_icon: 'IcDerivez', + is_mt: false, + is_dxtrade: false, + is_derivez: true, + is_crypto: false, + text: 'Deriv EZ', + value: 'EZR80000469', + }, + { + currency: 'USD', + is_mt: false, + is_dxtrade: true, + is_derivez: false, + is_crypto: false, + platform_icon: 'IcDeriv X', + text: 'Deriv X', + value: 'DXR1029', + }, + { + text: 'USD', + currency: 'USD', + value: 'MTR40013177', + platform_icon: 'Derived', + is_crypto: false, + is_mt: true, + is_dxtrade: false, + is_derivez: false, + }, + ]; + + const derivez_account = { + currency: 'USD', + is_mt: false, + is_dxtrade: false, + is_derivez: true, + is_crypto: false, + text: 'Deriv EZ', + value: 'EZR80000469', + }; + + const derivx_account = { + currency: 'USD', + is_mt: false, + is_dxtrade: true, + is_derivez: false, + is_crypto: false, + platform_icon: 'IcDxtradeDeriv X', + text: 'Deriv X', + value: 'DXR1029', + }; + + const currency_usd_account = { + text: 'USD', + value: 'CR90000212', + balance: '9953.89', + currency: 'USD', + is_crypto: false, + is_mt: false, + is_dxtrade: false, + is_derivez: false, + }; + + const currency_btc_account = { + text: 'BTC', + value: 'CR90000249', + currency: 'BTC', + is_crypto: true, + is_mt: false, + is_dxtrade: false, + is_derivez: false, + }; + + const mt5_account = { + text: 'USD', + currency: 'USD', + value: 'MTR40013177', + is_crypto: false, + is_mt: true, + is_dxtrade: false, + is_derivez: false, + }; + + describe('from_dropdown', () => { + it('should check for USD icon when USD is selected in from_dropdown', () => { + mockRootStore.modules.cashier.account_transfer.accounts_list = accountsList; + mockRootStore.modules.cashier.account_transfer.selected_from = currency_usd_account; + mockRootStore.modules.cashier.account_transfer.setTransferPercentageSelectorResult = jest + .fn() + .mockReturnValue(10.0); + + renderAccountTransferForm(); + expect(screen.getByTestId('dt_account_platform_icon_currency_usd')).toBeInTheDocument(); + }); + + it('should check for icon BTC when BTC is selected in from dropdown', () => { + mockRootStore.modules.cashier.account_transfer.accounts_list = accountsList; + mockRootStore.modules.cashier.account_transfer.selected_from = currency_btc_account; + mockRootStore.modules.cashier.account_transfer.setTransferPercentageSelectorResult = jest + .fn() + .mockReturnValue(100.0); + + renderAccountTransferForm(); + expect(screen.getByTestId('dt_account_platform_icon_currency_btc')).toBeInTheDocument(); + }); + + it('should check for derivez icon when derivez is selected in from_dropdown', () => { + mockRootStore.modules.cashier.account_transfer.accounts_list = accountsList; + mockRootStore.modules.cashier.account_transfer.selected_from = derivez_account; + mockRootStore.modules.cashier.account_transfer.setTransferPercentageSelectorResult = jest + .fn() + .mockReturnValue(100.0); + + renderAccountTransferForm(); + expect(screen.getByTestId('dt_account_platform_icon_IcDerivez')).toBeInTheDocument(); + }); + + it('should check for MT5 icon when MT5 is selected in from_dropdown', () => { + mockRootStore.modules.cashier.account_transfer.accounts_list = accountsList; + mockRootStore.modules.cashier.account_transfer.selected_from = mt5_account; + mockRootStore.modules.cashier.account_transfer.setTransferPercentageSelectorResult = jest + .fn() + .mockReturnValue(100.0); + + renderAccountTransferForm(); + expect(screen.getByTestId('Derived')).toBeInTheDocument(); + }); + + it('should check for DerivX icon when DerivX is selected in from_dropdown', () => { + mockRootStore.modules.cashier.account_transfer.accounts_list = accountsList; + mockRootStore.modules.cashier.account_transfer.selected_from = derivx_account; + mockRootStore.modules.cashier.account_transfer.setTransferPercentageSelectorResult = jest + .fn() + .mockReturnValue(100.0); + + renderAccountTransferForm(); + expect(screen.getByTestId('dt_account_platform_icon_IcDeriv X')).toBeInTheDocument(); + }); + }); + }); }); diff --git a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx index 327e0906ea24..6f71effba0bb 100644 --- a/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx +++ b/packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx @@ -642,5 +642,5 @@ const AccountTransferForm = observer( ); } ); - +AccountTransferForm.displayName = 'AccountTransferForm'; export default AccountTransferForm; diff --git a/packages/cashier/src/stores/account-transfer-store.ts b/packages/cashier/src/stores/account-transfer-store.ts index d3642187b325..f32257259b1f 100644 --- a/packages/cashier/src/stores/account-transfer-store.ts +++ b/packages/cashier/src/stores/account-transfer-store.ts @@ -382,14 +382,18 @@ export default class AccountTransferStore { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion const is_cfd = Object.keys(cfd_platforms).includes(account.account_type!); const cfd_text_display = cfd_platforms[account.account_type as keyof typeof cfd_platforms]?.name; - const cfd_icon_display = `${ - cfd_platforms[account.account_type as keyof typeof cfd_platforms]?.icon - }-${getCFDAccount({ - market_type: account.market_type, - sub_account_type: account.sub_account_type, - platform: account.account_type, - is_eu: this.root_store.client.is_eu, - })}` as TPlatformIcon; + + const cfd_icon_display = `${cfd_platforms[account.account_type as keyof typeof cfd_platforms]?.icon}${ + ('-' && + getCFDAccount({ + market_type: account.market_type, + sub_account_type: account.sub_account_type, + platform: account.account_type, + is_eu: this.root_store.client.is_eu, + })) || + '' + }`; + const non_eu_accounts = account.landing_company_short && account.landing_company_short !== 'svg' && diff --git a/packages/components/src/components/icon/derivez/ic-derivez.svg b/packages/components/src/components/icon/derivez/ic-derivez.svg index 3b596acb30d3..6cbc3a5b9a94 100644 --- a/packages/components/src/components/icon/derivez/ic-derivez.svg +++ b/packages/components/src/components/icon/derivez/ic-derivez.svg @@ -1 +1,7 @@ - \ No newline at end of file + + + + + + +