From 708585b00ace9643c4700277f9c8ba3507b6e3a6 Mon Sep 17 00:00:00 2001
From: Johnny shultz <John.Shultz@safelite.com>
Date: Fri, 15 Aug 2025 12:22:08 -0400
Subject: [PATCH 1/3] CASH-1407

CASH-1407 first part of 1407 defect. added validation for insurance company page and for payment method page for checkbox with recal vehicle scenario
---
 src/constants/error-messages.js               |  3 +-
 src/layouts/estimate/estimate.vue             |  4 ++
 .../insurance-company-question.vue            |  4 +-
 .../insurance-company/insurance-company.vue   |  8 +++-
 src/layouts/payment-method/payment-method.vue | 45 ++++++++++++++++---
 src/styles/common-error-styles.scss           |  1 +
 6 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 45841f21f..8b8c98881 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -26,7 +26,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",
+    RECAL_ACK_REQUIRED: "You must agree to the terms to submit",
     VEHICLE_REQUIRED: "Please select a vehicle",
     MOBILE_LOCATION_REQUIRED: "Please enter your service address",
     DATE_REQUIRED: "Please select a date",
@@ -37,6 +37,7 @@ const errorMessages = {
     MODEL_REQUIRED: "Please select your vehicle model",
     STYLE_REQUIRED: "Please select your vehicle style",
     PROMO_REQUIRED: "Please enter a promo code",
+    INSURANCE_COMPANY_REQUIRED: "Please select an insurance company",
 };
 
 export { errorMessages };
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue
index ff58adf83..2dbe9f2bc 100644
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@@ -266,12 +266,16 @@ export default {
 <style lang="scss" scoped>
 .header-copy {
     font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
+}
+</style>
+
 <style lang="scss">
 .vinlookupquestion p {
     font-size: 1.25rem;
 }
 .header-sub-copy {
     font-size: 0.875rem;
+}
 
 .select-an-option {
     font-family: UrbanistSemibold;
diff --git a/src/layouts/insurance-company/insurance-company-question.vue b/src/layouts/insurance-company/insurance-company-question.vue
index f8f7bbc6a..e95114aad 100644
--- a/src/layouts/insurance-company/insurance-company-question.vue
+++ b/src/layouts/insurance-company/insurance-company-question.vue
@@ -4,7 +4,8 @@
         customInputId="autocomplete"
         class="mb-4 mt-5"
         cmsWidgetName="InsuranceCoQuestionWidget"
-        includeSearchIcon />
+        includeSearchIcon
+        :validationRules="validationRules" />
 </template>
 
 <script>
@@ -35,6 +36,7 @@ export default {
     props: {
         originalList: Array,
         modelValue: String,
+        validationRules: String,
     },
     data() {
         return {
diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue
index ba0f1f2e6..07d11d55b 100644
--- a/src/layouts/insurance-company/insurance-company.vue
+++ b/src/layouts/insurance-company/insurance-company.vue
@@ -9,8 +9,10 @@
 
                     <div v-if="originalList.length > 0">
                         <insurance-company-question
+                            isRequired
                             v-model="parentAccountNumber"
-                            :originalList="originalList" />
+                            :originalList="originalList"
+                            validationRules="insurance-company-required" />
                     </div>
                     <textLink
                         id="payOnMyOwnBackButton"
@@ -55,6 +57,10 @@ import { partNumberStrings } from "@/constants/part-number-strings";
 import { deepClone } from "@/helpers/object-helper";
 import store from "@/store";
 import { flushSaveSessionQueue } from "@/helpers/heritage-integration/order-helper";
+import { errorMessages } from "@/constants/error-messages";
+import { required, regex } from "@/helpers/validation-rules";
+
+defineRule("insurance-company-required", required(errorMessages.INSURANCE_COMPANY_REQUIRED));
 
 export default {
     name: "insurance-company",
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 06f8871fe..456ffa269 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -60,14 +60,30 @@
                             class="service-questions" />
                         <textBlock cmsWidgetName="CallOrTextWidget" justifyText="left" />
                         <hr class="my-5" />
-                        <div class="d-flex flex-row checkbox-group">
-                            <checkboxQuestion
-                                cmsWidgetName="RecalConfirmWidget"
-                                class="mb-3"
-                                isRequired="true"
+                        <div class="d-flex flex-column checkbox-group">
+                            <Field
+                                name="recalAckOptIn"
+                                :rules="'recal-ack-required'"
                                 v-model="isRecalAckOptIn"
-                                validationRules="recal-ack-required"
-                                @text-link-clicked="openModal('RecalModal')" />
+                                v-slot="{ meta, errors }">
+                                <checkboxQuestion
+                                    cmsWidgetName="RecalConfirmWidget"
+                                    class="mb-3"
+                                    isRequired="true"
+                                    v-model="isRecalAckOptIn"
+                                    validationRules="recal-ack-required"
+                                    checkboxName="recalAckOptIn"
+                                    :class="{ 'is-invalid': meta.touched && errors.length > 0 }"
+                                    @text-link-clicked="openModal('RecalModal')" />
+                            </Field>
+                            <div id="form-test-error" class="row form-test-error">
+                                <error-message
+                                    role="comment"
+                                    aria-atomic="true"
+                                    aria-live="polite"
+                                    class="small mt-1 text-danger d-block"
+                                    :name="'recalAckOptIn'"></error-message>
+                            </div>
                         </div>
                     </div>
 
@@ -158,6 +174,8 @@ import {
 } from "@/helpers/pricing-helper.js";
 import { consumeQueryFromStash } from "@/router/methods/helpers/querystring-stash";
 import { debugLog } from "@/helpers/debug-log-helper";
+import { ErrorMessage } from "vee-validate";
+import { Field } from "vee-validate";
 
 defineRule("payment-method-required", required(errorMessages.OPTION_REQUIRED));
 defineRule("recal-ack-required", required(errorMessages.RECAL_ACK_REQUIRED));
@@ -845,6 +863,7 @@ export default {
         navbar,
         funnelSubHeader,
         Form,
+        Field,
         loadingModal,
         cart,
         alert,
@@ -854,6 +873,7 @@ export default {
         checkboxQuestion,
         contentGroupModal,
         afterpayBreakout,
+        ErrorMessage,
     },
 };
 </script>
@@ -877,6 +897,17 @@ export default {
     > * {
         margin-top: 0;
     }
+
+    :deep(.form-check-input:invalid),
+    :deep(.form-check-input[aria-invalid="true"]),
+    :deep(.is-invalid .form-check-input) {
+        border-color: $danger;
+        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+    }
+
+    :deep(.is-invalid .form-check-label) {
+        color: $danger;
+    }
 }
 .questions-about-service {
     .service-questions {
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 3051ed00a..8837d179a 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -133,6 +133,7 @@ html {
                     background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%23d4281c'/%3E%3C/svg%3E%0A");
                     border: 1px solid $red;
                     border-left: none;
+                    border-radius: 0 0.5rem 0.5rem 0;
                 }
             }
         }

From f02c82d24bdb5898540ce0fc2a86c6e0f4ecbe9c Mon Sep 17 00:00:00 2001
From: Johnny shultz <John.Shultz@safelite.com>
Date: Fri, 15 Aug 2025 13:19:30 -0400
Subject: [PATCH 2/3] CASH-1407

commit to rerun PR tests
---
 src/layouts/payment-method/payment-method.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 456ffa269..c86cc53dd 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -62,7 +62,7 @@
                         <hr class="my-5" />
                         <div class="d-flex flex-column checkbox-group">
                             <Field
-                                name="recalAckOptIn"
+                                 name="recalAckOptIn"
                                 :rules="'recal-ack-required'"
                                 v-model="isRecalAckOptIn"
                                 v-slot="{ meta, errors }">

From a01afdc24ff9e42a4ab0ff1f40cebfd876143ec8 Mon Sep 17 00:00:00 2001
From: Johnny shultz <John.Shultz@safelite.com>
Date: Fri, 15 Aug 2025 13:21:12 -0400
Subject: [PATCH 3/3] CASH-1407

formatting
---
 src/layouts/payment-method/payment-method.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index c86cc53dd..456ffa269 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -62,7 +62,7 @@
                         <hr class="my-5" />
                         <div class="d-flex flex-column checkbox-group">
                             <Field
-                                 name="recalAckOptIn"
+                                name="recalAckOptIn"
                                 :rules="'recal-ack-required'"
                                 v-model="isRecalAckOptIn"
                                 v-slot="{ meta, errors }">