CASH-498 - Block interaction with Foster Love widget while part is being added

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
+                        <buttonMain
-                            class="btn btn-secondary w-100 mb-2"
+                            ref="buttonMain"
-                            v-html="DonationAddButtonCopy"></button>
+                            :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) {
+        handleDonationAction() {
-            this.selectedValue = submitEvent.target.elements.amount.value;
+            const selectedAmount = this.$refs.donationForm.elements.amount?.value;
+            if (selectedAmount) {
+                this.selectedValue = selectedAmount;
+            }
+        },
+        removeLoader() {
+            this.$refs.buttonMain.removeLoader();
         },
     },
     components: {
         textLink,
         alert,
+        buttonMain,
     },
 };
 </script>

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();
             }
         },
     },