fix: buy button clickable during redirect from checkout to confirmati…

…on (#796)

* fix: buy button clickable during redirect from checkout to confirmation

apps/web/pages/checkout.vue

@@ -45,7 +45,7 @@
           <OrderSummary v-if="cart" :cart="cart" class="mt-4">
             <client-only v-if="selectedPaymentId === paypalPaymentId">
               <PayPalExpressButton
-                :disabled="!termsAccepted || disableShippingPayment || cartLoading"
+                :disabled="!termsAccepted || disableBuyButton"
                 @validation-callback="handleReadyToBuy"
                 type="Checkout"
               />
@@ -60,32 +60,34 @@
               type="submit"
               data-testid="place-order-button"
               @click="openPayPalCardDialog"
-              :disabled="disableShippingPayment || cartLoading || paypalCardDialog"
+              :disabled="disableBuyButton || paypalCardDialog"
               size="lg"
               class="w-full mb-4 md:mb-0 cursor-pointer"
             >
               {{ t('buy') }}
             </UiButton>
             <PayPalApplePayButton
               v-else-if="selectedPaymentId === paypalApplePayPaymentId"
-              :style="createOrderLoading || disableShippingPayment || cartLoading ? 'pointer-events: none;' : ''"
+              :style="disableBuyButton ? 'pointer-events: none;' : ''"
               @button-clicked="handleReadyToBuy"
             />
             <PayPalGooglePayButton
               v-else-if="selectedPaymentId === paypalGooglePayPaymentId"
-              :style="createOrderLoading || disableShippingPayment || cartLoading ? 'pointer-events: none;' : ''"
+              :style="disableBuyButton ? 'pointer-events: none;' : ''"
               @button-clicked="handleReadyToBuy"
             />
             <UiButton
               v-else
               type="submit"
               @click="order"
-              :disabled="createOrderLoading || disableShippingPayment || cartLoading"
+              :disabled="disableBuyButton"
               size="lg"
               data-testid="place-order-button"
               class="w-full mb-4 md:mb-0 cursor-pointer"
             >
-              <SfLoaderCircular v-if="createOrderLoading" class="flex justify-center items-center" size="sm" />
+              <template v-if="createOrderLoading">
+                <SfLoaderCircular class="flex justify-center items-center" size="sm" />
+              </template>
               <template v-else>{{ t('buy') }}</template>
             </UiButton>
           </OrderSummary>
@@ -126,6 +128,7 @@ definePageMeta({
 const { send } = useNotification();
 const { t } = useI18n();
 const localePath = useLocalePath();
+const { isLoading: navigationInProgress } = useLoadingIndicator();
 const { loading: createOrderLoading, createOrder } = useMakeOrder();
 const { shippingPrivacyAgreement } = useAdditionalInformation();
 const { checkboxValue: termsAccepted } = useAgreementCheckbox('checkoutGeneralTerms');
@@ -188,6 +191,16 @@ onNuxtReady(async () => {
 const paypalCardDialog = ref(false);
 const disableShippingPayment = computed(() => loadShipping.value || loadPayment.value);
 const { processingOrder } = useProcessingOrder();
+
+const disableBuyButton = computed(
+  () =>
+    createOrderLoading.value ||
+    disableShippingPayment.value ||
+    cartLoading.value ||
+    navigationInProgress.value ||
+    processingOrder.value,
+);
+
 const paypalPaymentId = computed(() => {
   if (!paymentMethods.value.list) return null;
   return paymentProviderGetters.getIdByPaymentKey(paymentMethods.value.list, PayPalPaymentKey);

docs/changelog/changelog_en.md

@@ -16,6 +16,7 @@
 - Reload page after login so the customer class affects prices and categories
 - Empty cart notification was displayed when user navigates to cart. Now only shown when the cart is emptied in checkout.
 - The hero button now links to the provided destination.
+- Fixed, Buy button could be clicked after the order was finished and the redirect to the confirmation was in progress.
 
 ## v1.7.0 (2024-11-06) <a href="https://github.com/plentymarkets/plentyshop-pwa/compare/v1.6.0...v1.7.0" target="_blank" rel="noopener"><b>Overview of all changes</b></a>