From da89f0929f9caca62442a80c0670ca73f078e02b Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 26 Jun 2024 11:27:20 -0400
Subject: [PATCH] WIP CSR-2115

---
 src/constants/error-messages.js               |  1 +
 .../checkbox-question/checkbox-question.vue   | 32 ++++++++
 src/layouts/payment-method/payment-method.vue | 79 ++++++++++---------
 src/main.js                                   | 10 +--
 4 files changed, 79 insertions(+), 43 deletions(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 71c782856..4326a5412 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -24,6 +24,7 @@ const errorMessages = {
     VIN_FORMAT:
         "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
     OPTION_REQUIRED: "Please select an option",
+    RECAL_ACK_REQUIRED: "Please acknowledge recalibration alert",
     VEHICLE_REQUIRED: "Please select a vehicle",
     MOBILE_LOCATION_REQUIRED: "Please enter your service address",
     DATE_REQUIRED: "Please select a date",
diff --git a/src/digital-components/checkbox-question/checkbox-question.vue b/src/digital-components/checkbox-question/checkbox-question.vue
index fc95555e4..c256fd0aa 100644
--- a/src/digital-components/checkbox-question/checkbox-question.vue
+++ b/src/digital-components/checkbox-question/checkbox-question.vue
@@ -10,6 +10,7 @@
                 type="checkbox"
                 aria-checked="false"
                 :name="checkboxName"
+                :validationRules="validationRules"
                 :id="buttonID"
                 :tabindex="tabIndex"
                 :aria-required="isRequired" />
@@ -20,6 +21,10 @@
 </template>
 
 <script>
+
+import { useField, validate } from "vee-validate";
+import { v4 as uuidv4 } from "uuid";
+
 export default {
     name: "checkboxQuestion",
     computed: {
@@ -35,7 +40,34 @@ export default {
             },
         },
     },
+    setup(props) {
+        const uuid = uuidv4();
+        const inputId = !props.customInputId ? `input-${uuid}` : props.customInputId;
+
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue: null,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
+            useField(inputId, props.validationRules, fieldOptions);
+
+        return {
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+            resetField,
+        };
+    },
     props: {
+        customInputId: String,
+        validationRules: String,
         cmsWidgetName: String,
         checkboxName: String,
         buttonID: String,
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 2a293957f..27ad8d39a 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -55,7 +55,9 @@
                         <div class="d-flex flex-row checkbox-group">
                             <checkboxQuestion
                                 class="mb-5"
-                                v-model="isRecalAckOptIn" />
+                                isRequired=true
+                                v-model="isRecalAckOptIn"
+                                validationRules="recal-ack-required" />
                             <textBlock
                                 cmsWidgetName="RecalConfirmationWidget"
                                 justifyText="left"
@@ -66,7 +68,7 @@
                     <paymentMethodQuestion
                         v-if="!isPiaDisabled"
                         v-model="paymentMethodInternalModel"
-                        validationRules="option-required" />
+                        validationRules="payment-method-required" />
 
                     <alert
                         v-if="isPiaDisabled"
@@ -144,7 +146,8 @@ import { partTypeStrings } from "@/constants/part-type-strings";
 import { mapTaxedLineItemsToStoreFormat } from "../../store";
 import { coverageStatus } from "@/constants/insurance";
 
-defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+defineRule("payment-method-required", required(errorMessages.OPTION_REQUIRED));
+defineRule("recal-ack-required", required(errorMessages.RECAL_ACK_REQUIRED));
 
 export default {
     name: "paymentMethod",
@@ -486,44 +489,44 @@ export default {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {
-            await this.dispatchStoreAction(
-                storeActions.SAVE_PAYMENT_METHOD_CHOICE,
-                this.paymentMethod,
-                false
-            );
+            // await this.dispatchStoreAction(
+            //     storeActions.SAVE_PAYMENT_METHOD_CHOICE,
+            //     this.paymentMethod,
+            //     false
+            // );
 
-            // save lineitems as they now have salestax added
-            await this.dispatchStoreAction(
-                storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
-                this.lineItems.glassParts,
-                false
-            );
+            // // save lineitems as they now have salestax added
+            // await this.dispatchStoreAction(
+            //     storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
+            //     this.lineItems.glassParts,
+            //     false
+            // );
 
-            await this.dispatchStoreAction(
-                storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
-                this.lineItems.supportingItems,
-                false
-            );
-            await this.dispatchStoreAction(storeActions.SAVE_VAPS, this.lineItems.vaps, false);
-            this.dispatchStoreAction(
-                storeActions.SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS,
-                {
-                    activePromos: this.lineItems.promos,
-                    inactivePromos: this.inactivePromos,
-                },
-                false
-            );
+            // await this.dispatchStoreAction(
+            //     storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
+            //     this.lineItems.supportingItems,
+            //     false
+            // );
+            // await this.dispatchStoreAction(storeActions.SAVE_VAPS, this.lineItems.vaps, false);
+            // this.dispatchStoreAction(
+            //     storeActions.SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS,
+            //     {
+            //         activePromos: this.lineItems.promos,
+            //         inactivePromos: this.inactivePromos,
+            //     },
+            //     false
+            // );
 
-            if (this.paymentMethod == paymentMethods.LATER) {
-                // this creates the final work order
-                await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
-                this.$router.navigateWithoutSaving(
-                    this.navigationScenarios.CLICKED_FORWARD,
-                    this.$route
-                );
-            } else {
-                this.setupPia();
-            }
+            // if (this.paymentMethod == paymentMethods.LATER) {
+            //     // this creates the final work order
+            //     await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
+            //     this.$router.navigateWithoutSaving(
+            //         this.navigationScenarios.CLICKED_FORWARD,
+            //         this.$route
+            //     );
+            // } else {
+            //     this.setupPia();
+            // }
         },
         async setupPia() {
             this.$refs.loadingModal.showModal();
diff --git a/src/main.js b/src/main.js
index 1017651f8..363b0dcf0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,10 +29,10 @@ vueApp.mixin(analyticsMixin);
 vueApp.mixin(experimentMixin);
 
 // Vue Error Handling
-vueApp.config.errorHandler = (err, vm, info) => {
-    global.$logger.logError(
-        `Page Name - ${vm.getPageName()} - ${info}: ${err.message}\n${err.stack}`
-    );
-};
+// vueApp.config.errorHandler = (err, vm, info) => {
+//     global.$logger.logError(
+//         `Page Name - ${vm.getPageName()} - ${info}: ${err.message}\n${err.stack}`
+//     );
+// };
 
 vueApp.mount("#app");