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

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);
-  });
-});