mayuran/DPROD-3544/accumulator-update

package.json

@@ -7,13 +7,13 @@
         "@artsy/fresnel": "^6.2.1",
         "@builder.io/partytown": "^0.8.1",
         "@deriv-com/analytics": "^1.4.11",
-        "@deriv-com/blocks": "^0.87.0",
-        "@deriv-com/components": "^0.52.0",
+        "@deriv-com/blocks": "^0.111.0",
+        "@deriv-com/components": "^0.57.0",
         "@deriv-com/hooks": "^0.11.0",
         "@deriv-com/providers": "^0.12.0",
         "@deriv/deriv-api": "^1.0.13",
-        "@deriv/quill-design": "^1.2.16",
-        "@deriv/quill-icons": "^1.17.3",
+        "@deriv/quill-design": "^1.2.18",
+        "@deriv/quill-icons": "^1.19.2",
         "@hookform/resolvers": "^3.3.2",
         "@livechat/customer-sdk": "^3.1.5",
         "@loadable/component": "^5.15.3",
@@ -24,6 +24,8 @@
         "@svgr/webpack": "^8.1.0",
         "@tanstack/react-table": "^8.10.7",
         "@vercel/gatsby-plugin-vercel-builder": "^0.1.2",
+        "@zxcvbn-ts/core": "^3.0.4",
+        "@zxcvbn-ts/language-common": "^3.0.4",
         "cli-select": "^1.1.2",
         "clsx": "^1.2.1",
         "commander": "^8.3.0",
@@ -81,9 +83,7 @@
         "use-query-params": "^1.2.3",
         "usehooks-ts": "^2.9.1",
         "webpack": "^5.89.0",
-        "yup": "^1.3.2",
-        "@zxcvbn-ts/core": "^3.0.4",
-        "@zxcvbn-ts/language-common": "^3.0.4"
+        "yup": "^1.3.2"
     },
     "devDependencies": {
         "@commitlint/cli": "^16.3.0",

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

@@ -1,42 +1,82 @@
 import React from 'react'
-import { options_heading_section } from './styles.module.scss'
-import Flex from 'features/components/atoms/flex-box'
-import Typography from 'features/components/atoms/typography'
+import { Hero } from '@deriv-com/blocks'
+// eslint-disable-next-line import/no-unresolved
+import { v4 as uuidv4 } from 'uuid'
+import { Text, Heading, Button } from '@deriv/quill-design'
 import { Localize } from 'components/localization'
 import { TString } from 'types/generics'
 import Label from 'features/components/atoms/label'
+import useScrollToElement from 'features/hooks/use-scroll-to-element'
+import TradersHubCtaButton from 'features/components/molecules/traders-hub-cta-button'
+import { useFloatingCtaContext } from 'features/contexts/floating-cta/cta.provider'
+import FloatingCta from 'features/pages/home/hero/floating-cta'
 
 interface WhatAreDigitalOptionsProps {
     heading: TString
     description: TString
     is_coming_soon: boolean
+    has_content_block: boolean
 }
 
 const WhatAreDigitalOptions = ({
     heading,
     description,
     is_coming_soon,
+    has_content_block,
 }: WhatAreDigitalOptionsProps) => {
+    const clickToScrollHandler = useScrollToElement('faqs', -100)
+    const uniq = `navbuttons_uniq_class_${uuidv4()}`
+    const { ctaBottom, visibilityPercentage, entryRef } = useFloatingCtaContext()
+
     return (
-        <Flex.Box
-            justify="center"
-            align="center"
-            direction="col"
-            padding_block="12x"
-            md={{ padding_block: '20x' }}
-            gap={'8x'}
-            className={options_heading_section}
-        >
-            {is_coming_soon && (
-                <Label text="_t_Available on Demo accounts only_t_" bgcolor="blue" />
+        <>
+            <Hero.ContentLess
+                className="px-800  md:px-1200 lg:px-gap-none"
+                description={
+                    <Text className="leading-6">
+                        <Localize translate_text={description} />
+                    </Text>
+                }
+                title={
+                    <Heading>
+                        <Localize translate_text={heading} />
+                    </Heading>
+                }
+            >
+                {is_coming_soon && (
+                    <Label text="_t_Available on Demo accounts only_t_" bgcolor="blue" />
+                )}
+                {has_content_block && (
+                    <div
+                        className="flex flex-col items-center gap-400 md:!flex-row md:justify-center"
+                        id={uniq}
+                    >
+                        <TradersHubCtaButton
+                            ref={entryRef}
+                            className="w-full md:!w-auto"
+                            size="lg"
+                        />
+                        <Button
+                            size="lg"
+                            variant="secondary"
+                            colorStyle="black"
+                            className="w-full md:!w-auto hover:!bg-solid-slate-50 sm:hover:!bg-opacity-black-100"
+                            onClick={clickToScrollHandler}
+                        >
+                            <Localize translate_text="_t_Read FAQs_t_" />
+                        </Button>
+                    </div>
+                )}
+            </Hero.ContentLess>
+            {has_content_block && (
+                <FloatingCta
+                    style={{
+                        transform: `translateY(${visibilityPercentage - 100}%)`,
+                        bottom: `${-68 + ctaBottom}px`,
+                    }}
+                />
             )}
-            <Typography.Heading align="center" as="h1">
-                <Localize translate_text={heading} />
-            </Typography.Heading>
-            <Typography.Paragraph align="center">
-                <Localize translate_text={description} />
-            </Typography.Paragraph>
-        </Flex.Box>
+        </>
     )
 }
 

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

@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react'
+import MainRowNavigation from '../../templates/navigation/main-nav'
+import Layout from '../quill-layout'
+import MainFooter from 'features/components/templates/footer'
+import { TString } from 'types/generics'
+import OptionsTopTab from 'features/components/organisms/options-top-tab'
+import WhatAreDigitalOptions from 'features/components/organisms/what-are-digital-options'
+
+interface OptionsLayoutProps {
+    children?: ReactNode
+    heading: TString
+    description: TString
+    is_coming_soon?: boolean
+    has_content_block?: boolean
+}
+
+const OptionsLayout = ({
+    heading,
+    description,
+    children,
+    is_coming_soon = false,
+    has_content_block = false,
+}: OptionsLayoutProps) => {
+    return (
+        <>
+            <Layout>
+                <MainRowNavigation />
+                <OptionsTopTab />
+                <WhatAreDigitalOptions
+                    heading={heading}
+                    description={description}
+                    is_coming_soon={is_coming_soon}
+                    has_content_block={has_content_block}
+                />
+                {children}
+                <MainFooter />
+            </Layout>
+        </>
+    )
+}
+
+export default OptionsLayout

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react'
+import { Breadcrumbs } from '@deriv-com/components'
 import { SwiperSlide, Swiper } from 'swiper/react'
 import SwiperCore, { Navigation } from 'swiper'
 import NavigationTabMenu from '../../tabs/navigation-menu'
@@ -46,6 +47,19 @@ const NavigationTabWithoutBorder = ({ tab_data }: NavigationTabWithoutBorderType
 
     return (
         <Container.Fluid pt="25x">
+            <Breadcrumbs
+                className="py-general-md mt-600 ml-400"
+                links={[
+                    {
+                        content: 'Home',
+                        href: '/',
+                    },
+                    {
+                        content: 'Options',
+                        href: '/trade-types/options',
+                    },
+                ]}
+            />
             <Flex.Box
                 padding_block="10x"
                 gap="6x"

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

@@ -14,28 +14,33 @@ interface OptionsLayoutProps {
     heading: TString
     description: TString
     is_coming_soon?: boolean
+    has_content_block?: boolean
 }
 
 const OptionsLayout = ({
     heading,
     description,
     children,
     is_coming_soon = false,
+    has_content_block = false,
 }: OptionsLayoutProps) => {
     return (
-        <Layout>
-            <MainRowNavigation />
-            <OptionsTopTab />
-            <WhatAreDigitalOptions
-                heading={heading}
-                description={description}
-                is_coming_soon={is_coming_soon}
-            />
-            {children}
-            <WhyTradeOptions data={why_trade_options_data} />
-            <StartTrading data={start_trading_data} />
-            <MainFooter />
-        </Layout>
+        <>
+            <Layout>
+                <MainRowNavigation />
+                <OptionsTopTab />
+                <WhatAreDigitalOptions
+                    heading={heading}
+                    description={description}
+                    is_coming_soon={is_coming_soon}
+                    has_content_block={has_content_block}
+                />
+                {children}
+                <WhyTradeOptions data={why_trade_options_data} />
+                <StartTrading data={start_trading_data} />
+                <MainFooter />
+            </Layout>
+        </>
     )
 }
 

src/features/pages/options/accumulator/_video-schema.ts

@@ -0,0 +1,62 @@
+import { localize } from 'components/localization'
+
+type VideoSchemaType = {
+    '@context': string
+    '@type': string
+    name: string
+    description: string
+    thumbnailUrl: string[]
+    uploadDate: string
+    duration: string
+    contentUrl: string
+    embedUrl: string
+    interactionStatistic: {
+        '@type': string
+        interactionType: { '@type': string }
+        userInteractionCount: number
+    }
+    regionsAllowed: string
+}
+
+export const accumulator_options_video_schema: VideoSchemaType = {
+    '@context': 'https://schema.org',
+    '@type': 'VideoObject',
+    name: localize('_t_Accumulator options_t_'),
+    description: '',
+    thumbnailUrl: [
+        'https://i.vimeocdn.com/video/1802590890-87dbeab783be62940dae5798d760708f253c9abcfe63c990fe1d6ba30745fb45-d_100x75',
+        ' https://i.vimeocdn.com/video/1802590890-87dbeab783be62940dae5798d760708f253c9abcfe63c990fe1d6ba30745fb45-d_200x150',
+        'https://i.vimeocdn.com/video/1802590890-87dbeab783be62940dae5798d760708f253c9abcfe63c990fe1d6ba30745fb45-d_640',
+    ],
+    uploadDate: '2024-02-22 03:39:43',
+    duration: 'PT1M54S',
+    contentUrl: 'https://vimeo.com/915479906',
+    embedUrl: 'https://player.vimeo.com/video/915479906',
+    interactionStatistic: {
+        '@type': 'InteractionCounter',
+        interactionType: { '@type': 'WatchAction' },
+        userInteractionCount: 5647018,
+    },
+    regionsAllowed: '',
+}
+export const how_to_trade_video_schema: VideoSchemaType = {
+    '@context': 'https://schema.org',
+    '@type': 'VideoObject',
+    name: 'How to trade accumulator options on Deriv Trader',
+    description: '',
+    thumbnailUrl: [
+        'https://i.vimeocdn.com/video/1805100037-7bedb6314f58f350105dcd055eef2c649e04a922813fb17453e8d76b0e179037-d_100x75',
+        'https://i.vimeocdn.com/video/1805100037-7bedb6314f58f350105dcd055eef2c649e04a922813fb17453e8d76b0e179037-d_200x150',
+        'https://i.vimeocdn.com/video/1805100037-7bedb6314f58f350105dcd055eef2c649e04a922813fb17453e8d76b0e179037-d_640',
+    ],
+    uploadDate: '2024-02-27T02:22:29+08:00',
+    contentUrl: 'https://vimeo.com/917007011',
+    embedUrl: 'https://player.vimeo.com/video/917007011',
+    duration: 'PT1M54S',
+    interactionStatistic: {
+        '@type': 'InteractionCounter',
+        interactionType: { '@type': 'WatchAction' },
+        userInteractionCount: 5647018,
+    },
+    regionsAllowed: '',
+}

src/features/pages/options/accumulator/accumulators_faq.module.scss

@@ -0,0 +1,5 @@
+@import 'features/styles/theme/variables';
+
+.accordion_border{
+    border-bottom: 2px solid var(--color-grey-45) ;
+}