feat(buttons): add button disability changes

src/constants/class.js

@@ -28,6 +28,7 @@ export const CLASS = {
 
   LOADING: ("paypal-button-loading": "paypal-button-loading"),
   SPINNER: ("paypal-button-spinner": "paypal-button-spinner"),
+  DISABLED: ("paypal-button-disabled": "paypal-button-disabled"),
 
   TAGLINE: ("paypal-button-tagline": "paypal-button-tagline"),
   POWERED_BY: ("paypal-powered-by": "paypal-powered-by"),

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">

src/ui/buttons/buttons.jsx

@@ -128,14 +128,19 @@ type ButtonsProps = ButtonPropsInputs & {|
   onClick?: Function,
   wallet?: ?Wallet,
   showLoadingSpinner?: boolean,
+  disabled?: boolean,
 |};
 
 export function validateButtonProps(props: ButtonPropsInputs) {
   normalizeButtonProps(props);
 }
 
 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}
         />
       ))}
 

src/ui/buttons/props.js

@@ -639,6 +639,14 @@ export type ButtonProps = {|
   messageMarkup?: string,
   hideSubmitButtonForCardForm?: boolean,
   userAgent: string,
+  disabled?: boolean,
+  onInit?: (
+    data: {||},
+    actions: {|
+      disable: () => void,
+      enable: () => void,
+    |}
+  ) => void,
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type

src/ui/buttons/styles/button.js

@@ -39,6 +39,12 @@ export const buttonStyle = `
         cursor: pointer;
     }
 
+    .${CLASS.BUTTON}.${CLASS.DISABLED} {
+        pointer-events: none !important;
+        cursor: not-allowed !important;
+        opacity: 0.6 !important;
+    }
+
     .${CLASS.CONTAINER}.${CLASS.ENV}-${ENV.TEST} .${CLASS.TEXT} {
         background: rgba(0, 0, 0, 0.5) !important;
         color: transparent  !important;

src/zoid/buttons/component.jsx

@@ -1370,6 +1370,12 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         queryParam: true,
         value: getUserAgent,
       },
+
+      disabled: {
+        type: "boolean",
+        queryParam: true,
+        required: false,
+      },
     },
 
     exports: {

src/zoid/buttons/prerender.jsx

@@ -111,6 +111,7 @@ export function PrerenderedButtons({
           {...props}
           onClick={handleClick}
           showLoadingSpinner={eagerOrderCreation}
+          disabled={props.disabled}
         />
       </body>
     </html>