@paypal/checkout-components 5.0.412-alpha-84b7728.0 → 5.0.413

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

@@ -398,7 +398,7 @@ const expectedRebrandDisableMaxHeightStylesTiny = {
   buttonHeight: 25,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY],
-  labelHeight: 13,
+  labelHeight: 19,
   fontSize: 10,
   marginTop: 1,
   pillBorderRadius: 13,
@@ -412,7 +412,7 @@ const expectedRebrandDisableMaxHeightStylesSmall = {
   buttonHeight: 30,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL],
-  labelHeight: 15,
+  labelHeight: 23,
   fontSize: 11,
   marginTop: 1,
   pillBorderRadius: 15,
@@ -428,7 +428,7 @@ const expectedRebrandDisableMaxHeightStylesMediumSmall = {
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[
       BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL
     ],
-  labelHeight: 18,
+  labelHeight: 27,
   fontSize: 13,
   marginTop: 1,
   pillBorderRadius: 18,
@@ -442,7 +442,7 @@ const expectedRebrandDisableMaxHeightStylesMediumBig = {
   buttonHeight: 40,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG],
-  labelHeight: 20,
+  labelHeight: 30,
   fontSize: 14,
   marginTop: 1,
   pillBorderRadius: 20,
@@ -456,7 +456,7 @@ const expectedRebrandDisableMaxHeightStylesLargeSmall = {
   buttonHeight: 45,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL],
-  labelHeight: 23,
+  labelHeight: 34,
   fontSize: 16,
   marginTop: 2,
   pillBorderRadius: 23,
@@ -470,7 +470,7 @@ const expectedRebrandDisableMaxHeightStylesLargeBig = {
   buttonHeight: 50,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG],
-  labelHeight: 25,
+  labelHeight: 38,
   fontSize: 18,
   marginTop: 2,
   pillBorderRadius: 25,
@@ -484,7 +484,7 @@ const expectedRebrandDisableMaxHeightStylesXL = {
   buttonHeight: 55,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL],
-  labelHeight: 28,
+  labelHeight: 42,
   fontSize: 20,
   marginTop: 2,
   pillBorderRadius: 28,
@@ -498,7 +498,7 @@ const expectedRebrandDisableMaxHeightStylesXXL = {
   buttonHeight: 65,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL],
-  labelHeight: 33,
+  labelHeight: 49,
   fontSize: 23,
   marginTop: 2,
   pillBorderRadius: 33,
@@ -512,7 +512,7 @@ const expectedRebrandDisableMaxHeightStylesXXXL = {
   buttonHeight: 75,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL],
-  labelHeight: 38,
+  labelHeight: 57,
   fontSize: 27,
   marginTop: 3,
   pillBorderRadius: 38,
@@ -532,7 +532,7 @@ const expectedRebrandedResponsiveStylesExtraSmall = {
   minWidth: 50,
   minDualWidth: 300,
   maxWidth: 75,
-  fontSize: 10,
+  fontSize: 12,
 };
 
 const expectedRebrandedResponsiveStylesTiny = {
@@ -546,7 +546,7 @@ const expectedRebrandedResponsiveStylesTiny = {
   minWidth: 75,
   minDualWidth: 300,
   maxWidth: 200,
-  fontSize: 10,
+  fontSize: 12,
 };
 
 const expectedRebrandedResponsiveStylesSmall = {
@@ -560,7 +560,7 @@ const expectedRebrandedResponsiveStylesSmall = {
   minWidth: 200,
   minDualWidth: 300,
   maxWidth: 250,
-  fontSize: 12,
+  fontSize: 14,
 };
 
 const expectedRebrandedResponsiveStylesMediumSmall = {
@@ -574,7 +574,7 @@ const expectedRebrandedResponsiveStylesMediumSmall = {
   minWidth: 250,
   minDualWidth: 300,
   maxWidth: 300,
-  fontSize: 14,
+  fontSize: 16,
 };
 
 const expectedRebrandedResponsiveStylesMediumBig = {
@@ -588,7 +588,7 @@ const expectedRebrandedResponsiveStylesMediumBig = {
   minWidth: 300,
   minDualWidth: 300,
   maxWidth: 350,
-  fontSize: 14,
+  fontSize: 16,
 };
 
 const expectedRebrandedResponsiveStylesLargeSmall = {
@@ -602,7 +602,7 @@ const expectedRebrandedResponsiveStylesLargeSmall = {
   minWidth: 350,
   minDualWidth: 300,
   maxWidth: 425,
-  fontSize: 16,
+  fontSize: 18,
 };
 
 const expectedRebrandedResponsiveStylesLargeBig = {
@@ -616,7 +616,7 @@ const expectedRebrandedResponsiveStylesLargeBig = {
   minWidth: 425,
   minDualWidth: 300,
   maxWidth: 500,
-  fontSize: 18,
+  fontSize: 20,
 };
 
 const expectedRebrandedResponsiveStylesXlSmall = {
@@ -629,8 +629,36 @@ const expectedRebrandedResponsiveStylesXlSmall = {
   maxHeight: 60,
   minWidth: 500,
   minDualWidth: 300,
+  maxWidth: 550,
+  fontSize: 22,
+};
+
+const expectedRebrandedResponsiveStylesXlBig = {
+  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.XL_BIG],
+  buttonHeight: 55,
+  pillBorderRadius: 28,
+  gap: 7,
+  defaultHeight: 55,
+  minHeight: 60,
+  maxHeight: 65,
+  minWidth: 550,
+  minDualWidth: 300,
+  maxWidth: 650,
+  fontSize: 24,
+};
+
+const expectedRebrandedResponsiveStylesXXL = {
+  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.XXL],
+  buttonHeight: 55,
+  pillBorderRadius: 28,
+  gap: 7,
+  defaultHeight: 55,
+  minHeight: 65,
+  maxHeight: 100,
+  minWidth: 650,
+  minDualWidth: 300,
   maxWidth: 750,
-  fontSize: 18,
+  fontSize: 26,
 };
 
 describe("test responsive style variables for legacy", () => {
@@ -756,12 +784,20 @@ describe("test responsive style variables for rebranded buttons", () => {
       input: BUTTON_REDESIGN_SIZE.XL_SMALL,
       expected: expectedRebrandedResponsiveStylesXlSmall,
     },
+    {
+      input: BUTTON_REDESIGN_SIZE.XL_BIG,
+      expected: expectedRebrandedResponsiveStylesXlBig,
+    },
+    {
+      input: BUTTON_REDESIGN_SIZE.XXL,
+      expected: expectedRebrandedResponsiveStylesXXL,
+    },
   ])(
     `should return rebrand responsive styles for size $input`,
     ({ input, expected }) => {
       expect(
         getResponsiveRebrandedStyleVariables({
-          redesignSize: input,
+          redesign_size: input,
         })
       ).toEqual(expected);
     }

package/src/ui/buttons/tagline.jsx

@@ -42,7 +42,9 @@ export function TagLine({
     <div class={CLASS.TAGLINE}>
       {tagline ? (
         <Fragment>
-          {tagline.Component ? <tagline.Component /> : tagline.text}
+          <span>
+            {tagline.Component ? <tagline.Component /> : tagline.text}
+          </span>
           {tagline.tracking && tagline.tracking.impression && (
             <TrackingBeacon url={tagline.tracking.impression} nonce={nonce} />
           )}

package/src/ui/saved-payment-methods/index.js

@@ -0,0 +1,3 @@
+/* @flow */
+
+export * from "./template";

package/src/ui/saved-payment-methods/template.jsx

@@ -0,0 +1,255 @@
+/* @flow */
+/** @jsx node */
+
+import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
+import { PPRebrandLogo } from "@paypal/sdk-logos/src";
+
+import type { SavedPaymentMethodsStyleInputs } from "../../zoid/saved-payment-methods/props";
+import { validateSavedPaymentMethodsStyle } from "../../zoid/saved-payment-methods/util";
+
+export type SavedPaymentMethodsServerRenderProps = {|
+  nonce?: string,
+  style?: SavedPaymentMethodsStyleInputs,
+|};
+
+export function validateSavedPaymentMethodsProps(props: {|
+  style?: SavedPaymentMethodsStyleInputs,
+|}) {
+  validateSavedPaymentMethodsStyle(props?.style);
+}
+
+const DEFAULT_STYLE_CONFIG = {
+  root: {
+    backgroundColor: "transparent",
+    fontFamily: "Arial, sans-serif",
+    textColorBase: "#000000",
+    fontSizeBase: "16px",
+    primaryColor: "#000000",
+  },
+  component: {
+    height: "32px",
+    padding: "6px 9px",
+    borderRadius: "6px",
+    borderColor: "transparent",
+    borderWidth: "0",
+  },
+  layout: {
+    logo: true,
+    label: true,
+    message: true,
+    logoWidth: "45px",
+    logoLabelGap: "12px",
+    labelFiGap: "8px",
+    labelFontSize: "16px",
+    fiTextFontSize: "14px",
+    iconSize: "28px",
+  },
+};
+
+function getStyleConfig(style?: SavedPaymentMethodsStyleInputs): Object {
+  const s = style || {};
+  return {
+    root: {
+      ...DEFAULT_STYLE_CONFIG.root,
+      ...(s.root || {}),
+    },
+    component: {
+      ...DEFAULT_STYLE_CONFIG.component,
+      ...(s.component || {}),
+    },
+    layout: {
+      ...DEFAULT_STYLE_CONFIG.layout,
+      ...(s.layout || {}),
+    },
+  };
+}
+
+/**
+ * Server-only render (commonjs2 / web: false) — mirrors smart buttons `Buttons()`.
+ * Non-interactive loading shell (styles + tag skeleton) until the iframe hydrates;
+ * shared by zoid prerender and server SSR and must match the first client paint.
+ */
+export function SavedPaymentMethods(
+  props: SavedPaymentMethodsServerRenderProps
+): ElementNode {
+  const { nonce, style } = props;
+  const styleConfig = getStyleConfig(style);
+  const shouldRenderMessageContainer = Boolean(styleConfig.layout.message);
+
+  return (
+    <div>
+      <style nonce={nonce}>
+        {`
+            body {
+              margin: 0;
+            }
+            * {
+              box-sizing: border-box;
+            }
+            .saved-payment-methods-container {
+              background-color: ${styleConfig.root.backgroundColor};
+              font-family: ${styleConfig.root.fontFamily};
+              color: ${styleConfig.root.textColorBase};
+              font-size: ${styleConfig.root.fontSizeBase};
+              display: flex;
+              align-items: center;
+              min-width: 0;
+            }
+
+            .spm-content {
+              min-width: 0;
+            }
+
+            .spm-label {
+              font-size: ${styleConfig.layout.labelFontSize};
+              font-weight: 600;
+              color: #222222;
+              margin-right: ${styleConfig.layout.labelFiGap};
+            }
+
+            .spm-logo {
+              width: ${styleConfig.layout.logoWidth};
+              margin-right: ${styleConfig.layout.logoLabelGap};
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              overflow: hidden;
+            }
+
+            .spm-logo-frame {
+              aspect-ratio: 1.5;
+              width: 100%;
+              height: 100%;
+              min-width: 0;
+              min-height: 0;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border: 1.2px solid #CCCCCC;
+              border-radius: 2px;
+            }
+
+            .spm-logo-frame img {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
+
+            #spm-app-root {
+              display: contents;
+            }
+
+            .spm-tag {
+              display: flex;
+              height: ${styleConfig.component.height};
+              align-items: center;
+              justify-content: space-between;
+              background-color: #F5F7FA;
+              padding: ${styleConfig.component.padding};
+              border-radius: ${styleConfig.component.borderRadius};
+              border-width: ${styleConfig.component.borderWidth};
+              border-color: ${styleConfig.component.borderColor};
+              border-style: solid;
+              gap: 8px;
+              min-width: 0;
+              max-width: 100%;
+              cursor: pointer;
+            }
+
+            .spm-tag-label {
+              font-size: ${styleConfig.layout.fiTextFontSize};
+              font-weight: 400;
+              color: #000000;
+              white-space: nowrap;
+            }
+
+            .spm-tag-label-fallback {
+              display: flex;
+              align-items: center;
+              min-width: 0;
+            }
+
+            .spm-tag-label-email {
+              flex: 1 1 auto;
+              min-width: 0;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              display: inline-block;
+            }
+
+            .spm-tag-label-separator {
+              flex: 0 0 auto;
+              margin: 0 4px;
+            }
+
+            .spm-tag-label-pay-in-full {
+              flex: 0 0 auto;
+              white-space: nowrap;
+            }
+
+            .spm-tag-card-icon {
+              width: ${styleConfig.layout.iconSize};
+              border-radius: 4px;
+            }
+
+            .spm-tag-edit-button svg path {
+              fill: ${styleConfig.root.primaryColor};
+            }
+
+            .spm-message {
+              height: 35px;
+              margin-top: 6px;
+              ${
+                styleConfig.layout.logo
+                  ? `
+                margin-left: calc(${styleConfig.layout.logoWidth} + ${styleConfig.layout.logoLabelGap});
+              `
+                  : ""
+              }
+            }
+
+            .spm-tag-loading {
+              display: flex;
+              height: ${styleConfig.component.height};
+              align-items: center;
+              justify-content: space-between;
+              background: linear-gradient(to right, #ffffff, #F5F7FA);
+              padding: ${styleConfig.component.padding};
+              border-radius: ${styleConfig.component.borderRadius};
+              border-width: ${styleConfig.component.borderWidth};
+              border-color: ${styleConfig.component.borderColor};
+              border-style: solid;
+              gap: 8px;
+              min-width: 124px;
+              max-width: 100%;
+            }
+
+            .spm-tag-loading.spm-tag-loading--hidden {
+              display: none !important;
+            }
+            `}
+      </style>
+      <div class="saved-payment-methods-container">
+        <div class="spm-content">
+          <div class="saved-payment-methods-container">
+            {styleConfig.layout.logo && (
+              <div class="spm-logo" aria-hidden="true">
+                <div class="spm-logo-frame">
+                  <PPRebrandLogo />
+                </div>
+              </div>
+            )}
+            {styleConfig.layout.label && <div class="spm-label">PayPal</div>}
+            <div id="spm-app-root">
+              <div class="spm-tag-loading" />
+            </div>
+          </div>
+          {shouldRenderMessageContainer && (
+            <div id="spm-message-root" class="spm-message" aria-hidden="true" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/ui/saved-payment-methods/template.test.jsx

@@ -0,0 +1,23 @@
+/* @flow */
+import { describe, expect, test } from "vitest";
+import { html } from "@krakenjs/jsx-pragmatic";
+
+import { SavedPaymentMethods } from "./template";
+
+describe("SavedPaymentMethods template (UI shell)", () => {
+  test("parses SSR markup into DOM with app root and loading skeleton", () => {
+    const markup = SavedPaymentMethods({ nonce: "test-nonce" }).render(html());
+
+    expect(typeof markup).toBe("string");
+    expect(markup.length).toBeGreaterThan(0);
+
+    const host = document.createElement("div");
+    host.innerHTML = markup;
+
+    expect(host.querySelector("style[nonce='test-nonce']")).toBeTruthy();
+    expect(host.querySelector(".saved-payment-methods-container")).toBeTruthy();
+    expect(host.querySelector("#spm-app-root")).toBeTruthy();
+    expect(host.querySelector(".spm-tag-loading")).toBeTruthy();
+    expect(host.querySelector(".spm-logo-frame")).toBeTruthy();
+  });
+});

package/src/zoid/saved-payment-methods/container.jsx

@@ -91,7 +91,6 @@ export function containerTemplate({
             top: 0;
             left: 0;
             width: 100%;
-            height: 100%;
             border: none;
           }
 

package/src/zoid/saved-payment-methods/prerender.jsx

@@ -4,6 +4,8 @@
 import { node, type ChildType } from "@krakenjs/jsx-pragmatic/src";
 import type { ZoidProps } from "@krakenjs/zoid/src";
 
+import { SavedPaymentMethods } from "../../ui/saved-payment-methods/template";
+
 import { type SavedPaymentMethodsProps } from "./props";
 
 type PrerenderedSavedPaymentMethodsProps = {|
@@ -13,32 +15,20 @@ type PrerenderedSavedPaymentMethodsProps = {|
 
 export function PrerenderedSavedPaymentMethods({
   nonce,
+  props,
 }: // props,
 PrerenderedSavedPaymentMethodsProps): ChildType {
+  const { style } = props;
   return (
     <html>
       <head>
-        <style nonce={nonce}>
-          {`
-            * {
-              box-sizing: border-box;
-            }
-            body {
-              margin: 0;
-              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            }
-            .saved-payment-methods-loading {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              height: 100vh;
-              color: #999;
-            }
-          `}
-        </style>
+        <meta charset="utf-8" />
       </head>
       <body>
-        <div class="saved-payment-methods-loading">...</div>
+        <SavedPaymentMethods
+          nonce={typeof nonce === "string" ? nonce : undefined}
+          style={style}
+        />
       </body>
     </html>
   );

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

@@ -1,71 +0,0 @@
-/* @flow */
-
-import { describe, expect, test } from "vitest";
-
-import {
-  BUTTON_REDESIGN_STYLE,
-  BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE,
-} from "../config";
-
-describe("BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE config", () => {
-  test("should include all BUTTON_REDESIGN_STYLE buckets", () => {
-    Object.keys(BUTTON_REDESIGN_STYLE).forEach((key) => {
-      expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE).toHaveProperty(key);
-    });
-  });
-
-  test("should have XL_BIG bucket with correct values", () => {
-    expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE.XL_BIG).toEqual({
-      minHeight: 60,
-      maxHeight: 65,
-      gap: 6,
-      fontSize: 20,
-    });
-  });
-
-  test("should have XXL_SMALL bucket with correct values", () => {
-    expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE.XXL_SMALL).toEqual({
-      minHeight: 65,
-      maxHeight: 70,
-      gap: 7,
-      fontSize: 22,
-    });
-  });
-
-  test("should have XXL_BIG bucket with correct values", () => {
-    expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE.XXL_BIG).toEqual({
-      minHeight: 70,
-      maxHeight: 75,
-      gap: 7,
-      fontSize: 24,
-    });
-  });
-
-  test("should have XXXL bucket with correct values", () => {
-    expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE.XXXL).toEqual({
-      minHeight: 75,
-      maxHeight: 200,
-      gap: 8,
-      fontSize: 26,
-    });
-  });
-
-  test("should have no gaps in height coverage between buckets", () => {
-    const buckets = Object.keys(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE)
-      .map((key) => BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE[key])
-      .filter((b) => b.minHeight !== undefined && b.maxHeight !== undefined)
-      .sort((a, b) => a.minHeight - b.minHeight);
-
-    for (let i = 1; i < buckets.length; i++) {
-      expect(buckets[i].minHeight).toBeLessThanOrEqual(
-        buckets[i - 1].maxHeight
-      );
-    }
-  });
-
-  test("should have continuous height coverage up to 200", () => {
-    const keys = Object.keys(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE);
-    const lastKey = keys[keys.length - 1];
-    expect(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE[lastKey].maxHeight).toBe(200);
-  });
-});