@paypal/checkout-components 5.0.400 → 5.0.402

package/package.json

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

package/src/constants/class.js

@@ -54,4 +54,6 @@ export const CLASS = {
 
   BUTTON_MESSAGE_RESERVE:
     ("paypal-button-message-reserved": "paypal-button-message-reserved"),
+
+  DISABLED: ("paypal-button-disabled": "paypal-button-disabled"),
 };

package/src/ui/buttons/button.jsx

@@ -72,6 +72,7 @@ type IndividualButtonProps = {|
   instrument: ?WalletInstrument,
   showPayLabel: boolean,
   showLoadingSpinner?: boolean,
+  disabled?: boolean,
 |};
 
 export function Button({
@@ -97,6 +98,7 @@ export function Button({
   userIDToken,
   vault,
   showLoadingSpinner = false,
+  disabled = false,
 }: IndividualButtonProps): ElementNode {
   const { layout, shape, borderRadius } = style;
 
@@ -311,6 +313,7 @@ export function Button({
           CLASS.BUTTON,
           `${shouldApplyRebrandedStyles ? CLASS.BUTTON_REBRAND : ""}`,
           `${showLoadingSpinner ? CLASS.LOADING : ""}`,
+          `${disabled ? CLASS.DISABLED : ""}`,
           `${CLASS.NUMBER}-${i}`,
           `${CLASS.LAYOUT}-${layout}`,
           `${CLASS.NUMBER}-${
@@ -326,7 +329,8 @@ export function Button({
         onClick={clickHandler}
         onRender={onButtonRender}
         onKeyPress={keypressHandler}
-        tabindex="0"
+        tabindex={showLoadingSpinner || disabled ? "-1" : "0"}
+        aria-disabled={showLoadingSpinner || disabled ? "true" : "false"}
         aria-label={labelText}
       >
         <div class={CLASS.BUTTON_LABEL} aria-hidden="true">

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

@@ -0,0 +1,59 @@
+/* @flow */
+import { describe, test, expect } from "vitest";
+import { noop } from "@krakenjs/belter/src";
+
+import { CLASS } from "../../constants/class";
+
+import { Button } from "./button";
+
+describe("Button", () => {
+  test("should apply the disabled class if the disabled prop is passed", () => {
+    const mockedButtonProps = {
+      buyerCountry: "US",
+      commit: false,
+      content: null,
+      customerId: null,
+      env: "test",
+      experiment: {},
+      flow: "purchase",
+      fundingEligibility: {},
+      fundingSource: "paypal",
+      i: 0,
+      instrument: null,
+      locale: "en_US",
+      multiple: false,
+      nonce: "",
+      onClick: noop,
+      personalization: null,
+      showPayLabel: false,
+      style: {
+        layout: "horizontal",
+        shape: "rect",
+        borderRadius: 0,
+        color: "gold",
+        label: "paypal",
+      },
+      tagline: false,
+      userIDToken: null,
+      vault: false,
+      disabled: true,
+    };
+
+    // $FlowFixMe
+    const jsxElem = Button(mockedButtonProps);
+
+    // Check that the button has the disabled class
+    const buttonElement = jsxElem?.children?.find(
+      // $FlowFixMe
+      (elem) => elem?.props?.class?.includes(CLASS.DISABLED)
+    );
+
+    expect(buttonElement).toBeDefined();
+    expect(
+      jsxElem?.children?.some(
+        // $FlowFixMe
+        (elem) => elem?.props?.class?.includes(CLASS.DISABLED)
+      )
+    ).toBe(true);
+  });
+});

package/src/ui/buttons/buttons.jsx

@@ -128,6 +128,7 @@ type ButtonsProps = ButtonPropsInputs & {|
   onClick?: Function,
   wallet?: ?Wallet,
   showLoadingSpinner?: boolean,
+  disabled?: boolean,
 |};
 
 export function validateButtonProps(props: ButtonPropsInputs) {
@@ -135,7 +136,11 @@ export function validateButtonProps(props: ButtonPropsInputs) {
 }
 
 export function Buttons(props: ButtonsProps): ElementNode {
-  const { onClick = noop, showLoadingSpinner = false } = props;
+  const {
+    onClick = noop,
+    showLoadingSpinner = false,
+    disabled = false,
+  } = props;
   const {
     applePaySupport,
     buyerCountry,
@@ -296,6 +301,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
           instrument={instruments[source]}
           showPayLabel={showPayLabel}
           showLoadingSpinner={showLoadingSpinner}
+          disabled={disabled}
         />
       ))}
 

package/src/ui/buttons/props.js

@@ -568,6 +568,14 @@ type ThrowErrorForInvalidButtonColorArgs = {|
 export type ButtonProps = {|
   // app switch properties
   appSwitchWhenAvailable: boolean,
+
+  // Disabled state
+  disabled?: boolean,
+
+  preferences?: {|
+    appSwitchWhenAvailable?: boolean,
+    launchAppSwitchIn?: "newTab" | "sameTab",
+  |},
   listenForHashChanges: () => void,
   removeListenerForHashChanges: () => void,
   // Not passed to child iframe

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

@@ -35,6 +35,13 @@ export const buttonStyle = `
         overflow: hidden;
     }
 
+
+    .${CLASS.BUTTON}.${CLASS.DISABLED} {
+        pointer-events: none !important;
+        cursor: not-allowed !important;
+        opacity: 0.6 !important;
+    }
+
     .${CLASS.BUTTON} * {
         cursor: pointer;
     }

package/src/ui/overlay/paypal-app-switch/overlay.jsx

@@ -11,7 +11,7 @@ import { getContainerStyle, getSandboxStyle } from "./style";
 type OverlayProps = {|
   buttonSessionID: string,
   close: () => ZalgoPromise<void>,
-  focus: () => ZalgoPromise<void>,
+  focus?: () => ZalgoPromise<void>,
 |};
 
 export function PayPalAppSwitchOverlay({
@@ -47,7 +47,9 @@ export function PayPalAppSwitchOverlay({
     e.preventDefault();
     e.stopPropagation();
 
-    focus();
+    if (focus) {
+      focus();
+    }
   }
 
   const setupShowAnimation = () => (el) => {
@@ -90,14 +92,16 @@ export function PayPalAppSwitchOverlay({
                 <div class="paypal-checkout-message">
                   {content.windowMessage}
                 </div>
-                <div class="paypal-checkout-continue">
-                  {/* This handler should be guarded with e.stopPropagation. 
-                        This will stop the event from bubbling up to the overlay click handler
-                        and causing unexpected behavior. */}
-                  <a onClick={focusCheckout} href="#">
-                    {content.continueMessage}
-                  </a>
-                </div>
+                {focus ? (
+                  <div class="paypal-checkout-continue">
+                    {/* This handler should be guarded with e.stopPropagation.
+                          This will stop the event from bubbling up to the overlay click handler
+                          and causing unexpected behavior. */}
+                    <a onClick={focusCheckout} href="#">
+                      {content.continueMessage}
+                    </a>
+                  </div>
+                ) : null}
               </div>
               <style nonce={nonce}>{getContainerStyle({ uid })}</style>
             </div>

package/src/zoid/buttons/component.jsx

@@ -325,12 +325,25 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
     },
 
     props: {
+      disabled: {
+        type: "boolean",
+        queryParam: true,
+        required: false,
+      },
+
       appSwitchWhenAvailable: {
         type: "boolean",
         queryParam: true,
         required: false,
       },
 
+      preferences: {
+        type: "object",
+        queryParam: true,
+        required: false,
+        serialization: "json",
+      },
+
       showPayPalAppSwitchOverlay: {
         type: "function",
         queryParam: false,