feat: CA pi4 message formatting and modal update

content/messages/CA/generic_fr.json

@@ -2,6 +2,7 @@
     "meta": {
         "id": "",
         "offerCountry": "CA",
+        "language": "fr-CA",
         "offerType": "GENERIC",
         "messageType": "GENERIC",
         "offerTerm": "${CREDIT_OFFERS_DS.total_payments}",

content/messages/CA/short_term_nq_fr.json

@@ -3,6 +3,7 @@
         "id": "",
         "offerCountry": "CA",
         "offerType": "PAY_LATER_SHORT_TERM",
+        "language": "fr-CA",
         "messageType": "PLST_NQ",
         "offerTerm": "${CREDIT_OFFERS_DS.total_payments}",
         "lander": "",

content/messages/CA/short_term_q_fr.json

@@ -2,6 +2,7 @@
     "meta": {
         "id": "",
         "offerCountry": "CA",
+        "language": "fr-CA",
         "offerType": "PAY_LATER_SHORT_TERM",
         "messageType": "PLST_SQ",
         "offerTerm": "${CREDIT_OFFERS_DS.total_payments}",

content/modals/CA/short_term_fr.json

@@ -27,7 +27,7 @@
     "content": {
         "headline": "Payer en 4 versements sans intérêt",
         "subheadline": "Aucun impact sur la cote de crédit et aucuns frais de retard. Disponible pour les achats de {formattedMinAmount} à {formattedMaxAmount}.",
-        "qualifyingSubheadline": "Divisez le montant de  {formattedTotalCost} en {total_payments} versements sans intérêt, sans incidence sur votre cote de crédit et sans frais de retard.",
+        "qualifyingSubheadline": "Divisez votre achat de {formattedTotalCost} en {total_payments} versements, sans incidence sur votre cote de crédit et sans frais de retard.",
         "donutTimestamps": ["Aujourd'hui", "2 semaines", "4 semaines", "6 semaines"],
         "instructions": [
             "Choisissez PayPal à la caisse pour payer plus tard avec <strong>le Paiement en 4</strong>.",

src/components/modal/v2/parts/Container.jsx

@@ -28,6 +28,7 @@ const Container = ({ children }) => {
         merchantId,
         customerId,
         buyerCountry,
+        language,
         ignoreCache,
         version,
         env,
@@ -72,6 +73,7 @@ const Container = ({ children }) => {
             merchantId,
             customerId,
             buyerCountry,
+            language,
             ignoreCache,
             version,
             env,
@@ -87,7 +89,7 @@ const Container = ({ children }) => {
             setServerData(data);
             setLoading(false);
         });
-    }, [currency, amount, payerId, clientId, merchantId, buyerCountry]);
+    }, [currency, amount, payerId, clientId, merchantId, buyerCountry, language]);
 
     useEffect(() => {
         setupTabTrap();

src/library/zoid/message/component.js

@@ -148,7 +148,8 @@ export default createGlobalVariableGetter('__paypal_credit_message__', () =>
                     const { onClick } = props;
 
                     return ({ meta }) => {
-                        const { modal, index, account, merchantId, currency, amount, buyerCountry, onApply } = props;
+                        const { modal, index, account, merchantId, currency, amount, buyerCountry, language, onApply } =
+                            props;
                         const { offerType, offerCountry, messageRequestId, lander } = meta;
                         if (offerType === 'PURCHASE_PROTECTION') {
                             if (getURIPopup(lander, offerType) == null) {
@@ -163,6 +164,7 @@ export default createGlobalVariableGetter('__paypal_credit_message__', () =>
                                 currency,
                                 amount,
                                 buyerCountry,
+                                language,
                                 onApply,
                                 offer: offerType,
                                 offerCountry,

src/server/locale/CA/index.js

@@ -1,13 +1,13 @@
 import validOptions from './validOptions';
 import getMutations from './mutations';
 import logos from '../../message/logos';
-import styles from './styles';
+import getStyles from './styles';
 
-export default {
+export default language => ({
     localeClass: 'locale--CA',
-    productName: ['with', 'PayPal.'],
+    productName: language === 'fr-CA' ? ['avec', 'PayPal.'] : ['with', 'PayPal.'],
     validOptions,
     getMutations,
     logos,
-    styles
-};
+    styles: getStyles
+});

src/server/locale/CA/mutations/generic.js

@@ -0,0 +1,160 @@
+import Logo from '../../../message/logos';
+import { textWrap, messageLogoWidth, altNoWrap, setLogoTop } from '../../../message/mediaQueries';
+import { flexLogoMutations, textLogoMutations } from '../../../message/logoMutations';
+
+const flex = [
+    [
+        'default',
+        {
+            logo: Logo.PP_PAYPAL.WHITE,
+            headline: [
+                {
+                    tag: 'xsmall'
+                }
+            ],
+            disclaimer: ['default']
+        }
+    ],
+    [
+        'ratio:20x1',
+        {
+            styles: [
+                `
+                @media (min-aspect-ratio: 200/11) and (min-width: 523px) {
+                    .message__logo-container {
+                        max-width: 12%;
+                    }
+                }
+
+                @media (min-aspect-ratio: 200/11) and (min-width: 300px) {
+                    .message__logo:nth-of-type(1) {
+                        width: 18%;
+                    }
+                    .message__logo:nth-of-type(2) {
+                        width: 60%;
+                    }
+                }
+
+                @media (min-aspect-ratio: 60/11) and (min-width: 324px) {
+                    .message__headline .tag--xsmall .br:first-child {
+                        display: inline;
+                    }
+                }
+                `
+            ]
+        }
+    ],
+    [
+        'ratio:8x1',
+        {
+            headline: [
+                {
+                    tag: 'xsmall'
+                }
+            ],
+            styles: [
+                `@media (min-aspect-ratio: 60/11) and (min-width: 324px) {
+                    .message__headline .tag--xsmall .br:first-child {
+                        display: inline;
+                    }
+                }
+                `
+            ]
+        }
+    ],
+    [
+        'ratio:1x4',
+        {
+            headline: [
+                {
+                    tag: 'xsmall'
+                }
+            ],
+            styles: [
+                `.message__headline .tag--xsmall {
+    display: inline;
+}`
+            ]
+        }
+    ],
+    ['color:white-no-border', { logo: Logo.PP_PAYPAL.COLOR }],
+    ...flexLogoMutations
+];
+
+export default {
+    'layout:flex': flex,
+    'layout:text': [
+        [
+            'default',
+            ({ textSize }) => ({
+                styles: [
+                    textWrap(textSize * 38, textSize, 'US'),
+                    messageLogoWidth(false, textSize * 4, textSize * 1.25),
+                    setLogoTop(textSize * 20)
+                ],
+                logo: Logo.PP_PAYPAL.COLOR,
+                headline: [{ tag: 'xsmall' }],
+                disclaimer: ['default']
+            })
+        ],
+        [
+            'logo.type:primary && logo.position:right',
+            ({ textSize }) => ({
+                styles: [setLogoTop(textSize * 22), messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)]
+            })
+        ],
+        [
+            'logo.type:primary && logo.position:top',
+            ({ textSize }) => ({
+                styles: [messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25)]
+            })
+        ],
+        [
+            'logo.type:alternative',
+            ({ textSize }) => ({
+                styles: [
+                    `@media screen and (max-width: ${textSize * 10.5}px) { .message__content { white-space: nowrap; }}`,
+                    textWrap(textSize * 32, textSize, 'US'),
+                    altNoWrap(textSize * 10.6),
+                    messageLogoWidth(textSize * 1.75, textSize * 4, textSize * 1.25)
+                ],
+                logo: Logo.PP_PAYPAL.COLOR[0]
+            })
+        ],
+        [
+            'logo.type:none',
+            ({ textSize }) => ({
+                styles: [`@media screen and (max-width: ${textSize * 37.3}) {.message__content {margin-top: 0px;}}`],
+                logo: false,
+                headline: [
+                    {
+                        tag: 'xsmall.2',
+                        br: ['later.', 'tard.'],
+                        replace: [
+                            ['later.', 'later'],
+                            ['tard.', 'tard']
+                        ]
+                    }
+                ]
+            })
+        ],
+        [
+            'logo.type:inline',
+            ({ textSize }) => ({
+                styles: [`.message__logo { width: ${textSize * 4}px }`],
+                logo: Logo.NO_PP_MONOGRAM.COLOR,
+                headline: [
+                    {
+                        tag: 'xsmall.2',
+                        br: ['later.', 'tard.'],
+                        replace: [
+                            ['later.', 'later'],
+                            ['tard.', 'tard']
+                        ]
+                    }
+                ]
+            })
+        ],
+        ...textLogoMutations
+    ]
+};

src/server/locale/CA/mutations/index.js

@@ -1,16 +1,17 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 // mutations import here.
+import generic from './generic';
 import shortTermNQ from './short_term_nq';
 import shortTermQ from './short_term_q';
 
 export default function getMutations(id, type) {
     switch (id) {
-        case 'GPLQ':
         case 'PLST_SQ':
             return shortTermQ[type];
-        case 'GPLNQ':
         case 'PLST_NQ':
-        default:
             return shortTermNQ[type];
+        case 'GENERIC':
+        default:
+            return generic[type];
     }
 }

src/server/locale/CA/mutations/short_term_nq.js

@@ -73,7 +73,7 @@ export default {
                 headline: [
                     {
                         tag: 'medium',
-                        br: ['of']
+                        br: ['for', 'pour']
                     },
                     { tag: 'xsmall' }
                 ],
@@ -124,12 +124,18 @@ export default {
                 headline: [
                     {
                         tag: 'medium',
-                        br: ['on'],
-                        replace: [['00.', '00']]
+                        br: ['for', 'pour'],
+                        replace: [
+                            ['00.', '00'],
+                            ['00 $.', '00 $']
+                        ]
                     },
                     {
                         tag: 'xsmall.2',
-                        replace: [['later.', 'later']]
+                        replace: [
+                            ['later.', 'later'],
+                            ['tard.', 'tard']
+                        ]
                     }
                 ]
             })
@@ -143,11 +149,17 @@ export default {
                     {
                         tag: 'medium',
                         br: ['on'],
-                        replace: [['00.', '00']]
+                        replace: [
+                            ['00.', '00'],
+                            ['00 $.', '00 $']
+                        ]
                     },
                     {
                         tag: 'xsmall.2',
-                        replace: [['later.', 'later']]
+                        replace: [
+                            ['later.', 'later'],
+                            ['tard.', 'tard']
+                        ]
                     }
                 ]
             })