feat: purchase protection messsage (#1075)

paypal · Apr 30, 2024 · c90c280 · c90c280
1 parent c428184
commit c90c280
Show file tree

Hide file tree

Showing 12 changed files with 280 additions and 46 deletions.
diff --git a/content/messages/US/buttons/purchase_protection.json b/content/messages/US/buttons/purchase_protection.json
@@ -0,0 +1,19 @@
+{
+    "_variables": {
+        "financing_code": "PURCHASE_PROTECTION"
+    },
+    "meta": {
+        "id": "",
+        "offer_country_code": "US",
+        "offerType": "PURCHASE_PROTECTION",
+        "lander": "https://www.paypal.com/us/digital-wallet/buyer-purchase-protection"
+    },
+    "headline": [
+        ["A safer, easier way to pay", ["default", "xsmall"]],
+        ["You're protected on most purchases.", ["small", "medium", "large", "xlarge"]]
+    ],
+    "subHeadline": [],
+    "disclaimer": [
+        ["<span aria-hidden='true'>Terms Apply</span><span class='sr-only'> Terms Apply</span>", ["default"]]
+    ]
+}
diff --git a/content/messages/US/marks/purchase_protection.json b/content/messages/US/marks/purchase_protection.json
@@ -0,0 +1,19 @@
+{
+    "_variables": {
+        "financing_code": "PURCHASE_PROTECTION"
+    },
+    "meta": {
+        "id": "",
+        "offer_country_code": "US",
+        "offerType": "PURCHASE_PROTECTION",
+        "lander": "https://www.paypal.com/us/digital-wallet/buyer-purchase-protection"
+    },
+    "headline": [
+        ["A safer, easier way to pay", ["default", "xsmall"]],
+        ["You're protected on most purchases.", ["small", "medium", "large", "xlarge"]]
+    ],
+    "subHeadline": [],
+    "disclaimer": [
+        ["<span aria-hidden='true'>Terms Apply</span><span class='sr-only'> Terms Apply</span>", ["default"]]
+    ]
+}
diff --git a/demo/helpers/accounts.js b/demo/helpers/accounts.js
@@ -31,6 +31,7 @@ const accounts = [
     // 'DEV0GENERICPL',
     // 'DEV000GENBNPL',
     // 'DEV000GENPYPL',
+    // 'DEV0BTNPYPLPP',
     // 'DEVBTNLTMQGTZ',
     // 'DEVBTNLTMQEQZ',
     // 'DEVBTNLTNQGTZ',
@@ -44,6 +45,7 @@ const accounts = [
     // 'DEV00MRKGENPL',
     // 'DEVMRKGENBNPL',
     // 'DEVMRKGENPYPL',
+    // 'DEV0MRKPYPLPP',
     // 'DEVMRKLTMQGTZ',
     // 'DEVMRKLTMQEQZ',
     // 'DEVMRKLTNQGTZ',

diff --git a/src/library/zoid/message/component.js b/src/library/zoid/message/component.js
@@ -28,7 +28,8 @@ import {
     getDevTouchpoint,
     getMerchantConfig,
     getLocalTreatments,
-    getTsCookieFromStorage
+    getTsCookieFromStorage,
+    getURIPopup
 } from '../../../utils';
 import validate from './validation';
 import containerTemplate from './containerTemplate';
@@ -141,23 +142,26 @@ export default createGlobalVariableGetter('__paypal_credit_message__', () =>
 
                     return ({ meta }) => {
                         const { modal, index, account, merchantId, currency, amount, buyerCountry, onApply } = props;
-                        const { offerType, offerCountry, messageRequestId } = meta;
-
-                        // Avoid spreading message props because both message and modal
-                        // zoid components have an onClick prop that functions differently
-                        modal.show({
-                            account,
-                            merchantId,
-                            currency,
-                            amount,
-                            buyerCountry,
-                            onApply,
-                            offer: offerType,
-                            offerCountry,
-                            refId: messageRequestId,
-                            refIndex: index,
-                            src: 'message_click'
-                        });
+                        const { offerType, offerCountry, messageRequestId, lander } = meta;
+                        if (offerType === 'PURCHASE_PROTECTION') {
+                            getURIPopup(lander, offerType);
+                        } else {
+                            // Avoid spreading message props because both message and modal
+                            // zoid components have an onClick prop that functions differently
+                            modal.show({
+                                account,
+                                merchantId,
+                                currency,
+                                amount,
+                                buyerCountry,
+                                onApply,
+                                offer: offerType,
+                                offerCountry,
+                                refId: messageRequestId,
+                                refIndex: index,
+                                src: 'message_click'
+                            });
+                        }
 
                         logger.track({
                             index,

diff --git a/src/server/locale/US/CONTEXTUAL_COMPONENTS/BUTTONS/mutations/index.js b/src/server/locale/US/CONTEXTUAL_COMPONENTS/BUTTONS/mutations/index.js
@@ -11,6 +11,7 @@ import shortTermSingleNQ from './short_term_nq';
 import genericPayLater from './generic_pay_later';
 import genericPayLaterBNPL from './generic_pay_later_bnpl';
 import genericPayPal from './generic_paypal';
+import purchaseProtection from './purchase_protection';
 
 export default function getMutations(id, type) {
     switch (id) {
@@ -47,6 +48,8 @@ export default function getMutations(id, type) {
         // // Generic Pay Later - Buy now, Pay Later message
         case 'GENERIC_PL_BNPL':
             return genericPayLaterBNPL[type];
+        case 'PURCHASE_PROTECTION':
+            return purchaseProtection[type];
         // // Generic PayPal message
         case 'GENERIC_PAYPAL':
         default:

diff --git a/src/server/locale/US/CONTEXTUAL_COMPONENTS/BUTTONS/mutations/purchase_protection.js b/src/server/locale/US/CONTEXTUAL_COMPONENTS/BUTTONS/mutations/purchase_protection.js
@@ -0,0 +1,147 @@
+import Logo from '../../../../../message/logos';
+import {
+    textWrap,
+    messageLogoWidth,
+    altNoWrap,
+    setLogoTop,
+    xSmallFallback,
+    hideDisclaimer
+} from '../../../../../message/mediaQueries';
+import { textLogoMutations } from '../../../../../message/logoMutations';
+
+export default {
+    'layout:text': [
+        [
+            'default',
+            ({ textSize }) => ({
+                styles: [
+                    xSmallFallback(textSize * 10.5),
+                    textWrap(textSize * 32, textSize, 'US'),
+                    messageLogoWidth(false, textSize * 4, textSize * 1.25),
+                    setLogoTop(textSize * 10.5),
+                    hideDisclaimer(textSize * 10.5),
+                    `.message__headline .tag--xsmall > span {display: inline-block;}`
+                ],
+                logo: Logo.PP_PAYPAL.COLOR,
+                headline: [
+                    {
+                        tag: 'medium',
+                        br: ['on']
+                    },
+                    {
+                        tag: 'xsmall',
+                        br: ['easier']
+                    }
+                ],
+                disclaimer: ['default']
+            })
+        ],
+        [
+            'logo.type:primary && logo.position:right',
+            ({ textSize }) => ({
+                styles: [
+                    setLogoTop(textSize * 28.5),
+                    xSmallFallback(textSize * 10.5),
+                    setLogoTop(textSize * 18),
+                    messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25),
+                    hideDisclaimer(textSize * 10.5),
+                    `.locale--US .message__messaging {padding-right: 0.4rem;}`,
+                    `.message__headline .tag--xsmall > span {white-space: normal;}`
+                ]
+            })
+        ],
+        [
+            'logo.type:primary && logo.position:right && text.align:right',
+            ({ textSize }) => ({
+                styles: [
+                    xSmallFallback(textSize * 10.5),
+                    setLogoTop(textSize * 28.5),
+                    messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25),
+                    hideDisclaimer(textSize * 10.5),
+                    `.locale--US .message__logo-container {margin-left: 0.4rem;} `,
+                    `.message__headline .tag--xsmall > span {white-space: normal;}`
+                ]
+            })
+        ],
+        [
+            'logo.type:primary && logo.position:top',
+            ({ textSize }) => ({
+                styles: [
+                    xSmallFallback(textSize * 10.5),
+                    messageLogoWidth(textSize * 6, textSize * 4, textSize * 1.25),
+                    hideDisclaimer(textSize * 10.5),
+                    `.message__headline .tag--xsmall > span {white-space: normal;}`
+                ]
+            })
+        ],
+        [
+            'logo.type:alternative',
+            ({ textSize }) => ({
+                styles: [
+                    xSmallFallback(textSize * 10.5),
+                    textWrap(textSize * 32, textSize, 'US'),
+                    altNoWrap(textSize * 10.6),
+                    messageLogoWidth(textSize * 1.75, textSize * 4, textSize * 1.25),
+                    `.message__headline .tag--xsmall > span {white-space: normal;}
+                    `,
+                    hideDisclaimer(textSize * 10.5)
+                ],
+                logo: Logo.PP_PAYPAL.COLOR[0]
+            })
+        ],
+        [
+            'logo.type:none',
+            ({ textSize }) => ({
+                styles: [
+                    xSmallFallback(textSize * 10.5),
+                    `.message__headline span:last-child > strong {
+	                        content: 'PayPal';
+	                        display: inline-block;
+	                        font-weight: bold;
+	                    }
+	                    `,
+                    hideDisclaimer(textSize * 10.5),
+                    `.message__headline .tag--xsmall > span {white-space: normal;}
+                    `
+                ],
+                logo: false,
+                headline: [
+                    {
+                        tag: 'medium',
+                        br: ['on'],
+                        replace: [['purchases.', 'purchases']]
+                    },
+                    {
+                        tag: 'xsmall',
+                        br: ['easier']
+                    }
+                ]
+            })
+        ],
+        [
+            'logo.type:inline',
+            ({ textSize }) => ({
+                styles: [
+                    xSmallFallback(textSize * 10.5),
+                    `.message__logo { width: ${textSize * 4}px }`,
+                    hideDisclaimer(textSize * 10.5),
+                    `.message__headline .tag--xsmall > span {white-space: normal;}
+                    `
+                ],
+                logo: Logo.NO_PP_MONOGRAM.COLOR,
+                headline: [
+                    {
+                        tag: 'medium',
+                        br: ['on'],
+                        replace: [['purchases.', 'purchases']]
+                    },
+                    {
+                        tag: 'xsmall',
+                        br: ['easier']
+                    }
+                ]
+            })
+        ],
+        ...textLogoMutations
+    ]
+};
diff --git a/src/server/locale/US/CONTEXTUAL_COMPONENTS/MARKS/mutations/index.js b/src/server/locale/US/CONTEXTUAL_COMPONENTS/MARKS/mutations/index.js
@@ -11,6 +11,7 @@ import shortTermSingleNQ from './short_term_nq';
 import genericPayLater from './generic_pay_later';
 import genericPayLaterBNPL from './generic_pay_later_bnpl';
 import genericPayPal from './generic_paypal';
+import purchaseProtection from './purchase_protection';
 
 export default function getMutations(id, type) {
     switch (id) {
@@ -47,6 +48,8 @@ export default function getMutations(id, type) {
         // // Generic Pay Later - Buy now, Pay Later message
         case 'GENERIC_PL_BNPL':
             return genericPayLaterBNPL[type];
+        case 'PURCHASE_PROTECTION':
+            return purchaseProtection[type];
         // // Generic PayPal message
         case 'GENERIC_PAYPAL':
         default:

diff --git a/src/server/locale/US/CONTEXTUAL_COMPONENTS/MARKS/mutations/purchase_protection.js b/src/server/locale/US/CONTEXTUAL_COMPONENTS/MARKS/mutations/purchase_protection.js
@@ -0,0 +1,26 @@
+import { xSmallFallback, hideDisclaimer } from '../../../../../message/mediaQueries';
+
+export default {
+    'layout:text': [
+        [
+            'default',
+            ({ textSize }) => ({
+                styles: [
+                    `.message__headline > .tag--xsmall > span:first-child { white-space: normal; } `,
+                    xSmallFallback(textSize * 10.5),
+                    hideDisclaimer(textSize * 10.5)
+                ],
+                headline: [
+                    {
+                        tag: 'medium'
+                    },
+                    {
+                        tag: 'xsmall',
+                        br: ['easier']
+                    }
+                ],
+                disclaimer: ['default']
+            })
+        ]
+    ]
+};
diff --git a/src/utils/sdk.js b/src/utils/sdk.js
@@ -255,3 +255,8 @@ export function getFeatures() {
         return undefined;
     }
 }
+
+// open mini-browser with message lander url
+export function getURIPopup(lander, label) {
+    return window.open(lander, label, 'width=460,height=900');
+}
diff --git a/tests/functional/spec/US/accounts.js b/tests/functional/spec/US/accounts.js
@@ -23,6 +23,7 @@ export default [
     'DEV0GENERICPL',
     'DEV000GENBNPL',
     'DEV000GENPYPL',
+    'DEV0BTNPYPLPP',
     'DEVBTNLTMQGTZ',
     'DEVBTNLTMQEQZ',
     'DEVBTNLTNQGTZ',
@@ -35,6 +36,7 @@ export default [
     'DEV00MRKGENPL',
     'DEVMRKGENBNPL',
     'DEVMRKGENPYPL',
+    'DEV0MRKPYPLPP',
     'DEVMRKLTMQGTZ',
     'DEVMRKLTMQEQZ',
     'DEVMRKLTNQGTZ',