@paypal/messaging-components - npm Package Compare versions

Comparing version 1.7.4 to 1.7.9

CHANGELOG.md

 # Changelog
 
+## [1.7.9](https://github.com/paypal/paypal-messaging-components/compare/v1.7.8...v1.7.9) (2020-03-18)
+
+
+### Bug Fixes
+
+* center modal spinner in IE ([#171](https://github.com/paypal/paypal-messaging-components/issues/171)) ([1b0d52a](https://github.com/paypal/paypal-messaging-components/commit/1b0d52afa83d85dbb67382fdc3a8de92bcb3ad7a))
+* pass merchant account with modal for partner integration ([#172](https://github.com/paypal/paypal-messaging-components/issues/172)) ([7dd347c](https://github.com/paypal/paypal-messaging-components/commit/7dd347c2e00fd1b24cf4f80048263a314934dcce))
+* prevent multiple same modals from rendering ([#167](https://github.com/paypal/paypal-messaging-components/issues/167)) ([ce02f3e](https://github.com/paypal/paypal-messaging-components/commit/ce02f3e19c02678bf0f3b0df39dda5d6bdd13634))
+* remove unsupported sandbox warning ([#168](https://github.com/paypal/paypal-messaging-components/issues/168)) ([da79c1d](https://github.com/paypal/paypal-messaging-components/commit/da79c1d8b3ff7882f1f5aa6fe225635d9a1b37fe))
+
+## [1.7.8](https://github.com/paypal/paypal-messaging-components/compare/v1.7.7...v1.7.8) (2020-03-12)
+
+
+### Bug Fixes
+
+* ignore clicks on tracking pixel ([#165](https://github.com/paypal/paypal-messaging-components/issues/165)) ([f1512fb](https://github.com/paypal/paypal-messaging-components/commit/f1512fbf5fd13c824fcf9bfd73d142e2809994d1))
+
+## [1.7.7](https://github.com/paypal/paypal-messaging-components/compare/v1.7.6...v1.7.7) (2020-03-06)
+
+## [1.7.6](https://github.com/paypal/paypal-messaging-components/compare/v1.7.5...v1.7.6) (2020-03-06)
+
+
+### Bug Fixes
+
+* merchant.js mixed content ([#161](https://github.com/paypal/paypal-messaging-components/issues/161)) ([ad4b0e9](https://github.com/paypal/paypal-messaging-components/commit/ad4b0e92d0db2e92276c9e03618557451c3e3c31))
+
+## [1.7.5](https://github.com/paypal/paypal-messaging-components/compare/v1.7.4...v1.7.5) (2020-03-05)
+
+
+### Bug Fixes
+
+* modal event tracking ([#159](https://github.com/paypal/paypal-messaging-components/issues/159)) ([38a297f](https://github.com/paypal/paypal-messaging-components/commit/38a297f3ad16529f5ad02af530e437bc543a324d))
+
 ## [1.7.4](https://github.com/paypal/paypal-messaging-components/compare/v1.7.3...v1.7.4) (2020-03-02)
@@ -4,0 +37,0 @@

package.json

 {
     "name": "@paypal/messaging-components",
-    "version": "1.7.4",
+    "version": "1.7.9",
     "description": "PayPal messaging library for integrating PayPal Credit messaging on merchant websites",
@@ -67,2 +67,3 @@ "homepage": "https://github.com/paypal/paypal-messaging-components",
         "husky": "^2.3.0",
+        "imgur": "^0.3.1",
         "jest": "^25.1.0",
@@ -69,0 +70,0 @@ "jest-environment-jsdom-fifteen": "^1.0.0",

src/interface/messages.js

@@ -1,3 +0,2 @@
-import { getInlineOptions, globalState, getScript, getAccount, getEnv, getCurrency, getPartnerAccount } from '../utils';
-import { Logger } from '../messages/services/logger';
+import { getInlineOptions, globalState, getScript, getAccount, getCurrency, getPartnerAccount } from '../utils';
 import Messages from '../messages';
@@ -39,4 +38,2 @@
         }
-    } else if (getEnv() === 'sandbox') {
-        Logger.warn('The messages component does not currently support the PayPal sandbox environment.');
     }
@@ -43,0 +40,0 @@

src/legacy/index.js

@@ -5,2 +5,3 @@ /* eslint-disable max-classes-per-file, eslint-comments/disable-enable-pair */
 import objectEntries from 'core-js-pure/stable/object/entries';
+import stringIncludes from 'core-js-pure/stable/string/includes';
 
@@ -216,3 +217,9 @@ import toNewPipeline from './toNewPipeline';
 
-        if (target.nodeName.toLowerCase() === 'img' && (!popupAttr || popupAttr === 'true')) {
+        if (
+            target.nodeName.toLowerCase() === 'img' &&
+            // If a merchant styles the tracking pixel to give it dimensions, it can erroneously take the click event
+            // https://www.burlington.com/ShoppingCart.aspx
+            !stringIncludes(target.src, 'webapps/mch/cmd') &&
+            (!popupAttr || popupAttr === 'true')
+        ) {
             Page.popup(target.parentNode.href, this.namespace, popupFeatures);
@@ -219,0 +226,0 @@ evt.preventDefault();

src/locale/US/mutations/ezp_any_eqz.js

 import Logo from '../logos';
+import { altContentMediaQuery } from './mediaQueries';
 
@@ -39,3 +40,8 @@ const defaultTextStyles = [
             ({ textSize }) => ({
-                styles: [...defaultTextStyles, `.message__logo-container { width: ${textSize * 9}px }`],
+                styles: [
+                    ...defaultTextStyles,
+                    altContentMediaQuery(textSize * 35.8),
+                    `.message__logo-container { width: ${textSize * 9}px }`
+                ],
+                messageWidth: [textSize * 15, 1000],
                 logo: Logo.ALTERNATIVE.COLOR,
@@ -49,2 +55,8 @@ headline: {
         [
+            'logo.type:alternative && logo.position:top',
+            ({ textSize }) => ({
+                styles: [...defaultTextStyles, `.message__logo-container { width: ${textSize * 9}px }`]
+            })
+        ],
+        [
             'text.color:white',
@@ -51,0 +63,0 @@ {

src/locale/US/mutations/ezp_any_gtz.js

 import Logo from '../logos';
+import { altContentMediaQuery } from './mediaQueries';
 
@@ -39,3 +40,7 @@ const defaultTextStyles = [
             ({ textSize }) => ({
-                styles: [...defaultTextStyles, `.message__logo-container { width: ${textSize * 9}px }`],
+                styles: [
+                    ...defaultTextStyles,
+                    altContentMediaQuery(textSize * 30.6),
+                    `.message__logo-container { width: ${textSize * 9}px }`
+                ],
                 logo: Logo.ALTERNATIVE.COLOR,
@@ -49,2 +54,8 @@ headline: {
         [
+            'logo.type:alternative && logo.position:top',
+            ({ textSize }) => ({
+                styles: [...defaultTextStyles, `.message__logo-container { width: ${textSize * 9}px }`]
+            })
+        ],
+        [
             'text.color:white',
@@ -51,0 +62,0 @@ {

src/locale/US/mutations/ni_non-us.js

 import Logo from '../logos';
-import { basicMediaQuery, legacyNI } from './ni';
+import { basicMediaQuery, altContentMediaQuery } from './mediaQueries';
+import { legacyNI } from './ni';
 
@@ -56,5 +57,16 @@ export default {
             ({ textSize }) => ({
-                styles: [basicMediaQuery(textSize * 36 + 130), `.message__logo-container { width: ${textSize * 9}px }`],
+                styles: [
+                    basicMediaQuery(textSize * 18.9),
+                    altContentMediaQuery(textSize * 45),
+                    `.message__logo-container { width: ${textSize * 9}px }`
+                ],
                 logo: Logo.ALTERNATIVE.COLOR,
-                headline: ['xsmall', { tag: 'medium', br: ['months'], replace: [['99+', '99+.']] }]
+                headline: [
+                    'xsmall',
+                    {
+                        tag: 'medium',
+                        br: ['months'],
+                        replace: [['99+', '99+.']]
+                    }
+                ]
             })
@@ -66,3 +78,9 @@ ],
                 styles: [basicMediaQuery(textSize * 20), `.message__logo-container { width: ${textSize * 8}px }`],
-                headline: ['xsmall', { tag: 'medium', br: ['months'] }]
+                headline: [
+                    'xsmall',
+                    {
+                        tag: 'medium',
+                        br: ['months']
+                    }
+                ]
             })
@@ -69,0 +87,0 @@ ],

src/locale/US/mutations/ni.js

 import Logo from '../logos';
+import { basicMediaQuery, altContentMediaQuery } from './mediaQueries';
 
-export function basicMediaQuery(breakpoint) {
-    return `
-    .message__headline span.multi:nth-child(2) {
-        display: none;
-    }
-
-    @media (min-width: ${breakpoint}px) {
-        .message__headline span.multi:first-child {
-            display: none;
-        }
-
-        .message__headline span.multi:nth-child(2) {
-            display: inline;
-        }
-    }
-`;
-}
-
 export const legacyNI = [
@@ -100,3 +83,7 @@ [
             ({ textSize }) => ({
-                styles: [basicMediaQuery(textSize * 34 + 130), `.message__logo-container { width: ${textSize * 9}px }`],
+                styles: [
+                    basicMediaQuery(textSize * 19),
+                    altContentMediaQuery(textSize * 41),
+                    `.message__logo-container { width: ${textSize * 9}px }`
+                ],
                 logo: Logo.ALTERNATIVE.COLOR
@@ -103,0 +90,0 @@ })

src/locale/US/mutations/pala_multi_eqz.js

 import Logo from '../logos';
+import { altContentMediaQuery } from './mediaQueries';
 
@@ -43,6 +44,16 @@ export default {
             ({ textSize }) => ({
-                styles: [`.message__logo-container { width: ${textSize * 9}px }`],
+                styles: [
+                    altContentMediaQuery(textSize * 29.1),
+                    `.message__logo-container { width: ${textSize * 9}px }`
+                ],
+                messageWidth: false,
                 logo: Logo.ALTERNATIVE.COLOR
             })
         ],
+        [
+            'logo.type:alternative && logo.position:top',
+            ({ textSize }) => ({
+                styles: [`.message__logo-container { width: ${textSize * 9}px }`]
+            })
+        ],
         ['text.color:white && logo.type:primary', { logo: Logo.PRIMARY.WHITE }],
@@ -49,0 +60,0 @@ ['text.color:white && logo.type:alternative', { logo: Logo.ALTERNATIVE.WHITE }],

src/locale/US/mutations/pala_multi_gtz.js

 import Logo from '../logos';
+import { altContentMediaQuery } from './mediaQueries';
 
@@ -19,3 +20,3 @@ export default {
                 logo: Logo.ALT_NO_PP.COLOR,
-                messageWidth: [textSize * 16, 1000],
+                messageWidth: false,
                 headline: {
@@ -28,9 +29,9 @@ br: ['/mo']
             'logo.type:none',
-            ({ textSize }) => ({
+            {
                 logo: false,
-                messageWidth: [textSize * 15, 1000],
+                messageWidth: false,
                 headline: {
                     br: ['/mo']
                 }
-            })
+            }
         ],
@@ -40,6 +41,16 @@ [
             ({ textSize }) => ({
-                styles: [`.message__logo-container { width: ${textSize * 9}px }`],
+                styles: [
+                    altContentMediaQuery(textSize * 23.8),
+                    `.message__logo-container { width: ${textSize * 9}px }`
+                ],
+                messageWidth: false,
                 logo: Logo.ALTERNATIVE.COLOR
             })
         ],
+        [
+            'logo.type:alternative && logo.position:top',
+            ({ textSize }) => ({
+                styles: [`.message__logo-container { width: ${textSize * 9}px }`]
+            })
+        ],
         ['text.color:white && logo.type:primary', { logo: Logo.PRIMARY.WHITE }],
@@ -46,0 +57,0 @@ ['text.color:white && logo.type:alternative', { logo: Logo.ALTERNATIVE.WHITE }],

src/locale/US/mutations/pala_single_eqz.js

 import Logo from '../logos';
+import { altContentMediaQuery } from './mediaQueries';
 
@@ -21,2 +22,3 @@ export default {
                 styles: [`.message__logo { width: ${textSize * 7}px }`],
+                messageWidth: false,
                 logo: Logo.ALT_NO_PP.COLOR,
@@ -31,2 +33,3 @@ headline: {
             {
+                messageWidth: false,
                 logo: false,
@@ -41,3 +44,6 @@ headline: {
             ({ textSize }) => ({
-                styles: [`.message__logo-container { width: ${textSize * 9}px }`],
+                styles: [
+                    altContentMediaQuery(textSize * 34.3),
+                    `.message__logo-container { width: ${textSize * 9}px }`
+                ],
                 logo: Logo.ALTERNATIVE.COLOR,
@@ -47,2 +53,8 @@ messageWidth: [textSize * 10, 1000]
         ],
+        [
+            'logo.type:alternative && logo.position:top',
+            ({ textSize }) => ({
+                styles: [`.message__logo-container { width: ${textSize * 9}px }`]
+            })
+        ],
         ['text.color:white && logo.type:primary', { logo: Logo.PRIMARY.WHITE }],
@@ -49,0 +61,0 @@ ['text.color:white && logo.type:alternative', { logo: Logo.ALTERNATIVE.WHITE }],

src/locale/US/mutations/pala_single_gtz.js

 import Logo from '../logos';
+import { altContentMediaQuery } from './mediaQueries';
 
@@ -32,6 +33,16 @@ export default {
             ({ textSize }) => ({
-                styles: [`.message__logo-container { width: ${textSize * 9}px }`],
+                styles: [
+                    altContentMediaQuery(textSize * 29.3),
+                    `.message__logo-container { width: ${textSize * 9}px }`
+                ],
+                messageWidth: false,
                 logo: Logo.ALTERNATIVE.COLOR
             })
         ],
+        [
+            'logo.type:alternative && logo.position:top',
+            ({ textSize }) => ({
+                styles: [`.message__logo-container { width: ${textSize * 9}px }`]
+            })
+        ],
         ['text.color:white && logo.type:primary', { logo: Logo.PRIMARY.WHITE }],
@@ -38,0 +49,0 @@ ['text.color:white && logo.type:alternative', { logo: Logo.ALTERNATIVE.WHITE }],

src/messages/components/Modal/index.js

 import startsWith from 'core-js-pure/stable/string/starts-with';
 import { ZalgoPromise } from 'zalgo-promise';
 
+import { memoizeOnProps } from '../../../utils';
 import Modal from './component';
@@ -16,4 +17,35 @@
 
+const renderModal = memoizeOnProps(
+    ({ options, meta, track, wrapper, type }) => {
+        const { render, hide, updateProps } = Modal({
+            account: options.account,
+            merchantId: options.merchantId,
+            country: meta.offerCountry,
+            currency: options.currency,
+            type,
+            amount: options.amount,
+            refId: meta.messageRequestId,
+            onCalculate: amount => track({ et: 'CLICK', event_type: 'click', link: 'Calculator', amount }),
+            onClick: linkName => {
+                if (options.onApply && linkName.includes('Apply Now')) {
+                    options.onApply();
+                }
+                track({ et: 'CLICK', event_type: 'click', link: linkName });
+            },
+            onClose: linkName => {
+                wrapper.firstChild.focus();
+                track({ et: 'CLICK', event_type: 'modal-close', link: linkName });
+            }
+        });
+
+        hide();
+        // The render promise will resolve before Preact renders and picks up changes
+        // via updateProps so a small delay is added after the initial "render" promise
+        return { renderProm: render('body').then(() => ZalgoPromise.delay(100)), updateProps };
+    },
+    ['options', 'meta', 'type']
+);
+
 export default {
-    init({ options, meta, events, track, wrapper }) {
+    init: ({ options, meta, events, track, wrapper }) => {
         // For legacy image banners, open a popup instead of the modal
@@ -37,29 +69,9 @@ if (options._legacy && startsWith(meta.offerType, 'NI')) {
         } else {
-            const { render, hide, updateProps } = Modal({
-                account: options.account,
-                country: meta.offerCountry,
-                currency: options.currency,
-                type: getModalType(meta.offerCountry, meta.offerType),
-                amount: options.amount,
-                refId: meta.messageRequestId,
-                onCalculate: amount => track({ et: 'CLICK', event_type: 'click', link: 'Calculator', amount }),
-                onClick: linkName => {
-                    if (options.onApply && linkName.includes('Apply Now')) {
-                        options.onApply();
-                    }
-                    track({ et: 'CLICK', event_type: 'click', link: linkName });
-                },
-                onClose: linkName => {
-                    wrapper.firstChild.focus();
-                    track({ et: 'CLICK', event_type: 'click', link: linkName });
-                }
-            });
+            const modalType = getModalType(meta.offerCountry, meta.offerType);
+            const { renderProm, updateProps } = renderModal({ options, meta, track, wrapper, type: modalType });
 
-            hide();
-            // The render promise will resolve before Preact renders and picks up changes
-            // via updateProps so a small delay is added after the initial "render" promise
-            const renderProm = render('body').then(() => ZalgoPromise.delay(100));
-
             events.on('click', () => {
                 renderProm.then(() => {
+                    track({ et: 'CLIENT_IMPRESSION', event_type: 'modal-open', modal: modalType });
+
                     updateProps({ visible: true });
@@ -66,0 +78,0 @@ });

src/messages/models/Banner/index.js

@@ -115,2 +115,9 @@ import objectAssign from 'core-js-pure/stable/object/assign';
 
+        const banner = {
+            renderProm: render(currentOptions),
+            wrapper,
+            container,
+            update
+        };
+
         if (!isLegacy) {
@@ -121,4 +128,11 @@ // Must be after appending iframe into DOM to prevent immediate re-render
                 container.addEventListener('load', () => {
-                    clearEvents();
-                    render(currentOptions);
+                    // Ensure initial render finishes before firing another render.
+                    // This prevent multiple renders from happening at the same time on initial load causing
+                    // multiple sets of events being attached to a single message.
+                    banner.renderProm
+                        .catch(() => {})
+                        .finally(() => {
+                            clearEvents();
+                            banner.renderProm = render(currentOptions);
+                        });
                 });
@@ -128,8 +142,3 @@ });
 
-        return {
-            renderProm: render(currentOptions),
-            wrapper,
-            container,
-            update
-        };
+        return banner;
     }
@@ -136,0 +145,0 @@ };

src/messages/models/Container/setSize.js

@@ -122,3 +122,3 @@ import stringStartsWith from 'core-js-pure/stable/string/starts-with';
                 }
-        
+
                 .${wrapperClass}::before {
@@ -129,3 +129,3 @@ padding-top: ${toCSSValue(ratio)};
                 }
-        
+
                 .${wrapperClass} iframe {
@@ -132,0 +132,0 @@ position: absolute;

src/messages/models/Template/index.js

@@ -56,3 +56,3 @@ import arrayFind from 'core-js-pure/stable/array/find';
         font-weight: 400;
-    
+
         src: url('${baseUrl}.eot');
@@ -65,5 +65,5 @@ src: url('${baseUrl}.woff2')
     }
-    
-    html { 
-        font-family: ${fontFamily}, PayPal-Sans, Helvetica, Arial, sans-serif; 
+
+    html {
+        font-family: ${fontFamily}, PayPal-Sans, Helvetica, Arial, sans-serif;
     }`;
@@ -70,0 +70,0 @@ }

src/utils/sdk.js

 import objectAssign from 'core-js-pure/stable/object/assign';
+import stringStartsWith from 'core-js-pure/stable/string/starts-with';
 
@@ -92,3 +93,6 @@ /* eslint-disable eslint-comments/disable-enable-pair, no-else-return */
         objectAssign(metaObject, {
-            url: script ? script.src : 'https://www.paypalobjects.com/upstream/bizcomponents/js/messaging.js'
+            url:
+                script && (stringStartsWith(script.src, 'https') || getEnv() === 'local')
+                    ? script.src
+                    : 'https://www.paypalobjects.com/upstream/bizcomponents/js/messaging.js'
         });
@@ -95,0 +99,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

5972355

increased by14.9%

Number of package files

182

increased by2.82%

Lines of code

13650

increased by6.86%

Worsened metrics

Dev dependency count

32

increased by3.23%

No dependency changes