Merge pull request #1032 from Safelite/feature/CSR-1073

Tech review changes

src/digital-components/modal/modal.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import modalButtonMain from "@/ux-components/modal-button-main/modal-button-main";
+import modalButtonMain from "@/digital-components/modal/ux-components/modal-button-main/modal-button-main";
 import { Modal } from "bootstrap";
 import { useForm } from "vee-validate";
 

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -369,6 +369,9 @@ export default {
                     console.log("Unable to load Google Places API script");
                 });
         },
+        resetAlerts() {
+            this.displayVerificationWarning = false;
+        },
     },
     mounted() {
         this.setupAddressLookup();

src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import serviceTypeQuestion from "./service-type-question";
+import appointmentTypeQuestion from "./appointment-type-question";
 
 const mockCmsContent = {
     QuestionText: "Choose a service option:",
@@ -29,7 +29,7 @@ const mockCmsContent = {
     ],
 };
 
-const cmsWidgetName = "ServiceTypeQuestionWidget";
+const cmsWidgetName = "AppointmentTypeQuestionWidget";
 const mockMixin = {
     methods: {
         getCmsContent: jest.fn((widgetName, cmsFieldName) => {
@@ -42,7 +42,7 @@ const mockMixin = {
     },
 };
 
-describe("service-type-question.vue", () => {
+describe("appointment-type-question.vue", () => {
     it("Should display all options if both in-shop and mobile are available", async () => {
         // Arrange/Act
         const { wrapper } = setupMocks({
@@ -178,8 +178,8 @@ function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {
     if (props) resultingMountOptions.propsData = props;
 
     const wrapper = isShallowMount
-        ? shallowMount(serviceTypeQuestion, resultingMountOptions)
-        : mount(serviceTypeQuestion, resultingMountOptions);
+        ? shallowMount(appointmentTypeQuestion, resultingMountOptions)
+        : mount(appointmentTypeQuestion, resultingMountOptions);
 
     return { wrapper };
 }

src/layouts/service-location/appointment-type-question/appointment-type-question.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="fade" mode="out-in">
-        <div class="service-type-question" aria-live="polite">
+        <div class="appointment-type-question" aria-live="polite">
             <buttonQuestion
                 :questionText="questionText"
                 :answers="answersToDisplay"
@@ -18,7 +18,7 @@
 import buttonQuestion from "@/digital-components/button-question/button-question";
 
 export default {
-    name: "service-type-question",
+    name: "appointment-type-question",
     props: {
         modelValue: String,
         groupName: String,

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -181,7 +181,7 @@ export default {
             this.$refs[this.modalName].resetButtonStyle();
         },
         resetAlerts() {
-            this.$refs.addressQuestions.displayVerificationWarning = false;
+            this.$refs.addressQuestions.resetAlerts();
         },
         async setMobileLocation() {
             // Validate the Zip Code

src/layouts/service-location/service-location.vue

@@ -16,20 +16,25 @@
             <alert
                 class="my-4"
                 cmsWidgetName="AlertMilitaryBaseZipWidget"
-                v-if="showMilitaryZipAlert"
+                v-if="displayMilitaryZipAlert"
                 alertClass="alert-warning" />
-            <serviceTypeQuestion
-                v-model="selectedServiceType"
+            <alert
+                class="my-4"
+                cmsWidgetName="AlertNoServiceWarningWidget"
+                v-if="displayNoServiceWarningAlert"
+                alertClass="alert-warning" />
+            <appointmentTypeQuestion
+                v-model="selectedAppointmentType"
                 :isGlassServiceableInshop="isGlassServiceableInshop"
                 :isRecalibrationServiceableInshop="isRecalibrationServiceableInshop"
                 :isGlassServiceableMobile="isGlassServiceableMobile"
                 :isRecalibrationServiceableMobile="isRecalibrationServiceableMobile"
-                ref="serviceTypeQuestion"
-                groupName="serviceTypeQuestion"
-                cmsWidgetName="ServiceTypeQuestionWidget"
+                ref="appointmentTypeQuestion"
+                groupName="appointmentTypeQuestion"
+                cmsWidgetName="AppointmentTypeQuestionWidget"
                 validationRules="option-required" />
             <mobileLocationModalQuestions
-                v-show="selectedServiceType === 'Mobile'"
+                v-show="selectedAppointmentType === 'Mobile'"
                 v-model="mobileLocationQuestions"
                 :mobileFeePart="mobileFeePart"
                 @updated-mobile-fee-part="setMobileFeePart"
@@ -39,7 +44,7 @@
                 linkWidgetName="MobileLocationLinkWidget"
                 modalWidgetName="MobileLocationModalWidget" />
             <textboxQuestion
-                v-show="selectedServiceType === 'Mobile'"
+                v-show="selectedAppointmentType === 'Mobile'"
                 ref="mobileLocationQuestionsError"
                 v-model="mobileLocationValidationField"
                 validationRules="mobile-location-required"
@@ -60,7 +65,7 @@
 import alert from "@/ux-components/alert/alert";
 import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
 import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
-import serviceTypeQuestion from "@/layouts/service-location/service-type-question/service-type-question";
+import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
@@ -100,7 +105,7 @@ export default {
             isRecalibrationServiceableMobile: null,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
-            selectedServiceType: null,
+            selectedAppointmentType: null,
             mobileLocationValidationField: null,
         };
     },
@@ -140,6 +145,7 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            console.log(resultMap.serviceabilityDetails);
             vm.setData(
                 resultMap.zipCodeData,
                 resultMap.serviceabilityDetails,
@@ -189,7 +195,7 @@ export default {
                 this.mobileLocationValidationField = "isValid";
             },
         },
-        showMilitaryZipAlert() {
+        displayMilitaryZipAlert() {
             const isZipServiceableMobile =
                 this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
 
@@ -262,7 +268,7 @@ export default {
     components: {
         alert,
         serviceZipModalQuestion,
-        serviceTypeQuestion,
+        appointmentTypeQuestion,
         mobileLocationModalQuestions,
         funnelHeader,
         funnelFooter,

src/store/index.js

@@ -1674,12 +1674,3 @@ function getLineItemQueryStringForPricing(lineItems) {
         })
         .join("");
 }
-
-function getLineItemQueryStringForServiceability(lineItems) {
-    return lineItems
-        .map((lineItem) => {
-            let queryStringSnippet = `&lineItems=${lineItem.partNumber}`;
-            return queryStringSnippet;
-        })
-        .join("");
-}