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}}: 0>{{message}}'
components={[]}
values={{
- title: contract_type === 'turboslong' ? localize('Long') : localize('Short'),
+ title: getContractSubtype(contract_key),
message,
}}
/>
);
+
return (
);
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}}:0> 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),
}}
/>
}