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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.426-alpha-ea5d1e6.0",
+  "version": "5.0.427",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -41,8 +41,8 @@
     "screenshot-server": "babel-node ./test/percy/server/index.js"
   },
   "engines": {
-    "node": "^18",
-    "npm": "8"
+    "node": "^22",
+    "npm": "10"
   },
   "files": [
     "src/",
@@ -78,7 +78,7 @@
     "@krakenjs/grumbler-scripts": "^8.1.5",
     "@krakenjs/sync-browser-mocks": "^3.0.0",
     "@percy/cli": "1.28.5",
-    "@percy/playwright": "^1.0.4",
+    "@percy/playwright": "1.1.1",
     "@playwright/test": "^1.38.1",
     "@vitest/coverage-v8": "^1.3.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -103,8 +103,8 @@
     "pixelmatch": "^5.2.1",
     "playwright": "^1.29.1",
     "pngjs": "^6.0.0",
-    "prettier": "^2.5.1",
-    "prettier-plugin-sh": "^0.10.0",
+    "prettier": "^3.9.6",
+    "prettier-plugin-sh": "^0.19.0",
     "puppeteer": "^1.20.0",
     "serve": "^14.0.0",
     "vite": "^3.2.4",
@@ -117,9 +117,9 @@
     "@krakenjs/jsx-pragmatic": "^3",
     "@krakenjs/post-robot": "^11.0.0",
     "@krakenjs/zalgo-promise": "^2.0.0",
-    "@krakenjs/zoid": "10.6.0-alpha.2",
-    "@paypal/fastlane-sdk-loader": "^1.2.1",
+    "@krakenjs/zoid": "^10.6.0",
     "@paypal/common-components": "^1.0.35",
+    "@paypal/fastlane-sdk-loader": "^1.2.1",
     "@paypal/funding-components": "^1.0.31",
     "@paypal/sdk-client": "^4.0.199",
     "@paypal/sdk-constants": "^1.0.158",

package/src/connect/component.jsx

@@ -56,7 +56,7 @@ export function getSdkVersion(version: string | null): string {
     });
 
     throw new Error(
-      `The braintree version: ${version} does not support Connect. Please use version ${MIN_BT_VERSION} or above`
+      `The braintree version: ${version} does not support Connect. Please use version ${MIN_BT_VERSION} or above`,
     );
   }
 

package/src/connect/component.test.js

@@ -100,7 +100,7 @@ describe("getConnectComponent: returns ConnectComponent", () => {
     loadAxo.mockRejectedValue(errorMessage);
 
     await expect(() => getConnectComponent(mockProps)).rejects.toThrow(
-      errorMessage
+      errorMessage,
     );
   });
 
@@ -109,7 +109,7 @@ describe("getConnectComponent: returns ConnectComponent", () => {
     window.braintree.connect.create.mockRejectedValue(expectedError);
 
     await expect(() => getConnectComponent(mockProps)).rejects.toThrow(
-      expectedError
+      expectedError,
     );
   });
 

package/src/funding/card/config.jsx

@@ -67,9 +67,9 @@ export function getCardConfig(): FundingSourceConfig {
       const cardBranded = Boolean(cardEligibility && cardEligibility.branded);
       const cardVaulted = Boolean(
         wallet &&
-          wallet.card &&
-          wallet.card.instruments &&
-          wallet.card.instruments.length
+        wallet.card &&
+        wallet.card.instruments &&
+        wallet.card.instruments.length,
       );
 
       // If card is not eligible, never show card buttons

package/src/funding/card/config.test.jsx

@@ -46,7 +46,7 @@ describe("card eligibility", () => {
         // $FlowIssue
         wallet: getWallet(),
         flow: BUTTON_FLOW.PURCHASE,
-      })
+      }),
     ).toEqual(false);
   });
 
@@ -58,7 +58,7 @@ describe("card eligibility", () => {
         fundingEligibility: getEligibility({ branded: true }),
         wallet: getWallet(),
         flow: BUTTON_FLOW.PURCHASE,
-      })
+      }),
     ).toEqual(true);
   });
 
@@ -70,7 +70,7 @@ describe("card eligibility", () => {
         fundingEligibility: getEligibility(),
         wallet: getWallet(),
         flow: BUTTON_FLOW.PURCHASE,
-      })
+      }),
     ).toEqual(true);
   });
 
@@ -83,7 +83,7 @@ describe("card eligibility", () => {
         fundingEligibility: getEligibility(),
         wallet: getWallet(),
         flow: BUTTON_FLOW.PURCHASE,
-      })
+      }),
     ).toEqual(false);
   });
 
@@ -98,7 +98,7 @@ describe("card eligibility", () => {
           card: ["some instrument"],
         }),
         flow: BUTTON_FLOW.PURCHASE,
-      })
+      }),
     ).toEqual(false);
   });
 
@@ -112,7 +112,7 @@ describe("card eligibility", () => {
           card: ["some instrument"],
         }),
         flow: BUTTON_FLOW.PURCHASE,
-      })
+      }),
     ).toEqual(true);
   });
 
@@ -124,7 +124,7 @@ describe("card eligibility", () => {
         fundingEligibility: getEligibility(),
         wallet: getWallet(),
         flow: BUTTON_FLOW.PURCHASE,
-      })
+      }),
     ).toEqual(false);
   });
 
@@ -136,7 +136,7 @@ describe("card eligibility", () => {
         fundingEligibility: getEligibility(),
         wallet: getWallet(),
         flow: BUTTON_FLOW.PURCHASE,
-      })
+      }),
     ).toEqual(true);
   });
 });
@@ -145,7 +145,7 @@ describe("rebrand card config", () => {
   test("should have standard colors", () => {
     const colors = getCardConfig().colors;
     expect(colors).toEqual(
-      expect.arrayContaining([BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE])
+      expect.arrayContaining([BUTTON_COLOR.BLACK, BUTTON_COLOR.WHITE]),
     );
   });
 
@@ -154,7 +154,7 @@ describe("rebrand card config", () => {
     expect(logoColors).toEqual(
       expect.objectContaining({
         [BUTTON_COLOR.WHITE]: BUTTON_COLOR.BLACK,
-      })
+      }),
     );
   });
 });

package/src/funding/funding.js

@@ -57,7 +57,7 @@ function isFundingVaultable({
 
     // If any vendors are both eligible & vaultable, card is vaultable
     return Object.keys(vendors).some(
-      (vendor) => vendors[vendor]?.eligible && vendors[vendor]?.vaultable
+      (vendor) => vendors[vendor]?.eligible && vendors[vendor]?.vaultable,
     );
   }
 
@@ -92,7 +92,7 @@ export function isFundingEligible(
     experiment,
     displayOnly,
     userAgent,
-  }: IsFundingEligibleOptions
+  }: IsFundingEligibleOptions,
 ): boolean {
   // Temporary: Force credit to be eligible if the experiment is enabled
   // but honor merchant opt-out via disableFunding
@@ -145,9 +145,9 @@ export function isFundingEligible(
       layout,
       shippingChange: Boolean(
         hasShippingCallback ||
-          onShippingChange ||
-          onShippingAddressChange ||
-          onShippingOptionsChange
+        onShippingChange ||
+        onShippingAddressChange ||
+        onShippingOptionsChange,
       ),
       wallet,
       displayOnly,
@@ -283,7 +283,7 @@ export function determineEligibleFunding({
       experiment,
       displayOnly,
       userAgent,
-    })
+    }),
   );
 
   if (layout === BUTTON_LAYOUT.HORIZONTAL) {

package/src/funding/funding.test.js

@@ -102,7 +102,7 @@ describe("Funding eligibility", () => {
     test("should not be eligible if funding source is missing from fundingEligibility", () => {
       const fundingEligible = isFundingEligible(
         FUNDING.WECHATPAY,
-        defaultMockFundingOptions
+        defaultMockFundingOptions,
       );
 
       expect(fundingEligible).toBe(false);
@@ -164,7 +164,7 @@ describe("Funding eligibility", () => {
     test("should not be eligible if fundingSource.eligible is false", () => {
       const fundingEligible = isFundingEligible(
         FUNDING.SEPA,
-        defaultMockFundingOptions
+        defaultMockFundingOptions,
       );
 
       expect(fundingEligible).toBe(false);
@@ -173,7 +173,7 @@ describe("Funding eligibility", () => {
     test("should not be eligible if fundingSource.eligible is false and fundingSource.vaultable is true", () => {
       const fundingEligible = isFundingEligible(
         FUNDING.OXXO,
-        defaultMockFundingOptions
+        defaultMockFundingOptions,
       );
 
       expect(fundingEligible).toBe(false);

package/src/funding/paylater/config.jsx

@@ -22,7 +22,7 @@ import css from "./style.scoped.scss";
 
 function getLabelText(
   fundingEligibility: FundingEligibilityType,
-  locale?: LocaleType
+  locale?: LocaleType,
 ): ?string {
   const { paylater } = fundingEligibility;
   const { lang } = locale || {};
@@ -31,7 +31,7 @@ function getLabelText(
 
   if (
     paylater?.products?.paylater?.eligible &&
-    paylater?.products?.paylater?.variant === "DE"
+    ["DE", "AT"].includes(paylater?.products?.paylater?.variant)
   ) {
     labelText = "Später Bezahlen";
   }

package/src/funding/paypal/template.jsx

@@ -134,16 +134,16 @@ function getButtonPersonalizationStyle(opts: LabelOptions): ?ChildType {
       innerHTML={`
             @media only screen and (max-width: ${MIN_WIDTH}px) {
                 .${CLASS.DOM_READY} ${PAYPAL_BUTTON} .${
-        CLASS.PERSONALIZATION_TEXT
-      } {
+                  CLASS.PERSONALIZATION_TEXT
+                } {
                     ${HIDDEN}
                 }
             }
 
             @media only screen and (min-width: ${MIN_WIDTH}px) {
                 .${CLASS.DOM_READY} ${PAYPAL_BUTTON} .${LOGO_CLASS.LOGO}.${
-        LOGO_CLASS.LOGO
-      }-${FUNDING.PAYPAL} {
+                  LOGO_CLASS.LOGO
+                }-${FUNDING.PAYPAL} {
                     animation: ${
                       personalizationText
                         ? `toggle-paypal-logo ${PERSONALIZATION_DURATION}s 0s forwards`
@@ -152,8 +152,8 @@ function getButtonPersonalizationStyle(opts: LabelOptions): ?ChildType {
                 }
 
                 .${CLASS.DOM_READY} ${PAYPAL_BUTTON} .${CLASS.TEXT}:not(.${
-        CLASS.PERSONALIZATION_TEXT
-      }):not(.${CLASS.HIDDEN}) {
+                  CLASS.PERSONALIZATION_TEXT
+                }):not(.${CLASS.HIDDEN}) {
                     ${COMPRESSED}
                     ${VISIBLE}
                     animation: ${
@@ -164,8 +164,8 @@ function getButtonPersonalizationStyle(opts: LabelOptions): ?ChildType {
                 }
 
                 .${CLASS.DOM_READY} ${PAYPAL_BUTTON} .${
-        CLASS.PERSONALIZATION_TEXT
-      } {
+                  CLASS.PERSONALIZATION_TEXT
+                } {
                     ${COMPRESSED}
                     ${VISIBLE}
                     animation: show-personalization-text ${PERSONALIZATION_DURATION}s 0s forwards;

package/src/funding/util.js

@@ -85,7 +85,7 @@ export function getFundingSourceColors({
 export function supportsVenmoPopups(
   experiment?: Experiment,
   supportsPopups: boolean,
-  userAgent: string
+  userAgent: string,
 ): boolean {
   if (__WEB__ && isVenmoSupportedWebView(userAgent)) {
     if (window.popupBridge) {
@@ -102,7 +102,7 @@ export function supportsVenmoPopups(
 
 export function isSupportedNativeVenmoBrowser(
   experiment?: Experiment,
-  userAgent: string
+  userAgent: string,
 ): boolean {
   if (__WEB__ && isVenmoSupportedWebView(userAgent)) {
     if (window.popupBridge) {

package/src/funding/util.test.js

@@ -115,7 +115,7 @@ describe("funding/util", () => {
       expect(result.colors).toBe(mockFundingConfig.colorsRebrand);
       expect(result.logoColors).toBe(mockFundingConfig.logoColorsRebrand);
       expect(result.secondaryColors).toBe(
-        mockFundingConfig.secondaryColorsRebrand
+        mockFundingConfig.secondaryColorsRebrand,
       );
       expect(result.textColors).toBe(mockFundingConfig.textColorsRebrand);
     });
@@ -148,13 +148,13 @@ describe("funding/util", () => {
       });
 
       expect(result.logoColors).toBe(
-        configWithoutColorsRebrand.logoColorsRebrand
+        configWithoutColorsRebrand.logoColorsRebrand,
       );
       expect(result.secondaryColors).toBe(
-        configWithoutColorsRebrand.secondaryColorsRebrand
+        configWithoutColorsRebrand.secondaryColorsRebrand,
       );
       expect(result.textColors).toBe(
-        configWithoutColorsRebrand.textColorsRebrand
+        configWithoutColorsRebrand.textColorsRebrand,
       );
     });
   });
@@ -182,7 +182,7 @@ describe("funding/util", () => {
         const experiment = { venmoEnableWebOnNonNativeBrowser: true };
 
         expect(supportsVenmoPopups(experiment, true, defaultUserAgent)).toBe(
-          true
+          true,
         );
       });
 
@@ -191,7 +191,7 @@ describe("funding/util", () => {
         const experiment = { venmoEnableWebOnNonNativeBrowser: true };
 
         expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
-          false
+          false,
         );
       });
 
@@ -200,7 +200,7 @@ describe("funding/util", () => {
         const experiment = { venmoEnableWebOnNonNativeBrowser: true };
 
         expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
-          false
+          false,
         );
       });
 
@@ -209,7 +209,7 @@ describe("funding/util", () => {
         const experiment = { venmoEnableWebOnNonNativeBrowser: true };
 
         expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
-          false
+          false,
         );
       });
 
@@ -218,7 +218,7 @@ describe("funding/util", () => {
         const experiment = { venmoEnableWebOnNonNativeBrowser: true };
 
         expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
-          false
+          false,
         );
       });
 
@@ -227,7 +227,7 @@ describe("funding/util", () => {
         const experiment = { venmoEnableWebOnNonNativeBrowser: true };
 
         expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
-          false
+          false,
         );
       });
 
@@ -236,7 +236,7 @@ describe("funding/util", () => {
         const experiment = {};
 
         expect(supportsVenmoPopups(experiment, true, defaultUserAgent)).toBe(
-          true
+          true,
         );
       });
 
@@ -245,7 +245,7 @@ describe("funding/util", () => {
         const experiment = { venmoEnableWebOnNonNativeBrowser: false };
 
         expect(supportsVenmoPopups(experiment, false, defaultUserAgent)).toBe(
-          false
+          false,
         );
       });
 
@@ -253,7 +253,7 @@ describe("funding/util", () => {
         vi.mocked(supportsPopups).mockReturnValue(true);
 
         expect(supportsVenmoPopups(undefined, true, defaultUserAgent)).toBe(
-          true
+          true,
         );
       });
     });
@@ -310,7 +310,7 @@ describe("funding/util", () => {
         const experiment = { venmoEnableWebOnNonNativeBrowser: true };
 
         expect(
-          isSupportedNativeVenmoBrowser(experiment, defaultUserAgent)
+          isSupportedNativeVenmoBrowser(experiment, defaultUserAgent),
         ).toBe(true);
       });
 
@@ -327,7 +327,7 @@ describe("funding/util", () => {
         const experiment = { venmoEnableWebOnNonNativeBrowser: true };
 
         expect(
-          isSupportedNativeVenmoBrowser(experiment, defaultUserAgent)
+          isSupportedNativeVenmoBrowser(experiment, defaultUserAgent),
         ).toBe(true);
       });
 
@@ -349,7 +349,7 @@ describe("funding/util", () => {
         vi.mocked(isSafari).mockReturnValue(true);
 
         expect(isSupportedNativeVenmoBrowser(undefined, defaultUserAgent)).toBe(
-          true
+          true,
         );
       });
 

package/src/hosted-buttons/index.test.js

@@ -92,7 +92,7 @@ describe("HostedButtons v1", () => {
     // $FlowIssue
     request.mockImplementationOnce(() =>
       // eslint-disable-next-line compat/compat
-      Promise.resolve(hostedButtonDetailsResponse)
+      Promise.resolve(hostedButtonDetailsResponse),
     );
     await HostedButtons({
       hostedButtonId,
@@ -102,7 +102,7 @@ describe("HostedButtons v1", () => {
       expect.objectContaining({
         hostedButtonId,
         style: expect.objectContaining({ tagline: true }),
-      })
+      }),
     );
     expect(Buttons).toHaveBeenCalledTimes(1);
     expect.assertions(2);
@@ -121,7 +121,7 @@ describe("HostedButtons v1", () => {
     // $FlowIssue
     request.mockImplementationOnce(() =>
       // eslint-disable-next-line compat/compat
-      Promise.resolve(hostedButtonDetailsResponse)
+      Promise.resolve(hostedButtonDetailsResponse),
     );
     await HostedButtons({
       hostedButtonId,
@@ -130,7 +130,7 @@ describe("HostedButtons v1", () => {
     expect(Buttons).toHaveBeenCalledWith(
       expect.objectContaining({
         hostedButtonId,
-      })
+      }),
     );
     expect(Buttons).toHaveBeenCalledTimes(1);
     expect(renderMock).toHaveBeenCalledTimes(1);
@@ -181,7 +181,7 @@ describe("HostedButtons v1", () => {
             ],
           },
         },
-      })
+      }),
     );
     await HostedButtons({
       hostedButtonId,
@@ -191,7 +191,7 @@ describe("HostedButtons v1", () => {
       expect.objectContaining({
         hostedButtonId,
         style: expect.objectContaining({ tagline: false }),
-      })
+      }),
     );
     expect(Buttons).toHaveBeenCalledTimes(1);
     expect(renderMock).toHaveBeenCalledTimes(1);
@@ -238,7 +238,7 @@ describe("HostedButtons v2", () => {
     // $FlowIssue
     request.mockImplementationOnce(() =>
       // eslint-disable-next-line compat/compat
-      Promise.resolve(hostedButtonDetailsResponse)
+      Promise.resolve(hostedButtonDetailsResponse),
     );
 
     await HostedButtons({
@@ -251,13 +251,13 @@ describe("HostedButtons v2", () => {
     expect(renderStandaloneButton).toHaveBeenCalledWith(
       expect.objectContaining({
         fundingSource: "paypal",
-      })
+      }),
     );
 
     expect(renderDefaultButton).toHaveBeenCalledWith(
       expect.objectContaining({
         eligibleDefaultButtons: ["venmo", "paylater"],
-      })
+      }),
     );
   });
 });

package/src/hosted-buttons/types.js

@@ -33,7 +33,7 @@ export type OnShippingAddressChange = (
   |},
   actions: {|
     reject: (arg: string) => void,
-  |}
+  |},
 ) => Promise<mixed>;
 
 export type OnShippingOptionsChange = (
@@ -48,7 +48,7 @@ export type OnShippingOptionsChange = (
   |},
   actions: {|
     reject: (arg: string) => void,
-  |}
+  |},
 ) => Promise<mixed>;
 
 export type FundingSources = string;
@@ -93,7 +93,7 @@ export type HostedButtonOptions = {|
 |};
 
 export type ButtonPreferences = $ReadOnlyArray<
-  $Values<typeof FUNDING> | "default"
+  $Values<typeof FUNDING> | "default",
 >;
 
 export type HostedButtonPreferences = {|

package/src/hosted-buttons/utils.js

@@ -92,7 +92,7 @@ export const createAccessToken: CreateAccessToken = memoize<CreateAccessToken>(
       accessToken,
       nonce,
     };
-  }
+  },
 );
 
 export const buildRequestHeaders: BuildRequestHeaders = async ({
@@ -137,7 +137,7 @@ export const getButtonPreferences = ({
     throw new Error(
       `Expected preferences to be populated, received: ${JSON.stringify({
         preferences,
-      })}`
+      })}`,
     );
   }
 
@@ -148,11 +148,11 @@ export const getButtonPreferences = ({
     buttonPreferences: buttonPreferences.filter(
       (fundingMethod) =>
         eligibleFundingMethods.includes(fundingMethod) ||
-        fundingMethod === "default"
+        fundingMethod === "default",
     ),
     // Sort the eligible funding methods returned from /ncp/api/form-fields in the order that they would appear in the smart stack.
     eligibleFundingMethods: SUPPORTED_FUNDING_SOURCES.filter((fundingMethod) =>
-      eligibleFundingMethods.includes(fundingMethod)
+      eligibleFundingMethods.includes(fundingMethod),
     ),
   };
 };
@@ -218,7 +218,7 @@ export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
 };
 
 export function getElementFromSelector(
-  selector: string | HTMLElement
+  selector: string | HTMLElement,
 ): HTMLElement | null {
   return typeof selector === "string"
     ? document.querySelector(selector)
@@ -446,7 +446,7 @@ export const getFlexDirection = ({
 export const getButtonColor = (
   color: Color,
   fundingSource: FundingSources,
-  shouldApplyRebrandedStyles?: boolean
+  shouldApplyRebrandedStyles?: boolean,
 ): Color => {
   const colorMap = {
     gold: {
@@ -504,7 +504,7 @@ export const getDefaultButtonOptions = ({
   eligibleFundingMethods,
 }: HostedButtonPreferences): ButtonPreferences => {
   return eligibleFundingMethods.filter(
-    (fundingSource: string) => !buttonPreferences.includes(fundingSource)
+    (fundingSource: string) => !buttonPreferences.includes(fundingSource),
   );
 };
 
@@ -529,7 +529,7 @@ export const getButtons = ({
       color: getButtonColor(
         style.color,
         fundingSource,
-        style.shouldApplyRebrandedStyles
+        style.shouldApplyRebrandedStyles,
       ),
     },
   });