Kate/87506/To implement Turbos Contract card in Recent Positions drawer and Contract Details

[kate-deriv]

Changes:

For Recent Positions:

• Add card for turbos contract in recent positions (for desktop and mobile).
• Refactored function getContractTypeDisplay: add check for the existence of button_name key, because for Turbos text on the purchase button is different from the text on recent position card (top right corner). If button_name don't exist (like for majority of contact types) function returns value under name key.
• According to the design, in the top right corner of Turbos Contract card in Recent Positions drawer we should show 'Turbos Short' or 'Turbos Long', written in 2 lines. So, if the type is TURBOSLONG or TURBOSSHORT we call new implemented function getSubType, which returns a prettier version ('Short' or 'Long'). Of course we may also check the type with the help of switch case but it'll look to cumbersome.
• Check of the trade type in contract-type-cell.jsx was lifted up to the parent component (contract-card-header.jsx). There we run thought contract_type_list_info, looking for text to current trade type and pass it down to child component. contract_type_list_info is an array with objects and this organisation allow us to add new trade types even with very specific text in future.
• Removed MultiplierCardBody from contract-card-body.jsx to a separate file in order to decomposing.

For Contract Details:

• Add turbos contract card to contract details page (for desktop and mobile).

Extra:

• Delete hardcoded max_stake and min_stake and set them in onProposalResponse.

TODO/Problems:

• For existing barrier contracts we expect proposal_open _contract to contain tick_stream for ongoing tick duration contract and audit_details (with all contract ticks inside) additionally for the closed tick duration contract.
  But the structure of proposal_open_contract API response for Turbos is different (as tick_stream was removed), so we need a clarification from BE. This affect counter appearance (because it's different for ticks and minutes) and text in duration in contract details card.
  Thread discussion
• We get status: null in proposal_open_contract. That is why for contracts, which user win we may show 'lost'. Need a clarification from BE.
  Thread discussion
• History tab on card in Contracts Details page is temporary empty (even if the user add Take profit). The reason might be that we get an empty array contract_update_history in response. Need a clarification from BE.
  Thread discussion
• Props drilling can be improved. We pass props (is_turbos for e.g.) from ContractReplay -> ContractDrawer -> ContractDrawerCard -> ContractCardBody and etc.

When you need to add unit test

• If this change disrupt current flow
• If this change is adding new flow

When you need to add integration test

• If components from external libraries are being used to define the flow, e.g. @deriv/components
• If it relies on a very specific set of props with no default behaviour for the current component.

Test coverage checklist (for reviewer)

• Ensure utility / function has a test case
• Ensure all the tests are passing

Type of change

• Bug fix
• New feature
• Update feature
• Refactor code
• Translation to code
• Translation to crowdin
• Script configuration
• Improve performance
• Style only
• Dependency update
• Documentation update
• Release

[matin-deriv]

typo

[kate-deriv]

The types were described above: TContractConfig(27 line) and TGetSupportedContracts(33 line). We use them inside function:

export const getContractTypeDisplay = (type: TGetSupportedContracts, is_high_low = false, show_trade_text = false) => {
    return show_trade_text
        ? (getContractConfig(is_high_low)[type] as TContractConfig).button_name
        : getContractConfig(is_high_low)[type].name;
};

[matin-deriv]

No I mean there is a typo in Tubos word, it should be Turbos 😋

[kate-deriv]

Ooooo, I see, sorry about that)

[maryia-deriv]

Suggested change

	className={is_mobile ? 'dc-contract-card__stake-mobile' : 'dc-contract-card__stake'}
	className='dc-contract-card__stake'

@kate-deriv one more suggestion😊
we can avoid adding is_mobile ? 'xxxxxxx-mobile' : to every child
instead, we can nest them in scss.
First we open packages/components/src/components/contract-card/contract-card.scss line 276 where dc-contract-card-items-wrapper--mobile is declared and nest children inside of it:

&--mobile {
     // styles for dc-contract-card-items-wrapper--mobile
     
     .dc-contract-card__stake {
     // styles for dc-contract-card__stake which is a child of dc-contract-card-items-wrapper--mobile
     // it will be applied when is_mobile is true 

so we won't need to add --mobile suffix to each child🙂

[kate-deriv]

Done, thank you

[maryia-deriv]

👍🏻

[maryia-deriv]

👍🏻