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

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),
         },
     ];
 

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 '';
+    }
+};

packages/trader/src/Modules/Trading/Components/Elements/Turbos/__tests__/payout-per-point.spec.tsx

@@ -32,7 +32,7 @@ describe('<PayoutPerPoint/>', () => {
         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();

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={[<Text key={0} weight='bold' size='xxs' />]}
             values={{
-                title: contract_type === 'turboslong' ? localize('Long') : localize('Short'),
+                title: getContractSubtype(contract_key),
                 message,
             }}
         />
     );
+
     return (
         <Fieldset className={classNames('payout-per-point')}>
             <div className='payout-per-point__text-popover'>
@@ -41,7 +43,7 @@ const PayoutPerPoint = observer(() => {
                 />
             </div>
             <Text size='xs' weight='bold' className='payout-per-point__currency'>
-                <Money amount={stake} currency={currency} show_currency />
+                <Money amount={stake} currency={currency} show_currency should_format={false} />
             </Text>
         </Fieldset>
     );

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}
                 />
             )}
         </div>
@@ -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 (
                 <Localize
                     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={[<strong key={0} />]}
                     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 (
                 <Localize
                     i18n_default_text='<0>For {{title}}:</0> {{message}}'
                     components={[<Text key={0} weight='bold' size='xxs' />]}
                     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={[<strong key={0} />]}
                                                 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),
                                                 }}
                                             />
                                         }