@paypal/checkout-components 5.0.405-alpha-c03e09a.0 → 5.0.405

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

@@ -2,7 +2,7 @@
 import { describe, expect, it, beforeEach, vi } from "vitest";
 import { FUNDING } from "@paypal/sdk-constants";
 
-import { BUTTON_COLOR, BUTTON_FLOW } from "../../constants";
+import { BUTTON_COLOR } from "../../constants";
 
 import {
   getButtonColor,
@@ -14,7 +14,6 @@ import {
   hasInvalidScriptOptionsForFullRedesign,
   determineRandomButtonColor,
   getColorABTestFromStorage,
-  getCobrandedBNPLLabelFlags,
 } from "./props";
 
 describe("getColorABTestFromStorage", () => {
@@ -865,98 +864,3 @@ describe("HideSubmitButtonProps type validation", () => {
     expect(validButtonProps.hideSubmitButtonForCardForm).toBe(false);
   });
 });
-
-describe("getCobrandedBNPLLabelFlags", () => {
-  // $FlowFixMe - test object intentionally omits non-relevant ButtonPropsInputs fields
-  const eligibleProps = {
-    fundingSource: FUNDING.PAYPAL,
-    fundingEligibility: {
-      paylater: { eligible: true },
-    },
-    experiment: { isPaylaterCobrandedLabelEnabled: true },
-    locale: { lang: "en", country: "US" },
-    style: {},
-    flow: BUTTON_FLOW.PURCHASE,
-  };
-
-  it("should return true when all conditions are met", () => {
-    const { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel } =
-      // $FlowFixMe
-      getCobrandedBNPLLabelFlags(eligibleProps);
-
-    expect(isPayNowOrLaterLabelEligible).toBe(true);
-    expect(shouldApplyPayNowOrLaterLabel).toBe(true);
-  });
-
-  it("should return false when experiment flag is disabled", () => {
-    const { isPayNowOrLaterLabelEligible } =
-      // $FlowFixMe
-      getCobrandedBNPLLabelFlags({
-        ...eligibleProps,
-        experiment: { isPaylaterCobrandedLabelEnabled: false },
-      });
-
-    expect(isPayNowOrLaterLabelEligible).toBe(false);
-  });
-
-  it("should return false when paylater is not eligible", () => {
-    const { isPayNowOrLaterLabelEligible } =
-      // $FlowFixMe
-      getCobrandedBNPLLabelFlags({
-        ...eligibleProps,
-        fundingEligibility: { paylater: { eligible: false } },
-      });
-
-    expect(isPayNowOrLaterLabelEligible).toBe(false);
-  });
-
-  it("should return false when fundingSource is not PAYPAL or undefined", () => {
-    const { isPayNowOrLaterLabelEligible } =
-      // $FlowFixMe
-      getCobrandedBNPLLabelFlags({
-        ...eligibleProps,
-        fundingSource: FUNDING.VENMO,
-      });
-
-    expect(isPayNowOrLaterLabelEligible).toBe(false);
-  });
-
-  it("should return false when a non-paypal label is set", () => {
-    const { isPayNowOrLaterLabelEligible } =
-      // $FlowFixMe
-      getCobrandedBNPLLabelFlags({
-        ...eligibleProps,
-        style: { label: "checkout" },
-      });
-
-    expect(isPayNowOrLaterLabelEligible).toBe(false);
-  });
-
-  it("should return true when label is explicitly set to paypal", () => {
-    const { isPayNowOrLaterLabelEligible } =
-      // $FlowFixMe
-      getCobrandedBNPLLabelFlags({
-        ...eligibleProps,
-        style: { label: "paypal" },
-      });
-
-    expect(isPayNowOrLaterLabelEligible).toBe(true);
-  });
-
-  it("should return false when locale does not have PayNowOrLater content", () => {
-    const { isPayNowOrLaterLabelEligible } =
-      // $FlowFixMe
-      getCobrandedBNPLLabelFlags({
-        ...eligibleProps,
-        locale: { lang: "fr", country: "FR" },
-      });
-
-    expect(isPayNowOrLaterLabelEligible).toBe(false);
-  });
-
-  it("should return false when props is null", () => {
-    const { isPayNowOrLaterLabelEligible } = getCobrandedBNPLLabelFlags(null);
-
-    expect(isPayNowOrLaterLabelEligible).toBe(false);
-  });
-});

package/src/zoid/qr-code/component.test.js

@@ -0,0 +1,46 @@
+/* @flow */
+/**
+ * Unit tests for QR Code component creation and configuration.
+ * Verifies component initialization, memoization, and proper setup of SDK dependencies.
+ */
+
+import { describe, expect, test, vi } from "vitest";
+
+import { getQRCodeComponent } from "./component";
+
+vi.mock("@paypal/sdk-client/src", () => ({
+  getLogger: vi.fn(() => ({
+    metric: vi.fn().mockReturnThis(),
+    error: vi.fn().mockReturnThis(),
+    track: vi.fn().mockReturnThis(),
+    flush: vi.fn().mockReturnThis(),
+    metricCounter: vi.fn().mockReturnThis(),
+  })),
+  getPayPalDomainRegex: vi.fn(() => /paypal\.com/),
+  getPayPalDomain: vi.fn(() => "https://www.paypal.com"),
+  getCSPNonce: vi.fn(() => "mock-nonce"),
+  getSDKMeta: vi.fn(() => "mock-sdk-meta"),
+  getDebug: vi.fn(() => false),
+  getEnv: vi.fn(() => "test"),
+  getSessionID: vi.fn(() => "mock-session-id"),
+  getLocale: vi.fn(() => ({ country: "US", lang: "en" })),
+  getClientID: vi.fn(() => "mock-client-id"),
+  getCorrelationID: vi.fn(() => "mock-correlation-id"),
+  getBuyerCountry: vi.fn(() => "US"),
+}));
+
+describe("getQRCodeComponent", () => {
+  test("should create Zoid component", () => {
+    const component = getQRCodeComponent();
+
+    expect(component).toBeDefined();
+    expect(typeof component).toBe("function");
+  });
+
+  test("should memoize component instance", () => {
+    const component1 = getQRCodeComponent();
+    const component2 = getQRCodeComponent();
+
+    expect(component1).toBe(component2);
+  });
+});

package/src/zoid/qr-code/container.jsx

@@ -4,6 +4,7 @@
 import { destroyElement, type EventEmitterType } from "@krakenjs/belter/src";
 import { EVENT, type RenderOptionsType } from "@krakenjs/zoid/src";
 import { node, dom, type ChildType } from "@krakenjs/jsx-pragmatic/src";
+import { getCSPNonce } from "@paypal/sdk-client/src";
 
 import { type QRCodeProps } from "./types";
 
@@ -113,7 +114,6 @@ export function QRCodeContainer({
 export function containerTemplate({
   frame,
   prerenderFrame,
-  props,
   doc,
   uid,
   event,
@@ -122,7 +122,7 @@ export function containerTemplate({
     return;
   }
 
-  const { cspNonce } = props;
+  const cspNonce = __WEB__ ? getCSPNonce() : undefined;
 
   return (
     <QRCodeContainer

package/src/zoid/qr-code/container.test.jsx

@@ -0,0 +1,187 @@
+/* @flow */
+/** @jsx node */
+/**
+ * Unit tests for QR Code container template and component.
+ * Tests CSP nonce handling, frame validation, and visibility state management
+ * for both web and non-web environments.
+ */
+
+import { describe, expect, test, vi, beforeEach, afterEach } from "vitest";
+import { dom } from "@krakenjs/jsx-pragmatic/src";
+import { getCSPNonce } from "@paypal/sdk-client/src";
+
+import { containerTemplate, QRCodeContainer } from "./container";
+
+const TEST_UID = "test-uid-12345";
+const TEST_NONCE = "test-csp-nonce-xyz";
+
+vi.mock("@paypal/sdk-client/src", () => ({
+  getCSPNonce: vi.fn(),
+}));
+
+const createMocks = () => ({
+  frame: document.createElement("iframe"),
+  prerenderFrame: document.createElement("iframe"),
+  // $FlowFixMe - mock event emitter for tests
+  event: {
+    on: vi.fn(),
+    trigger: vi.fn(),
+    once: vi.fn(),
+    reset: vi.fn(),
+    triggerOnce: vi.fn(),
+  },
+});
+
+const originalWebValue = global.__WEB__;
+
+const setupTest = () => {
+  vi.clearAllMocks();
+  global.__WEB__ = true;
+};
+
+const teardownTest = () => {
+  global.__WEB__ = originalWebValue;
+};
+
+describe("containerTemplate", () => {
+  beforeEach(setupTest);
+  afterEach(teardownTest);
+
+  test.each([[true], [false]])(
+    "when __WEB__ is %s, should call getCSPNonce conditionally",
+    (webValue) => {
+      global.__WEB__ = webValue;
+      // $FlowIssue - mock return value
+      getCSPNonce.mockReturnValue(TEST_NONCE);
+
+      const { frame, prerenderFrame, event } = createMocks();
+      // $FlowIssue - test mock parameters
+      const result = containerTemplate({
+        frame,
+        prerenderFrame,
+        doc: document,
+        uid: TEST_UID,
+        event,
+        // $FlowIssue - test mock parameters
+        props: {},
+      });
+
+      if (webValue) {
+        expect(getCSPNonce).toHaveBeenCalled();
+        // Verify nonce value is available for use
+        expect(getCSPNonce).toHaveReturnedWith(TEST_NONCE);
+        expect(result).toBeDefined();
+      } else {
+        expect(getCSPNonce).not.toHaveBeenCalled();
+      }
+    }
+  );
+
+  test.each([
+    [
+      "frame",
+      { frame: null, prerenderFrame: document.createElement("iframe") },
+    ],
+    [
+      "prerenderFrame",
+      { frame: document.createElement("iframe"), prerenderFrame: null },
+    ],
+  ])("should return undefined when %s is missing", (_paramName, frames) => {
+    // $FlowIssue - test props
+    const result = containerTemplate({
+      ...frames,
+      doc: document,
+      uid: TEST_UID,
+      event: createMocks().event,
+      props: {},
+    });
+    expect(result).toBeUndefined();
+  });
+
+  test("should apply cspNonce to style element in rendered output", () => {
+    // $FlowIssue - mock return value
+    getCSPNonce.mockReturnValue(TEST_NONCE);
+
+    const { frame, prerenderFrame, event } = createMocks();
+    // $FlowIssue - test mock parameters
+    const result = containerTemplate({
+      frame,
+      prerenderFrame,
+      doc: document,
+      uid: TEST_UID,
+      event,
+      // $FlowIssue - test mock parameters
+      props: {},
+    });
+
+    // $FlowFixMe - result is HTMLElement in test context
+    const styleElement = result.querySelector("style");
+    expect(styleElement?.getAttribute("nonce")).toBe(TEST_NONCE);
+  });
+});
+
+describe("QRCodeContainer", () => {
+  beforeEach(setupTest);
+  afterEach(teardownTest);
+
+  test.each([
+    ["frame", (mocks) => ({ ...mocks, frame: null })],
+    ["prerenderFrame", (mocks) => ({ ...mocks, prerenderFrame: null })],
+  ])("should throw error when %s is missing", (_paramName, modifyMocks) => {
+    const mocks = createMocks();
+    // $FlowIssue - intentionally passing null for error test
+    expect(() =>
+      QRCodeContainer({ uid: TEST_UID, ...modifyMocks(mocks) })
+    ).toThrow("Expected frame and prerenderframe");
+  });
+
+  test("should set up visibility classes for prerender transition", () => {
+    // Initial state: prerenderFrame visible, component frame invisible
+    const { frame, prerenderFrame, event } = createMocks();
+    QRCodeContainer({ uid: TEST_UID, frame, prerenderFrame, event });
+
+    // Verify component frame is initially hidden
+    expect(frame.classList.contains("component-frame")).toBe(true);
+    expect(frame.classList.contains("invisible")).toBe(true);
+
+    // Verify prerender frame is initially visible
+    expect(prerenderFrame.classList.contains("prerender-frame")).toBe(true);
+    expect(prerenderFrame.classList.contains("visible")).toBe(true);
+  });
+
+  test("should toggle frame visibility when EVENT.RENDERED fires", () => {
+    const mocks = createMocks();
+    QRCodeContainer({ uid: TEST_UID, ...mocks });
+
+    // Extract and invoke the registered handler
+    // $FlowFixMe - accessing vitest mock properties
+    const handler = mocks.event.on.mock.calls[0][1];
+    handler();
+
+    // Verify visibility toggle: prerenderFrame becomes invisible
+    expect(mocks.prerenderFrame.classList.contains("invisible")).toBe(true);
+    expect(mocks.prerenderFrame.classList.contains("visible")).toBe(false);
+
+    // Verify visibility toggle: component frame becomes visible
+    expect(mocks.frame.classList.contains("visible")).toBe(true);
+    expect(mocks.frame.classList.contains("invisible")).toBe(false);
+  });
+
+  test("should pass cspNonce to QRCodeContainer and apply to rendered style", () => {
+    const { frame, prerenderFrame, event } = createMocks();
+    const result = QRCodeContainer({
+      uid: TEST_UID,
+      frame,
+      prerenderFrame,
+      event,
+      cspNonce: TEST_NONCE,
+    });
+
+    // Render to DOM to access style element
+    // $FlowFixMe - result is ChildType with render method
+    const rendered = result.render(dom({ doc: document }));
+    const styleElement = rendered.querySelector("style");
+
+    expect(styleElement?.getAttribute("nonce")).toBe(TEST_NONCE);
+  });
+});

package/src/zoid/qr-code/prerender.jsx

@@ -4,14 +4,16 @@
 import { type RenderOptionsType } from "@krakenjs/zoid/src";
 import { node, dom } from "@krakenjs/jsx-pragmatic/src";
 import { SpinnerPage } from "@paypal/common-components/src";
+import { getCSPNonce } from "@paypal/sdk-client/src";
 
 import { type QRCodeProps } from "./types";
 
 export function prerenderTemplate({
   doc,
-  props,
   close,
 }: RenderOptionsType<QRCodeProps>): ?HTMLElement {
+  const cspNonce = __WEB__ ? getCSPNonce() : undefined;
+
   const style = `
     #close {
         position: absolute;
@@ -42,11 +44,9 @@ export function prerenderTemplate({
     `;
 
   const children = [
-    <style nonce={props.cspNonce} innerHTML={style} />,
+    <style nonce={cspNonce} innerHTML={style} />,
     <a href="#" id="close" aria-label="close" role="button" onClick={close} />,
   ];
 
-  return new SpinnerPage({ nonce: props.cspNonce }, children).render(
-    dom({ doc })
-  );
+  return new SpinnerPage({ nonce: cspNonce }, children).render(dom({ doc }));
 }

package/src/zoid/qr-code/prerender.test.jsx

@@ -0,0 +1,108 @@
+/* @flow */
+/** @jsx node */
+/**
+ * Unit tests for QR Code prerender template.
+ * Tests CSP nonce propagation to SpinnerPage and style elements
+ * in both web and non-web environments.
+ */
+
+import { describe, expect, test, vi, beforeEach, afterEach } from "vitest";
+import { getCSPNonce } from "@paypal/sdk-client/src";
+
+import { prerenderTemplate } from "./prerender";
+
+const TEST_NONCE = "prerender-nonce-abc123";
+
+vi.mock("@paypal/sdk-client/src", () => ({
+  getCSPNonce: vi.fn(),
+}));
+
+let capturedSpinnerPageProps = null;
+let capturedChildren = null;
+
+vi.mock("@paypal/common-components/src", () => ({
+  SpinnerPage: vi.fn().mockImplementation((props, children) => {
+    capturedSpinnerPageProps = props;
+    capturedChildren = children;
+    return {
+      render: vi.fn(() => document.createElement("div")),
+    };
+  }),
+}));
+
+const originalWebValue = global.__WEB__;
+
+const setupTest = () => {
+  vi.clearAllMocks();
+  capturedSpinnerPageProps = null;
+  capturedChildren = null;
+  global.__WEB__ = true;
+};
+
+const teardownTest = () => {
+  global.__WEB__ = originalWebValue;
+};
+
+describe("prerenderTemplate", () => {
+  beforeEach(setupTest);
+  afterEach(teardownTest);
+
+  test.each([
+    [true, TEST_NONCE],
+    [false, undefined],
+  ])(
+    "when __WEB__ is %s, should pass nonce %s to SpinnerPage",
+    (webValue, expectedNonce) => {
+      global.__WEB__ = webValue;
+      // $FlowIssue - mock return value
+      getCSPNonce.mockReturnValue(TEST_NONCE);
+
+      // $FlowIssue - test mock parameters
+      const result = prerenderTemplate({
+        doc: document,
+        close: vi.fn(),
+        // $FlowIssue - test mock parameters
+        props: {},
+      });
+
+      if (webValue) {
+        // Verify getCSPNonce is called in web environment
+        expect(getCSPNonce).toHaveBeenCalled();
+        expect(getCSPNonce).toHaveReturnedWith(TEST_NONCE);
+      } else {
+        // Verify getCSPNonce is NOT called in non-web environment
+        expect(getCSPNonce).not.toHaveBeenCalled();
+      }
+
+      // Verify SpinnerPage receives correct nonce prop
+      expect(result).toBeDefined();
+      expect(capturedSpinnerPageProps).toEqual({ nonce: expectedNonce });
+    }
+  );
+
+  test("should apply cspNonce to style element in children", () => {
+    // $FlowIssue - mock return value
+    getCSPNonce.mockReturnValue(TEST_NONCE);
+
+    // $FlowIssue - test mock parameters
+    prerenderTemplate({ doc: document, close: vi.fn(), props: {} });
+
+    expect(capturedChildren?.length).toBe(2);
+    // $FlowFixMe - capturedChildren is set by mock
+    expect(capturedChildren[0]?.props?.nonce).toBe(TEST_NONCE);
+  });
+
+  test("should wire up close handler to close button", () => {
+    const mockClose = vi.fn();
+    // $FlowIssue - test mock parameters
+    prerenderTemplate({ doc: document, close: mockClose, props: {} });
+
+    // Verify second child is close button with correct props
+    expect(capturedChildren?.length).toBe(2);
+    // $FlowFixMe - capturedChildren is set by mock
+    const closeButton = capturedChildren[1];
+    expect(closeButton?.props?.onClick).toBe(mockClose);
+    expect(closeButton?.props?.id).toBe("close");
+    expect(closeButton?.props["aria-label"]).toBe("close");
+  });
+});