From f0a878ff44089ef4a4b8249e5eb0b6efc10674e7 Mon Sep 17 00:00:00 2001
From: Minojhini Valaiyapathi <minojhini.valaiyapathi@safelite.com>
Date: Thu, 10 Apr 2025 13:47:41 -0400
Subject: [PATCH] CASH-498 - Block interaction with Foster Love widget while
 part is being added

---
 src/experiment-components/donation-block.vue | 23 +++++++++++++++-----
 src/layouts/confirmation/confirmation.vue    |  5 ++++-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/experiment-components/donation-block.vue b/src/experiment-components/donation-block.vue
index 1710440d6..ae6c69a93 100644
--- a/src/experiment-components/donation-block.vue
+++ b/src/experiment-components/donation-block.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="donation-block">
-        <form ref="donationForm" id="donation-form" @submit.prevent="handleDonationAction">
+        <form ref="donationForm" id="donation-form" @submit.prevent>
             <div class="row g-0">
                 <div class="col-12">
                     <p class="headline text-center" v-html="DonationHeadline"></p>
@@ -52,9 +52,12 @@
                 </div>
                 <div class="row">
                     <div class="col-12">
-                        <button
-                            class="btn btn-secondary w-100 mb-2"
-                            v-html="DonationAddButtonCopy"></button>
+                        <buttonMain
+                            ref="buttonMain"
+                            :buttonText="DonationAddButtonCopy"
+                            loaderColor="white"
+                            class="w-100 mb-2"
+                            @click-event="handleDonationAction" />
                     </div>
                 </div>
             </div>
@@ -86,6 +89,7 @@
 <script>
 import textLink from "@/ux-components/text-link/text-link";
 import alert from "@/ux-components/alert/alert";
+import buttonMain from "@/ux-components/button-main/button-main";
 export default {
     name: "donationBlock",
     props: {
@@ -131,13 +135,20 @@ export default {
         },
     },
     methods: {
-        handleDonationAction(submitEvent) {
-            this.selectedValue = submitEvent.target.elements.amount.value;
+        handleDonationAction() {
+            const selectedAmount = this.$refs.donationForm.elements.amount?.value;
+            if (selectedAmount) {
+                this.selectedValue = selectedAmount;
+            }
+        },
+        removeLoader() {
+            this.$refs.buttonMain.removeLoader();
         },
     },
     components: {
         textLink,
         alert,
+        buttonMain,
     },
 };
 </script>
diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index af6f9e5ab..3b3ead4c1 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -72,7 +72,8 @@
                                     :donationValues="donationValues"
                                     :showDonationSuccess="showDonationSuccess"
                                     :showDonationError="showDonationError"
-                                    @DonationAddedEvent="addDonationToOrder" />
+                                    @DonationAddedEvent="addDonationToOrder"
+                                    ref="donationBlock" />
                             </div>
 
                             <hr class="mb-5" />
@@ -544,10 +545,12 @@ export default {
                     false
                 );
                 this.lineItems = deepClone(this.getSubmittedOrder().lineItems);
+                this.$refs.donationBlock.removeLoader();
             } else {
                 this.showDonationError = true;
                 this.showDonationSuccess = false;
                 this.donationAmount = 0;
+                this.$refs.donationBlock.removeLoader();
             }
         },
     },