@paypal/checkout-components 5.0.189 → 5.0.190

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

@@ -0,0 +1,35 @@
+/* @flow */
+/** @jsx node */
+
+import { node, type ElementNode } from 'jsx-pragmatic/src';
+
+import { getComponentScript } from '../script';
+
+type ScriptProps = {|
+    nonce : ?string,
+    buttonDesignScript : string
+|};
+
+export function ButtonDesignExperimentScriptWrapper({ nonce, buttonDesignScript } : ScriptProps) : ElementNode {
+
+    const scripts = `
+        const scriptFns = ${ getComponentScript().toString() };
+        scriptFns();
+        function onDomLoad(){ ${ buttonDesignScript } };
+        document.addEventListener('DOMContentLoaded', onDomLoad);
+    `;
+    return (
+        <script nonce={ nonce } innerHTML={  `(function(){ ${ scripts }})()` } />
+    );
+}
+
+export function getDesignScript(designFn : Function, getValidDesignProps : Function, designConfig : Object) : string {
+    const buttonDesignScript = `
+        const designProps = ${ getValidDesignProps.toString() }( document, ${ JSON.stringify(designConfig) })
+        if (designProps) {
+            const applyDesign = ${ designFn.toString() }
+            applyDesign(designProps, ${ JSON.stringify(designConfig) })
+        }
+    `;
+    return buttonDesignScript;
+}

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

@@ -0,0 +1,13 @@
+/* @flow */
+import { type ChildType } from 'jsx-pragmatic/src';
+
+export type ButtonDesignOutputParams ={|
+    buttonDesignContainerClass : string,
+    buttonDesignScript : string,
+    buttonDesignComponent : ChildType
+
+|};
+
+export type ContentOptions = {|
+    designLabelText : string
+|};

package/src/ui/buttons/buttons.jsx

@@ -10,8 +10,8 @@ import { CLASS, BUTTON_NUMBER, BUTTON_LAYOUT, BUTTON_FLOW } from '../../constant
 import { determineEligibleFunding, isWalletFundingEligible } from '../../funding';
 import { ValidationError } from '../../lib';
 
-import { getButtonAnimation } from './button-animations';
-import { ButtonAnimationExperimentScriptWrapper } from './button-animations/script';
+import { getButtonDesign } from './buttonDesigns';
+import { ButtonDesignExperimentScriptWrapper } from './buttonDesigns/script';
 import { normalizeButtonProps, type ButtonPropsInputs, type OnShippingChange } from './props';
 import { Style } from './style';
 import { Button } from './button';
@@ -110,7 +110,7 @@ export function Buttons(props : ButtonsProps) : ElementNode {
     }
 
     if (fundingSources.indexOf(FUNDING.CARD) !== -1) {
-        fundingSources = fundingSources.filter(src => src !== FUNDING.CARD).concat([ FUNDING.CARD ]);
+        fundingSources = [ ...fundingSources.filter(src => src !== FUNDING.CARD),  FUNDING.CARD ];
     }
 
     const instruments = getWalletInstruments({ wallet, fundingSources, layout, onShippingChange });
@@ -119,8 +119,8 @@ export function Buttons(props : ButtonsProps) : ElementNode {
         flow === BUTTON_FLOW.PURCHASE &&
         ((__WEB__ && userIDToken) || Object.keys(instruments).length)
     );
-    
-    const { buttonAnimationScript = '' } = getButtonAnimation(personalization);
+
+    const { buttonDesignScript = '' } = getButtonDesign(personalization);
 
     return (
         <div class={ [
@@ -169,12 +169,12 @@ export function Buttons(props : ButtonsProps) : ElementNode {
             {
                 (tagline && layout === BUTTON_LAYOUT.HORIZONTAL && !fundingSource)
                     ? <TagLine
-                        fundingSource={ fundingSources[0] }
-                        style={ style }
-                        locale={ locale }
-                        multiple={ multiple }
-                        nonce={ nonce }
-                        personalization={ personalization }
+                            fundingSource={ fundingSources[0] }
+                            style={ style }
+                            locale={ locale }
+                            multiple={ multiple }
+                            nonce={ nonce }
+                            personalization={ personalization }
                     /> : null
             }
 
@@ -187,19 +187,19 @@ export function Buttons(props : ButtonsProps) : ElementNode {
             {
                 (layout === BUTTON_LAYOUT.VERTICAL && fundingSources.indexOf(FUNDING.CARD) !== -1)
                     ? <PoweredByPayPal
-                        locale={ locale }
-                        nonce={ nonce }
+                            locale={ locale }
+                            nonce={ nonce }
                     /> : null
             }
 
             {
-                buttonAnimationScript
-                    ? <ButtonAnimationExperimentScriptWrapper
-                        nonce={ nonce }
-                        buttonAnimation={ buttonAnimationScript }
+                buttonDesignScript
+                    ? <ButtonDesignExperimentScriptWrapper
+                            nonce={ nonce }
+                            buttonDesignScript={ buttonDesignScript }
                     />
                     : <Script
-                        nonce={ nonce }
+                            nonce={ nonce }
                     />
             }
         </div>

package/src/ui/buttons/props.js

@@ -164,7 +164,7 @@ export type Personalization = {|
             click : string
         |}
     |},
-    buttonAnimation? : {|
+    buttonDesign? : {|
         id : string,
         text : string,
         tracking : {|

package/src/zoid/buttons/util.js

@@ -189,6 +189,7 @@ export function applePaySession() : ?ApplePaySessionConfigRequest {
                 listeners.paymentauthorized({ payment });
             };
 
+            // eslint-disable-next-line unicorn/prefer-add-event-listener
             session.oncancel = () => {
                 listeners.cancel();
             };

package/src/zoid/card-fields/component.jsx

@@ -20,7 +20,8 @@ const CARD_FIELD_TYPE = {
     SINGLE: 'single',
     NUMBER: 'number',
     CVV:    'cvv',
-    EXPIRY: 'expiry'
+    EXPIRY: 'expiry',
+    NAME:   'name'
 };
 
 type CardFieldsProps = {|
@@ -66,7 +67,8 @@ type CardFieldsExports = {|
 type CardFieldsChildren = {|
     NumberField : CardFieldComponent,
     CVVField : CardFieldComponent,
-    ExpiryField : CardFieldComponent
+    ExpiryField : CardFieldComponent,
+    NameField : CardFieldComponent
 |};
 
 const url = () => `${ getPayPalDomain() }${ __PAYPAL_CHECKOUT__.__URI__.__CARD_FIELD__ }`;
@@ -240,6 +242,7 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
     const NumberField = genericCardField(CARD_FIELD_TYPE.NUMBER);
     const CVVField = genericCardField(CARD_FIELD_TYPE.CVV);
     const ExpiryField = genericCardField(CARD_FIELD_TYPE.EXPIRY);
+    const NameField = genericCardField(CARD_FIELD_TYPE.NAME);
 
     const CardFields = create({
         tag: 'paypal-card-fields',
@@ -267,7 +270,8 @@ export const getCardFieldsComponent : () => CardFieldsComponent = memoize(() : C
             return {
                 NumberField,
                 CVVField,
-                ExpiryField
+                ExpiryField,
+                NameField
             };
         },
 

package/src/zoid/payment-fields/prerender.jsx

@@ -19,36 +19,13 @@ export function PaymentFieldsPrerender({ nonce } : PrerenderedPaymentFieldsProps
                             margin: 0;
                             width: 100%;
                             height: 100%;
-                            background: transparent;
+                            background: rgba(240,240,240,0.5);
                         }
 
                         body {
-                            background: transparent;
                             position: relative;
                             overflow: hidden;
                         }
-
-                        body::after {
-                            content: "";
-                            display: block;
-                            background-color: transparent;
-                            overflow: hidden;
-                            position: absolute;
-                            top: 0;
-                            bottom: 0;
-                            width: 100%;
-                            height: 100%;
-                            transform: translateX(0);
-                        }
-
-                        @keyframes loading-placeholder {
-                            0% {
-                                transform: translateX(-150%);
-                            }
-                            100% {
-                                transform: translateX(150%);
-                            }
-                        }
                     ` }
                 />
             </body>

package/src/ui/buttons/button-animations/divide-logo-animation.jsx

@@ -1,175 +0,0 @@
-/* @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 { ButtonAnimationOutputParams, LabelOptions, ButtonSizes, DivideLogoAnimationProps } from './types';
-
-export const ANIMATION = {
-    LABEL_CONTAINER: ('divide-logo-animation-label-container' : 'divide-logo-animation-label-container'),
-    CONTAINER:       ('divide-logo-animation' : 'divide-logo-animation')
-};
-
-export function LabelForDivideLogoAnimation({ animationLabelText } : LabelOptions) : ChildType {
-    // experimentName must match elmo experiment name
-    const config = {
-        labelText:      animationLabelText,
-        labelClass:     ANIMATION.LABEL_CONTAINER,
-        experimentName: 'Varied_Button_Design'
-    };
-   
-    return (
-        <Fragment>
-            <div class={ config.labelClass } data-animation-experiment={ config.experimentName }> <span>{config.labelText}</span></div>
-            <style innerHTML={ `
-                .${ CLASS.DOM_READY } .${ ANIMATION.CONTAINER } img.${ LOGO_CLASS.LOGO }{
-                    position: relative;
-                }
-                
-                .${ ANIMATION.CONTAINER } .${ ANIMATION.LABEL_CONTAINER } {
-                    position: absolute;
-                    opacity: 0; 
-                    color: #142C8E;
-                    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-                    font-size: 14px;
-                }
-
-                .${ ANIMATION.CONTAINER } .${ ANIMATION.LABEL_CONTAINER } span {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                }
-            ` } />;
-        </Fragment>
-    );
-}
-
-// Returns label container if the button sizes match
-const getAnimationProps = function(document, configuration) : DivideLogoAnimationProps | null {
-    const { ANIMATION_CONTAINER, PAYPAL_BUTTON_LABEL, PAYPAL_LOGO } = configuration.cssClasses;
-    const { large } = configuration;
-
-    // get the animation main container to force specificity( in css ) and make sure we are running the right animation
-    const animationContainer = (document && document.querySelector(`.${ ANIMATION_CONTAINER }`)) || null;
-    if (!animationContainer) {
-        return null;
-    }
-
-    // return null if animation should not be played for the button size
-    const animationContainerWidth = animationContainer.offsetWidth;
-    if (animationContainerWidth < large.min) {
-        return null;
-    }
-
-    // get the label container that animation will be applied to
-    const paypalLabelContainerElement = animationContainer.querySelector(`.${ PAYPAL_BUTTON_LABEL }`) || null;
-    // get starting position for element so it doesn't jump when animation begins
-    const paypalLogoElement = (paypalLabelContainerElement && paypalLabelContainerElement.querySelector(`.${ PAYPAL_LOGO }`)) || null;
-    const paypalLogoStartingLeftPosition = paypalLogoElement
-        ? `${ (paypalLogoElement.offsetLeft / paypalLabelContainerElement.offsetWidth) * 100 }%`
-        : '44.5%';
-
-    return {
-        paypalLabelContainerElement,
-        paypalLogoStartingLeftPosition
-    };
-};
-
-function animationConfiguration () : ButtonSizes {
-    return {
-        large:      { min: BUTTON_SIZE_STYLE.large.minWidth },
-        huge:       { max: BUTTON_SIZE_STYLE.huge.maxWidth },
-        cssClasses: {
-            DOM_READY:                  CLASS.DOM_READY,
-            ANIMATION_CONTAINER:        ANIMATION.CONTAINER,
-            PAYPAL_LOGO:                LOGO_CLASS.LOGO,
-            ANIMATION_LABEL_CONTAINER:  ANIMATION.LABEL_CONTAINER,
-            PAYPAL_BUTTON_LABEL:        CLASS.BUTTON_LABEL
-        }
-    };
-}
-
-export function createDivideLogoAnimation() : Function {
-    return (animationProps, cssClasses) : void => {
-        const { ANIMATION_LABEL_CONTAINER, ANIMATION_CONTAINER, DOM_READY, PAYPAL_LOGO } = cssClasses;
-        const { paypalLabelContainerElement, paypalLogoStartingLeftPosition } = animationProps;
-        const animations = `
-            .${ DOM_READY } .${ ANIMATION_CONTAINER } img.${ PAYPAL_LOGO }{
-                animation: 3s divide-logo-animation-left-side 2s infinite alternate;
-            }
-            
-            .${ ANIMATION_CONTAINER } .${ ANIMATION_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(animations));
-        }
-    };
-}
-
-export function setupDivideLogoAnimation (animationLabelText : string) : ButtonAnimationOutputParams {
-    const animationData = { animationLabelText };
-    const animationFn = createDivideLogoAnimation();
-    const animationConfig = animationConfiguration();
-    const buttonAnimationScript = `
-        const animationProps = ${ getAnimationProps.toString() }( document, ${ JSON.stringify(animationConfig) });
-        if (animationProps && animationProps.paypalLabelContainerElement && animationProps.paypalLogoStartingLeftPosition) {
-            const animation = ${ animationFn.toString() }
-            animation(animationProps, ${ JSON.stringify(animationConfig.cssClasses) })
-        }
-    `;
-    return {
-        buttonAnimationContainerClass: ANIMATION.CONTAINER,
-        buttonAnimationScript,
-        buttonAnimationComponent:      (<LabelForDivideLogoAnimation { ...animationData } />)
-    };
-}

package/src/ui/buttons/button-animations/index.js

@@ -1,38 +0,0 @@
-/* @flow */
-
-import { type Personalization } from '../props';
-
-import { setupDivideLogoAnimation } from './divide-logo-animation';
-import { setupLabelTextNextToLogoAnimation } from './label-text-next-to-logo-animation';
-import { type ButtonAnimationOutputParams } from './types';
-
-
-export function getButtonAnimation(personalization : ?Personalization) : ButtonAnimationOutputParams | Object {
-
-    // check valid personalization
-    if (
-        __WEB__
-        || !personalization
-        || typeof personalization !== 'object'
-        || !personalization.buttonAnimation
-    )  {
-        return {};
-    }
-
-    const {
-        buttonAnimation: {
-            id: animationId = '',
-            text: animationLabelText = 'Safe and easy way to pay'
-        } = {}
-    } = personalization;
-
-    if (animationId === 'run-divide-logo-animation') {
-        return setupDivideLogoAnimation(animationLabelText);
-    }
-
-    if (animationId === 'run-add-label-text-next-to-logo-animation') {
-        return setupLabelTextNextToLogoAnimation(animationLabelText);
-    }
-
-    return {};
-}

package/src/ui/buttons/button-animations/label-text-next-to-logo-animation.jsx

@@ -1,106 +0,0 @@
-/* @flow */
-/** @jsx node */
-import { LOGO_CLASS } from '@paypal/sdk-logos/src';
-import { node, Fragment, type ChildType, type ElementNode } from 'jsx-pragmatic/src';
-
-import { BUTTON_SIZE_STYLE } from '../config';
-import { CLASS } from '../../../constants';
-
-import  type { ButtonAnimationOutputParams, LabelOptions } from './types';
-
-export const ANIMATION = {
-    ELEMENT:         ('label-next-to-logo-animation-element' : 'label-next-to-logo-animation-element'),
-    CONTAINER:       ('label-next-to-logo-animation' : 'label-next-to-logo-animation')
-};
-
-function ComponentForAnimation({ animationLabelText } : LabelOptions) : ChildType {
-    return (
-        <Fragment>
-            <span data-animation-experiment="Varied_Button_Design" class={ ANIMATION.ELEMENT }>{animationLabelText}</span>
-            <style innerHTML={ `
-                .${ CLASS.DOM_READY } .${ ANIMATION.CONTAINER } img.${ LOGO_CLASS.LOGO }{
-                    position: relative;
-                }
-                
-                .${ ANIMATION.CONTAINER } .${ ANIMATION.ELEMENT } {
-                    position: absolute;
-                    opacity: 0; 
-                    color: #142C8E;
-                    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-                    font-size: 14px;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                }
-            ` } />;
-        </Fragment>
-    );
-}
-
-const getValidLabelContainer = function (document, configuration) : ElementNode | null {
-    const { ANIMATION_CONTAINER, PAYPAL_LABEL_CONTAINER } = configuration.cssStyles;
-    const { large, huge } = configuration;
-
-    // get the animation main container to force specificity( in css ) and make sure we are running the right animation
-    const animationContainer = (document && document.querySelector(`.${ ANIMATION_CONTAINER }`)) || null;
-    // get the label container element having into account the animation container to force specificity in css
-    const paypalLabelContainerElement = (animationContainer && animationContainer.querySelector(`.${ PAYPAL_LABEL_CONTAINER }`)) || null;
-    if (!animationContainer) {
-        return null;
-    }
-
-    const animationContainerWidth = animationContainer.offsetWidth;
-    // only support large and extra large button sizes
-    if (animationContainerWidth < large.min || animationContainerWidth > huge.max) {
-        return null;
-    }
-    return paypalLabelContainerElement;
-};
-
-const createAnimation = function (animationContainerElement, cssClasses) : void {
-    const { ANIMATION_CONTAINER, DOM_READY, PAYPAL_LOGO, ANIMATION_ELEMENT } = cssClasses;
-    const animations = `
-        .${ DOM_READY } .${ ANIMATION_CONTAINER } img.${ PAYPAL_LOGO }{
-            position: fixed;
-            left: 0%;
-        }
-
-        .${ ANIMATION_CONTAINER } .${ ANIMATION_ELEMENT } {
-            position: fixed;
-            opacity: 1;
-            right:0%;
-        }
-    `;
-
-    const style = document.createElement('style');
-    animationContainerElement.appendChild(style);
-    style.appendChild(document.createTextNode(animations));
-};
-
-
-export function setupLabelTextNextToLogoAnimation (animationLabelText : string) : ButtonAnimationOutputParams {
-    const animationProps = { animationLabelText };
-    const animationConfig = {
-        cssStyles: {
-            ANIMATION_CONTAINER:    ANIMATION.CONTAINER,
-            ANIMATION_ELEMENT:      ANIMATION.ELEMENT,
-            PAYPAL_LABEL_CONTAINER: CLASS.BUTTON_LABEL,
-            PAYPAL_LOGO:            LOGO_CLASS.LOGO,
-            DOM_READY:              CLASS.DOM_READY
-        },
-        large:      { min: BUTTON_SIZE_STYLE.large.minWidth, max: BUTTON_SIZE_STYLE.large.maxWidth  },
-        huge:       { max: BUTTON_SIZE_STYLE.huge.maxWidth }
-    };
-    const buttonAnimationScript = `
-        const animationContainerElement = ${ getValidLabelContainer.toString() }( document, ${ JSON.stringify(animationConfig) })
-        if (animationContainerElement) {
-            const animation = ${ createAnimation.toString() }
-            animation(animationContainerElement, ${ JSON.stringify(animationConfig.cssStyles) })
-        }
-    `;
-    return {
-        buttonAnimationContainerClass:        ANIMATION.CONTAINER,
-        buttonAnimationScript,
-        buttonAnimationComponent:             (<ComponentForAnimation { ...animationProps } />)
-    };
-}

package/src/ui/buttons/button-animations/script.jsx

@@ -1,24 +0,0 @@
-/* @flow */
-/** @jsx node */
-
-import { node, type ElementNode } from 'jsx-pragmatic/src';
-
-import { getComponentScript } from '../script';
-
-type ScriptProps = {|
-    nonce : ?string,
-    buttonAnimation : string
-|};
-
-export function ButtonAnimationExperimentScriptWrapper({ nonce, buttonAnimation } : ScriptProps) : ElementNode {
-
-    const scripts = `
-        const scriptFns = ${ getComponentScript().toString() };
-        scriptFns();
-        function onDomLoad(){ ${ buttonAnimation } };
-        document.addEventListener('DOMContentLoaded', onDomLoad);
-    `;
-    return (
-        <script nonce={ nonce } innerHTML={  `(function(){ ${ scripts }})()` } />
-    );
-}

package/src/ui/buttons/button-animations/types.js

@@ -1,41 +0,0 @@
-/* @flow */
-import { type ChildType, type ElementNode } from 'jsx-pragmatic/src';
-
-export type ButtonAnimationOutputParams ={|
-    buttonAnimationContainerClass : string,
-    buttonAnimationScript : string,
-    buttonAnimationComponent : ChildType | null
-|};
-
-export type ButtonSizeProperties = {|
-    min? : number,
-    max? : number
-|};
-
-type ButtonAnimationCss = {|
-    DOM_READY : string,
-    ANIMATION_CONTAINER : string,
-    PAYPAL_LOGO : string,
-    ANIMATION_LABEL_CONTAINER : string,
-    PAYPAL_BUTTON_LABEL : string
-|};
-
-export type ButtonSizes = {|
-    large : ButtonSizeProperties,
-    huge : ButtonSizeProperties,
-    cssClasses : ButtonAnimationCss
-|};
-
-export type ButtonAnimation = {|
-    params : ButtonSizes,
-    fn : Function
-|};
-
-export type LabelOptions = {|
-    animationLabelText : string
-|};
-
-export type DivideLogoAnimationProps = {|
-    paypalLabelContainerElement : ElementNode,
-    paypalLogoStartingLeftPosition : string
-|};