Skip to content

Commit

Permalink
Aum/90082/derivez transfer icon fixed (#7932)
Browse files Browse the repository at this point in the history 
* fix: DerivEZ icon is missing from Cashier Transfer Page

* Revert "fix: DerivEZ icon is missing from Cashier Transfer Page"

This reverts commit ef4b882.

* 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 <aumbhatt@Aum-Bhatts-MacBook-Pro-YH29FC6V94.local>
  • Loading branch information
@aum-deriv
aum-deriv and Aum Bhatt committed Apr 18, 2023
1 parent 9fe7dcd commit 9b7e7b9
Show file tree
Hide file tree
Showing 5 changed files with 189 additions and 10 deletions.
3 changes: 3 additions & 0 deletions packages/cashier/src/components/account-platform-icon/account-platform-icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()}`
}`}
/>
);
};
Expand Down
166 changes: 166 additions & 0 deletions ...src/pages/account-transfer/account-transfer-form/__tests__/account-transfer-form.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ jest.mock('@deriv/shared/src/utils/screen/responsive', () => ({

let mockRootStore;

jest.mock('Assets/svgs/trading-platform', () =>
jest.fn(props => <div data-testid={props.icon}>TradingPlatformIcon</div>)
);

describe('<AccountTransferForm />', () => {
beforeEach(() => {
mockRootStore = {
Expand Down Expand Up @@ -275,4 +279,166 @@ describe('<AccountTransferForm />', () => {

expect(screen.getByText('You have 1 transfer remaining for today.')).toBeInTheDocument();
});

describe('<Dropdown />', () => {
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();
});
});
});
});
2 changes: 1 addition & 1 deletion packages/cashier/src/pages/account-transfer/account-transfer-form/account-transfer-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -642,5 +642,5 @@ const AccountTransferForm = observer(
);
}
);

AccountTransferForm.displayName = 'AccountTransferForm';
export default AccountTransferForm;
20 changes: 12 additions & 8 deletions packages/cashier/src/stores/account-transfer-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' &&
Expand Down
8 changes: 7 additions & 1 deletion packages/components/src/components/icon/derivez/ic-derivez.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

1 comment on commit 9b7e7b9

@vercel
Copy link

@vercel vercel bot commented on 9b7e7b9 Apr 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

deriv-app – ./

deriv-app.vercel.app
binary.sx
deriv-app.binary.sx
deriv-app-git-master.binary.sx

Please sign in to comment.