feat: show loading spinner when coming back from amazon

Adyen · Nov 7, 2023 · 05799f1 · 05799f1
1 parent 4f6884b
commit 05799f1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/adyen/components/AdyenCheckout.js b/adyen/components/AdyenCheckout.js
@@ -4,8 +4,12 @@ import '@adyen/adyen-web/dist/adyen.css'
 import {useAdyenCheckout} from '../context/adyen-checkout-context'
 
 const AdyenCheckoutComponent = (props) => {
-    const {adyenPaymentMethods, getPaymentMethodsConfiguration, setAdyenStateData} =
-        useAdyenCheckout()
+    const {
+        adyenPaymentMethods,
+        getPaymentMethodsConfiguration,
+        setAdyenStateData,
+        setAdyenPaymentInProgress
+    } = useAdyenCheckout()
     const paymentContainer = useRef(null)
 
     useEffect(() => {
@@ -37,6 +41,7 @@ const AdyenCheckoutComponent = (props) => {
             if (redirectResult) {
                 checkout.submitDetails({data: {details: {redirectResult}}})
             } else if (amazonCheckoutSessionId) {
+                setAdyenPaymentInProgress(true)
                 const amazonPay = checkout
                     .create('amazonpay', {
                         amazonCheckoutSessionId,

diff --git a/adyen/context/adyen-checkout-context.js b/adyen/context/adyen-checkout-context.js
@@ -22,6 +22,7 @@ export const AdyenCheckoutProvider = ({children}) => {
     const [fetchingPaymentMethods, setFetchingPaymentMethods] = useState(false)
     const [adyenPaymentMethods, setAdyenPaymentMethods] = useState()
     const [adyenStateData, setAdyenStateData] = useState()
+    const [adyenPaymentInProgress, setAdyenPaymentInProgress] = useState()
 
     useEffect(() => {
         const fetchPaymentMethods = async () => {
@@ -93,6 +94,8 @@ export const AdyenCheckoutProvider = ({children}) => {
     const value = {
         adyenPaymentMethods,
         adyenStateData,
+        adyenPaymentInProgress,
+        setAdyenPaymentInProgress: (data) => setAdyenPaymentInProgress(data),
         setAdyenStateData: (data) => setAdyenStateData(data),
         getPaymentMethodsConfiguration
     }

diff --git a/overrides/app/pages/checkout/partials/payment.jsx b/overrides/app/pages/checkout/partials/payment.jsx
@@ -55,7 +55,7 @@ const Payment = () => {
     }
 
     const {step, STEPS, goToStep, goToNextStep} = useCheckout()
-    const {adyenPaymentMethods, adyenStateData} = useAdyenCheckout()
+    const {adyenPaymentMethods, adyenStateData, adyenPaymentInProgress} = useAdyenCheckout()
     const [isSubmittingPayment, setIsSubmittingPayment] = useState(false)
 
     const billingAddressForm = useForm({
@@ -134,6 +134,7 @@ const Payment = () => {
             editing={step === STEPS.PAYMENT}
             isLoading={
                 !adyenPaymentMethods ||
+                adyenPaymentInProgress ||
                 billingAddressForm.formState.isSubmitting ||
                 isSubmittingPayment
             }