@paypal/checkout-components 5.0.189 → 5.0.190

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@paypal/checkout-components",
-    "version": "5.0.189",
+    "version": "5.0.190",
     "description": "PayPal Checkout components, for integrating checkout products.",
     "main": "index.js",
     "scripts": {
@@ -64,8 +64,8 @@
         "bundlemon": "^1.1.0",
         "conventional-changelog-cli": "^2.0.34",
         "flow-bin": "0.155.0",
-        "fs-extra": "^9.0.1",
-        "grumbler-scripts": "^3.0.70",
+        "fs-extra": "^10.0.0",
+        "grumbler-scripts": "^5.0.1",
         "imagemagick": "^0.1.3",
         "imgur": "^0.3.1",
         "karma": "^5.2.3",

package/src/funding/common.jsx

@@ -49,7 +49,7 @@ export type LabelOptions = {|
     content : ?ContentType
 |};
 
-export type AnimatedExperimentLabelOptions = {|
+export type DesignExperimentLabelOptions = {|
     i : number,
     logo : ChildType,
     label : ?$Values<typeof BUTTON_LABEL>,
@@ -66,7 +66,7 @@ export type AnimatedExperimentLabelOptions = {|
     nonce : ?string,
     tagline : ?boolean,
     content : ?ContentType,
-    buttonAnimationComponent : ?ChildType
+    buttonDesignComponent : ?ChildType
 |};
 
 export type WalletLabelOptions = {|

package/src/funding/config.js

@@ -29,6 +29,7 @@ import { getOxxoConfig } from './oxxo';
 import { getBoletoConfig } from './boleto';
 import { getMaximaConfig } from './maxima';
 import { getMercadopagoConfig } from './mercadopago';
+import { getMultiblancoConfig } from './multiblanco';
 
 export function getFundingConfig() : { [$Values<typeof FUNDING>] : ?FundingSourceConfig } {
     return inlineMemoize(getFundingConfig, () => {
@@ -57,7 +58,8 @@ export function getFundingConfig() : { [$Values<typeof FUNDING>] : ?FundingSourc
             [ FUNDING.OXXO ]:           (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.oxxo !== 'undefined'           && __FUNDING_ELIGIBILITY__.oxxo.eligible)) ? getOxxoConfig() : null,
             [ FUNDING.BOLETO ]:         (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.boleto !== 'undefined'         && __FUNDING_ELIGIBILITY__.boleto.eligible)) ? getBoletoConfig() : null,
             [ FUNDING.MAXIMA ]:         (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.maxima !== 'undefined'         && __FUNDING_ELIGIBILITY__.maxima.eligible)) ? getMaximaConfig() : null,
-            [ FUNDING.MERCADOPAGO ]:    (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.mercadopago !== 'undefined'    && __FUNDING_ELIGIBILITY__.mercadopago.eligible)) ? getMercadopagoConfig() : null
+            [ FUNDING.MERCADOPAGO ]:    (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.mercadopago !== 'undefined'    && __FUNDING_ELIGIBILITY__.mercadopago.eligible)) ? getMercadopagoConfig() : null,
+            [ FUNDING.MULTIBLANCO ]:    (!__TREE_SHAKE__ || (typeof __FUNDING_ELIGIBILITY__.multiblanco !== 'undefined'    && __FUNDING_ELIGIBILITY__.multiblanco.eligible)) ? getMultiblancoConfig() : null
         };
     });
 }

package/src/funding/multiblanco/config.jsx

@@ -0,0 +1,21 @@
+/* @flow */
+/** @jsx node */
+
+import { MultiblancoLogo } from '@paypal/sdk-logos/src';
+
+import { BUTTON_LAYOUT } from '../../constants';
+import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from '../common';
+
+export function getMultiblancoConfig() : FundingSourceConfig {
+    return {
+        ...DEFAULT_FUNDING_CONFIG,
+
+        shippingChange: false,
+
+        layouts: [
+            BUTTON_LAYOUT.VERTICAL
+        ],
+
+        Logo: ({ logoColor, optional }) => MultiblancoLogo({ logoColor, optional })
+    };
+}

package/src/funding/multiblanco/index.js

@@ -0,0 +1,4 @@
+/* @flow */
+
+export * from './config';
+

package/src/funding/paypal/template.jsx

@@ -8,7 +8,7 @@ import { FUNDING, WALLET_INSTRUMENT } from '@paypal/sdk-constants/src';
 import {
     type LogoOptions,
     type LabelOptions,
-    type AnimatedExperimentLabelOptions,
+    type DesignExperimentLabelOptions,
     type WalletLabelOptions,
     type TagOptions,
     BasicLabel
@@ -59,7 +59,7 @@ function getButtonPersonalizationStyle(opts : LabelOptions) : ?ChildType {
     if (__TEST__) {
         return null;
     }
-    
+
     const { tagline } = opts;
 
     const personalizationText = !tagline && getPersonalizationText(opts);
@@ -126,7 +126,7 @@ function ButtonPersonalization(opts : LabelOptions) : ?ChildType {
     }
 
     const { nonce, tagline, label } = opts;
-    
+
     if (tagline || !label) {
         return;
     }
@@ -149,7 +149,7 @@ function ButtonPersonalization(opts : LabelOptions) : ?ChildType {
                 getButtonPersonalizationStyle(opts)
             }
         </Fragment>
-        
+
     );
 }
 
@@ -163,17 +163,14 @@ export function Label(opts : LabelOptions) : ChildType {
     );
 }
 
-export function AnimatedExperimentLabel(opts : AnimatedExperimentLabelOptions) : ChildType {
-    const { buttonAnimationComponent } = opts;
-    delete opts.buttonAnimationComponent;
-    // $FlowFixMe
-    const basicLabel = (<BasicLabel { ...opts } />);
-    // $FlowFixMe
-    const buttonPersonalization = (<ButtonPersonalization { ...opts } />);
+export function DesignExperimentLabel(opts : DesignExperimentLabelOptions) : ChildType {
+    const { buttonDesignComponent, ...updatedOpts } = opts;
+    const basicLabel = (<BasicLabel { ...updatedOpts } />);
+    const buttonPersonalization = (<ButtonPersonalization { ...updatedOpts } />);
     return (
         <Fragment>
             { basicLabel }
-            { buttonAnimationComponent }
+            { buttonDesignComponent }
             { buttonPersonalization }
         </Fragment>
     );
@@ -277,12 +274,12 @@ export function WalletLabel(opts : WalletLabelOptions) : ?ChildType {
             logo = <CreditMark />;
 
             label = content && content.credit;
-        
+
         } else if (instrument.type === WALLET_INSTRUMENT.BALANCE) {
             logo = <PayPalMark />;
 
             label = content && content.balance;
-        
+
         } else if (instrument.label) {
             label = instrument.label;
         }
@@ -342,7 +339,7 @@ export function Tag({ multiple, locale: { lang } } : TagOptions) : ?ChildType {
     if (__WEB__) {
         return null;
     }
-    
+
     const { DualTag, SaferTag } = componentContent[lang];
 
     return (multiple && DualTag)

package/src/lib/errors.js

@@ -3,11 +3,11 @@
 import { ERROR_CODE } from '@paypal/sdk-constants/src';
 
 export class ValidationError extends Error {
-  code : string;
+    code : string;
 
-  constructor(message : string) {
-      super(message);
-      this.name = 'ValidationError';
-      this.code = ERROR_CODE.VALIDATION_ERROR;
-  }
+    constructor(message : string) {
+        super(message);
+        this.name = 'ValidationError';
+        this.code = ERROR_CODE.VALIDATION_ERROR;
+    }
 }

package/src/marks/template.jsx

@@ -32,16 +32,16 @@ function Mark({ fundingSource, fundingEligibility, experiment, env } : MarkOptio
         <div class='paypal-mark'>
             { marksDefined && MarkLogo
                 ? <MarkLogo
-                    fundingEligibility={ fundingEligibility }
-                    locale={ getLocale() }
-                    experiment={ experiment }
-                    env={ env }
+                        fundingEligibility={ fundingEligibility }
+                        locale={ getLocale() }
+                        experiment={ experiment }
+                        env={ env }
                 />
                 : <Logo
-                    fundingEligibility={ fundingEligibility }
-                    locale={ getLocale() }
-                    experiment={ experiment }
-                    env={ env }
+                        fundingEligibility={ fundingEligibility }
+                        locale={ getLocale() }
+                        experiment={ experiment }
+                        env={ env }
                 /> }
 
         </div>

package/src/ui/buttons/button.jsx

@@ -10,9 +10,9 @@ import { noop, preventClickFocus, isBrowser, isElement } from 'belter/src';
 import type { ContentType, Wallet, Experiment, WalletInstrument } from '../../types';
 import { ATTRIBUTE, CLASS, BUTTON_COLOR, BUTTON_NUMBER, TEXT_COLOR, BUTTON_FLOW } from '../../constants';
 import { getFundingConfig } from '../../funding';
-import { AnimatedExperimentLabel } from '../../funding/paypal/template';
+import { DesignExperimentLabel } from '../../funding/paypal/template';
 
-import { getButtonAnimation } from './button-animations';
+import { getButtonDesign } from './buttonDesigns';
 import type { ButtonStyle, Personalization, OnShippingChange } from './props';
 import { Spinner } from './spinner';
 import { MenuButton } from './menu-button';
@@ -133,18 +133,18 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
     );
 
     // Only apply animation to the paypal button
-    const buttonAnimation = fundingSource === FUNDING.PAYPAL
-        ? getButtonAnimation(personalization)
+    const buttonDesign = fundingSource === FUNDING.PAYPAL
+        ? getButtonDesign(personalization)
         : {};
 
     const {
-        buttonAnimationContainerClass = '',
-        buttonAnimationComponent = null
-    } = buttonAnimation;
+        buttonDesignContainerClass = '',
+        buttonDesignComponent = null
+    } = buttonDesign;
 
-    if (buttonAnimationComponent) {
+    if (buttonDesignComponent) {
         labelNode = (
-            <AnimatedExperimentLabel
+            <DesignExperimentLabel
                 i={ i }
                 logo={ logoNode }
                 label={ label }
@@ -160,7 +160,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 personalization={ personalization }
                 tagline={ tagline }
                 content={ content }
-                buttonAnimationComponent={ buttonAnimationComponent }
+                buttonDesignComponent={ buttonDesignComponent }
             />
         );
     }
@@ -206,7 +206,7 @@ export function Button({ fundingSource, style, multiple, locale, env, fundingEli
                 `${ LOGO_CLASS.LOGO_COLOR }-${ logoColor }`,
                 `${ isWallet ? CLASS.WALLET : '' }`,
                 `${ shouldShowWalletMenu ? CLASS.WALLET_MENU : '' }`,
-                `${ buttonAnimationContainerClass }`
+                `${ buttonDesignContainerClass }`
             ].join(' ') }
         >
             <div

package/src/ui/buttons/buttonDesigns/control.jsx

@@ -0,0 +1,9 @@
+/* @flow */
+/** @jsx node */
+import { node, type ChildType } from 'jsx-pragmatic/src';
+
+export function ControlDesignComponent(experimentId : string) : ChildType {
+    return (
+        <div data-design-experiment={ experimentId } />
+    );
+}

package/src/ui/buttons/buttonDesigns/divideLogoAnimation.jsx

@@ -0,0 +1,174 @@
+/* @flow */
+/** @jsx node */
+import { LOGO_CLASS } from '@paypal/sdk-logos/src';
+import { node, Fragment, type ChildType } from 'jsx-pragmatic/src';
+
+import { CLASS } from '../../../constants';
+import { BUTTON_SIZE_STYLE } from '../config';
+
+import { type ContentOptions } from './types';
+
+type DivideLogoAnimationProps = {|
+    paypalLabelContainerElement : Object,
+    paypalLogoStartingLeftPosition : string,
+    designContainer : Object
+|};
+
+
+export const DIVIDE_LOGO_CONFIG = {
+    min:                            BUTTON_SIZE_STYLE.large.minWidth,
+    max:                            BUTTON_SIZE_STYLE.huge.maxWidth,
+    cssUtilClasses: {
+        DOM_READY:                  CLASS.DOM_READY,
+        PAYPAL_LOGO:                LOGO_CLASS.LOGO,
+        PAYPAL_BUTTON_LABEL:        CLASS.BUTTON_LABEL
+    }
+};
+
+// Returns props necessary to render the animation as long as they are valid
+export const getDivideLogoProps = function (document : Object, configuration : Object) : DivideLogoAnimationProps | null {
+    const { PAYPAL_BUTTON_LABEL, PAYPAL_LOGO } = configuration.cssUtilClasses;
+
+    const designContainer = (document && document.querySelector('.personalized-design-container')) || null;
+    if (!designContainer) {
+        return null;
+    }
+
+    // return null if animation should not be played for the button size
+    const designContainerWidth = designContainer.offsetWidth;
+    if (designContainerWidth < configuration.min || designContainerWidth > configuration.max) {
+        return null;
+    }
+
+    // get the label container that animation will be applied to
+    const paypalLabelContainerElement = designContainer.querySelector(`.${ PAYPAL_BUTTON_LABEL }`) || null;
+    if (!paypalLabelContainerElement) {
+        return null;
+    }
+
+    // get starting position for element so it doesn't flicker when animation begins
+    const paypalLogoElement = (paypalLabelContainerElement && paypalLabelContainerElement.querySelector(`.${ PAYPAL_LOGO }`)) || null;
+    if (!paypalLogoElement) {
+        return null;
+    }
+    const paypalLogoStartingLeftPosition = `${ (paypalLogoElement.offsetLeft / paypalLabelContainerElement.offsetWidth) * 100 }%`;
+
+    return {
+        paypalLabelContainerElement,
+        paypalLogoStartingLeftPosition,
+        designContainer
+    };
+};
+
+export function getDivideLogoAnimation(designProps : DivideLogoAnimationProps, configuration : Object) : void {
+    const {
+        min,
+        max,
+        cssUtilClasses: {
+            DOM_READY,
+            PAYPAL_LOGO
+        }
+    } = configuration;
+
+    const {
+        paypalLabelContainerElement,
+        paypalLogoStartingLeftPosition,
+        designContainer
+    } = designProps;
+
+    const designCss = `
+        .${ DOM_READY } .personalized-design-container img.${ PAYPAL_LOGO }{
+            animation: 3s divide-logo-animation-left-side 2s infinite alternate;
+        }
+        
+        .personalized-design-container .personalized-label-container {
+            animation: 3s divide-logo-animation-right-side 2s infinite alternate;
+        }
+
+        @keyframes divide-logo-animation-left-side {
+            0% {
+                position: fixed;
+                left: ${ paypalLogoStartingLeftPosition };
+            }
+            33% {
+                position: fixed;
+                left: ${ paypalLogoStartingLeftPosition };
+            }
+            66% {
+                position: fixed;
+                left: 0%;
+            }
+            100% {
+                position: fixed;
+                left: 0%;
+            }
+        }
+        
+        @keyframes divide-logo-animation-right-side {
+            0%{
+                opacity: 0;
+                position: fixed;
+                right: 45%;
+            }
+            33%{
+                opacity: 0;
+                position: fixed;
+                right: 45%;
+            }
+            66% {
+                opacity: 1;
+                position: fixed;
+                right: 0%;
+            }
+            100% {
+                opacity: 1;
+                position: fixed;
+                right: 0%;
+            }
+        }
+    `;
+
+    if (paypalLabelContainerElement) {
+        const style = document.createElement('style');
+        paypalLabelContainerElement.appendChild(style);
+        style.appendChild(document.createTextNode(designCss));
+
+        
+        window.addEventListener('resize', () => {
+            // Remove animation if size limit broken
+            if (
+                (designContainer.offsetWidth > max || designContainer.offsetWidth < min)
+                && paypalLabelContainerElement.contains(style)
+            ) {
+                paypalLabelContainerElement.removeChild(style);
+            }
+        });
+    }
+}
+
+export function DivideLogoTextComponent({ designLabelText } : ContentOptions) : ChildType {
+    return (
+        <Fragment>
+            <div class={ 'personalized-label-container' } data-design-experiment='104519'> <span>{designLabelText}</span></div>
+            <style innerHTML={ `
+              .${ CLASS.DOM_READY } .personalized-design-container img.${ LOGO_CLASS.LOGO }{
+                  position: relative;
+              }
+              
+              .personalized-design-container .personalized-label-container {
+                  position: absolute;
+                  opacity: 0; 
+                  color: #142C8E;
+                  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                  font-size: 14px;
+              }
+
+              .personalized-design-container .personalized-label-container span {
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+              }
+          ` } />;
+        </Fragment>
+    );
+}

package/src/ui/buttons/buttonDesigns/index.js

@@ -0,0 +1,92 @@
+/* @flow */
+import { type ChildType } from 'jsx-pragmatic/src';
+
+import { type Personalization } from '../props';
+
+import { getDesignScript } from './script';
+import { type ButtonDesignOutputParams } from './types';
+import { ControlDesignComponent } from './control';
+import {
+    getDivideLogoAnimation,
+    getDivideLogoProps,
+    DIVIDE_LOGO_CONFIG,
+    DivideLogoTextComponent
+} from './divideLogoAnimation';
+import {
+    getInlineLabelTextDesign,
+    getValidInlineLogoTextProps,
+    INLINE_LOGO_TEXT_CONFIG,
+    InlineLogoTextComponent
+} from './inlineLogoTextDesign';
+
+const DESIGN_MAP : Object = {
+    'run-divide-logo-animation': {
+        designFn:              getDivideLogoAnimation,
+        getValidDesignProps:   getDivideLogoProps,
+        designConfig:          DIVIDE_LOGO_CONFIG,
+        ButtonDesignComponent: DivideLogoTextComponent
+    },
+    'run-add-label-text-next-to-logo-design': {
+        designFn:              getInlineLabelTextDesign,
+        getValidDesignProps:   getValidInlineLogoTextProps,
+        designConfig:          INLINE_LOGO_TEXT_CONFIG,
+        ButtonDesignComponent: InlineLogoTextComponent
+    }
+};
+
+const CONTROL_MAP : Object = {
+    'large-button-design-control': '104519',
+    'small-button-design-control': '104530'
+};
+
+export function getButtonDesign(personalization : ?Personalization) : ButtonDesignOutputParams | Object {
+
+    // check valid personalization
+    if (
+        __WEB__
+        || !personalization
+        || typeof personalization !== 'object'
+        || !personalization.buttonDesign
+    )  {
+        return {};
+    }
+    
+    const {
+        buttonDesign: {
+            id: designId = '',
+            text: designLabelText = 'Safe and easy way to pay'
+        } = {}
+    } = personalization;
+
+    // Return fragment with data-design-experiment tag for logging
+    if (CONTROL_MAP[designId]) {
+        const buttonDesignComponent : ChildType = ControlDesignComponent(CONTROL_MAP[designId]);
+
+        return {
+            buttonDesignContainerClass: '',
+            buttonDesignScript:         '',
+            buttonDesignComponent
+        };
+    }
+    
+    if (!DESIGN_MAP[designId]) {
+        return {};
+    }
+
+    const {
+        designFn,
+        getValidDesignProps,
+        designConfig,
+        ButtonDesignComponent
+    } = DESIGN_MAP[designId];
+
+    const designContent = { designLabelText };
+    const buttonDesignScript : string = getDesignScript(designFn, getValidDesignProps, designConfig);
+    const buttonDesignComponent : ChildType = ButtonDesignComponent(designContent);
+
+    return {
+        buttonDesignContainerClass: 'personalized-design-container',
+        buttonDesignScript,
+        buttonDesignComponent
+    };
+}

package/src/ui/buttons/buttonDesigns/inlineLogoTextDesign.jsx

@@ -0,0 +1,123 @@
+/* @flow */
+/** @jsx node */
+import { LOGO_CLASS } from '@paypal/sdk-logos/src';
+import { node, Fragment, type ChildType } from 'jsx-pragmatic/src';
+
+import { BUTTON_SIZE_STYLE } from '../config';
+import { CLASS } from '../../../constants';
+
+import { type ContentOptions } from './types';
+
+type InlineLogoTextProps = {|
+    paypalLabelContainerElement : Object,
+    designContainer : Object
+|};
+
+export const INLINE_LOGO_TEXT_CONFIG = {
+    cssUtilClasses: {
+        PAYPAL_LABEL_CONTAINER: CLASS.BUTTON_LABEL,
+        PAYPAL_LOGO:            LOGO_CLASS.LOGO,
+        DOM_READY:              CLASS.DOM_READY
+    },
+    min:                        BUTTON_SIZE_STYLE.large.minWidth,
+    max:                        BUTTON_SIZE_STYLE.huge.maxWidth
+};
+
+export const getValidInlineLogoTextProps = function (document : Object, configuration : Object) : InlineLogoTextProps | null {
+    const { PAYPAL_LABEL_CONTAINER } = configuration.cssUtilClasses;
+
+
+    const designContainer = (document && document.querySelector('.personalized-design-container')) || null;
+    if (!designContainer) {
+        return null;
+    }
+     
+    // Return null if design does not apply to button size
+    const designContainerWidth = designContainer.offsetWidth;
+    if (designContainerWidth < configuration.min || designContainerWidth > configuration.max) {
+        return null;
+    }
+
+    // Return null if label element is not valid
+    const paypalLabelContainerElement = (designContainer && designContainer.querySelector(`.${ PAYPAL_LABEL_CONTAINER }`)) || null;
+    if (!paypalLabelContainerElement) {
+        return null;
+    }
+
+    return {
+        paypalLabelContainerElement,
+        designContainer
+    };
+};
+
+export const getInlineLabelTextDesign = function (designProps : InlineLogoTextProps, configuration : Object) : void {
+    const {
+        min,
+        max,
+        cssUtilClasses: {
+            DOM_READY,
+            PAYPAL_LOGO
+        }
+    } = configuration;
+
+    const {
+        paypalLabelContainerElement,
+        designContainer
+    } = designProps;
+
+    const designCss = `
+        .${ DOM_READY } .personalized-design-container img.${ PAYPAL_LOGO }{
+            position: fixed;
+            left: 0%;
+        }
+
+        .personalized-design-container .personalized-label-container {
+            position: fixed;
+            opacity: 1;
+            right:0%;
+        }
+    `;
+
+    if (paypalLabelContainerElement) {
+        const style = document.createElement('style');
+        paypalLabelContainerElement.appendChild(style);
+        style.appendChild(document.createTextNode(designCss));
+
+        window.addEventListener('resize', () => {
+            // Remove animation if size limit broken
+            if (
+                (designContainer.offsetWidth > max || designContainer.offsetWidth < min)
+                && paypalLabelContainerElement.contains(style)
+            ) {
+                paypalLabelContainerElement.removeChild(style);
+            }
+        });
+    }
+};
+
+export function InlineLogoTextComponent({ designLabelText } : ContentOptions) : ChildType {
+    return (
+        <Fragment>
+            <div class={ 'personalized-label-container' } data-design-experiment="104519"> <span>{designLabelText}</span></div>
+            <style innerHTML={ `
+              .${ CLASS.DOM_READY } .personalized-design-container img.${ LOGO_CLASS.LOGO }{
+                  position: relative;
+              }
+              
+              .personalized-design-container .personalized-label-container {
+                  position: absolute;
+                  opacity: 0; 
+                  color: #142C8E;
+                  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+                  font-size: 14px;
+              }
+
+              .personalized-design-container .personalized-label-container span {
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-around;
+              }
+          ` } />;
+        </Fragment>
+    );
+}