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.
[UPM-1431] Suisin/chore: update new design changes on withdrawal limi…
…ts (deriv-com#17217) * chore: update new design changes on withdrawal limits * chore: remove unused scss from code base * chore: update to use localize function instead of Localize component * chore: fix mobile design not same * chore: empty commit
- Loading branch information
1 parent
cbd9d49
commit d49dcc5
Showing
12 changed files
with
289 additions
and
154 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
88 changes: 88 additions & 0 deletions
88
packages/account/src/Components/account-limits/__tests__/withdrawal-limits-table.spec.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 |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import WithdrawalLimitsTable from '../withdrawal-limits-table'; | ||
| import { mockStore, StoreProvider } from '@deriv/stores'; | ||
| import { useGetWithdrawalLimitsDetails } from '@deriv/hooks'; | ||
| import userEvent from '@testing-library/user-event'; | ||
|
|
||
| jest.mock('@deriv/hooks', () => ({ | ||
| useGetWithdrawalLimitsDetails: jest.fn(), | ||
| })); | ||
|
|
||
| describe('WithdrawalLimitsTable', () => { | ||
| const store = mockStore({}); | ||
|
|
||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| const renderComponent = () => | ||
| render( | ||
| <StoreProvider store={store}> | ||
| <WithdrawalLimitsTable /> | ||
| </StoreProvider> | ||
| ); | ||
|
|
||
| const constant_title = ['Withdrawal limits', 'Limit (USD)']; | ||
|
|
||
| it('should renders the withdrawal limits table correctly', () => { | ||
| (useGetWithdrawalLimitsDetails as jest.Mock).mockReturnValue({ | ||
| withdrawal_limit_details: [ | ||
| { | ||
| withdrawal_title: 'Lifetime limit', | ||
| withdrawal_info_message: 'Lifetime limit info', | ||
| withdrawal_amount: 10000, | ||
| }, | ||
| { | ||
| withdrawal_title: '30-day limit', | ||
| withdrawal_info_message: '30-day limit info', | ||
| withdrawal_amount: 5000, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| renderComponent(); | ||
|
|
||
| constant_title.map(title => expect(screen.getByText(title)).toBeInTheDocument()); | ||
|
|
||
| expect(screen.getByText(/Lifetime limit/)).toBeInTheDocument(); | ||
| expect(screen.getByText(/10,000/)).toBeInTheDocument(); | ||
|
|
||
| expect(screen.getByText(/30-day limit/)).toBeInTheDocument(); | ||
| expect(screen.getByText(/5,000/)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should render withdrawal_info_message on mouse hover on the info icon', () => { | ||
| (useGetWithdrawalLimitsDetails as jest.Mock).mockReturnValue({ | ||
| withdrawal_limit_details: [ | ||
| { | ||
| withdrawal_title: 'Lifetime limit', | ||
| withdrawal_info_message: 'Lifetime limit info', | ||
| withdrawal_amount: 10000, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| renderComponent(); | ||
| expect(screen.queryByText(/Lifetime limit info/)).not.toBeInTheDocument(); | ||
| const pop_over_icon = screen.getByTestId('dt_popover_wrapper'); | ||
| userEvent.hover(pop_over_icon); | ||
| expect(screen.queryByText(/Lifetime limit info/)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should not render any value if withdrawal_limit_details is empty', () => { | ||
| (useGetWithdrawalLimitsDetails as jest.Mock).mockReturnValue({ | ||
| withdrawal_limit_details: [], | ||
| }); | ||
|
|
||
| renderComponent(); | ||
|
|
||
| constant_title.map(title => expect(screen.getByText(title)).toBeInTheDocument()); | ||
|
|
||
| expect(screen.queryByText(/Lifetime limit/)).not.toBeInTheDocument(); | ||
| expect(screen.queryByText(/10,000/)).not.toBeInTheDocument(); | ||
|
|
||
| expect(screen.queryByText(/30-day limit/)).not.toBeInTheDocument(); | ||
| expect(screen.queryByText(/5,000/)).not.toBeInTheDocument(); | ||
| }); | ||
| }); |
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
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
123 changes: 49 additions & 74 deletions
123
packages/account/src/Components/account-limits/withdrawal-limits-table.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,85 +1,60 @@ | ||
| import { Fragment } from 'react'; | ||
| import { Text } from '@deriv/components'; | ||
| import { FormatUtils, CurrencyConstants } from '@deriv-com/utils'; | ||
| import { Localize } from '@deriv/translations'; | ||
| import { observer, useStore } from '@deriv/stores'; | ||
| import AccountLimitsTableCell from './account-limits-table-cell'; | ||
| import AccountLimitsTableHeader from './account-limits-table-header'; | ||
| import AccountLimitsExtraInfo from './account-limits-extra-info'; | ||
| import { useGetWithdrawalLimitsDetails } from '@deriv/hooks'; | ||
|
|
||
| type TWithdrawalLimitsTable = { | ||
| num_of_days_limit?: string | number; | ||
| withdrawal_since_inception_monetary?: string | number; | ||
| remainder?: string | number; | ||
| }; | ||
| const WithdrawalLimitsTable = observer(() => { | ||
| const { client } = useStore(); | ||
| const { withdrawal_limit_details } = useGetWithdrawalLimitsDetails(); | ||
| const { currency } = client; | ||
|
|
||
| const WithdrawalLimitsTable = observer( | ||
| ({ num_of_days_limit, withdrawal_since_inception_monetary, remainder }: TWithdrawalLimitsTable) => { | ||
| const { client } = useStore(); | ||
| const { currency, is_fully_authenticated } = client; | ||
| return ( | ||
| <Fragment> | ||
| <table className='da-account-limits__table' data-testid='withdrawal_limits_table'> | ||
| <thead> | ||
| <tr> | ||
| <AccountLimitsTableHeader> | ||
| <Localize i18n_default_text='Withdrawal limits' /> | ||
| </AccountLimitsTableHeader> | ||
| {is_fully_authenticated && ( | ||
| <AccountLimitsTableHeader align='right'> | ||
| <Localize i18n_default_text='Limit' /> | ||
| </AccountLimitsTableHeader> | ||
| )} | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {!is_fully_authenticated && ( | ||
| <Fragment> | ||
| <tr> | ||
| <AccountLimitsTableCell> | ||
| <Localize i18n_default_text='Total withdrawal allowed' /> | ||
| </AccountLimitsTableCell> | ||
| <AccountLimitsTableCell align='right'> | ||
| {FormatUtils.formatMoney((num_of_days_limit as number) ?? 0, { | ||
| return ( | ||
| <Fragment> | ||
| <table className='da-account-limits__table' data-testid='withdrawal_limits_table'> | ||
| <thead> | ||
| <tr> | ||
| <AccountLimitsTableHeader> | ||
| <Localize i18n_default_text='Withdrawal limits' /> | ||
| </AccountLimitsTableHeader> | ||
| <AccountLimitsTableHeader align='right'> | ||
| <Localize i18n_default_text='Limit (USD)' /> | ||
| </AccountLimitsTableHeader> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <Fragment> | ||
| {withdrawal_limit_details.map((withdrawal_limit_detail, index) => ( | ||
| <tr key={index}> | ||
| <AccountLimitsTableCell | ||
| className='da-account-limits__table-cell--withdrawal-limit' | ||
| renderExtraInfo={() => ( | ||
| <AccountLimitsExtraInfo | ||
| should_display_in_info_tooltip | ||
| message={withdrawal_limit_detail.withdrawal_info_message} | ||
| /> | ||
| )} | ||
| > | ||
| {withdrawal_limit_detail.withdrawal_title} | ||
| </AccountLimitsTableCell> | ||
| <AccountLimitsTableCell align='right'> | ||
| {FormatUtils.formatMoney( | ||
| (withdrawal_limit_detail.withdrawal_amount as number) ?? 0, | ||
| { | ||
| currency: currency as CurrencyConstants.Currency, | ||
| })} | ||
| </AccountLimitsTableCell> | ||
| </tr> | ||
| <tr> | ||
| <AccountLimitsTableCell> | ||
| <Localize i18n_default_text='Total withdrawn' /> | ||
| </AccountLimitsTableCell> | ||
| <AccountLimitsTableCell align='right'> | ||
| {FormatUtils.formatMoney((withdrawal_since_inception_monetary as number) ?? 0, { | ||
| currency: currency as CurrencyConstants.Currency, | ||
| })} | ||
| </AccountLimitsTableCell> | ||
| </tr> | ||
| <tr> | ||
| <AccountLimitsTableCell> | ||
| <Localize i18n_default_text='Maximum withdrawal remaining' /> | ||
| </AccountLimitsTableCell> | ||
| <AccountLimitsTableCell align='right'> | ||
| {FormatUtils.formatMoney((remainder as number) ?? 0, { | ||
| currency: currency as CurrencyConstants.Currency, | ||
| })} | ||
| </AccountLimitsTableCell> | ||
| </tr> | ||
| </Fragment> | ||
| )} | ||
| </tbody> | ||
| </table> | ||
| <div className='da-account-limits__text-container'> | ||
| <Text as='p' size='xxs' color='less-prominent' line_height='xs'> | ||
| {is_fully_authenticated ? ( | ||
| <Localize i18n_default_text='Your account is fully authenticated and your withdrawal limits have been lifted.' /> | ||
| ) : ( | ||
| <Localize i18n_default_text='Stated limits are subject to change without prior notice.' /> | ||
| )} | ||
| </Text> | ||
| </div> | ||
| </Fragment> | ||
| ); | ||
| } | ||
| ); | ||
| } | ||
| )} | ||
| </AccountLimitsTableCell> | ||
| </tr> | ||
| ))} | ||
| </Fragment> | ||
| </tbody> | ||
| </table> | ||
| </Fragment> | ||
| ); | ||
| }); | ||
|
|
||
| export default WithdrawalLimitsTable; |
Oops, something went wrong.