Merge branch 'translation-1500-feature-deriv-prime' of https://github…

….com/binary-com/deriv-com into translation-1500-feature-deriv-prime

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

@@ -8,6 +8,7 @@ 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>>
 }
@@ -16,6 +17,7 @@ function BaseTable<T, K extends keyof T>({
     data,
     columns,
     striped,
+    layout,
     className,
     ...rest
 }: TableProps<T, K>) {
@@ -24,7 +26,7 @@ function BaseTable<T, K extends keyof T>({
             className={dclsx('table-responsive', { ['table-striped']: striped }, className)}
             {...rest}
         >
-            <table className={dclsx('table')}>
+            <table className={dclsx('table', { [`table-layout-${layout}`]: layout })}>
                 <TableHeader columns={columns} />
                 <TableRow data={data} columns={columns} />
             </table>

src/features/components/atoms/table/shadow-table/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import BaseTable, { TableProps } from '../base'
 import dclsx from 'features/utils/dclsx'
 
-const ShadowTable = ({ className, ...rest }: TableProps) => {
+function ShadowTable<T, K extends keyof T>({ className, ...rest }: TableProps<T, K>) {
     return <BaseTable className={dclsx('table-shadow', 'padding-12x', className)} {...rest} />
 }
 

src/features/components/templates/navigation/payment-agent-nav/index.tsx

@@ -13,7 +13,7 @@ import Flex from 'features/components/atoms/flex-box'
 import { getLocationPathname } from 'common/utility'
 import useScrollToElement from 'features/hooks/use-scroll-to-element'
 
-const PaymentAgentAffiliateNav = () => {
+const PaymentAgentAffiliateNav = ({ is_prime_page = false }: { is_prime_page?: boolean }) => {
     const path_name = getLocationPathname()
     const clickToScrollHandler = useScrollToElement('getintouch')
 
@@ -67,15 +67,14 @@ const PaymentAgentAffiliateNav = () => {
                 <Link
                     url={{
                         type: 'internal',
-                        to: path_name.includes('deriv-prime')
-                            ? '/partners/deriv-prime'
-                            : '/partners',
+                        to: is_prime_page ? '/partners/deriv-prime' : '/partners',
                     }}
                 >
-                    <Image
-                        src={path_name.includes('deriv-prime') ? PrimeLogo : PartnerNavLogo}
-                        className={partners_nav_logo}
-                    />
+                    {is_prime_page ? (
+                        <Image src={PrimeLogo} className={partners_nav_logo} />
+                    ) : (
+                        <Image src={PartnerNavLogo} className={partners_nav_logo} />
+                    )}
                 </Link>
             )}
             items={affiliateNavItems}

src/features/pages/partners/deriv-prime/browse-our-faq/faq-commercial-plan.tsx

@@ -23,6 +23,7 @@ const FAQCommercialPlan = () => {
                     data={data}
                     columns={column_data}
                     striped
+                    layout="fixed"
                     className={commercial_table_faq}
                 />
             </Container.Fixed>

src/features/pages/partners/deriv-prime/commercial-plan/index.tsx

@@ -27,6 +27,7 @@ const CommercialPlan = () => {
                     data={data}
                     columns={column_data}
                     striped
+                    layout="fixed"
                     className={commercial_table}
                 />
             </Container.Fluid>

src/features/pages/partners/deriv-prime/index.tsx

@@ -26,7 +26,7 @@ const DerivPrime = () => {
             <Helmet>
                 <script type="application/ld+json">{JSON.stringify(faq_schema)}</script>
             </Helmet>
-            <PaymentAgentAffiliateNav />
+            <PaymentAgentAffiliateNav is_prime_page />
             <Hero />
             <Potential />
             <CommercialPlan />

src/features/styles/theme/table.scss

@@ -9,6 +9,11 @@
 .table {
     inline-size: 100%;
     background-color: transparent;
+    th, td {
+        line-height: 1.8;
+    }
+}
+.table-layout-fixed {
     table-layout: fixed;
 }
 .table-shadow {
@@ -29,9 +34,4 @@
             background-color: $color-white-1;
         }
     }
-}
-
-th, td {
-    line-height: 1.8!important;
-
 }