CASH-132: temp updates to enable donation block

src/fmg-components/donation-block/donation-block.vue

@@ -1,5 +1,9 @@
 <template>
     <div class="donation-block">
+        <form
+            ref="donationForm"
+            id="donation-form"
+            @submit.prevent="handleDonationAction">
             <div class="row">
                 <div class="col">
                     <p class="headline text-center" v-html="DonationHeadline"></p>
@@ -22,11 +26,11 @@
             <div class="row">
                 <div class="col">
                     <div class="donation-slider my-4">
-                    <input name="amount" id="one" type="radio" checked />
+                        <input name="amount" id="one" type="radio" value=1 checked />
                         <label for="one" class="label">$1</label>
-                    <input name="amount" id="three" type="radio" />
+                        <input name="amount" id="three" type="radio" value=3 />
                         <label for="three" class="label">$3</label>
-                    <input name="amount" id="five" type="radio" />
+                        <input name="amount" id="five" type="radio" value=5 />
                         <label for="five" class="label">$5</label>
                         <div class="indicator-bar"></div>
                     </div>
@@ -42,7 +46,7 @@
             <div class="row">
                 <div class="col">
                     <div
-                    v-if="donationSuccess"
+                        v-if="showDonationSuccess"
                         class="d-flex justify-content-center align-items-center btn-success w-100 mb-2"
                         v-html="DonationThanksAlertWidget"></div>
                 </div>
@@ -50,7 +54,7 @@
             <div class="row">
                 <div class="col">
                     <alert
-                    v-if="donationError"
+                        v-if="showDonationError"
                         cmsWidgetName="DonationErrorWidget"
                         alertClass="alert-danger" />
                 </div>
@@ -60,6 +64,7 @@
                     <p class="my-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
                 </div>
             </div>
+        </form>
     </div>
 </template>
 
@@ -71,6 +76,8 @@ export default {
     props: {
         cmsWidgetName: String,
         modelValue: String,
+        showDonationSuccess: Boolean,
+        showDonationError: Boolean,
     },
     computed: {
         DonationHeadline() {
@@ -106,11 +113,17 @@ export default {
             },
         },
     },
-    data() {
+    // data() {
-        return {
+    //     return {
-            donationSuccess: true,
+    //         donationSuccess: true,
-            donationError: true,
+    //         donationError: true,
-        };
+    //     };
+    // },
+    methods: {
+        handleDonationAction(submitEvent) {
+            console.log("running handleDonationAction(), submitEvent.target.elements.amount.value: ", submitEvent.target.elements.amount.value)
+            this.selectedValue = submitEvent.target.elements.amount.value;
+        }
     },
     components: {
         textLink,

src/layouts/confirmation/confirmation.vue

@@ -68,7 +68,9 @@
                                 <donationBlock
                                     cmsWidgetName="DonationWidget"
                                     v-model="donationAmount"
-                                    :donationValues="donationValues" />
+                                    :donationValues="donationValues"
+                                    :showDonationSuccess="showDonationSuccess"
+                                    :showDonationError="showDonationError" />
                             </div>
 
                             <h3>donationAmount: {{ donationAmount }}</h3>
@@ -239,7 +241,10 @@ export default {
             vaps: [],
             submittedOrder: null,
             shouldHideRecalibration: null,
-            donationAmount: null,
+            donationAmount: 0,
+            showDonationSuccess: null,
+            showDonationError: null,
+
         };
     },
     computed: {
@@ -513,21 +518,55 @@ export default {
         forwardButtonAction() {
             window.location.assign(location.protocol + "//" + location.host);
         },
-        async addDonation(amount) {
+        async addDonation(amount, plateTemp) {
             // try to call API to add donation to order
 
-            // TODO - change the following to check the response from the call
+            // TEMP DUMMY CALL TO SIMULATE SUCCESS OR ERROR FROM API CALL
+            // TO BE REPLACED BY REAL CALL LATER
+            const donationResponse = await this.dispatchStoreActionWithLogging(
+                storeActions.LOOKUP_VIN_BY_PLATE,
+                { licensePlate: plateTemp, licenseState: "OH" },
+                "test",
+                false
+            ).catch((error) => {
+                // this.$refs.navbar.removeLoader();
+                console.error("Error!!! error: ", error)
+                return error;
+            });
+
+            console.log("ran addDonation()... (*fake call*) donationResponse: ", donationResponse)
+
+            if (donationResponse?.status == "200") {
+                this.showDonationSuccess = true;
+                this.showDonationError = false;
                 const donationResponse = await baseMixin.methods.dispatchStoreAction(
                     storeActions.ADD_DONATION_TO_SUBMITTED_ORDER,
                     amount,
                     false
                 );
+            } else {
+                this.showDonationError = true;
+                this.showDonationSuccess = false;
+                const donationResponse = await baseMixin.methods.dispatchStoreAction(
+                    storeActions.ADD_DONATION_TO_SUBMITTED_ORDER,
+                    0,
+                    false
+                );
+            }
+
         },
     },
     watch: {
         donationAmount(newValue) {
             console.log("WATCHED donationAmount changed: ", newValue);
-            this.addDonation(newValue);
+            
+            // this.addDonation(newValue);
+            // TODO - when backend code is final, then remove the below and restore the line above
+            if (newValue == 5) {
+                this.addDonation(newValue, "FAILING_PLATE"); // throws error
+            } else {
+                this.addDonation(newValue, "2fast"); // should give successful response
+            }
         },
     },
     components: {

src/store/index.js

@@ -3161,6 +3161,8 @@ export const actions = {
         
         const submittedOrder = deepClone(baseMixin.methods.getSubmittedOrder());
         
+        if (donationAmount > 0) {
+            console.log("running addDonationToSubmittedOrder()... adding donation to supportingItems in session storage ")
             submittedOrder.lineItems.supportingItems.push({
                 partNumber: "DONATION",
                 description: null,
@@ -3173,7 +3175,15 @@ export const actions = {
                 salesTax: null,
                 id: "donation-" + donationAmount,
             });
+        } else {
+            // filter out all donations
+            console.log("running addDonationToSubmittedOrder()... removing all donation items in supportingItems in session storage ")
 
+            const nonDonationItems = submittedOrder.lineItems.supportingItems.filter(item => {
+                return item.partType !== "DONATION";
+            });
+            submittedOrder.lineItems.supportingItems = nonDonationItems;
+        }
         // set to local storage
         window.sessionStorage.setItem("submittedOrder", JSON.stringify(submittedOrder));
     },