Translation 1500 feature deriv prime (#5418)

* feat: deriv prime page * fix: prime page changes in atomic approach * fix: added the new layout * fix: added folder for deriv-prime images * fix: prime partner (#5419) * fix: prime partner * fix: test * fix: test commit * Revert "fix: test commit" This reverts commit 9d2e38e. * Revert "fix: test" This reverts commit 1ddc5d8. * fix: changes * fix: height * fix: padding issue * Aswathy/Connectivity reliability (#5442) * feat: deriv prime connectivity * feat: seo documentation * fix: seo header tag added * fix: replaced the type prop for paragraph * fix: added the classname for the typography header * Konstantinos / meet us there section (#5440) * feat: meet us there section * fix: types on different file * fix: review comments * chore: vercel * fix: staticimage usage * chore: vercel * fix: alt text localize and fix font family * fix: margin top * fix: subtasks --------- Co-authored-by: Konstantinos-Gk <[email protected]> * fix: prime available instruments (#5429) * fix: prime available instruments * fix: seo * chore: trigger vercel * fix: empty string * fix: spelling mistake * fix: issues * fix: rtl * fix: top global spell mistake fix * Mitra/1502/chore: ✨ add number section for deriv prime (#5436) * chore: ✨ add number section for deriv prime * fix: 🐛 add margin top * empty: 🚀 to redeploy and trigger build --------- Co-authored-by: aswathy-deriv <[email protected]> * fix: folder structure refactor for available instruments * Konstantinos / Why choose deriv prime section (#5430) * fix: why deriv prime section * fix: comments review * fix: font family * fix: review comments * fix: seo title * fix: subtasks * fix: margin --------- Co-authored-by: Konstantinos-Gk <[email protected]> * fix: removed the flex from index file * fix: rearranged the deriv prime index file * Translation 1425 your potential (#5437) * chore: added folder and files * chore: added images and component files * chore: updated boxes * chore: completed desktop version * chore: updated mobile version * chore: updated svg images path * empty: 🚀 to redeploy and trigger build * fix: fixed PR comments * fix: fixed bugs * chore: fixed issues * fix: fixed spacing issue on mobile * fix: fixed spacing issues for mobile * fix: fix padding issue --------- Co-authored-by: Fasih Ali <[email protected]> Co-authored-by: Fasih Ali <[email protected]> * fix: removed the flex from index file * Hasan/Translation 1426 prime commercial plan (#5435) * feat: added commercial plan component * feat: added container and typhography * feat: created table component file * feat: created table scss file * feat: added table props and data * feat: added base table * feat: created shadow table component * feat: added base css * feat: added types * feat: added data * feat: added css * feat: responsive * feat: free per million localized * feat: added table column type * feat: added table header component * feat: added table row component * fix: modified table base component * feat: added data file * fix: modified commercial table component * fix: css * fix: color css * fix: table columns css * fix: added padding inline to wrapper * Konstantinos / browse our faq (#5461) * feat: commercialplan * fix: commercial plan css fixes * fix: add faq section * fix: font family * fix: review comments * fix: remove unnecessary css * fix: spacing issues * fix: import * fix: padding * fix: padding * fix: padding bottom and add container --------- Co-authored-by: Konstantinos-Gk <[email protected]> * Hasan/Translation 1412 deriv prime hero (#5433) * fix: merge conflict * feat: added content style * feat: added bg image to hero * fix: style issue * fix: image issue * feat: hero responsive * feat: added alt text to hero image * fix: hero image * fix: replace hero image desktop * fix: changed images * fix: changed desktop image and css * fix: removed unused flex box * fix: error resolved after merge * Hasan/Translation 00 prime commercial table content fix (#5471) * fix: commercial plan table heading content typo * fix: accessor typo * fix: alignment issues * Mayuran/get in touch (#5462) * fix: initial * fix: update error message * fix: format code * fix: error message * fix: white space error message * fix: snake case * fix: comments * fix: added snake case * fix: comments * fix: style * fix: text field style * fix: error message red * fix: space issue * fix: clear message and showing thank you meesage for 4 seconds * fix: change color * fix: update error message text * fix: size and error * chore: trigger vercel * chore: trigger vercel * chore: trigger vercel * chore: trigger vercel * fix: added the contact us button navigation * Konstantinos / FAQ SEO (#5481) * feat: faq seo * fix: add table for seo too --------- Co-authored-by: Konstantinos-Gk <[email protected]> * fix: sonarcloud issue * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * auto-pull-translation * fix: vercel deploy issues * fix: button issue for contact us * fix: meta issue fix for deriv prime * Hasan/Pr 1780 go to element hook (#5503) * feat: created scroll to element hook * fix: getintouch id * feat: applied scroll to element hook to header and hero * fix: check server side rendering for contact us button * fix: fix table td line hight (#5508) Co-authored-by: Fasih Ali <[email protected]> * Konstantinos / Deriv Prime final subtasks (#5507) * fix: deriv prime subtasks * fix: space --------- Co-authored-by: Konstantinos-Gk <[email protected]> * auto-pull-translation * auto-pull-translation * auto-pull-translation * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * Mayuran/fix contact us (#5511) * fix: align issue * fix: contact us remove # * fix: revert code * Mayuran/align issue (#5509) * fix: align issue * fix: coming soon wrapper * Konstantinos / Box height (#5510) * fix: height * chore: vercel * fix: align --------- Co-authored-by: Konstantinos-Gk <[email protected]> * empty: 🚀 to redeploy and trigger build * fix: changed the deriv logo * chore: fix active link in internal links * chore: fix prime logo * Hasan/Pr 00 table refactor (#5515) * fix: fixed table layout and typescript issue * fix: added layout to faq table * fix: changed the faq question * auto-pull-translation * auto-pull-translation * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch --------- Co-authored-by: mayuran-deriv <[email protected]> Co-authored-by: konstantinosG-deriv <[email protected]> Co-authored-by: Konstantinos-Gk <[email protected]> Co-authored-by: mitra-deriv <[email protected]> Co-authored-by: fasihali-deriv <[email protected]> Co-authored-by: Fasih Ali <[email protected]> Co-authored-by: Fasih Ali <[email protected]> Co-authored-by: Hasan Mobarak <[email protected]> Co-authored-by: mitra-deriv <[email protected]> Co-authored-by: DerivFE <[email protected]> Co-authored-by: Michio <[email protected]>
binary-com · Sep 1, 2023 · 25a6fc9 · 25a6fc9
1 parent d5bab51
commit 25a6fc9
Show file tree

Hide file tree

Showing 105 changed files with 9,745 additions and 4,708 deletions.
diff --git a/crowdin/messages.json b/crowdin/messages.json
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -165,6 +165,8 @@ export const telegram_url = 'https://t.me/derivdotcomofficial'
 export const youtube_url = 'https://www.youtube.com/@deriv'
 export const loss_percent = 72
 
+export const contact_us_form_post_data = 'https://formkeep.com/f/7f4b8b55f10f'
+
 export const cookie_key = 'browser_update_alert_modal_shown'
 export const browsers_minimum_required_version = {
     Chrome: 72,

diff --git a/src/common/utility.ts b/src/common/utility.ts
@@ -28,6 +28,10 @@ export const isEmptyObject = (obj: unknown): boolean => {
     return is_empty
 }
 
+export const trimObjectValues = (obj: { [key: string]: string }): { [key: string]: string } => {
+    return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, value.trim()]))
+}
+
 export const scrollTop = () => {
     if (isBrowser()) {
         document.body.scrollTop = 0

diff --git a/src/features/components/atoms/card/card-primary/index.tsx b/src/features/components/atoms/card/card-primary/index.tsx
@@ -4,13 +4,22 @@ import Flex from '../../flex-box'
 import Link from '../../link'
 import { FlexBoxProps } from '../../flex-box/box'
 import { CardType } from '../type'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 import dclsx from 'features/utils/dclsx'
 import useBreakpoints from 'components/hooks/use-breakpoints'
 
 export interface CardPrimaryProps extends FlexBoxProps<'div'>, CardType {}
 
-const CardPrimary = ({ header, description, icon, link, className, ...rest }: CardPrimaryProps) => {
+const CardPrimary = ({
+    header,
+    description,
+    icon,
+    alt_icon,
+    link,
+    className,
+    is_coming_soon = false,
+    ...rest
+}: CardPrimaryProps) => {
     const { is_mobile_or_tablet } = useBreakpoints()
 
     return (
@@ -23,21 +32,27 @@ const CardPrimary = ({ header, description, icon, link, className, ...rest }: Ca
             radius="8x"
             {...rest}
         >
-            <Flex.Item className={dclsx('item_block')}>
+            {is_coming_soon && (
+                <Flex.Box className={dclsx('coming_soon_wrapper')} justify="center" align="center">
+                    <Typography.Paragraph size={'xxs'} weight="bold" textcolor="black">
+                        <Localize translate_text={'_t_Coming soon_t_'} />
+                    </Typography.Paragraph>
+                </Flex.Box>
+            )}
+            <Flex.Item className={dclsx(link && 'item_block')}>
                 {icon && (
                     <Flex.Box pb="11x" lg={{ pb: '8x' }}>
-                        <img src={icon} width={44} height={44} />
+                        <img
+                            src={icon}
+                            width={44}
+                            height={44}
+                            alt={alt_icon ? localize(alt_icon) : ''}
+                        />
                     </Flex.Box>
                 )}
-                <Typography.Paragraph
-                    as="p"
-                    size={is_mobile_or_tablet ? 'large' : 'medium'}
-                    pb="4x"
-                    weight="bold"
-                    font_family="UBUNTU"
-                >
+                <Typography.Heading as="h3" size="xxs" pb="4x" weight="bold">
                     <Localize translate_text={header} />
-                </Typography.Paragraph>
+                </Typography.Heading>
                 <Typography.Paragraph size={is_mobile_or_tablet ? 'medium' : 'small'}>
                     <Localize translate_text={description} />
                 </Typography.Paragraph>

diff --git a/src/features/components/atoms/card/type.ts b/src/features/components/atoms/card/type.ts
@@ -11,4 +11,6 @@ export interface CardType {
     description: TString
     icon?: string
     link?: LinkUrlType
+    is_coming_soon?: boolean
+    alt_icon?: TString
 }
diff --git a/src/features/components/atoms/link/internal.tsx b/src/features/components/atoms/link/internal.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Link } from 'gatsby'
 import language_config from '../../../../../i18n-config.js'
 import { LinkProps } from '.'
@@ -66,6 +66,8 @@ const Internal = ({
     link_rel,
     active_urls,
 }: InternalProps) => {
+    const [is_active, setIsActive] = useState(false)
+
     let rawLocale = 'en'
     if (isBrowser()) {
         rawLocale = localStorage.getItem('i18n') ?? 'en'
@@ -77,7 +79,9 @@ const Internal = ({
 
     const to = is_non_localized || is_default ? url.to : `/${path}${url.to}`
 
-    const is_active = isActiveLink(url.to, active_urls)
+    useEffect(() => {
+        setIsActive(isActiveLink(url.to, active_urls))
+    }, [active_urls, url.to])
 
     return (
         <Link

diff --git a/src/features/components/atoms/table/base/index.tsx b/src/features/components/atoms/table/base/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { TableColumnType } from '../types'
+import Box, { BoxProps } from '../../box'
+import TableHeader from './table-header'
+import TableRow from './table-row'
+import dclsx from 'features/utils/dclsx'
+import { ClassProps } from 'features/types'
+
+export interface TableProps<T, K extends keyof T> extends BoxProps, ClassProps {
+    striped?: boolean
+    layout?: 'fixed' | 'auto'
+    data: T[]
+    columns: Array<TableColumnType<T, K>>
+}
+
+function BaseTable<T, K extends keyof T>({
+    data,
+    columns,
+    striped,
+    layout,
+    className,
+    ...rest
+}: TableProps<T, K>) {
+    return (
+        <Box
+            className={dclsx('table-responsive', { ['table-striped']: striped }, className)}
+            {...rest}
+        >
+            <table className={dclsx('table', { [`table-layout-${layout}`]: layout })}>
+                <TableHeader columns={columns} />
+                <TableRow data={data} columns={columns} />
+            </table>
+        </Box>
+    )
+}
+
+export default BaseTable
diff --git a/src/features/components/atoms/table/base/table-header.tsx b/src/features/components/atoms/table/base/table-header.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { TableColumnType } from '../types'
+import dclsx from 'features/utils/dclsx'
+
+type TableHeaderProps<T, K extends keyof T> = {
+    columns: Array<TableColumnType<T, K>>
+}
+
+const TableHeader = <T, K extends keyof T>({ columns }: TableHeaderProps<T, K>) => {
+    return (
+        <thead>
+            <tr>
+                {columns.map((col) => (
+                    <th
+                        key={col.accessor}
+                        className={dclsx(
+                            'typography-color-black',
+                            'typography-align-center',
+                            'typography-font-UBUNTU',
+                            'typography-weight-bold',
+                            'text-small',
+                            'padding-block-5x',
+                            'padding-inline-10x',
+                            'md-padding-block-6x',
+                        )}
+                    >
+                        {col.header}
+                    </th>
+                ))}
+            </tr>
+        </thead>
+    )
+}
+
+export default TableHeader
diff --git a/src/features/components/atoms/table/base/table-row.tsx b/src/features/components/atoms/table/base/table-row.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { TableColumnType } from '../types'
+import dclsx from 'features/utils/dclsx'
+
+type TableRowProps<T, K extends keyof T> = {
+    data: T[]
+    columns: Array<TableColumnType<T, K>>
+}
+
+const TableRow = <T, K extends keyof T>({ data, columns }: TableRowProps<T, K>) => {
+    return (
+        <tbody>
+            {data.map((row, i) => (
+                <tr key={i}>
+                    {columns.map((col) => (
+                        <td
+                            key={col.accessor}
+                            className={dclsx(
+                                'typography-color-black',
+                                'typography-align-center',
+                                'typography-font-UBUNTU',
+                                'text-small',
+                                'padding-block-4x',
+                                'padding-inline-10x',
+                                'md-padding-block-6x',
+                            )}
+                        >
+                            {row[col.accessor]}
+                        </td>
+                    ))}
+                </tr>
+            ))}
+        </tbody>
+    )
+}
+
+export default TableRow
diff --git a/src/features/components/atoms/table/index.tsx b/src/features/components/atoms/table/index.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react'
+import BaseTable from './base'
+import ShadowTable from './shadow-table'
+
+type BaseTypes = {
+    Base: typeof BaseTable
+    Shadow: typeof ShadowTable
+}
+
+const Table: BaseTypes = ({ children }: { children: ReactNode }) => {
+    return <>{children}</>
+}
+
+Table.Base = BaseTable
+Table.Shadow = ShadowTable
+
+export default Table
diff --git a/src/features/components/atoms/table/shadow-table/index.tsx b/src/features/components/atoms/table/shadow-table/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import BaseTable, { TableProps } from '../base'
+import dclsx from 'features/utils/dclsx'
+
+function ShadowTable<T, K extends keyof T>({ className, ...rest }: TableProps<T, K>) {
+    return <BaseTable className={dclsx('table-shadow', 'padding-12x', className)} {...rest} />
+}
+
+export default ShadowTable
diff --git a/src/features/components/atoms/table/types.ts b/src/features/components/atoms/table/types.ts
@@ -0,0 +1,6 @@
+import { ReactNode } from 'react'
+
+export type TableColumnType<T, K extends keyof T> = {
+    accessor: K extends string ? K : never
+    header: ReactNode
+}
diff --git a/src/features/components/molecules/other-markets-slider/index.tsx b/src/features/components/molecules/other-markets-slider/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import { Pagination } from 'swiper'
-import { MarketPageType, other_markets_items } from './data'
+import { MarketPageType, SmartOtherMarketsItem, other_markets_items } from './data'
 import useDynamicVisibleContent from 'components/hooks/use-dynamic-visible-content'
 import Flex from 'features/components/atoms/flex-box'
 import { Localize } from 'components/localization'
@@ -10,33 +10,44 @@ import Card from 'features/components/atoms/card'
 import './other-markets-slider.scss'
 import Container from 'features/components/atoms/container'
 import useRegion from 'components/hooks/use-region'
+import { TString } from 'types/generics'
+import dclsx from 'features/utils/dclsx'
 
 export type OtherMarketSliderProps = {
-    current_market: MarketPageType
+    current_market?: MarketPageType
+    title?: TString
+    available_markets?: SmartOtherMarketsItem[] | null
 }
 
-const OtherMarketsSlider = ({ current_market }: OtherMarketSliderProps) => {
+const OtherMarketsSlider = ({
+    current_market,
+    title,
+    available_markets = null,
+}: OtherMarketSliderProps) => {
     const { is_eu } = useRegion()
     const slider_items = useDynamicVisibleContent({
-        content: other_markets_items,
+        content: available_markets || other_markets_items,
         config: {
             current_market: (market_page) => market_page !== current_market,
             is_eu: (item_is_eu) => item_is_eu === undefined || is_eu === item_is_eu,
         },
     })
+    const is_no_linkAvailable = !!available_markets?.length
 
     return (
         <Container.Fixed padding_block="20x" md={{ padding_block: '40x' }}>
             <Flex.Box direction="col" gap="12x">
                 <Typography.Heading
-                    as="h3"
-                    size="small"
+                    as="h2"
+                    size={is_no_linkAvailable ? 'medium' : 'small'}
                     align="center"
                     padding_inline="8x"
                     pb="10x"
                     lg={{ padding_block: '20x', padding_inline: '40x' }}
                 >
-                    <Localize translate_text="_t_Other markets you might be interested in_t_" />
+                    <Localize
+                        translate_text={title || '_t_Other markets you might be interested in_t_'}
+                    />
                 </Typography.Heading>
             </Flex.Box>
             <Flex.Box justify="center" align="center">
@@ -49,18 +60,23 @@ const OtherMarketsSlider = ({ current_market }: OtherMarketSliderProps) => {
                         clickable: true,
                     }}
                     rewind
-                    className={'markets_swiper'}
+                    className={dclsx('markets_swiper', is_no_linkAvailable && 'no_link')}
                     slidesPerView={'auto'}
                 >
                     {slider_items.map(({ id, data }) => {
                         return (
                             <SwiperSlide key={id} className={'market_slide'}>
                                 <Card.Primary
-                                    className="other_market_item"
+                                    className={dclsx(
+                                        'other_market_item',
+                                        is_no_linkAvailable && 'no_link',
+                                    )}
                                     header={data.header}
                                     description={data.description}
                                     icon={data.icon}
-                                    link={data.link}
+                                    link={data?.link || null}
+                                    is_coming_soon={data?.is_coming_soon}
+                                    alt_icon={data?.alt_icon}
                                 />
                             </SwiperSlide>
                         )

diff --git a/src/features/components/molecules/other-markets-slider/other-markets-slider.scss b/src/features/components/molecules/other-markets-slider/other-markets-slider.scss
@@ -12,6 +12,12 @@
 
 .other_market_item {
     min-block-size: 30rem;
+    &.no_link {
+        min-block-size: 17.5rem;
+        @include breakpoints(tablet) {
+            min-block-size: 21rem;
+        }
+    }
 }
 
 .markets_swiper {
@@ -21,6 +27,13 @@
     @include breakpoints(tablet) {
         min-block-size: 40rem;
     }
+    &.no_link {
+        min-block-size: 22rem;
+
+        @include breakpoints(tablet) {
+            min-block-size: 25rem;
+        }
+    }
 }
 
 .markets_slider_pagination {