@paypal/checkout-components 5.0.401 → 5.0.402

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.401",
+  "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,10 @@ type ThrowErrorForInvalidButtonColorArgs = {|
 export type ButtonProps = {|
   // app switch properties
   appSwitchWhenAvailable: boolean,
+
+  // Disabled state
+  disabled?: boolean,
+
   preferences?: {|
     appSwitchWhenAvailable?: boolean,
     launchAppSwitchIn?: "newTab" | "sameTab",

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/zoid/buttons/component.jsx

@@ -325,6 +325,12 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
     },
 
     props: {
+      disabled: {
+        type: "boolean",
+        queryParam: true,
+        required: false,
+      },
+
       appSwitchWhenAvailable: {
         type: "boolean",
         queryParam: true,