@paypal/checkout-components 5.0.256 → 5.0.258

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

@@ -1,85 +1,101 @@
 /* @flow */
 /** @jsx node */
-import { LOGO_CLASS } from '@paypal/sdk-logos/src';
-import { node, Fragment, type ChildType } from '@krakenjs/jsx-pragmatic/src';
+import { LOGO_CLASS } from "@paypal/sdk-logos/src";
+import { node, Fragment, type ChildType } from "@krakenjs/jsx-pragmatic/src";
 
-import { CLASS } from '../../../constants';
-import { BUTTON_SIZE_STYLE } from '../config';
+import { CLASS } from "../../../constants";
+import { BUTTON_SIZE_STYLE } from "../config";
 
-import { type ContentOptions } from './types';
+import { type ContentOptions } from "./types";
 
 type DivideLogoAnimationProps = {|
-    paypalLabelContainerElement : Object,
-    paypalLogoStartingLeftPosition : string,
-    designContainer : Object
+  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,
-        PAYPAL_LOGO_PP:             CLASS.LOGO_PP
-    }
+  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,
+    PAYPAL_LOGO_PP: CLASS.LOGO_PP,
+  },
 };
 
 // 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, PAYPAL_LOGO_PP } = 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 }.${ PAYPAL_LOGO_PP }`)) || null;
-    if (!paypalLogoElement) {
-        return null;
-    }
-    const paypalLogoStartingLeftPosition = `${ (paypalLogoElement.offsetLeft / paypalLabelContainerElement.offsetWidth) * 100 }%`;
-
-    return {
-        paypalLabelContainerElement,
-        paypalLogoStartingLeftPosition,
-        designContainer
-    };
+export const getDivideLogoProps = function (
+  document: Object,
+  configuration: Object
+): DivideLogoAnimationProps | null {
+  const { PAYPAL_BUTTON_LABEL, PAYPAL_LOGO, PAYPAL_LOGO_PP } =
+    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}.${PAYPAL_LOGO_PP}`
+      )) ||
+    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,
-            PAYPAL_LOGO_PP
-        }
-    } = configuration;
-
-    const {
-        paypalLabelContainerElement,
-        paypalLogoStartingLeftPosition,
-        designContainer
-    } = designProps;
-
-    const designCss = `
-        .${ DOM_READY } .personalized-design-container img.${ PAYPAL_LOGO }.${ PAYPAL_LOGO_PP }{
+export function getDivideLogoAnimation(
+  designProps: DivideLogoAnimationProps,
+  configuration: Object
+): void {
+  const {
+    min,
+    max,
+    cssUtilClasses: { DOM_READY, PAYPAL_LOGO, PAYPAL_LOGO_PP },
+  } = configuration;
+
+  const {
+    paypalLabelContainerElement,
+    paypalLogoStartingLeftPosition,
+    designContainer,
+  } = designProps;
+
+  const designCss = `
+        .${DOM_READY} .personalized-design-container img.${PAYPAL_LOGO}.${PAYPAL_LOGO_PP}{
             animation: 3s divide-logo-animation-left-side 2s infinite alternate;
         }
         
@@ -90,11 +106,11 @@ export function getDivideLogoAnimation(designProps : DivideLogoAnimationProps, c
         @keyframes divide-logo-animation-left-side {
             0% {
                 position: fixed;
-                left: ${ paypalLogoStartingLeftPosition };
+                left: ${paypalLogoStartingLeftPosition};
             }
             33% {
                 position: fixed;
-                left: ${ paypalLogoStartingLeftPosition };
+                left: ${paypalLogoStartingLeftPosition};
             }
             66% {
                 position: fixed;
@@ -130,35 +146,45 @@ export function getDivideLogoAnimation(designProps : DivideLogoAnimationProps, c
         }
     `;
 
-    if (paypalLabelContainerElement) {
-        const style = document.createElement('style');
+  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);
+      } else if (
+        (designContainer.offsetWidth <= max ||
+          designContainer.offsetWidth >= min) &&
+        !paypalLabelContainerElement.contains(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);
-            } else if (
-                (designContainer.offsetWidth <= max || designContainer.offsetWidth >= min)
-                && !paypalLabelContainerElement.contains(style)
-            ) {
-                paypalLabelContainerElement.appendChild(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 }{
+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;
               }
               
@@ -175,7 +201,9 @@ export function DivideLogoTextComponent({ designLabelText } : ContentOptions) :
                   flex-direction: column;
                   justify-content: space-around;
               }
-          ` } />;
-        </Fragment>
-    );
+          `}
+      />
+      ;
+    </Fragment>
+  );
 }

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

@@ -1,92 +1,95 @@
 /* @flow */
-import { type ChildType } from '@krakenjs/jsx-pragmatic/src';
+import { type ChildType } from "@krakenjs/jsx-pragmatic/src";
 
-import { type Personalization } from '../props';
+import { type Personalization } from "../props";
 
-import { getDesignScript } from './script';
-import { type ButtonDesignOutputParams } from './types';
-import { ControlDesignComponent } from './control';
+import { getDesignScript } from "./script";
+import { type ButtonDesignOutputParams } from "./types";
+import { ControlDesignComponent } from "./control";
 import {
-    getDivideLogoAnimation,
-    getDivideLogoProps,
-    DIVIDE_LOGO_CONFIG,
-    DivideLogoTextComponent
-} from './divideLogoAnimation';
+  getDivideLogoAnimation,
+  getDivideLogoProps,
+  DIVIDE_LOGO_CONFIG,
+  DivideLogoTextComponent,
+} from "./divideLogoAnimation";
 import {
-    getInlineLabelTextDesign,
-    getValidInlineLogoTextProps,
-    INLINE_LOGO_TEXT_CONFIG,
-    InlineLogoTextComponent
-} from './inlineLogoTextDesign';
+  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 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'
+const CONTROL_MAP: Object = {
+  "large-button-design-control": "104519",
+  "small-button-design-control": "104530",
 };
 
-export function getButtonDesign(personalization : ?Personalization) : ButtonDesignOutputParams | Object {
+export function getButtonDesign(
+  personalization: ?Personalization
+): ButtonDesignOutputParams | Object {
+  // check valid personalization
+  if (
+    __WEB__ ||
+    !personalization ||
+    typeof personalization !== "object" ||
+    !personalization.buttonDesign
+  ) {
+    return {};
+  }
 
-    // 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;
+  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 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 {};
-    }
+    return {
+      buttonDesignContainerClass: "",
+      buttonDesignScript: "",
+      buttonDesignComponent,
+    };
+  }
 
-    const {
-        designFn,
-        getValidDesignProps,
-        designConfig,
-        ButtonDesignComponent
-    } = DESIGN_MAP[designId];
+  if (!DESIGN_MAP[designId]) {
+    return {};
+  }
 
-    const designContent = { designLabelText };
-    const buttonDesignScript : string = getDesignScript(designFn, getValidDesignProps, designConfig);
-    const buttonDesignComponent : ChildType = ButtonDesignComponent(designContent);
+  const { designFn, getValidDesignProps, designConfig, ButtonDesignComponent } =
+    DESIGN_MAP[designId];
 
-    return {
-        buttonDesignContainerClass: 'personalized-design-container',
-        buttonDesignScript,
-        buttonDesignComponent
-    };
+  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

@@ -1,72 +1,79 @@
 /* @flow */
 /** @jsx node */
-import { LOGO_CLASS } from '@paypal/sdk-logos/src';
-import { node, Fragment, type ChildType } from '@krakenjs/jsx-pragmatic/src';
+import { LOGO_CLASS } from "@paypal/sdk-logos/src";
+import { node, Fragment, type ChildType } from "@krakenjs/jsx-pragmatic/src";
 
-import { BUTTON_SIZE_STYLE } from '../config';
-import { CLASS } from '../../../constants';
+import { BUTTON_SIZE_STYLE } from "../config";
+import { CLASS } from "../../../constants";
 
-import { type ContentOptions } from './types';
+import { type ContentOptions } from "./types";
 
 type InlineLogoTextProps = {|
-    paypalLabelContainerElement : Object,
-    designContainer : Object
+  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
+  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 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;
+export const getInlineLabelTextDesign = function (
+  designProps: InlineLogoTextProps,
+  configuration: Object
+): void {
+  const {
+    min,
+    max,
+    cssUtilClasses: { DOM_READY, PAYPAL_LOGO },
+  } = configuration;
 
-    const {
-        paypalLabelContainerElement,
-        designContainer
-    } = designProps;
+  const { paypalLabelContainerElement, designContainer } = designProps;
 
-    const designCss = `
-        .${ DOM_READY } .personalized-design-container img.${ PAYPAL_LOGO }{
+  const designCss = `
+        .${DOM_READY} .personalized-design-container img.${PAYPAL_LOGO}{
             position: fixed;
             left: 0%;
         }
@@ -78,34 +85,45 @@ export const getInlineLabelTextDesign = function (designProps : InlineLogoTextPr
         }
     `;
 
-    if (paypalLabelContainerElement) {
-        const style = document.createElement('style');
+  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);
+      } else if (
+        (designContainer.offsetWidth <= max ||
+          designContainer.offsetWidth >= min) &&
+        !paypalLabelContainerElement.contains(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);
-            } else if (
-                (designContainer.offsetWidth <= max || designContainer.offsetWidth >= min)
-                && !paypalLabelContainerElement.contains(style)
-            ) {
-                paypalLabelContainerElement.appendChild(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 }{
+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;
               }
               
@@ -122,7 +140,9 @@ export function InlineLogoTextComponent({ designLabelText } : ContentOptions) :
                   flex-direction: column;
                   justify-content: space-around;
               }
-          ` } />;
-        </Fragment>
-    );
+          `}
+      />
+      ;
+    </Fragment>
+  );
 }