Use built-in mechanism to disable OpenInvoice when Pay pressed

Author: sponglord

packages/lib/src/components/internal/OpenInvoice/OpenInvoice.scss

@@ -27,3 +27,10 @@
 .adyen-checkout__open-invoice .adyen-checkout__field--consentCheckbox {
     margin-top: token(spacer-070);
 }
+
+.adyen-checkout__open-invoice{
+    &--loading{
+        @include index.adyen-checkout__component--loading;
+    }
+}
+

packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx

@@ -22,6 +22,7 @@ import Field from '../FormFields/Field';
 import FormInstruction from '../FormInstruction';
 import { ComponentMethodsRef } from '../UIElement/types';
 import useSRPanelForOpenInvoiceErrors from './useSRPanelForOpenInvoiceErrors';
+import classNames from 'classnames';
 
 const consentCBErrorObj: GenericError = {
     isValid: false,
@@ -111,7 +112,12 @@ export default function OpenInvoice(props: OpenInvoiceProps) {
         setErrors(prevErrors => ({ ...prevErrors, ...{ consentCheckbox: !checked ? consentCBErrorObj : null } }));
     };
     return (
-        <div className="adyen-checkout__open-invoice">
+        <div
+            className={classNames({
+                'adyen-checkout__open-invoice': true,
+                'adyen-checkout__open-invoice--loading': status === 'loading'
+            })}
+        >
             <FormInstruction />
 
             {activeFieldsets.companyDetails && (

packages/lib/src/components/internal/UIElement/UIElement.tsx

@@ -111,11 +111,17 @@ export abstract class UIElement<P extends UIElementProps = UIElementProps> exten
         return this;
     }
 
+    /**
+     * elementRef is a ref to the subclass that extends UIElement e.g. Card.tsx
+     */
     public setElementStatus(status: UIElementStatus, props?: any): this {
         this.elementRef?.setStatus(status, props);
         return this;
     }
 
+    /**
+     * componentRef is a ref to the primary component inside that subclass e.g. CardInput.tsx
+     */
     public setStatus(status: UIElementStatus, props?): this {
         if (this.componentRef?.setStatus) {
             this.componentRef.setStatus(status, props);

packages/lib/src/styles/mixins.scss

@@ -140,3 +140,7 @@ $adyen-checkout-media-query-l-min: 1024px;
     padding: 0;
     position: absolute;
 }
+
+@mixin adyen-checkout__component--loading {
+    pointer-events: none;
+}