Jia/feat: turbo options page contents

src/features/components/atoms/label/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Flex from 'features/components/atoms/flex-box'
+import Typography from 'features/components/atoms/typography'
+import { Localize } from 'components/localization'
+import { TBGColor, TTypographyColor } from 'features/types'
+import { TString } from 'types/generics'
+
+export interface LabelProps {
+    className?: string
+    text: TString
+    textcolor?: TTypographyColor
+    bgcolor?: TBGColor
+}
+
+const Label = ({ text, textcolor = 'white', ...rest }: LabelProps) => {
+    return (
+        <Flex.Box justify="center" padding_block="2x" padding_inline="4x" radius="2x" {...rest}>
+            <Typography.Paragraph size="small" textcolor={textcolor} weight="bold">
+                <Localize translate_text={text} />
+            </Typography.Paragraph>
+        </Flex.Box>
+    )
+}
+
+export default Label

src/features/components/organisms/options-top-tab/data.ts

@@ -3,9 +3,11 @@ import {
     AccumulatorslActive,
     DigitalActive,
     VanillaActive,
+    TurboActive,
     AccumulatorslInActive,
     DigitalnActive,
     VanillaInActive,
+    TurboInActive,
 } from 'images/svg/trade-types/options/options-images'
 export const tab_data: OptionNavigationType[] = [
     {
@@ -32,4 +34,12 @@ export const tab_data: OptionNavigationType[] = [
         option_name: 'vanilla',
         to: '/trade-types/options/vanilla-options',
     },
+    {
+        src: TurboInActive,
+        selected_src: TurboActive,
+        button_text: '_t_Turbo options_t_',
+        active_path: '/trade-types/options/turbo-options',
+        option_name: 'turbo',
+        to: '/trade-types/options/turbo-options',
+    },
 ]

src/features/components/organisms/what-are-digital-options/index.tsx

@@ -4,13 +4,19 @@ import Flex from 'features/components/atoms/flex-box'
 import Typography from 'features/components/atoms/typography'
 import { Localize } from 'components/localization'
 import { TString } from 'types/generics'
+import Label from 'features/components/atoms/label'
 
 interface WhatAreDigitalOptionsProps {
     heading: TString
     description: TString
+    is_coming_soon: boolean
 }
 
-const WhatAreDigitalOptions = ({ heading, description }: WhatAreDigitalOptionsProps) => {
+const WhatAreDigitalOptions = ({
+    heading,
+    description,
+    is_coming_soon,
+}: WhatAreDigitalOptionsProps) => {
     return (
         <Flex.Box
             justify="center"
@@ -21,6 +27,7 @@ const WhatAreDigitalOptions = ({ heading, description }: WhatAreDigitalOptionsPr
             gap={'8x'}
             className={options_heading_section}
         >
+            {is_coming_soon && <Label text="_t_Coming soon_t_" bgcolor="blue" />}
             <Typography.Heading align="center" as="h1">
                 <Localize translate_text={heading} />
             </Typography.Heading>

src/features/components/templates/navigation/tab-nav-without-border/index.tsx

@@ -46,41 +46,29 @@ const NavigationTabWithoutBorder = ({ tab_data }: NavigationTabWithoutBorderType
 
     return (
         <Container.Fluid pt={'20x'}>
-            <Flex.Box padding_block="10x" visible="phone-only" className={swiper_wrapper}>
-                <Swiper
-                    ref={swiper_ref}
-                    speed={1000}
-                    slidesPerView={3}
-                    direction="horizontal"
-                    navigation={{ nextEl: '.swiper-button-next' }}
-                    className={swiper_height}
-                >
-                    {tab_data.map((tab_item) => {
-                        return (
-                            <SwiperSlide key={tab_item.option_name} className={swiper_slide}>
-                                <NavigationTabMenu
-                                    tab_items={tab_item}
-                                    selected={tab_item.option_name === selected_tab_name}
-                                    is_no_border_bottom
-                                    icon={
-                                        tab_item.option_name === selected_tab_name
-                                            ? `${tab_item.selected_src}#${tab_item.option_name}`
-                                            : `${tab_item.src}#${tab_item.option_name}`
-                                    }
-                                />
-                            </SwiperSlide>
-                        )
-                    })}
-                </Swiper>
-                <div
-                    className={dclsx(
-                        'swiper-button-next',
-                        swiper_button_next,
-                        tab_data.length <= 3 && swiper_button_disabled,
-                    )}
-                >
-                    <Image src={ArrowNext} width="24px" height="24px" />
-                </div>
+            <Flex.Box
+                padding_block="10x"
+                gap="6x"
+                visible="phone-only"
+                className={swiper_wrapper}
+                justify="center"
+            >
+                {tab_data.map((tab_item) => {
+                    return (
+                        <SwiperSlide key={tab_item.option_name} className={swiper_slide}>
+                            <NavigationTabMenu
+                                tab_items={tab_item}
+                                selected={tab_item.option_name === selected_tab_name}
+                                is_no_border_bottom
+                                icon={
+                                    tab_item.option_name === selected_tab_name
+                                        ? `${tab_item.selected_src}#${tab_item.option_name}`
+                                        : `${tab_item.src}#${tab_item.option_name}`
+                                }
+                            />
+                        </SwiperSlide>
+                    )
+                })}
             </Flex.Box>
             <Flex.Box
                 padding_block="10x"

src/features/components/templates/navigation/tab-nav-without-border/styles.module.scss

@@ -5,11 +5,11 @@
 }
 .swiper_wrapper {
     position: relative;
-    max-width: 28rem;
+    max-width: 31rem;
     margin-inline: auto;
 }
 .swiper_slide {
-    width: 33% !important;
+    width: 25% !important;
     padding-inline: 10px;
 }
 .swiper_button_disabled{

src/features/components/templates/options-layout/index.tsx

@@ -13,14 +13,24 @@ interface OptionsLayoutProps {
     children?: ReactNode
     heading: TString
     description: TString
+    is_coming_soon?: boolean
 }
 
-const OptionsLayout = ({ heading, description, children }: OptionsLayoutProps) => {
+const OptionsLayout = ({
+    heading,
+    description,
+    children,
+    is_coming_soon = false,
+}: OptionsLayoutProps) => {
     return (
         <Layout>
             <MainNav />
             <OptionsTopTab />
-            <WhatAreDigitalOptions heading={heading} description={description} />
+            <WhatAreDigitalOptions
+                heading={heading}
+                description={description}
+                is_coming_soon={is_coming_soon}
+            />
             {children}
             <WhyTradeOptions data={why_trade_options_data} />
             <StartTrading data={start_trading_data} />

src/features/components/templates/tabs/navigation-menu/styles.module.scss

@@ -1,3 +1,4 @@
 .text {
     white-space: normal;
+    word-break: normal;
 }

src/features/pages/options/turbo/_faq-schema.ts

@@ -0,0 +1,143 @@
+import { localize } from 'components/localization'
+import { FaqSchemaType } from 'features/types/faq-schema'
+
+export const faq_schema: FaqSchemaType = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: [
+        {
+            '@type': 'Question',
+            name: localize('_t_How can I open a turbo options trade on Deriv?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_<p>To place a turbo options trade on Deriv, you’ll need to:</p><ul><li>Select the underlying asset you want to trade.</li><li>Choose your preferred contract duration or end time.</li><li>Select Long or Short depending on your market predictions.</li><li>Determine a trade barrier.</li> <li>Enter your stake amount.</li><li>Open your contract.</li></ul>_t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize('_t_Can I buy or sell turbo options on Deriv?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_Currently, you can only buy Long and Short turbo options contracts on Deriv._t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize('_t_How do turbo options work?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_<p>When you open a turbo options contract, you’ll pay an initial stake amount. This is the cost of entering the turbo options trade. You’ll also need to determine a trade barrier. The spot price must not touch or breach this barrier throughout your contract duration, otherwise your contract will be terminated early without any gains.</p><p>If the spot price never touches or breaches your predetermined barrier, you will receive a potential payout based on the movement of the underlying asset, when your contract expires.</p><p>Please bear in mind that if you decide to manually terminate the trade early (before expiry), you will be charged an additional exit fee. Additionally, early termination less than 15 seconds before expiry is not possible.</p>_t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize('_t_What is payout per point?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_<p>Payout per point indicates the potential payout you will receive at the contract’s expiry for every point above or below your predetermined barrier.</p><p>This amount is calculated based on your stake and the barrier you have selected.</p><p>For Long turbo options, the payout per point indicates the amount of potential payout you gain for each point above the barrier, at the contract’s expiry.</p><p>For Short turbo options, the payout per point indicates the amount of potential payout you gain for each point below the barrier, at the contract’s expiry.</p><p>Please note that this payout amount does not equal the potential profit. You‘ll only earn profit once this amount exceeds your stake amount. In case the spot price touches or breaches the barrier, your contract is terminated and you will not receive a payout.</p>_t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize('_t_Where can I trade turbo options on Deriv?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_You can trade turbo options on the Deriv Trader trading platform, on volatility indices under Deriv’s derived indices._t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize('_t_Can I open multiple turbo options contracts simultaneously?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_Yes, you can open multiple turbo options contracts at the same time._t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize('_t_What is the maximum I can lose when I trade turbo options?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_The maximum you can lose is the initial stake amount that you pay when you open a turbo options contract._t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize('_t_Can I adjust or remove the barrier once a position is open?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_No, the trade barrier can only be set before you open a contract. Once your turbo options contract is opened, the barrier cannot be changed._t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize('_t_How are payouts calculated for different stake amounts?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_<p>The higher your stake amount, the higher the payout per point.</p><p>This means that the potential payout amount you’ll receive at your contract’s expiry will be higher for every point between the barrier and the spot price, as long as the barrier is not touched or breached throughout the contract duration.</p>_t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize('_t_How are payouts calculated for different barriers?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_<p>The closer the barrier is to the spot price, the higher the chance for your turbo options contract to expire worthless (which means, your contract will expire without any payout or profit).</p><p>Deriv offers a higher potential payout per point to compensate for this risk. The amount you’ll potentially receive at your contract’s expiry will be higher for every point above or below the barrier, as long as the barrier is not touched or breached throughout the contract duration.</p>_t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize(
+                '_t_Can I close a turbo options contract before the end of the contract duration?_t_',
+            ),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_You can only close time-based contracts up to 15 seconds before the contract duration expires. If you have opened a tick-based contract, you cannot close your position before it expires._t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize(
+                '_t_What are the different contract durations available for turbo options?_t_',
+            ),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_You can open turbo options contracts with trade durations of 5 to 10 ticks, or from 15 seconds up to 365 days._t_',
+                ),
+            },
+        },
+        {
+            '@type': 'Question',
+            name: localize('_t_What is the difference between turbo and vanilla options?_t_'),
+            acceptedAnswer: {
+                '@type': 'Answer',
+                text: localize(
+                    '_t_<p>With turbo options, you need to define a barrier before opening a contract. If the spot price touches or breaches this barrier at any time throughout the contract duration, your contract will expire worthless. This means that you will not receive a payout and will lose your initial stake amount. To compensate for this risk, turbo options will have a higher payout per point and potential payout, depending on how far the selected barrier is from the opening spot price. Another difference to note is that trading turbo options carries more risk than trading vanilla options.</p><p>With vanilla options, there are no barriers involved and your potential payout is determined by how much the final price is above or below the predetermined strike price.</p>_t_',
+                ),
+            },
+        },
+    ],
+}