Agrim/MARK-1042/fix:adding new commission plans

themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/_style.tsx

@@ -254,7 +254,7 @@ export const StyledCard = styled(Card)<FlexProps>`
 export const StyledTrap = styled(TRAP)`
     background-color: var(--color-grey-39);
     padding: 1rem 0.8rem;
-    height: 62px;
+    max-block-size: 80px;
     border-bottom: none;
 `
 

themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/_table.tsx

@@ -83,11 +83,26 @@ const TRAPREVERSE = styled.div<TableProps>`
     align-items: center;
     justify-content: center;
     white-space: nowrap;
-    min-height: 62px;
+    min-height: 75px;
+
+    :nth-child(odd) {
+        height: 100%;
+    }
+`
+const TRAPREVERSECUSTOM = styled.div<TableProps>`
+    padding: 1rem 0.8rem;
+    background-color: ${(props) => (props.even === 'true' ? 'var(--color-grey-39)' : 'unset')};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    min-height: 75px;
+    top: 18px;
+    position: relative;
 
     :nth-child(odd) {
         height: 100%;
     }
 `
 
-export { TR, TRAP, TRAPREVERSE, TC, Table }
+export { TR, TRAP, TRAPREVERSE, TC, Table,TRAPREVERSECUSTOM   }

themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/cpa-eu-for-row/_calculated-card.tsx

@@ -33,7 +33,7 @@ const CalculatedCard = ({ toggleCalculated }: { toggleCalculated: () => void })
                 <Ul>
                     <Li>
                         <Header as="p" weight="normal">
-                            <Localize translate_text="_t_A referred client based in the EU deposits USD 100 in one transaction_t_" />
+                            <Localize translate_text="_t_A referred client with an EU account deposits USD 100 in one transaction_t_" />
                         </Header>
                         <Header as="p" weight="normal" mt="2.4rem">
                             <Localize translate_text="_t_Total commission earned: USD 100_t_" />
@@ -46,10 +46,10 @@ const CalculatedCard = ({ toggleCalculated }: { toggleCalculated: () => void })
                 <Ul>
                     <Li>
                         <Header as="p" weight="normal">
-                            <Localize translate_text="_t_A referred client based in the EU deposits USD 50 in one transaction. Commission = USD 0_t_" />
+                            <Localize translate_text="_t_A referred client with an EU account deposits USD 50 in one transaction. Commission = USD 0_t_" />
                         </Header>
                         <Header as="p" weight="normal" mt="2.4rem">
-                            <Localize translate_text="_t_The same EU client deposits USD 50 in another transaction_t_" />
+                            <Localize translate_text="_t_The same client deposits USD 50 in another transaction_t_" />
                         </Header>
                         <Header as="p" weight="normal" mt="2.4rem">
                             <Localize translate_text="_t_Total commission earned: USD 100_t_" />
@@ -62,7 +62,7 @@ const CalculatedCard = ({ toggleCalculated }: { toggleCalculated: () => void })
                 <Ul>
                     <Li>
                         <Header as="p" weight="normal">
-                            <Localize translate_text="_t_A referred client based in the EU deposits USD 200 in one transaction._t_" />
+                            <Localize translate_text="_t_A referred client with an EU account deposits USD 200 in one transaction._t_" />
                         </Header>
                         <Header as="p" weight="normal" mt="2.4rem">
                             <Localize translate_text="_t_Total commission earned: USD 100_t_" />
@@ -72,9 +72,6 @@ const CalculatedCard = ({ toggleCalculated }: { toggleCalculated: () => void })
                 <Header as="p" type="paragraph-2" weight="normal" mt="1.6rem">
                     <Localize translate_text="_t_(The CPA commission is a one-time payment.)_t_" />
                 </Header>
-                <Header as="h2" type="paragraph-2" mt="1.6rem" mb="0.8rem">
-                    <Localize translate_text="_t_Disclaimer: Affiliates not residing in the EU may sign up for the CPA plan._t_" />
-                </Header>
             </div>
             <div>
                 <StyledBackButton tertiary onClick={toggleCalculated} mt="2.4rem">

themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/cpa-eu-for-row/_default-card.tsx

@@ -1,54 +1,67 @@
 import React from 'react'
-import { StyledCard, StyledCalculatedButton, CPAContent, StyledButtonWrap } from '../_style'
+import {
+    StyledCard,
+    StyledTrap,
+    StyledText,
+} from '../_style'
+import { Table, TRAPREVERSE, TC, TRAPREVERSECUSTOM } from '../_table'
 import { Header } from 'components/elements/typography'
 import { Localize } from 'components/localization'
-import { Li, Ul } from 'components/elements'
+import { TString } from 'types/generics'
+
+type AffiliateType = {
+    title: TString
+    data: TString[]
+}[]
+
+const cpa_data: AffiliateType = [
+    {
+        title: '_t_Revenue_t_',
+        data: ['_t_Based on each<br /> successful referral with<br /> deposit of USD 100_t_'],
+    },
+    {
+        title: '_t_Commission_t_',
+        data: ['_t_USD 100_t_'],
+    },
+]
 
 const DefaultCard = ({ toggleCalculated }: { toggleCalculated: () => void }) => {
     return (
-        <StyledCard height="110rem" tabletHeight="auto" padding="2.4rem">
+        <StyledCard height="70rem" tabletHeight="auto" padding="2.4rem">
             <div>
                 <Header as="h4" type="sub-section-title" mb="0.8rem">
-                    <Localize translate_text="_t_CPA (EU-based clients only)_t_" />
+                    <Localize translate_text="_t_CPA_t_" />
                 </Header>
-                <Header as="p" type="paragraph-1" weight="normal" mb="1.6rem">
-                    <Localize translate_text="_t_Earn based on each successful referral._t_" />
+                <Header as="p" type="paragraph-1" weight="normal">
+                    <Localize
+                        translate_text="_t_Earn a USD 100 when your new referred client deposits a total of USD 100 (or its equivalent) into their Deriv account, either all at once or over time._t_"
+                    />
                 </Header>
-                <CPAContent>
-                    <Header as="p" type="paragraph-1" weight="normal">
-                        <Localize
-                            translate_text="_t_You earn <0>USD 100</0> when your new referred client deposits and trades a total amount of <0>USD 100</0> or its equivalent into their Deriv account, either in one deposit or cumulatively._t_"
-                            components={[<strong key={0} />]}
-                        />
-                    </Header>
-                    <Header as="p" type="paragraph-1" weight="normal" mt="1.6rem">
-                        <Localize
-                            translate_text="_t_This plan is available exclusively for EU-based clients. <0>Please note that according to regulations, you cannot have clients who reside in Portugal or Spain.</0>_t_"
-                            components={[<strong key={0} />]}
-                        />
-                    </Header>
-                </CPAContent>
-                <Header as="p" type="paragraph-1" mb="0.8rem" mt="1.6rem">
+                <Table grid_col_number={2}>
+                    {cpa_data.map(({ title, data }, index) => (
+                        <TC grid_area={'area' + index} key={index}>
+                            <StyledTrap isTitle="true">
+                                <StyledText weight="bold">
+                                    <Localize translate_text={title} />
+                                </StyledText>
+                            </StyledTrap>
+                            {data.map((data, id) => (
+                                <TRAPREVERSE even={id % 2 ? 'true' : ''} key={id}>
+                                    <StyledText>
+                                        <Localize translate_text={data} />
+                                    </StyledText>
+                                </TRAPREVERSE>
+                            ))}
+                        </TC>
+                    ))}
+                </Table>
+                <Header as="p" type="paragraph-1" mb="0.8rem" mt="2.4rem">
                     <Localize translate_text="_t_Disclaimer:_t_" />
                 </Header>
-                <Ul>
-                    <Li>
-                        <Header as="p" type="paragraph-1">
-                            <Localize translate_text="_t_This plan is available exclusively for affiliates who promote to clients residing in EU._t_" />
-                        </Header>
-                    </Li>
-                    <Li>
-                        <Header as="p" type="paragraph-1">
-                            <Localize translate_text="_t_Affiliates not residing in the EU may sign up for the CPA plan._t_" />
-                        </Header>
-                    </Li>
-                </Ul>
+                <Header as="p" type="paragraph-1">
+                    <Localize translate_text="_t_Affiliates residing outside the EU can sign up for the CPA plan and can refer clients residing in the EU except Portugal and Spain._t_" />
+                </Header>
             </div>
-            <StyledButtonWrap>
-                <StyledCalculatedButton flat onClick={toggleCalculated}>
-                    <Localize translate_text="_t_How it’s calculated_t_" />
-                </StyledCalculatedButton>
-            </StyledButtonWrap>
         </StyledCard>
     )
 }

themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/cpa-eu/_calculated-card.tsx

@@ -33,7 +33,7 @@ const CalculatedCard = ({ toggleCalculated }: { toggleCalculated: () => void })
                 <Ul>
                     <Li>
                         <Header as="p" weight="normal">
-                            <Localize translate_text="_t_A referred client based in the EU deposits USD 100 in one transaction_t_" />
+                            <Localize translate_text="_t_A referred client with an EU account deposits USD 100 in one transaction_t_" />
                         </Header>
                         <Header as="p" weight="normal" mt="2.4rem">
                             <Localize translate_text="_t_Total commission earned: USD 100_t_" />
@@ -46,10 +46,10 @@ const CalculatedCard = ({ toggleCalculated }: { toggleCalculated: () => void })
                 <Ul>
                     <Li>
                         <Header as="p" weight="normal">
-                            <Localize translate_text="_t_A referred client based in the EU deposits USD 50 in one transaction. Commission = USD 0_t_" />
+                            <Localize translate_text="_t_A referred client with an EU account deposits USD 50 in one transaction. Commission = USD 0_t_" />
                         </Header>
                         <Header as="p" weight="normal" mt="2.4rem">
-                            <Localize translate_text="_t_The same EU client deposits USD 50 in another transaction_t_" />
+                            <Localize translate_text="_t_The same client deposits USD 50 in another transaction_t_" />
                         </Header>
                         <Header as="p" weight="normal" mt="2.4rem">
                             <Localize translate_text="_t_Total commission earned: USD 100_t_" />
@@ -62,7 +62,7 @@ const CalculatedCard = ({ toggleCalculated }: { toggleCalculated: () => void })
                 <Ul>
                     <Li>
                         <Header as="p" weight="normal">
-                            <Localize translate_text="_t_A referred client based in the EU deposits USD 200 in one transaction._t_" />
+                            <Localize translate_text="_t_A referred client with an EU account deposits USD 200 in one transaction._t_" />
                         </Header>
                         <Header as="p" weight="normal" mt="2.4rem">
                             <Localize translate_text="_t_Total commission earned: USD 100_t_" />
@@ -72,9 +72,6 @@ const CalculatedCard = ({ toggleCalculated }: { toggleCalculated: () => void })
                 <Header as="p" type="paragraph-2" weight="normal" mt="1.6rem">
                     <Localize translate_text="_t_(The CPA commission is a one-time payment.)_t_" />
                 </Header>
-                <Header as="h2" type="paragraph-2" mt="1.6rem" mb="0.8rem">
-                    <Localize translate_text="_t_Disclaimer: Affiliates not residing in the EU may sign up for the CPA plan._t_" />
-                </Header>
             </div>
             <div>
                 <StyledBackButton tertiary onClick={toggleCalculated} mt="2.4rem">

themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/cpa-eu/_default-card.tsx

@@ -1,44 +1,67 @@
 import React from 'react'
-import { StyledCard, StyledCalculatedButton, CPAContent, StyledButtonWrap } from '../_style'
+import {
+    StyledCard,
+    StyledTrap,
+    StyledText,
+} from '../_style'
+import { Table, TRAPREVERSE, TC, TRAPREVERSECUSTOM } from '../_table'
 import { Header } from 'components/elements/typography'
 import { Localize } from 'components/localization'
+import { TString } from 'types/generics'
+
+type AffiliateType = {
+    title: TString
+    data: TString[]
+}[]
+
+const cpa_data: AffiliateType = [
+    {
+        title: '_t_Revenue_t_',
+        data: ['_t_Based on each<br /> successful referral with<br /> deposit of USD 100_t_'],
+    },
+    {
+        title: '_t_Commission_t_',
+        data: ['_t_USD 100_t_'],
+    },
+]
 
 const DefaultCard = ({ toggleCalculated }: { toggleCalculated: () => void }) => {
     return (
-        <StyledCard height="auto" tabletHeight="auto" padding="2.4rem">
+        <StyledCard height="70rem" tabletHeight="auto" padding="2.4rem">
             <div>
                 <Header as="h4" type="sub-section-title" mb="0.8rem">
-                    <Localize translate_text="_t_CPA (EU only)_t_" />
+                    <Localize translate_text="_t_CPA_t_" />
                 </Header>
-                <Header as="p" type="paragraph-1" weight="normal" mb="1.6rem">
-                    <Localize translate_text="_t_Earn based on each successful referral._t_" />
+                <Header as="p" type="paragraph-1" weight="normal">
+                    <Localize
+                        translate_text="_t_Earn a USD 100 when your new referred client deposits a total of USD 100 (or its equivalent) into their Deriv account, either all at once or over time._t_"
+                    />
                 </Header>
-                <CPAContent>
-                    <Header as="p" type="paragraph-1" weight="normal">
-                        <Localize
-                            translate_text="_t_You earn <0>USD 100</0> when your new referred client deposits and trades a total amount of <0>USD 100</0> or its equivalent into their Deriv account, either in one deposit or cumulatively._t_"
-                            components={[<strong key={0} />]}
-                        />
-                    </Header>
-                    <Header as="p" type="paragraph-1" weight="normal" mt="1.6rem">
-                        <Localize
-                            translate_text="_t_This plan is available exclusively for EU-based clients. <0>Please note that according to regulations, you cannot have clients who reside in Portugal or Spain.</0>_t_"
-                            components={[<strong key={0} />]}
-                        />
-                    </Header>
-                </CPAContent>
-                <Header as="p" type="paragraph-1" mb="0.8rem" mt="1.6rem">
+                <Table grid_col_number={2}>
+                    {cpa_data.map(({ title, data }, index) => (
+                        <TC grid_area={'area' + index} key={index}>
+                            <StyledTrap isTitle="true">
+                                <StyledText weight="bold">
+                                    <Localize translate_text={title} />
+                                </StyledText>
+                            </StyledTrap>
+                            {data.map((data, id) => (
+                                <TRAPREVERSE even={id % 2 ? 'true' : ''} key={id}>
+                                    <StyledText>
+                                        <Localize translate_text={data} />
+                                    </StyledText>
+                                </TRAPREVERSE>
+                            ))}
+                        </TC>
+                    ))}
+                </Table>
+                <Header as="p" type="paragraph-1" mb="0.8rem" mt="2.4rem">
                     <Localize translate_text="_t_Disclaimer:_t_" />
                 </Header>
                 <Header as="p" type="paragraph-1">
-                    <Localize translate_text="_t_This plan is available exclusively for affiliates who promote to clients residing in EU._t_" />
+                    <Localize translate_text="_t_ Affiliates residing outside the EU can sign up for the CPA plan and can refer clients residing in the EU except Portugal and Spain._t_" />
                 </Header>
             </div>
-            <StyledButtonWrap>
-                <StyledCalculatedButton flat onClick={toggleCalculated}>
-                    <Localize translate_text="_t_How it’s calculated_t_" />
-                </StyledCalculatedButton>
-            </StyledButtonWrap>
         </StyledCard>
     )
 }

themes/gatsby-theme-deriv/src/pages/partners/affiliate-ib/master-affiliate/_default-card.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyledCard, StyledCalculatedButton, StyledButtonWrap } from '../_style'
+import { StyledCard} from '../_style'
 import { Localize } from 'components/localization'
 import { Header } from 'components/elements/typography'
 
@@ -23,11 +23,6 @@ const DefaultCard = ({ toggleCalculated }: { toggleCalculated: () => void }) =>
                     <Localize translate_text="_t_Only affiliates with Revenue share and/or Turnover plans are eligible to apply to become Master Affiliate._t_" />
                 </Header>
             </div>
-            <StyledButtonWrap>
-                <StyledCalculatedButton flat onClick={toggleCalculated}>
-                    <Localize translate_text="_t_How it’s calculated_t_" />
-                </StyledCalculatedButton>
-            </StyledButtonWrap>
         </StyledCard>
     )
 }