Kate/87485/add Turbos to the Trade types list

[kate-deriv]

Changes:

Please include a summary of the change and which issue is fixed below:

• Add Turbos to the Trade types (without NEW! label).
• Add Turbos to the Dropdown of available Trade types.
• Add Description for Turbos, which is shown when Info icon is clicked, move description for a separate component. For mobile version add info icons, which are always visible, as it's not possible to implement hover analog.
• Add Icons for Turbos.

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 behavior 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

[maryia-deriv]

Suggested change

	return <Icon icon='IcTradetypeMultdown' className={className} color='brand' {...props} />;
	return <Icon icon='IcTradetypeTurboslong' className={className} color='brand' {...props} />;

[maryia-deriv]

Suggested change

	case 'turbosshot':
	return <Icon icon='IcTradetypeMultup' className={className} color='brand' {...props} />;
	case 'turbosshort':
	return <Icon icon='IcTradetypeTurbosshort' className={className} color='brand' {...props} />;

[maryia-deriv]

if only 1 paragraph differs, we can reuse the component 🙂:

Suggested change

	export const TurbosLongTradeDescription = () => {
	const content = [
	{
	type: 'paragraph',
	text: localize(
	'Predict the market direction, size and also how confident you are that the spot price will not touch the barrier.'
	),
	},
	{
	type: 'paragraph',
	text: localize(
	'If you select “Long”, you will earn a payout if the spot price never touches the barrier, that is the spot price is always above the barrier. Your payout will grow proportionally according to the distance between the market price and the barrier, with the condition that the spot didn’t cross the barrier at any time during the trade. If the spot price touches or breaches the barrier during the trade, then there won’t be a payout. Select a “Long” contract if you think the market will grow strongly without falling.'
	),
	},
	export const TurbosTradeDescription = (is_turboslong) => {
	const second_paragraph = is_turboslong
	? localize(
	'If you select “Long”, you will earn a payout if the spot price never touches the barrier, that is the spot price is always above the barrier. Your payout will grow proportionally according to the distance between the market price and the barrier, with the condition that the spot didn’t cross the barrier at any time during the trade. If the spot price touches or breaches the barrier during the trade, then there won’t be a payout. Select a “Long” contract if you think the market will grow strongly without falling.'
	)
	: localize(
	'If you select “Short”, you will earn a payout if the spot price never touches the barrier, that is the spot price is always below the barrier. Your payout will grow proportionally according to the distance between the market price and the barrier, with the condition that the spot didn’t cross the barrier at any time during the trade. If the spot price touches or breaches the barrier during the trade, then there won’t be a payout. Select a “Short” contract if you think the market will decay strongly without rising.'
	);
	const content = [
	{
	type: 'paragraph',
	text: localize(
	'Predict the market direction, size and also how confident you are that the spot price will not touch the barrier.'
	),
	},
	{
	type: 'paragraph',
	text: second_paragraph,
	},

[kate-deriv]

If the difference between final text will be minor, I'll reuse that component.

[maryia-deriv]

👍🏻