@paypal/checkout-components 5.0.412 → 5.0.413

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.412",
+  "version": "5.0.413",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/constants/button.js

@@ -118,3 +118,9 @@ export const MESSAGE_ALIGN = {
   LEFT: ("left": "left"),
   RIGHT: ("right": "right"),
 };
+
+// Mark variation options (generic for future funding source support)
+export const MARK_VARIATIONS = {
+  WORDMARK: ("wordmark": "wordmark"),
+  MONOGRAM: ("monogram": "monogram"),
+};

package/src/funding/paypal/monogramMark.jsx

@@ -0,0 +1,10 @@
+/* @flow */
+/** @jsx node */
+
+import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src";
+import { PPRebrandLogoExternalImage } from "@paypal/sdk-logos/src";
+import { LOGO_COLOR } from "@paypal/sdk-logos/src/constants";
+
+export function PayPalMonogramMark(): ComponentNode<{| logoColor: string |}> {
+  return <PPRebrandLogoExternalImage logoColor={LOGO_COLOR.BLUE} />;
+}

package/src/funding/paypal/monogramMark.test.jsx

@@ -0,0 +1,24 @@
+/* @flow */
+import { describe, test, expect } from "vitest";
+
+import { PayPalMonogramMark } from "./monogramMark";
+
+describe("PayPalMonogramMark", () => {
+  test("should render PayPal monogram mark component", () => {
+    const markComponent = PayPalMonogramMark();
+
+    expect(markComponent).toBeDefined();
+    expect(markComponent.type).toBe("component");
+    expect(markComponent.props).toBeDefined();
+    expect(markComponent.props.logoColor).toBe("blue");
+  });
+
+  test("should return ChildType for type compatibility", () => {
+    const markComponent = PayPalMonogramMark();
+
+    // Should be compatible with ChildType (no type errors)
+    expect(typeof markComponent).toBe("object");
+    expect(markComponent.type).toBeDefined();
+    expect(markComponent.props).toBeDefined();
+  });
+});

package/src/marks/component.jsx

@@ -29,7 +29,7 @@ import type {
   OnShippingAddressChange,
   OnShippingOptionsChange,
 } from "../ui/buttons/props";
-import { BUTTON_LAYOUT, BUTTON_FLOW } from "../constants";
+import { BUTTON_LAYOUT, BUTTON_FLOW, MARK_VARIATIONS } from "../constants";
 import { determineEligibleFunding, isFundingEligible } from "../funding";
 import {
   supportsVenmoPopups,
@@ -52,6 +52,7 @@ type MarksInstance = {|
 
 type MarksProps = {|
   fundingSource?: ?$Values<typeof FUNDING>,
+  markVariation?: ?$Values<typeof MARK_VARIATIONS>,
   onShippingChange?: OnShippingChange,
   onShippingAddressChange?: OnShippingAddressChange,
   onShippingOptionsChange?: OnShippingOptionsChange,
@@ -64,6 +65,7 @@ export type MarksComponent = (MarksProps) => MarksInstance;
 export const getMarksComponent: () => MarksComponent = memoize(() => {
   function Marks({
     fundingSource,
+    markVariation,
     onShippingChange,
     onShippingAddressChange,
     onShippingOptionsChange,
@@ -163,6 +165,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
                 <MarksElementRebrand
                   fundingEligibility={fundingEligibility}
                   fundingSources={fundingSources}
+                  markVariation={markVariation}
                   height={height}
                   experiment={experiment}
                   env={env}

package/src/marks/templateRebrand.jsx

@@ -12,10 +12,12 @@ import { toPx } from "@krakenjs/belter/src";
 
 import type { Experiment } from "../types";
 import { getFundingConfig } from "../funding";
-import { CLASS } from "../constants";
+import { CLASS, MARK_VARIATIONS } from "../constants";
+import { PayPalMonogramMark } from "../funding/paypal/monogramMark";
 
 type MarkOptions = {|
   fundingSource: $Values<typeof FUNDING>,
+  markVariation?: ?$Values<typeof MARK_VARIATIONS>,
   fundingEligibility: FundingEligibilityType,
   experiment: Experiment,
   env: $Values<typeof ENV>,
@@ -23,6 +25,7 @@ type MarkOptions = {|
 
 function Mark({
   fundingSource,
+  markVariation,
   fundingEligibility,
   experiment,
   env,
@@ -53,7 +56,8 @@ function Mark({
     backgroundClasses += " paypal-mark-rebrand-own-border-and-padding";
   }
 
-  return (
+  // Helper function to render wordmark (Logo)
+  const renderWordmark = () => (
     <div class={backgroundClasses}>
       {marksDefined && MarkLogo ? (
         <MarkLogo shouldApplyRebrandedStyles={true} />
@@ -68,11 +72,30 @@ function Mark({
       )}
     </div>
   );
+
+  // Helper function to render PayPal monogram
+  const renderPayPalMonogram = () => (
+    <div class="paypal-mark-rebrand paypal-mark-rebrand-white">
+      <PayPalMonogramMark />
+    </div>
+  );
+
+  // Handle PayPal variations - only check for monogram, everything else defaults to wordmark
+  if (
+    fundingSource === FUNDING.PAYPAL &&
+    markVariation === MARK_VARIATIONS.MONOGRAM
+  ) {
+    return renderPayPalMonogram();
+  }
+
+  // Default logic for all other cases (handles undefined, null, "wordmark", invalid values)
+  return renderWordmark();
 }
 
 type MarksElementOptions = {|
   fundingEligibility: FundingEligibilityType,
   fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>,
+  markVariation?: ?$Values<typeof MARK_VARIATIONS>,
   height: number,
   experiment: Experiment,
   env: $Values<typeof ENV>,
@@ -81,6 +104,7 @@ type MarksElementOptions = {|
 export function MarksElementRebrand({
   fundingEligibility,
   fundingSources,
+  markVariation,
   experiment,
   env,
 }: MarksElementOptions): ElementNode {
@@ -160,6 +184,11 @@ export function MarksElementRebrand({
                     .paypal-mark-rebrand .paypal-logo:last-child {
                         margin-right: 0px;
                     }
+
+                    .paypal-mark-rebrand .paypal-logo-paypal-rebrand {
+                        padding-top: 2px;
+                        margin-right: ${toPx(rebrandHeight / 5)};
+                    }
                 `}
       </style>
       <div class="paypal-marks-rebrand">
@@ -167,6 +196,7 @@ export function MarksElementRebrand({
           <Mark
             fundingEligibility={fundingEligibility}
             fundingSource={fundingSource}
+            markVariation={markVariation}
             experiment={experiment}
             env={env}
           />

package/src/marks/templateRebrand.test.jsx

@@ -0,0 +1,101 @@
+/* @noflow */
+import { describe, test, expect, vi } from "vitest";
+import { FUNDING, ENV } from "@paypal/sdk-constants/src";
+
+import { MARK_VARIATIONS } from "../constants";
+
+import { MarksElementRebrand } from "./templateRebrand";
+
+// Mock dependencies
+vi.mock("@paypal/sdk-client/src", () => ({
+  getLocale: vi.fn(() => ({ country: "US", lang: "en" })),
+}));
+
+vi.mock("../funding", () => ({
+  getFundingConfig: vi.fn(() => ({
+    [FUNDING.PAYPAL]: {
+      Logo: vi.fn(() => ({ type: "PayPalLogo", props: {} })),
+      Mark: vi.fn(() => ({ type: "PayPalMark", props: {} })),
+    },
+    [FUNDING.VENMO]: {
+      Logo: vi.fn(() => ({ type: "VenmoLogo", props: {} })),
+    },
+    [FUNDING.CREDIT]: {
+      Logo: vi.fn(() => ({ type: "CreditLogo", props: {} })),
+    },
+  })),
+}));
+
+vi.mock("../funding/paypal/monogramMark", () => ({
+  PayPalMonogramMark: vi.fn(() => ({ type: "PayPalMonogramMark", props: {} })),
+}));
+
+describe("templateRebrand Mark variation logic", () => {
+  const baseProps = {
+    fundingEligibility: { paypal: { eligible: true, branded: true } },
+    experiment: { isPaypalRebrandEnabled: true },
+    env: ENV.SANDBOX,
+    height: 32,
+  };
+
+  // Helper to get the Mark component props
+  const getMarkProps = (fundingSource, markVariation) => {
+    const element = MarksElementRebrand({
+      ...baseProps,
+      fundingSources: [fundingSource],
+      markVariation,
+    });
+
+    const marksDiv = element.children.find(
+      (child) => child?.props?.class === "paypal-marks-rebrand"
+    );
+
+    return marksDiv?.children?.[0]?.props;
+  };
+
+  // 1. Monogram renders when variationName: "monogram" with FUNDING.PAYPAL
+  test("renders monogram when markVariation is 'monogram' with FUNDING.PAYPAL", () => {
+    const props = getMarkProps(FUNDING.PAYPAL, MARK_VARIATIONS.MONOGRAM);
+
+    expect(props.fundingSource).toBe(FUNDING.PAYPAL);
+    expect(props.markVariation).toBe(MARK_VARIATIONS.MONOGRAM);
+  });
+
+  // 2. Wordmark renders when variationName is undefined or "wordmark"
+  test("renders wordmark when markVariation is undefined", () => {
+    const props = getMarkProps(FUNDING.PAYPAL, undefined);
+
+    expect(props.fundingSource).toBe(FUNDING.PAYPAL);
+    expect(props.markVariation).toBeUndefined();
+  });
+
+  test("renders wordmark when markVariation is 'wordmark'", () => {
+    const props = getMarkProps(FUNDING.PAYPAL, MARK_VARIATIONS.WORDMARK);
+
+    expect(props.fundingSource).toBe(FUNDING.PAYPAL);
+    expect(props.markVariation).toBe(MARK_VARIATIONS.WORDMARK);
+  });
+
+  // 3. Non-PayPal funding sources ignore markVariation entirely
+  test("ignores markVariation for FUNDING.VENMO", () => {
+    const props = getMarkProps(FUNDING.VENMO, MARK_VARIATIONS.MONOGRAM);
+
+    expect(props.fundingSource).toBe(FUNDING.VENMO);
+    expect(props.markVariation).toBe(MARK_VARIATIONS.MONOGRAM);
+  });
+
+  test("ignores markVariation for FUNDING.CREDIT", () => {
+    const props = getMarkProps(FUNDING.CREDIT, MARK_VARIATIONS.MONOGRAM);
+
+    expect(props.fundingSource).toBe(FUNDING.CREDIT);
+    expect(props.markVariation).toBe(MARK_VARIATIONS.MONOGRAM);
+  });
+
+  // 4. Fallback to wordmark for unrecognized markVariation values
+  test("falls back to wordmark for unrecognized markVariation values", () => {
+    const props = getMarkProps(FUNDING.PAYPAL, "invalid-variation");
+
+    expect(props.fundingSource).toBe(FUNDING.PAYPAL);
+    expect(props.markVariation).toBe("invalid-variation");
+  });
+});