@paypal/checkout-components 5.0.426-alpha-ea5d1e6.0 → 5.0.427

package/src/ui/buttons/props.js

@@ -68,7 +68,7 @@ export type CreateOrderActions = {|
 
 export type CreateOrder = (
   CreateOrderData,
-  CreateOrderActions
+  CreateOrderActions,
 ) => ZalgoPromise<string> | string;
 
 export type OnApproveData = {|
@@ -96,7 +96,7 @@ export type CreateSubscriptionActions = {|
 
 export type CreateSubscription = (
   CreateSubscriptionData,
-  CreateSubscriptionActions
+  CreateSubscriptionActions,
 ) => ZalgoPromise<string> | string;
 
 export type OnApproveActions = {|
@@ -118,11 +118,11 @@ export type OnCompleteActions = {|
 
 export type OnApprove = (
   data: OnApproveData,
-  actions: OnApproveActions
+  actions: OnApproveActions,
 ) => ZalgoPromise<void> | void;
 export type OnComplete = (
   data: OnCompleteData,
-  actions: OnCompleteActions
+  actions: OnCompleteActions,
 ) => ZalgoPromise<void> | void;
 
 type OnShippingChangeAddress = {|
@@ -244,7 +244,7 @@ export type OnShippingChangeActions = {|
 
 export type OnShippingChange = (
   data: OnShippingChangeData,
-  actions: OnShippingChangeActions
+  actions: OnShippingChangeActions,
 ) => ZalgoPromise<void> | void;
 
 export type OnShippingAddressChangeData = {|
@@ -270,7 +270,7 @@ export type OnShippingAddressChangeActions = {|
 
 export type OnShippingAddressChange = (
   data: OnShippingAddressChangeData,
-  actions: OnShippingAddressChangeActions
+  actions: OnShippingAddressChangeActions,
 ) => ZalgoPromise<void> | void;
 
 export type OnShippingOptionsChangeData = {|
@@ -293,7 +293,7 @@ export type OnShippingOptionsChangeActions = {|
 
 export type OnShippingOptionsChange = (
   data: OnShippingOptionsChangeData,
-  actions: OnShippingOptionsChangeActions
+  actions: OnShippingOptionsChangeActions,
 ) => ZalgoPromise<void> | void;
 
 export type OnCancelData = {|
@@ -307,7 +307,7 @@ export type OnCancelActions = {|
 
 export type OnCancel = (
   OnCancelData,
-  OnCancelActions
+  OnCancelActions,
 ) => ZalgoPromise<void> | void;
 
 export type OnClickData = {|
@@ -429,20 +429,20 @@ export type ApplePaySessionConfig = {|
   // eslint-disable-next-line flowtype/no-weak-types
   completeMerchantValidation: (validatedSession: any) => void,
   completeShippingMethodSelection: (
-    update: ApplePayShippingMethodUpdate | {||}
+    update: ApplePayShippingMethodUpdate | {||},
   ) => void,
   completeShippingContactSelection: (
-    update: ApplePayShippingContactUpdate | {||}
+    update: ApplePayShippingContactUpdate | {||},
   ) => void,
   completePaymentMethodSelection: (
-    update: ApplePayPaymentMethodUpdate | {||}
+    update: ApplePayPaymentMethodUpdate | {||},
   ) => void,
   completePayment: (result: ApplePayPaymentAuthorizationResult) => void,
 |};
 
 export type ApplePaySessionConfigRequest = (
   version: number,
-  request: Object
+  request: Object,
 ) => ApplePaySessionConfig;
 
 export type ButtonMessage = {|
@@ -741,7 +741,7 @@ export const DEFAULT_PROPS = {
 };
 
 export function getColorABTestFromStorage(
-  storageState: StateGetSet
+  storageState: StateGetSet,
 ): ?ColorABTestStorage {
   const sessionState = storageState.get("colorABTest");
 
@@ -753,7 +753,7 @@ export function getColorABTestFromStorage(
 }
 
 export function getBNPLLabelABTestFromStorage(
-  storageState: StateGetSet
+  storageState: StateGetSet,
 ): ?BNPLLabelABTestStorage {
   const sessionState = storageState.get("bnplLabelABTest");
 
@@ -841,7 +841,7 @@ export function throwErrorForInvalidButtonColor({
   throw new Error(
     `Unexpected style.color for ${
       fundingSource || FUNDING.PAYPAL
-    } button: ${invalidButtonColor}, expected ${fundingSourceColors.join(", ")}`
+    } button: ${invalidButtonColor}, expected ${fundingSourceColors.join(", ")}`,
   );
 }
 
@@ -1030,11 +1030,11 @@ export function getCobrandedBNPLLabelFlags(props: ?ButtonPropsInputs): {|
 
   const isPayNowOrLaterLabelEligible = Boolean(
     isPaylaterCobrandedLabelEnabled &&
-      isCobrandedEligibleFundingSource &&
-      isPaylaterEligible &&
-      isLabelEligible &&
-      isEnLang &&
-      isPurchaseFlow
+    isCobrandedEligibleFundingSource &&
+    isPaylaterEligible &&
+    isLabelEligible &&
+    isEnLang &&
+    isPurchaseFlow,
   );
 
   const isPaylaterCobrandedLabelRandomizationEnabled =
@@ -1080,7 +1080,7 @@ const getDefaultButtonPropsInput = (): ButtonPropsInputs => {
 
 export function normalizeButtonStyle(
   props: ?ButtonPropsInputs,
-  style: ButtonStyleInputs
+  style: ButtonStyleInputs,
 ): ButtonStyle {
   if (!style) {
     throw new Error(`Expected props.style to be set`);
@@ -1102,7 +1102,7 @@ export function normalizeButtonStyle(
 
   if (!fundingConfig) {
     throw new Error(
-      `Expected ${fundingSource || FUNDING.PAYPAL} to be eligible`
+      `Expected ${fundingSource || FUNDING.PAYPAL} to be eligible`,
     );
   }
 
@@ -1145,7 +1145,7 @@ export function normalizeButtonStyle(
     throw new Error(
       `Unexpected style.color for ${fundingSource || FUNDING.PAYPAL} button: ${
         requestedButtonColor || color
-      }, expected ${validColors.join(", ")}`
+      }, expected ${validColors.join(", ")}`,
     );
   }
 
@@ -1153,14 +1153,14 @@ export function normalizeButtonStyle(
     throw new Error(
       `Unexpected style.shape for ${
         fundingSource || FUNDING.PAYPAL
-      } button: ${shape}, expected ${fundingConfig.shapes.join(", ")}`
+      } button: ${shape}, expected ${fundingConfig.shapes.join(", ")}`,
     );
   }
 
   if (height !== undefined) {
     if (typeof height !== "number") {
       throw new TypeError(
-        `Expected style.height to be a number, got: ${height}`
+        `Expected style.height to be a number, got: ${height}`,
       );
     }
 
@@ -1171,13 +1171,13 @@ export function normalizeButtonStyle(
 
     if (disableMaxHeight === true) {
       throw new TypeError(
-        `Unexpected style.height for style.disableMaxHeight: got: ${height}, expected undefined.`
+        `Unexpected style.height for style.disableMaxHeight: got: ${height}, expected undefined.`,
       );
     }
 
     if (height < minHeight || height > maxHeight) {
       throw new Error(
-        `Expected style.height to be between ${minHeight}px and ${maxHeight}px - got ${height}px`
+        `Expected style.height to be between ${minHeight}px and ${maxHeight}px - got ${height}px`,
       );
     }
   }
@@ -1185,21 +1185,21 @@ export function normalizeButtonStyle(
   if (disableMaxHeight !== undefined) {
     if (typeof disableMaxHeight !== "boolean") {
       throw new TypeError(
-        `Expected style.disableMaxHeight to be a boolean, got: ${disableMaxHeight}`
+        `Expected style.disableMaxHeight to be a boolean, got: ${disableMaxHeight}`,
       );
     }
 
     const disableMaxHeightInvalidFundingSources = [FUNDING.CARD, undefined];
     const disableMaxHeightValidFundingSources = Object.values(FUNDING).filter(
       (fundingSourceId) =>
-        !disableMaxHeightInvalidFundingSources.includes(fundingSourceId)
+        !disableMaxHeightInvalidFundingSources.includes(fundingSourceId),
     );
 
     if (disableMaxHeightInvalidFundingSources.includes(fundingSource)) {
       throw new TypeError(
         `Unexpected fundingSource for style.disableMaxHeight: got: ${
           fundingSource ? fundingSource : "Smart Stack"
-        }, expected ${disableMaxHeightValidFundingSources.join(", ")}.`
+        }, expected ${disableMaxHeightValidFundingSources.join(", ")}.`,
       );
     }
   }
@@ -1207,13 +1207,13 @@ export function normalizeButtonStyle(
   if (borderRadius !== undefined) {
     if (!isBorderRadiusNumber(borderRadius)) {
       throw new TypeError(
-        `Expected style.borderRadius to be a number, got: ${borderRadius}`
+        `Expected style.borderRadius to be a number, got: ${borderRadius}`,
       );
     }
 
     if (borderRadius < 0) {
       throw new Error(
-        `Expected style.borderRadius to be greater than or equal to 0, got: ${borderRadius}`
+        `Expected style.borderRadius to be greater than or equal to 0, got: ${borderRadius}`,
       );
     }
   }
@@ -1221,7 +1221,7 @@ export function normalizeButtonStyle(
   if (layout === BUTTON_LAYOUT.VERTICAL) {
     if (tagline) {
       throw new Error(
-        `style.tagline is not allowed for ${BUTTON_LAYOUT.VERTICAL} layout`
+        `style.tagline is not allowed for ${BUTTON_LAYOUT.VERTICAL} layout`,
       );
     }
   }
@@ -1253,7 +1253,7 @@ export function normalizeButtonStyle(
 export function normalizeButtonMessage(
   message: ButtonMessageInputs,
   layout: $Values<typeof BUTTON_LAYOUT>,
-  fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>
+  fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>,
 ): ButtonMessage {
   const {
     color = MESSAGE_COLOR.BLACK,
@@ -1269,12 +1269,12 @@ export function normalizeButtonMessage(
     }
     if (typeof amount !== "number" || isNaN(amount)) {
       throw new TypeError(
-        `Expected message.amount to be a number, got: ${amount}`
+        `Expected message.amount to be a number, got: ${amount}`,
       );
     }
     if (amount < 0) {
       throw new Error(
-        `Expected message.amount to be a positive number, got: ${amount}`
+        `Expected message.amount to be a positive number, got: ${amount}`,
       );
     }
   }
@@ -1286,12 +1286,12 @@ export function normalizeButtonMessage(
     if (!Array.isArray(offer)) {
       throw new TypeError(
         `Expected message.offer to be an array of strings, got: ${String(
-          offer
-        )}`
+          offer,
+        )}`,
       );
     }
     const invalidOffers = offer.filter(
-      (o) => !values(MESSAGE_OFFER).includes(o)
+      (o) => !values(MESSAGE_OFFER).includes(o),
     );
     if (invalidOffers.length > 0) {
       throw new Error(`Invalid offer(s): ${invalidOffers.join(",")}`);
@@ -1339,7 +1339,7 @@ const getDefaultExperiment = (): Experiment => {
 };
 
 export function normalizeButtonProps(
-  props: ?ButtonPropsInputs
+  props: ?ButtonPropsInputs,
 ): RenderButtonProps {
   if (!props) {
     throw new Error(`Expected props`);
@@ -1347,8 +1347,8 @@ export function normalizeButtonProps(
 
   const defaultHasShippingCallback = Boolean(
     props.onShippingChange ||
-      props.onShippingAddressChange ||
-      props.onShippingOptionsChange
+    props.onShippingAddressChange ||
+    props.onShippingOptionsChange,
   );
 
   let {
@@ -1408,7 +1408,7 @@ export function normalizeButtonProps(
 
   if (remembered.some((source) => FUNDING_SOURCES.indexOf(source) === -1)) {
     throw new Error(
-      `Expected valid funding sources, got ${JSON.stringify(remembered)}`
+      `Expected valid funding sources, got ${JSON.stringify(remembered)}`,
     );
   }
 

package/src/ui/buttons/props.test.js

@@ -377,7 +377,7 @@ describe("getColorForABTest", () => {
       expect.objectContaining({
         color: expect.any(String),
         shouldApplyRebrandedStyles: expect.any(Boolean),
-      })
+      }),
     );
     expect(storageState.get).toHaveBeenCalledWith("colorABTest");
     expect(storageState.set).toHaveBeenCalledWith("colorABTest", {
@@ -405,7 +405,7 @@ describe("getColorForABTest", () => {
       expect.objectContaining({
         color: expect.any(String),
         shouldApplyRebrandedStyles: expect.any(Boolean),
-      })
+      }),
     );
     expect(storageState.get).toHaveBeenCalledWith("colorABTest");
     expect(storageState.set).toHaveBeenCalledWith("colorABTest", {
@@ -432,7 +432,7 @@ describe("getColorForABTest", () => {
       expect.objectContaining({
         color: expect.any(String),
         shouldApplyRebrandedStyles: expect.any(Boolean),
-      })
+      }),
     );
     expect(storageState.get).toHaveBeenCalledWith("colorABTest");
     expect(storageState.set).toHaveBeenCalledWith("colorABTest", {
@@ -516,7 +516,7 @@ describe("getColorForFullRedesign", () => {
       expect.objectContaining({
         color: expect.any(String),
         shouldApplyRebrandedStyles: true,
-      })
+      }),
     );
   });
 
@@ -530,7 +530,7 @@ describe("getColorForFullRedesign", () => {
       expect.objectContaining({
         color: expect.any(String),
         shouldApplyRebrandedStyles: true,
-      })
+      }),
     );
   });
 
@@ -738,7 +738,7 @@ describe("getButtonColor", () => {
     expect(result).toEqual(
       expect.objectContaining({
         isButtonColorABTestMerchant: true,
-      })
+      }),
     );
   });
 
@@ -851,7 +851,7 @@ describe("normalizeButtonStyle requestedButtonColor", () => {
         },
       },
       // $FlowFixMe
-      { color: BUTTON_COLOR.GOLD }
+      { color: BUTTON_COLOR.GOLD },
     );
 
     // Merchant configured gold — rebrand maps it to blue
@@ -874,7 +874,7 @@ describe("normalizeButtonStyle requestedButtonColor", () => {
         },
       },
       // $FlowFixMe
-      { color: BUTTON_COLOR.SILVER }
+      { color: BUTTON_COLOR.SILVER },
     );
 
     // Merchant configured silver — rebrand maps it to white

package/src/ui/buttons/script.jsx

@@ -53,7 +53,7 @@ export function getComponentScript(): () => void {
       elements:
         | HTMLCollection<HTMLElement>
         | NodeList<HTMLElement>
-        | $ReadOnlyArray<HTMLElement>
+        | $ReadOnlyArray<HTMLElement>,
     ): $ReadOnlyArray<HTMLElement> {
       return toArray(elements).filter((el) => {
         return el.tagName.toLowerCase() !== TAG.STYLE;
@@ -107,16 +107,16 @@ export function getComponentScript(): () => void {
     }
 
     function getElementsTotalWidth(
-      elements: $ReadOnlyArray<HTMLElement>
+      elements: $ReadOnlyArray<HTMLElement>,
     ): number {
       return sum(
-        elements.map((child) => Math.ceil(child.getBoundingClientRect().width))
+        elements.map((child) => Math.ceil(child.getBoundingClientRect().width)),
       );
     }
 
     function calculateGap(optionalParent: HTMLElement): number {
       const isTagline = optionalParent?.classList.contains(
-        "paypal-button-tagline" || false
+        "paypal-button-tagline" || false,
       );
 
       if (isTagline) {
@@ -142,17 +142,17 @@ export function getComponentScript(): () => void {
 
     function getOptionalParents(): $ReadOnlyArray<HTMLElement> {
       return unique(
-        getElements(SELECTOR.OPTIONAL).map(getParent).filter(Boolean)
+        getElements(SELECTOR.OPTIONAL).map(getParent).filter(Boolean),
       );
     }
 
     function getOptionalChildren(
-      parent: HTMLElement
+      parent: HTMLElement,
     ): $ReadOnlyArray<HTMLElement> {
       return toArray(getElements(SELECTOR.OPTIONAL, parent)).sort(
         (first, second) => {
           return getOptionalIndex(first) - getOptionalIndex(second);
-        }
+        },
       );
     }
 
@@ -189,11 +189,11 @@ export function getComponentScript(): () => void {
 
         if (usedWidth > parentWidth) {
           optionalChildren.forEach((optionalChild) =>
-            hideElement(optionalChild)
+            hideElement(optionalChild),
           );
         } else {
           optionalChildren.forEach((optionalChild) =>
-            showElement(optionalChild)
+            showElement(optionalChild),
           );
         }
       }
@@ -210,7 +210,7 @@ export function getComponentScript(): () => void {
         if (document.body) {
           document.body.classList.add(CLASS.DOM_READY);
         }
-      })
+      }),
     );
 
     const load = () => {

package/src/ui/buttons/styles/button.js

@@ -147,8 +147,8 @@ export const buttonStyle = `
 
     @media only screen and (max-width: ${MIN_VAULT_BUTTON_WIDTH - 1}px) {
         .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW}.${CLASS.WALLET}.${
-  CLASS.WALLET_MENU
-} .${CLASS.BUTTON}  {
+          CLASS.WALLET_MENU
+        } .${CLASS.BUTTON}  {
             border-top-right-radius: 4px;
             border-bottom-right-radius: 4px;
             width: 100%;

package/src/ui/buttons/styles/disableMaxHeightConfig.test.js

@@ -58,7 +58,7 @@ describe("BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE config", () => {
 
     for (let i = 1; i < buckets.length; i++) {
       expect(buckets[i].minHeight).toBeLessThanOrEqual(
-        buckets[i - 1].maxHeight
+        buckets[i - 1].maxHeight,
       );
     }
   });

package/src/ui/buttons/styles/labelContainerHeight.test.js

@@ -34,7 +34,7 @@ describe("getLabelContainerHeight", () => {
     "returns $expected for buttonHeight=$buttonHeight fontSize=$fontSize",
     ({ buttonHeight, fontSize, expected }) => {
       expect(getLabelContainerHeight(buttonHeight, fontSize)).toBe(expected);
-    }
+    },
   );
 });
 
@@ -81,7 +81,7 @@ describe("generateLabelHeightContainerStyles", () => {
       (minH, maxH, labelHeight) => {
         calls.push({ minH, maxH, labelHeight });
         return "";
-      }
+      },
     );
     expect(calls).toEqual([{ minH: 75, maxH: 75, labelHeight: 38 }]);
   });
@@ -93,7 +93,7 @@ describe("generateDisableMaxHeightLabelContainerStyles", () => {
     expect(result).toContain("min-height:");
     expect(result).toContain("max-height:");
     expect(result).toContain(
-      ".paypal-button-rebrand > .paypal-button-label-container"
+      ".paypal-button-rebrand > .paypal-button-label-container",
     );
     expect(result).toContain("height:");
   });
@@ -103,7 +103,7 @@ describe("generateDisableMaxHeightLabelContainerStyles", () => {
     // XXXL bucket has maxHeight: 75, so catch-all starts at 76px
     expect(result).toContain("@container (min-height: 76px)");
     expect(result).not.toMatch(
-      /@container \(min-height: 76px\) and \(max-height:/
+      /@container \(min-height: 76px\) and \(max-height:/,
     );
   });
 
@@ -112,7 +112,7 @@ describe("generateDisableMaxHeightLabelContainerStyles", () => {
     // XXXL: maxHeight=75, fontSize=26 → getLabelContainerHeight(75, 26) = 38
     const catchAllHeight = getLabelContainerHeight(75, 26);
     expect(result).toContain(
-      `@container (min-height: 76px) {\n      .paypal-button-rebrand > .paypal-button-label-container {\n        height: ${catchAllHeight}px;`
+      `@container (min-height: 76px) {\n      .paypal-button-rebrand > .paypal-button-label-container {\n        height: ${catchAllHeight}px;`,
     );
   });
 

package/src/ui/buttons/styles/labels.js

@@ -29,8 +29,8 @@ export const labelStyle = `
     }
 
     .${CLASS.BUTTON} .${CLASS.TEXT}.${CLASS.IMMEDIATE}:not(.${
-  CLASS.PERSONALIZATION_TEXT
-}):not(.${CLASS.HIDDEN}) {
+      CLASS.PERSONALIZATION_TEXT
+    }):not(.${CLASS.HIDDEN}) {
         ${VISIBLE}
         ${EXPANDED}
     }
@@ -43,8 +43,8 @@ export const labelStyle = `
     }
 
     .${CLASS.DOM_READY} .${CLASS.BUTTON} .${CLASS.TEXT}:not(.${
-  CLASS.IMMEDIATE
-}):not(.${CLASS.PERSONALIZATION_TEXT}):not(.${CLASS.HIDDEN}) {
+      CLASS.IMMEDIATE
+    }):not(.${CLASS.PERSONALIZATION_TEXT}):not(.${CLASS.HIDDEN}) {
         ${VISIBLE}
         ${COMPRESSED}
         animation: show-text ${__TEST__ ? "0" : "1"}s 0s forwards;
@@ -61,15 +61,15 @@ export const labelStyle = `
     }
 
     .${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} {
-        font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
+        font-family: PayPalOpen-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
         font-weight: 400;
     }
 
     .${CLASS.BUTTON_REBRAND}[data-funding-source=paypal] .${CLASS.BUTTON_LABEL},
     .${CLASS.BUTTON_REBRAND}[data-funding-source=credit] .${CLASS.BUTTON_LABEL},
     .${CLASS.BUTTON_REBRAND}[data-funding-source=paylater] .${
-  CLASS.BUTTON_LABEL
-} {
+      CLASS.BUTTON_LABEL
+    } {
         font-family: PayPal Pro Book, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
         font-weight: 500;
     }

package/src/ui/buttons/styles/page.js

@@ -4,7 +4,7 @@ import { CLASS } from "../../../constants";
 
 export const pageStyle = `
     html, body {
-        font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
+        font-family: PayPalOpen-Regular, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
         padding: 0;
         margin: 0;
         width: 100%;