From f352edf63c4008cc2a506149ae4714ea291781b0 Mon Sep 17 00:00:00 2001 From: nicholas Date: Wed, 19 Feb 2025 11:09:01 +0100 Subject: [PATCH 1/3] Use built-in mechanism to disable OpenInvoice when Pay pressed --- .../src/components/internal/OpenInvoice/OpenInvoice.scss | 7 +++++++ .../src/components/internal/OpenInvoice/OpenInvoice.tsx | 8 +++++++- .../lib/src/components/internal/UIElement/UIElement.tsx | 6 ++++++ packages/lib/src/styles/mixins.scss | 4 ++++ 4 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.scss b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.scss index cdb0120518..5f7a4ff45f 100644 --- a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.scss +++ b/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; + } +} + diff --git a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx index c809d42214..5e018b779c 100644 --- a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.tsx +++ b/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 ( -
+
{activeFieldsets.companyDetails && ( diff --git a/packages/lib/src/components/internal/UIElement/UIElement.tsx b/packages/lib/src/components/internal/UIElement/UIElement.tsx index 3e706218c1..bf51ebf458 100644 --- a/packages/lib/src/components/internal/UIElement/UIElement.tsx +++ b/packages/lib/src/components/internal/UIElement/UIElement.tsx @@ -111,11 +111,17 @@ export abstract class UIElement

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); diff --git a/packages/lib/src/styles/mixins.scss b/packages/lib/src/styles/mixins.scss index 926f55dd38..05bedfa571 100644 --- a/packages/lib/src/styles/mixins.scss +++ b/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; +} From 924b68b4154d80b0f4e3db81890d31f1f439f6ec Mon Sep 17 00:00:00 2001 From: nicholas Date: Wed, 19 Feb 2025 12:08:51 +0100 Subject: [PATCH 2/3] Fixing linting error --- .../lib/src/components/internal/OpenInvoice/OpenInvoice.scss | 2 +- packages/lib/src/styles/mixins.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.scss b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.scss index 5f7a4ff45f..e010339d68 100644 --- a/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.scss +++ b/packages/lib/src/components/internal/OpenInvoice/OpenInvoice.scss @@ -30,7 +30,7 @@ .adyen-checkout__open-invoice{ &--loading{ - @include index.adyen-checkout__component--loading; + @include index.adyen-checkout-component-loading; } } diff --git a/packages/lib/src/styles/mixins.scss b/packages/lib/src/styles/mixins.scss index 05bedfa571..196557c792 100644 --- a/packages/lib/src/styles/mixins.scss +++ b/packages/lib/src/styles/mixins.scss @@ -141,6 +141,6 @@ $adyen-checkout-media-query-l-min: 1024px; position: absolute; } -@mixin adyen-checkout__component--loading { +@mixin adyen-checkout-component-loading { pointer-events: none; } From e9e2b6fed288b9bfc078b9b5355d6ab39b29627f Mon Sep 17 00:00:00 2001 From: nicholas Date: Wed, 19 Feb 2025 13:52:29 +0100 Subject: [PATCH 3/3] Also disable ACH when Pay pressed --- .changeset/many-clouds-try.md | 5 +++++ .../src/components/Ach/components/AchInput/AchInput.scss | 7 +++++++ .../src/components/Ach/components/AchInput/AchInput.tsx | 7 ++++++- 3 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 .changeset/many-clouds-try.md diff --git a/.changeset/many-clouds-try.md b/.changeset/many-clouds-try.md new file mode 100644 index 0000000000..edb674c644 --- /dev/null +++ b/.changeset/many-clouds-try.md @@ -0,0 +1,5 @@ +--- +'@adyen/adyen-web': patch +--- + +Use built-in mechanism to disable OpenInvoice (and ACH) components when Pay pressed diff --git a/packages/lib/src/components/Ach/components/AchInput/AchInput.scss b/packages/lib/src/components/Ach/components/AchInput/AchInput.scss index cb3bb4f99a..477beb9df6 100644 --- a/packages/lib/src/components/Ach/components/AchInput/AchInput.scss +++ b/packages/lib/src/components/Ach/components/AchInput/AchInput.scss @@ -1,3 +1,4 @@ +@use 'styles/index'; @import 'styles/variable-generator'; .adyen-checkout__loading-input__form { @@ -32,3 +33,9 @@ } } +.adyen-checkout__ach{ + &--loading{ + @include index.adyen-checkout-component-loading; + } +} + diff --git a/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx b/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx index 8454915d85..858c9f5ab6 100644 --- a/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx +++ b/packages/lib/src/components/Ach/components/AchInput/AchInput.tsx @@ -129,7 +129,12 @@ function AchInput(props: ACHInputProps) { }, [data, valid, errors, storePaymentMethod]); return ( -

+