Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Commit

Permalink
patch fix (#7291)
Browse files Browse the repository at this point in the history 
* fix: digital options

* fix: breadcrumbs
  • Loading branch information
@mayuran-deriv
mayuran-deriv authored Mar 12, 2024
1 parent 8094982 commit 3aff8bd
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 93 deletions.
83 changes: 83 additions & 0 deletions src/features/components/organisms/what-are-digital-options/accumulator/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import React from 'react'
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 (
<>
<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`,
}}
/>
)}
</>
)
}

export default WhatAreDigitalOptions
82 changes: 21 additions & 61 deletions src/features/components/organisms/what-are-digital-options/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,42 @@
import React from 'react'
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 { options_heading_section } from './styles.module.scss'
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'
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 (
<>
<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`,
}}
/>
<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" />
)}
</>
<Typography.Heading align="center" as="h1">
<Localize translate_text={heading} />
</Typography.Heading>
<Typography.Paragraph align="center">
<Localize translate_text={description} />
</Typography.Paragraph>
</Flex.Box>
)
}

Expand Down
2 changes: 1 addition & 1 deletion src/features/components/quill/options-layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ 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'
import WhatAreDigitalOptions from 'features/components/organisms/what-are-digital-options/accumulator'

interface OptionsLayoutProps {
children?: ReactNode
Expand Down
14 changes: 0 additions & 14 deletions src/features/components/templates/navigation/tab-nav-without-border/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
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'
Expand Down Expand Up @@ -47,19 +46,6 @@ 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"
Expand Down
30 changes: 13 additions & 17 deletions src/features/components/templates/options-layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,21 @@ const OptionsLayout = ({
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}
<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}
/>
{children}
<WhyTradeOptions data={why_trade_options_data} />
<StartTrading data={start_trading_data} />
<MainFooter />
</Layout>
)
}

Expand Down

0 comments on commit 3aff8bd

Please sign in to comment.