forked from deriv-com/deriv-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Suisin/coj406/upgrade your mt5 account popup (deriv-com#12271)
* chore: update pop up modal to the follow the latest design * chore: change text to hintbox * chore: fix test cases * chore: revert icon files * chore: remove hard coded codes * chore: update account migration title * chore: update logic for account title * chore: update value to values
- Loading branch information
1 parent
9ba2e69
commit d2cd2f3
Showing
6 changed files
with
153 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
89 changes: 50 additions & 39 deletions
89
packages/cfd/src/Containers/mt5-migration-modal/mt5-migration-account-icons.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,61 @@ | ||
| import React from 'react'; | ||
| import { Icon } from '@deriv/components'; | ||
| import { Jurisdiction, JURISDICTION_MARKET_TYPES } from '@deriv/shared'; | ||
| import { observer, useStore } from '@deriv/stores'; | ||
| import { Icon, Text } from '@deriv/components'; | ||
| import { Localize } from '@deriv/translations'; | ||
| import { useMT5SVGEligibleToMigrate } from '@deriv/hooks'; | ||
|
|
||
| type TMT5MigrationAccountIconsProps = { | ||
| to: typeof Jurisdiction[keyof typeof Jurisdiction]; | ||
| type: typeof JURISDICTION_MARKET_TYPES[keyof typeof JURISDICTION_MARKET_TYPES]; | ||
| }; | ||
| const MT5MigrationAccountIcons = () => { | ||
| const { | ||
| eligible_svg_to_bvi_derived_accounts, | ||
| eligible_svg_to_bvi_financial_accounts, | ||
| eligible_svg_to_vanuatu_derived_accounts, | ||
| eligible_svg_to_vanuatu_financial_accounts, | ||
| no_of_svg_accounts_to_migrate, | ||
| } = useMT5SVGEligibleToMigrate(); | ||
|
|
||
| const MT5MigrationAccountIcons = observer(({ to, type }: TMT5MigrationAccountIconsProps) => { | ||
| const { ui } = useStore(); | ||
| const { is_mobile } = ui; | ||
| const getFromAccountIcon = () => { | ||
| switch (type) { | ||
| case JURISDICTION_MARKET_TYPES.DERIVED: | ||
| return 'IcMt5SvgDerived'; | ||
| case JURISDICTION_MARKET_TYPES.FINANCIAL: | ||
| return 'IcMt5SvgFinancial'; | ||
| default: | ||
| return ''; | ||
| } | ||
| }; | ||
| let existing_account_title = 'Existing account'; | ||
| let new_account_title = 'New account'; | ||
|
|
||
| const getToAccountIcon = () => { | ||
| const to_type = `${to}_${type}`; | ||
| switch (to_type) { | ||
| case `${Jurisdiction.BVI}_${JURISDICTION_MARKET_TYPES.DERIVED}`: | ||
| return 'IcMt5BviDerived'; | ||
| case `${Jurisdiction.BVI}_${JURISDICTION_MARKET_TYPES.FINANCIAL}`: | ||
| return 'IcMt5BviFinancial'; | ||
| case `${Jurisdiction.VANUATU}_${JURISDICTION_MARKET_TYPES.DERIVED}`: | ||
| return 'IcMt5VanuatuDerived'; | ||
| case `${Jurisdiction.VANUATU}_${JURISDICTION_MARKET_TYPES.FINANCIAL}`: | ||
| return 'IcMt5VanuatuFinancial'; | ||
| default: | ||
| return ''; | ||
| } | ||
| }; | ||
| if (no_of_svg_accounts_to_migrate > 1) { | ||
| existing_account_title = 'Existing accounts'; | ||
| new_account_title = 'New accounts'; | ||
| } | ||
|
|
||
| return ( | ||
| <div className='mt5-migration-modal__migration_content-items__list'> | ||
| <Icon icon={getFromAccountIcon()} size={96} data_testid={`dt_migrate_from_svg_${type}`} /> | ||
| <Icon icon={is_mobile ? 'IcLongArrowDown' : 'IcLongArrowRight'} size={24} /> | ||
| <Icon icon={getToAccountIcon()} size={96} data_testid={`dt_migrate_to_${to}_${type}`} /> | ||
| <div className='mt5-migration-modal__migration_content-items__list--container'> | ||
| <Text weight='bold' size='xs'> | ||
| <Localize i18n_default_text='{{existing_account_title}}' values={{ existing_account_title }} /> | ||
| </Text> | ||
| <div className='mt5-migration-modal__migration_content-items__list--container__icons'> | ||
| {(eligible_svg_to_bvi_derived_accounts || eligible_svg_to_vanuatu_derived_accounts) && ( | ||
| <Icon icon='IcMt5SvgDerived' size={96} data_testid='dt_migrate_from_svg_derived' /> | ||
| )} | ||
| {(eligible_svg_to_bvi_financial_accounts || eligible_svg_to_vanuatu_financial_accounts) && ( | ||
| <Icon icon='IcMt5SvgFinancial' size={96} data_testid='dt_migrate_from_svg_financial' /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| <div className='mt5-migration-modal__migration_content-items__list--container'> | ||
| <Text weight='bold' size='xs'> | ||
| <Localize i18n_default_text='{{new_account_title}}' values={{ new_account_title }} /> | ||
| </Text> | ||
| <div className='mt5-migration-modal__migration_content-items__list--container__icons'> | ||
| {eligible_svg_to_bvi_derived_accounts && ( | ||
| <Icon icon='IcMt5BviDerived' size={96} data_testid='dt_migrate_to_bvi_derived' /> | ||
| )} | ||
| {eligible_svg_to_bvi_financial_accounts && ( | ||
| <Icon icon='IcMt5BviFinancial' size={96} data_testid='dt_migrate_to_bvi_financial' /> | ||
| )} | ||
| {eligible_svg_to_vanuatu_derived_accounts && ( | ||
| <Icon icon='IcMt5VanuatuDerived' size={96} data_testid='dt_migrate_to_vanuatu_derived' /> | ||
| )} | ||
| {eligible_svg_to_vanuatu_financial_accounts && ( | ||
| <Icon icon='IcMt5VanuatuFinancial' size={96} data_testid='dt_migrate_to_vanuatu_financial' /> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }); | ||
| }; | ||
|
|
||
| export default MT5MigrationAccountIcons; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.