WIP CSR-2115

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",

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,

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(
+            // await this.dispatchStoreAction(
-                storeActions.SAVE_PAYMENT_METHOD_CHOICE,
+            //     storeActions.SAVE_PAYMENT_METHOD_CHOICE,
-                this.paymentMethod,
+            //     this.paymentMethod,
-                false
+            //     false
-            );
+            // );
 
-            // save lineitems as they now have salestax added
+            // // save lineitems as they now have salestax added
-            await this.dispatchStoreAction(
+            // await this.dispatchStoreAction(
-                storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
+            //     storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
-                this.lineItems.glassParts,
+            //     this.lineItems.glassParts,
-                false
+            //     false
-            );
+            // );
 
-            await this.dispatchStoreAction(
+            // await this.dispatchStoreAction(
-                storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
+            //     storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
-                this.lineItems.supportingItems,
+            //     this.lineItems.supportingItems,
-                false
+            //     false
-            );
+            // );
-            await this.dispatchStoreAction(storeActions.SAVE_VAPS, this.lineItems.vaps, false);
+            // await this.dispatchStoreAction(storeActions.SAVE_VAPS, this.lineItems.vaps, false);
-            this.dispatchStoreAction(
+            // this.dispatchStoreAction(
-                storeActions.SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS,
+            //     storeActions.SAVE_ACTIVE_AND_OR_INACTIVE_PROMOS,
-                {
+            //     {
-                    activePromos: this.lineItems.promos,
+            //         activePromos: this.lineItems.promos,
-                    inactivePromos: this.inactivePromos,
+            //         inactivePromos: this.inactivePromos,
-                },
+            //     },
-                false
+            //     false
-            );
+            // );
 
-            if (this.paymentMethod == paymentMethods.LATER) {
+            // if (this.paymentMethod == paymentMethods.LATER) {
-                // this creates the final work order
+            //     // this creates the final work order
-                await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
+            //     await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
-                this.$router.navigateWithoutSaving(
+            //     this.$router.navigateWithoutSaving(
-                    this.navigationScenarios.CLICKED_FORWARD,
+            //         this.navigationScenarios.CLICKED_FORWARD,
-                    this.$route
+            //         this.$route
-                );
+            //     );
-            } else {
+            // } else {
-                this.setupPia();
+            //     this.setupPia();
-            }
+            // }
         },
         async setupPia() {
             this.$refs.loadingModal.showModal();

src/main.js

@@ -29,10 +29,10 @@ vueApp.mixin(analyticsMixin);
 vueApp.mixin(experimentMixin);
 
 // Vue Error Handling
-vueApp.config.errorHandler = (err, vm, info) => {
+// vueApp.config.errorHandler = (err, vm, info) => {
-    global.$logger.logError(
+//     global.$logger.logError(
-        `Page Name - ${vm.getPageName()} - ${info}: ${err.message}\n${err.stack}`
+//         `Page Name - ${vm.getPageName()} - ${info}: ${err.message}\n${err.stack}`
-    );
+//     );
-};
+// };
 
 vueApp.mount("#app");