@paypal/checkout-components 5.0.296 → 5.0.297

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.296",
+  "version": "5.0.297",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -109,9 +109,9 @@
     "@krakenjs/zalgo-promise": "^2.0.0",
     "@krakenjs/zoid": "^10.3.1",
     "@paypal/common-components": "^1.0.35",
-    "@paypal/funding-components": "^1.0.31",
     "@paypal/connect-loader-component": "1.1.1",
-    "@paypal/sdk-client": "^4.0.179",
+    "@paypal/funding-components": "^1.0.31",
+    "@paypal/sdk-client": "^4.0.180",
     "@paypal/sdk-constants": "^1.0.133",
     "@paypal/sdk-logos": "^2.2.6"
   },

package/src/connect/component.jsx

@@ -5,6 +5,7 @@ import {
   getClientID,
   getClientMetadataID,
   getUserIDToken,
+  getSDKToken,
   getLogger,
   getEnv,
   loadFraudnet,
@@ -52,7 +53,7 @@ export function getSdkVersion(version: string | null): string {
 export const getConnectComponent = async (merchantProps = {}) => {
   const cmid = getClientMetadataID() || getSessionID();
   const clientId = getClientID();
-  const userIdToken = getUserIDToken();
+  const sdkToken = getSDKToken() || getUserIDToken();
   const env = getEnv();
   const cspNonce = getCSPNonce();
 
@@ -107,7 +108,7 @@ export const getConnectComponent = async (merchantProps = {}) => {
       ...merchantProps, // AXO specific props
       platformOptions: {
         platform: "PPCP",
-        userIdToken,
+        userIdToken: sdkToken,
         clientId,
         fraudnet: collect,
         clientMetadataId: cmid,

package/src/connect/component.test.js

@@ -1,10 +1,6 @@
 /* @flow */
 
-import {
-  getClientID,
-  getClientMetadataID,
-  getUserIDToken,
-} from "@paypal/sdk-client/src";
+import { getUserIDToken, getSDKToken } from "@paypal/sdk-client/src";
 import { loadAxo } from "@paypal/connect-loader-component";
 import { describe, expect, test, vi } from "vitest";
 
@@ -20,6 +16,7 @@ vi.mock("@paypal/sdk-client/src", () => {
     getClientID: vi.fn(() => "mock-client-id"),
     getClientMetadataID: vi.fn(() => "mock-cmid"),
     getUserIDToken: vi.fn(() => "mock-uid"),
+    getSDKToken: vi.fn().mockReturnValue("mock-sdk-token"),
     getDebug: vi.fn(() => false),
     getLogger: vi.fn(() => ({
       metric: vi.fn().mockReturnThis(),
@@ -27,7 +24,7 @@ vi.mock("@paypal/sdk-client/src", () => {
       track: vi.fn().mockReturnThis(),
       flush: vi.fn().mockReturnThis(),
     })),
-    getEnv: vi.fn(),
+    getEnv: vi.fn().mockReturnValue("mock-env"),
     getCSPNonce: vi.fn(),
     loadFraudnet: vi.fn(() => ({ collect: vi.fn() })),
   };
@@ -59,13 +56,36 @@ describe("getConnectComponent: returns ConnectComponent", () => {
     loadAxo.mockResolvedValue({ metadata: mockAxoMetadata });
   });
 
-  test("loadAxo and window.braintree.connect.create are called with proper data", async () => {
+  test("uses user id token if no sdk token is present", async () => {
+    // $FlowIssue
+    getUserIDToken.mockReturnValue("user-id-token");
+    // $FlowIssue
+    getSDKToken.mockReturnValue(undefined);
+
     await getConnectComponent(mockProps);
 
-    expect(getClientID).toHaveBeenCalled();
-    expect(getClientMetadataID).toHaveBeenCalled();
-    expect(getUserIDToken).toHaveBeenCalled();
-    expect(loadAxo).toHaveBeenCalled();
+    expect(window.braintree.connect.create).toHaveBeenCalledWith({
+      ...mockAxoMetadata,
+      ...mockProps,
+      platformOptions: {
+        platform: "PPCP",
+        clientId: "mock-client-id",
+        clientMetadataId: "mock-cmid",
+        userIdToken: "user-id-token",
+        fraudnet: expect.any(Function),
+        env: "mock-env",
+      },
+    });
+    expect(sendCountMetric).toBeCalledTimes(2);
+  });
+
+  test("uses sdk token if present", async () => {
+    // $FlowIssue
+    getUserIDToken.mockReturnValue("user-id-token");
+    // $FlowIssue
+    getSDKToken.mockReturnValue("sdk-client-token");
+
+    await getConnectComponent(mockProps);
 
     expect(window.braintree.connect.create).toHaveBeenCalledWith({
       ...mockAxoMetadata,
@@ -74,7 +94,7 @@ describe("getConnectComponent: returns ConnectComponent", () => {
         platform: "PPCP",
         clientId: "mock-client-id",
         clientMetadataId: "mock-cmid",
-        userIdToken: "mock-uid",
+        userIdToken: "sdk-client-token",
         fraudnet: expect.any(Function),
         env: "mock-env",
       },
@@ -132,12 +152,8 @@ describe("getSdkVersion", () => {
   });
 
   test("throws error if the version passed is not supported for AXO and is not null", () => {
-    const result1 = getSdkVersion("3.96.00");
-    const result2 = getSdkVersion("2.87.alpha-test");
-    const result3 = getSdkVersion("3.34.beta-test");
-
-    expect(result1).toThrowError();
-    expect(result2).toThrowError();
-    expect(result3).toThrowError();
+    expect(() => getSdkVersion("3.96.00")).toThrowError();
+    expect(() => getSdkVersion("2.87.alpha-test")).toThrowError();
+    expect(() => getSdkVersion("3.34.beta-test")).toThrowError();
   });
 });

package/src/connect/interface.js

@@ -1,17 +1,24 @@
-/* eslint-disable flowtype/no-weak-types */
 /* @flow */
-// flow-disable
-import { memoize } from "@krakenjs/belter/src";
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-restricted-globals, promise/no-native */
+
+import { memoize, type Memoized } from "@krakenjs/belter/src";
 
 import { getConnectComponent } from "./component";
 
-type ConnectComponent = (merchantProps: any) => ConnectComponent;
+type MerchantProps = {||};
+// This needs to be typed, this is coming from the fastlane team i believe
+type FastlaneExternalComponent = {||};
+
+type ConnectComponent = (merchantProps: MerchantProps) => ConnectComponent;
 // $FlowFixMe
-export const Connect: (merchantProps: any) => ConnectComponent = memoize(
-  async (merchantProps: any): ConnectComponent => {
+export const Connect: (merchantProps: MerchantProps) => ConnectComponent =
+  memoize(async (merchantProps: MerchantProps): ConnectComponent => {
     // $FlowFixMe
     return await getConnectComponent(merchantProps);
-  }
-);
+  });
 
-/* eslint-enable flowtype/no-weak-types */
+export const Fastlane = (
+  merchantProps: MerchantProps
+): Memoized<() => Promise<FastlaneExternalComponent>> =>
+  memoize(() => getConnectComponent(merchantProps));

package/src/constants/button.js

@@ -39,6 +39,7 @@ export const BUTTON_SIZE = {
 export const BUTTON_SHAPE = {
   PILL: ("pill": "pill"),
   RECT: ("rect": "rect"),
+  SHARP: ("sharp": "sharp"),
 };
 
 export const BUTTON_LAYOUT = {

package/src/constants/class.js

@@ -12,6 +12,7 @@ export const CLASS = {
   COLOR: ("paypal-button-color": "paypal-button-color"),
   TEXT_COLOR: ("paypal-button-text-color": "paypal-button-text-color"),
   SHAPE: ("paypal-button-shape": "paypal-button-shape"),
+  BORDER_RADIUS: ("paypal-button-border-radius": "paypal-button-border-radius"),
   LAYOUT: ("paypal-button-layout": "paypal-button-layout"),
   NUMBER: ("paypal-button-number": "paypal-button-number"),
   ENV: ("paypal-button-env": "paypal-button-env"),

package/src/funding/common.jsx

@@ -217,7 +217,7 @@ export const DEFAULT_FUNDING_CONFIG: FundingSourceConfig = {
     [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
   },
 
-  shapes: [BUTTON_SHAPE.RECT, BUTTON_SHAPE.PILL],
+  shapes: [BUTTON_SHAPE.RECT, BUTTON_SHAPE.PILL, BUTTON_SHAPE.SHARP],
 
   textColors: {
     [DEFAULT]: BUTTON_COLOR.BLACK,

package/src/ui/buttons/button.jsx

@@ -39,6 +39,7 @@ import type {
 } from "./props";
 import { Spinner } from "./spinner";
 import { MenuButton } from "./menu-button";
+import { isBorderRadiusNumber } from "./util";
 
 type IndividualButtonProps = {|
   style: ButtonStyle,
@@ -88,7 +89,7 @@ export function Button({
   instrument,
   showPayLabel,
 }: IndividualButtonProps): ElementNode {
-  const { layout, shape } = style;
+  const { layout, shape, borderRadius } = style;
 
   const fundingConfig = getFundingConfig()[fundingSource];
 
@@ -261,6 +262,9 @@ export function Button({
 
   const shouldShowWalletMenu =
     isWallet && instrument && showWalletMenu({ instrument, userIDToken });
+  const borderRadiusClass = isBorderRadiusNumber(borderRadius)
+    ? CLASS.BORDER_RADIUS
+    : `${CLASS.SHAPE}-${shape}`;
 
   return (
     <div
@@ -268,7 +272,6 @@ export function Button({
         CLASS.BUTTON_ROW,
         `${CLASS.NUMBER}-${i}`,
         `${CLASS.LAYOUT}-${layout}`,
-        `${CLASS.SHAPE}-${shape}`,
         `${CLASS.NUMBER}-${
           multiple ? BUTTON_NUMBER.MULTIPLE : BUTTON_NUMBER.SINGLE
         }`,
@@ -279,6 +282,7 @@ export function Button({
         `${isWallet ? CLASS.WALLET : ""}`,
         `${shouldShowWalletMenu ? CLASS.WALLET_MENU : ""}`,
         `${buttonDesignContainerClass}`,
+        `${borderRadiusClass}`,
       ].join(" ")}
     >
       <div
@@ -300,7 +304,6 @@ export function Button({
           CLASS.BUTTON,
           `${CLASS.NUMBER}-${i}`,
           `${CLASS.LAYOUT}-${layout}`,
-          `${CLASS.SHAPE}-${shape}`,
           `${CLASS.NUMBER}-${
             multiple ? BUTTON_NUMBER.MULTIPLE : BUTTON_NUMBER.SINGLE
           }`,
@@ -309,6 +312,7 @@ export function Button({
           `${CLASS.TEXT_COLOR}-${textColor}`,
           `${LOGO_CLASS.LOGO_COLOR}-${logoColor}`,
           `${isWallet ? CLASS.WALLET : ""}`,
+          `${borderRadiusClass}`,
         ].join(" ")}
         onClick={clickHandler}
         onRender={onButtonRender}

package/src/ui/buttons/props.js

@@ -44,6 +44,7 @@ import {
 import { getFundingConfig, isFundingEligible } from "../../funding";
 
 import { BUTTON_SIZE_STYLE } from "./config";
+import { isBorderRadiusNumber } from "./util";
 
 export type CreateOrderData = {||} | {||};
 
@@ -319,6 +320,7 @@ export type ButtonStyle = {|
   period?: number,
   height?: number,
   disableMaxWidth?: boolean,
+  borderRadius?: number,
 |};
 
 export type ButtonStyleInputs = {|
@@ -330,6 +332,7 @@ export type ButtonStyleInputs = {|
   period?: number | void,
   height?: number | void,
   disableMaxWidth?: boolean | void,
+  borderRadius?: number | void,
 |};
 
 type PersonalizationComponentProps = {|
@@ -621,6 +624,7 @@ export function normalizeButtonStyle(
     period,
     menuPlacement = MENU_PLACEMENT.BELOW,
     disableMaxWidth,
+    borderRadius,
   } = style;
 
   // $FlowFixMe
@@ -675,6 +679,20 @@ export function normalizeButtonStyle(
     }
   }
 
+  if (borderRadius !== undefined) {
+    if (!isBorderRadiusNumber(borderRadius)) {
+      throw new TypeError(
+        `Expected style.borderRadius to be a number, got: ${borderRadius}`
+      );
+    }
+
+    if (borderRadius < 0) {
+      throw new Error(
+        `Expected style.borderRadius to be greater than or equal to 0, got: ${borderRadius}`
+      );
+    }
+  }
+
   if (layout === BUTTON_LAYOUT.VERTICAL) {
     if (tagline) {
       throw new Error(
@@ -693,6 +711,7 @@ export function normalizeButtonStyle(
     period,
     menuPlacement,
     disableMaxWidth,
+    borderRadius,
   };
 }
 

package/src/ui/buttons/style.jsx

@@ -18,8 +18,13 @@ export function Style({
   nonce,
   fundingEligibility,
 }: StyleProps): ElementNode {
-  const { height, disableMaxWidth } = style;
-  const css = componentStyle({ height, fundingEligibility, disableMaxWidth });
+  const { height, disableMaxWidth, borderRadius } = style;
+  const css = componentStyle({
+    height,
+    fundingEligibility,
+    disableMaxWidth,
+    borderRadius,
+  });
 
   return <style nonce={nonce} innerHTML={css} />;
 }

package/src/ui/buttons/styles/base.js

@@ -12,10 +12,12 @@ export function componentStyle({
   height,
   fundingEligibility,
   disableMaxWidth,
+  borderRadius,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
   disableMaxWidth?: ?boolean,
+  borderRadius?: ?number,
 |}): string {
   return `
         ${pageStyle}
@@ -26,6 +28,7 @@ export function componentStyle({
           height,
           fundingEligibility,
           disableMaxWidth,
+          borderRadius,
         })}
     `;
 }

package/src/ui/buttons/styles/responsive.js

@@ -14,6 +14,7 @@ import {
   ATTRIBUTE,
 } from "../../../constants";
 import { BUTTON_SIZE_STYLE, BUTTON_RELATIVE_STYLE } from "../config";
+import { isBorderRadiusNumber } from "../util";
 
 const BUTTON_MIN_ASPECT_RATIO = 2.2;
 const MIN_SPLIT_BUTTON_WIDTH = 300;
@@ -25,10 +26,12 @@ export function buttonResponsiveStyle({
   height,
   fundingEligibility,
   disableMaxWidth,
+  borderRadius,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
   disableMaxWidth?: ?boolean,
+  borderRadius?: ?number,
 |}): string {
   return Object.keys(BUTTON_SIZE_STYLE)
     .map((size) => {
@@ -56,6 +59,8 @@ export function buttonResponsiveStyle({
 
       const labelHeight = max(roundUp(perc(buttonHeight, 35) + 5, 2), 12);
 
+      const pillBorderRadius = Math.ceil(buttonHeight / 2);
+
       return `
             @media only screen and (min-width: ${style.minWidth}px) {
 
@@ -147,15 +152,42 @@ export function buttonResponsiveStyle({
       }] .${CLASS.BUTTON_LABEL} .${CLASS.SPACE} {
                     line-height: ${perc(buttonHeight, 50) + 5}px;
                 }
+                
+                .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
+                  ${
+                    borderRadius && isBorderRadiusNumber(borderRadius)
+                      ? `border-radius: ${borderRadius}px`
+                      : ""
+                  }
+                }
+
+                .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
+                  border-radius: 0px;
+                }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
                     border-radius: 4px;
                 }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
-                    border-radius: ${Math.ceil(buttonHeight / 2)}px;
+                    border-radius: ${pillBorderRadius}px;
+                }
+
+                .${CLASS.BUTTON_ROW}.${CLASS.BORDER_RADIUS} .menu-button {
+                  ${
+                    borderRadius && isBorderRadiusNumber(borderRadius)
+                      ? `border-top-right-radius: ${borderRadius}px; border-bottom-right-radius: ${borderRadius}px`
+                      : ""
+                  }
                 }
 
+                .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
+        BUTTON_SHAPE.SHARP
+      } .menu-button {
+                              border-top-right-radius: 0px;
+                              border-bottom-right-radius: 0px;
+                          }
+
                 .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
         BUTTON_SHAPE.RECT
       } .menu-button {
@@ -166,10 +198,8 @@ export function buttonResponsiveStyle({
                 .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
         BUTTON_SHAPE.PILL
       } .menu-button {
-                    border-top-right-radius: ${Math.ceil(buttonHeight / 2)}px;
-                    border-bottom-right-radius: ${Math.ceil(
-                      buttonHeight / 2
-                    )}px;
+                    border-top-right-radius: ${pillBorderRadius}px;
+                    border-bottom-right-radius: ${pillBorderRadius}px;
                 }
                 
                 .${CLASS.TAGLINE} .${CLASS.TEXT} {

package/src/ui/buttons/util.js

@@ -0,0 +1,5 @@
+/* @flow */
+
+export function isBorderRadiusNumber(borderRadius?: number): boolean {
+  return typeof borderRadius === "number";
+}