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

Commit

Permalink
fix: modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@mayuran-deriv
mayuran-deriv committed Mar 31, 2024
1 parent afca89f commit c2a7f6b
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 66 deletions.
3 changes: 2 additions & 1 deletion crowdin/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -697,7 +697,6 @@
"666057433": "Trade popular assets in the commodities market such as silver, gold, oil, and more without owning the underlying asset. Speculate on the price movements and benefit from our high leverage and competitive spreads.",
"666146179": "Financial institutions",
"666585046": "Choose your growth rate to tailor risk/reward. ",
"667092266": "Get round-the-clock assistance from our Customer Support team.",
"668322984": "Automated copying – no extra work from you.",
"671884384": "Trade the commodities market and speculate on the price movements of oil and precious metals like gold and silver. Enjoy low spreads and zero commission.",
"672008428": "ZEC/USD",
Expand Down Expand Up @@ -1837,6 +1836,7 @@
"1743279813": "Why trade with Deriv cTrader",
"1743448290": "Payment agents",
"1744940662": "Best Forex Broker Latin America",
"1745188468": "what are trade accumulator options",
"1745193633": "Redirect notice",
"1746051371": "Download the app",
"1746052061": "> 5 - 10 billion",
Expand Down Expand Up @@ -3303,6 +3303,7 @@
"-1356285247": "Accumulator options icon",
"-1500514644": "Accumulator",
"-1167572902": "Secure your gains with manual or automatic profit-taking. With durations of up to 230 ticks, accumulator options are ideal for those looking for fast-paced, strategic trades while balancing risk and reward.",
"-677391007": "Deriv Go",
"-1833614673": "How to trade accumulator options",
"-2039405840": "The payout growth depends solely on the underlying index’s price moving tick by tick while remaining within a predefined range. The range width is determined by the growth rate and the symbol selected.",
"-390687537": "No, accumulator options are currently unavailable on Deriv Bot.",
Expand Down
1 change: 1 addition & 0 deletions themes/gatsby-theme-deriv/src/common/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export const ctrader_android_url = 'https://play.google.com/store/apps/details?i
export const ctrader_ios_url =
'https://download.mql5.com/cdn/mobile/mt5/ios?server=Deriv-Demo,Deriv-Server'
export const how_to_trade_accumulator_video_id = '917007011'
export const what_are_accumulator_video_id = '915479906'
export const ctrader_web_browser_url = 'ct.deriv.com'
export const ctrader_traders_hub_url = ' https://app.deriv.com/appstore/traders-hub'
export const ctrader_windows_url = 'https://getctrader.com/deriv/ctrader-deriv-setup.exe'
Expand Down
45 changes: 13 additions & 32 deletions themes/gatsby-theme-deriv/src/features/pages/options/accumulator/data.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { CardContent, CustomLink } from '@deriv-com/components'
import {
IllustrativePayoutIcon,
IllustrativeMinimalCapitalIcon,
IllustrativeSupport247Icon,
IllustrativePaidProgrammeIcon,
// eslint-disable-next-line import/no-unresolved
} from '@deriv/quill-icons/Illustrative'
Expand Down Expand Up @@ -58,17 +57,6 @@ export const accumulatorCards: CardContent[] = [
align: 'start',
size: 'md',
},
{
id: 5,
header: <Localize translate_text="_t_24/7 support_t_" />,
description: (
<Localize translate_text="_t_Get round-the-clock assistance from our Customer Support team._t_" />
),
icon: <IllustrativeSupport247Icon width="48" height="48" />,
color: 'gray',
align: 'start',
size: 'md',
},
]

export const accumulatorOptionsVideoCard: CardContent[] = [
Expand Down Expand Up @@ -106,14 +94,19 @@ export const accumulatorOptionsVideoCard: CardContent[] = [
<Localize translate_text="_t_Open your first accumulator options trade with our step-by-step guide._t_" />
),
content: (
<StaticImage
src="../../../../images/common/trade-types/accumulator-video-bg-2.png"
alt={localize('_t_Step-by-step guide to trade on accumulator options_t_')}
loading="lazy"
formats={['webp', 'auto']}
quality={100}
className="cursor-pointer"
/>
<CustomLink
target="_blank"
href="https://blog.deriv.com/posts/a-guide-to-accumulator-options-trading-on-deriv/"
>
<StaticImage
src="../../../../images/common/trade-types/accumulator-video-bg-2.png"
alt={localize('_t_Step-by-step guide to trade on accumulator options_t_')}
loading="lazy"
formats={['webp', 'auto']}
quality={100}
className="cursor-pointer"
/>
</CustomLink>
),
size: 'md',
align: 'start',
Expand Down Expand Up @@ -176,18 +169,6 @@ export const mobileCards: CardContent[] = [
icon: <IllustrativePaidProgrammeIcon width="48" height="48" />,
className: 'h-full',
},
{
id: 5,
header: <Localize translate_text="_t_24/7 support_t_" />,
description: (
<Localize translate_text="_t_Get round-the-clock assistance from our Customer Support team._t_" />
),
size: 'md',
color: 'gray',
align: 'start',
icon: <IllustrativeSupport247Icon width="48" height="48" />,
className: 'h-full',
},
]

export const accumulatorFAQ: OptionsFAQDataItem[] = [
Expand Down
91 changes: 58 additions & 33 deletions themes/gatsby-theme-deriv/src/features/pages/options/accumulator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,20 @@ import { Features, AccordionBlock, BlockWrapper } from '@deriv-com/blocks'
import { Text, FluidContainer, Heading } from '@deriv/quill-design'
import {
DerivProductDerivTraderBrandLightLogoHorizontalIcon,
DerivProductDerivGoBrandDarkLogoHorizontalIcon,
IllustrativeDerivedIcon,
} from '@deriv/quill-icons'
import { CustomLink } from '@deriv-com/components'
import { StaticImage } from 'gatsby-plugin-image'
import { accumulatorCards, accumulatorOptionsVideoCard, mobileCards } from './data'
import * as styles from './accumulators_faq.module.scss'
import AccumulatorOptions from 'images/svg/trade-types/accumulator-options.svg'
import { Localize, localize, is_rtl } from 'components/localization'
import OptionsLayout from 'features/components/quill/options-layout'
import Box from 'features/components/atoms/box'
import TradersHubCtaButton from 'features/components/molecules/traders-hub-cta-button'
import { BuildVariantType } from 'features/types'
import VideoModal from 'features/components/quill/videoModal'
import { how_to_trade_accumulator_video_id } from 'common/constants'
import { how_to_trade_accumulator_video_id, what_are_accumulator_video_id } from 'common/constants'

interface SwiperOption {
spaceBetween: number
Expand All @@ -32,10 +33,10 @@ const swiperOption: SwiperOption = {
}

const AccumulatorsOptions = ({ region }: BuildVariantType) => {
const [isModalOpen, setIsModalOpen] = useState(false)
const [isModalOpen, setIsModalOpen] = useState({ is_open: false, video_id: '' })

const handleModalToggle = (action: boolean) => {
action && setIsModalOpen(!isModalOpen)
const handleModalToggle = (action: boolean, video_id?: string) => {
action && setIsModalOpen({ is_open: !isModalOpen.is_open, video_id: video_id || '' })
}
return (
<OptionsLayout
Expand Down Expand Up @@ -73,21 +74,26 @@ const AccumulatorsOptions = ({ region }: BuildVariantType) => {
background="light"
>
<FluidContainer className="flex flex-col py-general-2xl gap-gap-xl">
<div className="flex max-lg:flex-col justify-between gap-gap-xl">
<div className="flex max-lg:flex-col justify-between gap-gap-xl items-center">
<div className="w-full md:w-1/2">
<div>
<Box
as="iframe"
src="https://player.vimeo.com/video/915479906?h=bf070a3ff6"
frameBorder="0"
width={'100%'}
height={'360'}
allowFullScreen
></Box>
<div
className="rounded-lg overflow-hidden"
onClick={() =>
handleModalToggle(true, what_are_accumulator_video_id)
}
>
<StaticImage
src="../../../../images/common/trade-types/accumulator-video-bg-3.png"
alt={localize('_t_what are trade accumulator options_t_')}
loading="lazy"
formats={['webp', 'auto']}
quality={100}
className="cursor-pointer object-cover h-full w-full"
/>
</div>
</div>
<div className="flex flex-col w-full md:w-1/2 gap-gap-md">
<div className="flex flex-row gap-gap-md">
<div className="flex flex-row gap-gap-md items-center">
<img
src={AccumulatorOptions}
alt={localize('_t_Accumulator options icon_t_')}
Expand All @@ -99,12 +105,14 @@ const AccumulatorsOptions = ({ region }: BuildVariantType) => {
</Heading.H3>
</div>

<Text>
<Localize translate_text="_t_With accumulator options, your payout grows exponentially as long as the current market spot price stays within a set range from the previous spot price. Choose between 1-5% growth rate - a higher growth rate means a narrower range for your price movements and higher risk. With volatility indices, you can also choose the volatility of your market._t_" />
</Text>
<Text>
<Localize translate_text="_t_Secure your gains with manual or automatic profit-taking. With durations of up to 230 ticks, accumulator options are ideal for those looking for fast-paced, strategic trades while balancing risk and reward._t_" />
</Text>
<div className="flex-grow">
<Text>
<Localize translate_text="_t_With accumulator options, your payout grows exponentially as long as the current market spot price stays within a set range from the previous spot price. Choose between 1-5% growth rate - a higher growth rate means a narrower range for your price movements and higher risk. With volatility indices, you can also choose the volatility of your market._t_" />
</Text>
<Text>
<Localize translate_text="_t_Secure your gains with manual or automatic profit-taking. With durations of up to 230 ticks, accumulator options are ideal for those looking for fast-paced, strategic trades while balancing risk and reward._t_" />
</Text>
</div>
</div>
</div>
<div className="flex max-lg:flex-col justify-between gap-gap-xl">
Expand All @@ -123,14 +131,25 @@ const AccumulatorsOptions = ({ region }: BuildVariantType) => {
<Heading.H3>
<Localize translate_text="_t_Trade on_t_" />
</Heading.H3>
<div className="flex gap-gap-md items-center">
<DerivProductDerivTraderBrandLightLogoHorizontalIcon
height="24px"
width="24px"
/>
<CustomLink href={'/dtrader/'} size="md">
<Localize translate_text="_t_Deriv Trader_t_" />
</CustomLink>
<div className="flex gap-gap-lg ">
<div className="flex gap-gap-md items-center">
<DerivProductDerivTraderBrandLightLogoHorizontalIcon
height="24px"
width="24px"
/>
<CustomLink href={'/dtrader/'} size="md">
<Localize translate_text="_t_Deriv Trader_t_" />
</CustomLink>
</div>
<div className="flex gap-gap-md items-center">
<DerivProductDerivGoBrandDarkLogoHorizontalIcon
height="24px"
width="24px"
/>
<CustomLink href={'/deriv-go'} size="md">
<Localize translate_text="_t_Deriv Go_t_" />
</CustomLink>
</div>
</div>
</div>
</div>
Expand All @@ -148,14 +167,20 @@ const AccumulatorsOptions = ({ region }: BuildVariantType) => {
cards={accumulatorOptionsVideoCard.map((card) => ({
...card,
content: (
<div onClick={() => handleModalToggle(card.id === 1)}>{card.content}</div>
<div
onClick={() =>
handleModalToggle(card.id === 1, how_to_trade_accumulator_video_id)
}
>
{card.content}
</div>
),
}))}
/>
<VideoModal
isOpen={isModalOpen}
isOpen={isModalOpen.is_open}
onClose={() => handleModalToggle(true)}
video_id={how_to_trade_accumulator_video_id}
video_id={isModalOpen.video_id}
/>
<div id="faqs">
<AccordionBlock
Expand Down
Binary file added themes/gatsby-theme-deriv/src/images/common/trade-types/accumulator-video-bg-3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit c2a7f6b

Please sign in to comment.