Translation 1500 feature deriv prime

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,

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

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>

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
 }

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

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

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

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

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

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

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
+}

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>
                         )

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 {