From 9c73f66898fd22ca0d5e2c71552d52080c14f917 Mon Sep 17 00:00:00 2001 From: kate-deriv <121025168+kate-deriv@users.noreply.github.com> Date: Wed, 22 Mar 2023 15:39:48 +0300 Subject: [PATCH] Kate/91508/To finalize Payout per point component and its tooltip (#110) * refactor: expand getContractSubtype function * refactor: delete round for turbos payout per point * fix: change test case --- .../contract-card-header.jsx | 4 ++-- .../shared/src/utils/contract/contract.ts | 13 ++++++++++- .../__tests__/payout-per-point.spec.tsx | 2 +- .../Elements/Turbos/payout-per-point.tsx | 6 +++-- .../Form/Purchase/contract-info.jsx | 22 +++++++++---------- 5 files changed, 29 insertions(+), 18 deletions(-) diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx index db23750ddfbc..24b94f37c889 100644 --- a/packages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx +++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-header.jsx @@ -2,7 +2,7 @@ import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; import { CSSTransition } from 'react-transition-group'; -import { isHighLow, getCurrentTick, isBot, getTurbosSubtype, isTurbosContract } from '@deriv/shared'; +import { isHighLow, getCurrentTick, isBot, getContractSubtype, isTurbosContract } from '@deriv/shared'; import ContractTypeCell from './contract-type-cell.jsx'; import Button from '../../button'; import Icon from '../../icon'; @@ -38,7 +38,7 @@ const ContractCardHeader = ({ }, { is_param_displayed: isTurbosContract(contract_type), - displayed_param: getTurbosSubtype(contract_type), + displayed_param: getContractSubtype(contract_type), }, ]; diff --git a/packages/shared/src/utils/contract/contract.ts b/packages/shared/src/utils/contract/contract.ts index 5b993fc5d512..14e692237722 100644 --- a/packages/shared/src/utils/contract/contract.ts +++ b/packages/shared/src/utils/contract/contract.ts @@ -157,4 +157,15 @@ export const shouldShowExpiration = (symbol: string) => /^cry/.test(symbol); export const shouldShowCancellation = (symbol: string) => !/^(cry|CRASH|BOOM|stpRNG|WLD|JD)/.test(symbol); -export const getTurbosSubtype = (type: string) => type[6] + type.toLowerCase().slice(7); +export const getContractSubtype = (type: string) => { + switch (type) { + case 'VANILLALONGCALL': + case 'VANILLALONGPUT': + return type[11] + type.toLowerCase().slice(12); + case 'TURBOSLONG': + case 'TURBOSSHORT': + return type[6] + type.toLowerCase().slice(7); + default: + return ''; + } +}; diff --git a/packages/trader/src/Modules/Trading/Components/Elements/Turbos/__tests__/payout-per-point.spec.tsx b/packages/trader/src/Modules/Trading/Components/Elements/Turbos/__tests__/payout-per-point.spec.tsx index ef6460f57acf..28b77c08ad23 100644 --- a/packages/trader/src/Modules/Trading/Components/Elements/Turbos/__tests__/payout-per-point.spec.tsx +++ b/packages/trader/src/Modules/Trading/Components/Elements/Turbos/__tests__/payout-per-point.spec.tsx @@ -32,7 +32,7 @@ describe('', () => { expect(screen.getByText('Payout per point')).toBeInTheDocument(); }); it('should render amount correctly', () => { - expect(screen.getByText(/10.00/i)).toBeInTheDocument(); + expect(screen.getByText(/10/i)).toBeInTheDocument(); }); it('should render currency correctly', () => { expect(screen.getByText(/EUR/i)).toBeInTheDocument(); diff --git a/packages/trader/src/Modules/Trading/Components/Elements/Turbos/payout-per-point.tsx b/packages/trader/src/Modules/Trading/Components/Elements/Turbos/payout-per-point.tsx index aa057781546d..0661ad5b4595 100644 --- a/packages/trader/src/Modules/Trading/Components/Elements/Turbos/payout-per-point.tsx +++ b/packages/trader/src/Modules/Trading/Components/Elements/Turbos/payout-per-point.tsx @@ -4,6 +4,7 @@ import { Money, Text, Popover } from '@deriv/components'; import { Localize, localize } from '@deriv/translations'; import Fieldset from 'App/Components/Form/fieldset.jsx'; import { observer, useStore } from '@deriv/stores'; +import { getContractSubtype } from '@deriv/shared'; const PayoutPerPoint = observer(() => { const { @@ -20,11 +21,12 @@ const PayoutPerPoint = observer(() => { i18n_default_text='<0>For {{title}}: {{message}}' components={[]} values={{ - title: contract_type === 'turboslong' ? localize('Long') : localize('Short'), + title: getContractSubtype(contract_key), message, }} /> ); + return (
@@ -41,7 +43,7 @@ const PayoutPerPoint = observer(() => { />
- +
); diff --git a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx index 8f41db9460a7..f8f57cee9253 100644 --- a/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx +++ b/packages/trader/src/Modules/Trading/Components/Form/Purchase/contract-info.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Icon, DesktopWrapper, Money, MobileWrapper, Popover, Text } from '@deriv/components'; import { localize, Localize } from '@deriv/translations'; -import { getCurrencyDisplayCode, getLocalizedBasis, isMobile } from '@deriv/shared'; +import { getCurrencyDisplayCode, getLocalizedBasis, getContractSubtype, isMobile } from '@deriv/shared'; import CancelDealInfo from './cancel-deal-info.jsx'; const ValueMovement = ({ has_error_or_not_loaded, proposal_info, currency, has_increased, is_turbos, is_vanilla }) => ( @@ -18,6 +18,7 @@ const ValueMovement = ({ has_error_or_not_loaded, proposal_info, currency, has_i })} currency={currency} show_currency + should_format={!is_turbos} /> )} @@ -77,30 +78,31 @@ const ContractInfo = ({ const { message, obj_contract_basis, stake } = proposal_info; const setHintMessage = () => { - if (['VANILLALONGCALL', 'VANILLALONGPUT'].includes(type)) { + if (is_vanilla) { return ( ]} values={{ - trade_type: type === 'VANILLALONGCALL' ? localize('above') : localize('below'), - title: type === 'VANILLALONGCALL' ? localize('Call') : localize('Put'), + trade_type: type === 'VANILLALONGCALL' ? 'above' : 'below', + title: getContractSubtype(type), }} /> ); } - if (['TURBOSLONG', 'TURBOSSHORT'].includes(type)) { + if (is_turbos) { return ( ]} values={{ - title: type === 'TURBOSLONG' ? localize('Long') : localize('Short'), + title: getContractSubtype(type), message, }} /> ); } + return message; }; @@ -169,12 +171,8 @@ const ContractInfo = ({ i18n_default_text='<0>For {{title}}: Your payout will grow by this amount for every point {{trade_type}} your strike price. You will start making a profit when the payout is higher than your stake.' components={[]} values={{ - trade_type: - type === 'VANILLALONGCALL' - ? localize('above') - : localize('below'), - title: - type === 'VANILLALONGCALL' ? localize('Call') : localize('Put'), + trade_type: type === 'VANILLALONGCALL' ? 'above' : 'below', + title: getContractSubtype(type), }} /> }