Merge branch 'develop' into feature/CSR-1073

src/constants/application-config.js

@@ -9,7 +9,7 @@ const applicationConfig = {
     APPLICATION_ABBREVIATION: "fmg",
     PAGE_QUERYSTRING: "fmgPage",
     SITE_ENTRY_TRIGGER_VALUE: "FixMyGlass",
-    CASH_ACCOUNT_NUMBER: 167132,
+    CASH_PARENT_ACCOUNT_NUMBER: 167132,
 };
 
 export { applicationConfig };

src/constants/store-actions.js

@@ -68,7 +68,7 @@ const storeActions = {
     SAVE_MOLDING_QUESTION_ANSWERS: "saveMoldingQuestionAnswers",
     SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers",
     SAVE_PAYMENT_TYPE: "savePaymentType",
-    SAVE_ACCOUNT_NUMBER: "saveAccountNumber",
+    SAVE_PARENT_ACCOUNT_NUMBER: "saveParentAccountNumber",
     SAVE_SUPPORTING_ITEMS: "saveSupportingItems",
     SAVE_VAPS: "saveVaps",
 };

src/constants/tint-mapper.js

@@ -32,6 +32,7 @@ const tintMap = {
         { name: "gray tint", src: "Glass-NoShade-GrayTint.svg" },
         { name: "green tint", src: "Glass-NoShade-GreenTint.svg" },
         { name: "gray tint privacy", src: "Glass-NoShade-GrayTint.svg" },
+        { name: "blue tint", src: "Glass-NoShade-BlueTint.svg" },
 
         // No shade or tint
         { name: "clear", src: "Glass-NoShade-NoTint.svg" },

src/digital-components/modal/modal.vue

@@ -78,8 +78,9 @@ export default {
             const validationResult = await this.form.validate();
             if (validationResult.valid) {
                 this.$emit("footer-button-event");
+            } else {
+                this.resetButtonStyle();
             }
-            this.resetButtonStyle();
         },
         resetButtonStyle() {
             this.$refs.buttonMain.resetButtonStyle();

src/helpers/heritage-integration/navigation-helper.spec.js

@@ -350,7 +350,7 @@ describe("navigateToHeritageFunnel", () => {
         const mockReferralNumber = "2";
         const mockCorrelationId = "55";
         const mockReferralDate = "2022";
-        const mockAccountNumber = "167132";
+        const mockParentAccountNumber = "167132";
         const mockSavedSessionId = "xxx-xxx-xxx";
         const mockCrmCustomerId = "xxx-xxx-xxx";
 
@@ -358,7 +358,7 @@ describe("navigateToHeritageFunnel", () => {
             mockReferralNumber,
             mockCorrelationId,
             mockReferralDate,
-            mockAccountNumber,
+            mockParentAccountNumber,
             mockSavedSessionId,
             mockCrmCustomerId
         );
@@ -395,7 +395,7 @@ describe("navigateToHeritageFunnel", () => {
         const mockReferralNumber = "2";
         const mockCorrelationId = "55";
         const mockReferralDate = "2022";
-        const mockAccountNumber = "167132";
+        const mockParentAccountNumber = "167132";
         const mockSavedSessionId = "xxx-xxx-xxx";
         const mockCrmCustomerId = "xxx-xxx-xxx";
 
@@ -403,7 +403,7 @@ describe("navigateToHeritageFunnel", () => {
             mockReferralNumber,
             mockCorrelationId,
             mockReferralDate,
-            mockAccountNumber,
+            mockParentAccountNumber,
             mockSavedSessionId,
             mockCrmCustomerId
         );

src/helpers/heritage-integration/order-helper.js

@@ -81,7 +81,7 @@ async function loadSession(
     savedSessionId,
     referralNumber,
     referralDate,
-    accountNumber,
+    parentAccountNumber,
     referralCorrelationId,
     isConceptInsurance
 ) {
@@ -94,8 +94,8 @@ async function loadSession(
             savedSessionId: savedSessionId?.toString(),
             referralNumber,
             referralDate,
-            accountNumber,
             referralCorrelationId,
+            parentAccountNumber,
             isConceptInsurance,
         },
         false
@@ -116,7 +116,7 @@ async function saveSessionHelper() {
             referralNumber: savedSessionInfo.data.referralNumber?.toString(),
             referralCorrelationId: savedSessionInfo.data.referralCorrelationId,
             referralDate: savedSessionInfo.data.referralDate,
-            accountNumber: savedSessionInfo.data.accountNumber?.toString(),
+            parentAccountNumber: savedSessionInfo.data.parentAccountNumber?.toString(),
             savedSessionId: savedSessionInfo.data.savedSessionId,
             crmCustomerId: savedSessionInfo.data.crmCustomerId?.toString(),
             eon: savedSessionInfo.data.eon,

src/helpers/heritage-integration/order-helper.spec.js

@@ -142,7 +142,7 @@ describe("saveSession", () => {
         const mockReferralNumber = "2";
         const mockCorrelationId = "55";
         const mockReferralDate = "2022";
-        const mockAccountNumber = "167132";
+        const mockParentAccountNumber = "167132";
         const mockSavedSessionId = "xxx-xxx-xxx";
         const mockCrmCustomerId = "xxx-xxx-xxx";
 
@@ -150,7 +150,7 @@ describe("saveSession", () => {
             mockReferralNumber,
             mockCorrelationId,
             mockReferralDate,
-            mockAccountNumber,
+            mockParentAccountNumber,
             mockSavedSessionId,
             mockCrmCustomerId
         );
@@ -182,7 +182,7 @@ describe("saveSession", () => {
                 referralNumber: mockReferralNumber,
                 referralDate: mockReferralDate,
                 referralCorrelationId: mockCorrelationId,
-                accountNumber: mockAccountNumber,
+                parentAccountNumber: mockParentAccountNumber,
                 savedSessionId: mockSavedSessionId,
                 crmCustomerId: mockCrmCustomerId,
             },
@@ -195,7 +195,7 @@ describe("saveSession", () => {
         const mockReferralNumber = 1566818;
         const mockReferralDate = "2022-03-15T10:56:24.597";
         const mockReferralCorrelationId = "404d2b04-f86e-45c3-b373-127b6217b060";
-        const mockAccountNumber = "167132";
+        const mockParentAccountNumber = "167132";
         const mockSavedSessionId = "xxx-xxx-xxx";
         const mockCrmCustomerId = "xxx-xxx-xxx";
 
@@ -203,7 +203,7 @@ describe("saveSession", () => {
             mockReferralNumber,
             mockReferralCorrelationId,
             mockReferralDate,
-            mockAccountNumber,
+            mockParentAccountNumber,
             mockSavedSessionId,
             mockCrmCustomerId
         );

src/helpers/unit-test-helper.js

@@ -104,7 +104,7 @@ export function getMockOrderInfo(
     mockReferralNumber,
     mockCorrelationId,
     mockReferralDate,
-    accountNumber = "0",
+    parentAccountNumber = "0",
     savedSessionId,
     crmCustomerId
 ) {
@@ -112,7 +112,7 @@ export function getMockOrderInfo(
         referralNumber: mockReferralNumber,
         referralCorrelationId: mockCorrelationId,
         referralDate: mockReferralDate,
-        accountNumber: accountNumber,
+        parentAccountNumber: parentAccountNumber,
         savedSessionId: savedSessionId,
         crmCustomerId: crmCustomerId,
     };

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

@@ -22,6 +22,7 @@
                 aria-live="polite">
                 <div class="col">
                     <textboxQuestion
+                        customInputId="apartmentNumberOrBusinessName"
                         cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
                         v-model="addressModel.apartmentNumberOrBusinessName"
                         ref="apartmentNumberOrBusinessName" />
@@ -32,6 +33,7 @@
             <div class="row mb-4" v-show="showAddressFields" aria-live="polite">
                 <div class="col">
                     <textboxQuestion
+                        customInputId="city"
                         cmsWidgetName="CityQuestionWidget"
                         v-model="addressModel.city"
                         ref="city"
@@ -43,14 +45,17 @@
             <div class="row mb-4" v-show="showAddressFields" aria-live="polite">
                 <div class="col">
                     <dropdownQuestion
+                        customInputId="state"
                         cmsWidgetName="StateQuestionWidget"
                         v-model="addressModel.state"
                         ref="state"
                         :options="stateOptions"
+                        initialValue="FL"
                         validationRules="state-required" />
                 </div>
                 <div class="col">
                     <textboxQuestion
+                        customInputId="zipCode"
                         cmsWidgetName="ZipQuestionWidget"
                         v-model="addressModel.zipCode"
                         ref="zipCode"

src/layouts/quote/quote.spec.js

@@ -63,11 +63,11 @@ mockStoreActionResults[storeActions.GET_SUPPORTING_ITEMS] = Promise.resolve([
 
 store.getters = {
     order: {
-        accountNumber: applicationConfig.CASH_ACCOUNT_NUMBER,
+        payment: {
-    },
+            insuranceCoverage: {},
-    payment: {
+            isInsurance: false,
-        insuranceCoverage: {},
+            parentAccountNumber: applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
-        isInsurance: false,
+        },
     },
 };
 
@@ -75,7 +75,9 @@ afterEach(() => {
     // reset store after each test
     store.getters = {
         order: {
-            accountNumber: applicationConfig.CASH_ACCOUNT_NUMBER,
+            payment: {
+                parentAccountNumber: applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
+            },
         },
         payment: {
             insuranceCoverage: {},

src/layouts/quote/quote.vue

@@ -184,13 +184,16 @@ export default {
             );
             if (!this.isInsuranceSelected) {
                 this.dispatchStoreAction(
-                    this.storeActions.SAVE_ACCOUNT_NUMBER,
+                    this.storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
-                    applicationConfig.CASH_ACCOUNT_NUMBER,
+                    applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
                     false
                 );
             }
 
-            if (this.$store.getters.order.accountNumber != applicationConfig.CASH_ACCOUNT_NUMBER) {
+            if (
+                this.$store.getters.order.payment.parentAccountNumber !=
+                applicationConfig.CASH_PARENT_ACCOUNT_NUMBER
+            ) {
                 this.supportingItems = this.filterOutFees(this.supportingItems);
             }
             if (this.pricedGlassParts.length > 0) {

src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue

@@ -40,13 +40,6 @@
                                         "
                                         :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
                                         aria-label="Modal window" />
-                                    <!-- <textLink
-                                        linkType="text"
-                                        :text="getRouterLinkDisplayTextFromCopy(copy)"
-                                        href="#!"
-                                        data-bs-toggle="modal"
-                                        :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
-                                        aria-label="Modal window" /> -->
                                 </span>
                             </template>
                         </li>

src/layouts/service-location/helpers/service-location-helper/service-location-helper.js

@@ -1,8 +1,13 @@
 import { storeActions } from "@/constants/store-actions";
 import baseMixin from "@/mixins/base-mixin.js";
 
-export async function getPricedMobileFeePart(serviceZipCode) {
+export async function getPricedMobileFeePart(
-    if (!serviceZipCode) {
+    serviceZipCode,
+    serviceType,
+    parentAccountNumber,
+    billToAccountNumber
+) {
+    if (!serviceZipCode || !serviceType || !parentAccountNumber) {
         return Promise.resolve(null);
     }
 
@@ -11,7 +16,11 @@ export async function getPricedMobileFeePart(serviceZipCode) {
     // Get the Mobile Fee Part
     const mobileFeePart = await baseMixin.methods.dispatchStoreAction(
         storeActions.GET_MOBILE_FEE_PART,
-        null,
+        {
+            serviceType: serviceType,
+            parentAccountNumber: parentAccountNumber,
+            billToAccountNumber: billToAccountNumber,
+        },
         false
     );
 
@@ -21,7 +30,7 @@ export async function getPricedMobileFeePart(serviceZipCode) {
         {
             availableLineItems: [mobileFeePart.data],
             serviceZipCode: serviceZipCode,
-            ctu: zipCodeData.zipCodeCtu,
+            serviceZipCodeCtu: zipCodeData.zipCodeCtu,
         },
         false
     );

src/layouts/service-location/helpers/service-location-helper/service-location-helper.spec.js

@@ -48,10 +48,18 @@ describe("service-location-helper.js", () => {
     it("Should return null if no service zip code is passed in", async () => {
         // Arrange
         const serviceZipCode = null;
+        const serviceType = "Replace";
+        const parentAccountNumber = 167132;
+        const billToAccountNumber = 1234;
         const expected = null;
 
         // Act
-        const result = await getPricedMobileFeePart(serviceZipCode);
+        const result = await getPricedMobileFeePart(
+            serviceZipCode,
+            serviceType,
+            parentAccountNumber,
+            billToAccountNumber
+        );
 
         // Assert
         expect(result).toEqual(expected);
@@ -60,6 +68,10 @@ describe("service-location-helper.js", () => {
     it("Should return the priced mobile fee part", async () => {
         // Arrange
         const serviceZipCode = "43235";
+        const serviceType = "Replace";
+        const parentAccountNumber = 167132;
+        const billToAccountNumber = 1234;
+
         const expected = {
             partNumber: "MOBILE FEE",
             description: "MOBILE FEE",
@@ -70,7 +82,12 @@ describe("service-location-helper.js", () => {
         };
 
         // Act
-        const result = await getPricedMobileFeePart(serviceZipCode);
+        const result = await getPricedMobileFeePart(
+            serviceZipCode,
+            serviceType,
+            parentAccountNumber,
+            billToAccountNumber
+        );
 
         // Assert
         expect(result).toEqual(expected);

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js

@@ -247,6 +247,7 @@ describe("mobile-location-modal-questions.vue", () => {
             attachTo: document.body,
         });
         wrapper.vm.$refs.MobileLocationModalWidget.closeModal = jest.fn();
+        wrapper.vm.resetModalButtonStyle = jest.fn();
 
         // Act
         wrapper.vm.internalModel = newMobileLocationQuestions;
@@ -293,6 +294,7 @@ describe("mobile-location-modal-questions.vue", () => {
         });
 
         wrapper.vm.internalModel = newMobileLocationQuestions;
+        wrapper.vm.resetModalButtonStyle = jest.fn();
 
         // Act
         await wrapper.vm.setMobileLocation();
@@ -300,40 +302,6 @@ describe("mobile-location-modal-questions.vue", () => {
         // Assert
         expect(wrapper.vm.displayInvalidZipAlert).toBe(true);
     });
-
-    it("Should clear the internal model when resetModel is called", async () => {
-        // Arrange
-        const mobileLocationQuestions = {
-            addressQuestions: {
-                streetAddress: "555 Some St",
-                apartmentNumberOrBusinessName: "Apt 1",
-                city: "Funkytown",
-                state: "OH",
-                zipCode: "55555",
-            },
-            isVehicleProtected: true,
-            serviceZipCode: "55555",
-        };
-
-        const { wrapper } = setupMocks({
-            mixins: [mockMixin],
-            props: {
-                modelValue: mobileLocationQuestions,
-            },
-            mountOptions: {
-                attachTo: document.body,
-            },
-        });
-
-        // Act
-        wrapper.vm.resetModel();
-
-        // Assert
-        expect(wrapper.vm.internalModel.addressQuestions.streetAddress).toEqual("");
-        expect(wrapper.vm.internalModel.addressQuestions.apartmentNumberOrBusinessName).toEqual("");
-        expect(wrapper.vm.internalModel.addressQuestions.city).toEqual("");
-        expect(wrapper.vm.internalModel.isVehicleProtected).toEqual(null);
-    });
 });
 
 function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {

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

@@ -1,47 +1,51 @@
 <template>
-    <div class="text-center">
+    <transition name="fade" mode="out-in">
-        <label
+        <div class="mobile-location-questions">
-            for="mobileLocationLinkPromptId"
+            <div class="text-center">
-            :aria-label="mobileLocationLinkPromptText"
+                <label
-            class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
+                    for="mobileLocationLinkPromptId"
-            v-html="mobileLocationLinkPromptText"></label>
+                    :aria-label="mobileLocationLinkPromptText"
-        <div class="update-mobile-location-text-link">
+                    class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
-            <textLink
+                    v-html="mobileLocationLinkPromptText"></label>
-                ref="mobileLocationLink"
+                <div class="update-mobile-location-text-link">
-                id="mobileLocationLinkPromptId"
+                    <textLink
-                linkType="text"
+                        ref="mobileLocationLink"
-                :text="mobileLocationLinkText"
+                        id="mobileLocationLinkPromptId"
-                href="#!"
+                        linkType="text"
-                @click-event="openModal"
+                        :text="mobileLocationLinkText"
-                aria-label="Modal window" />
+                        href="#!"
+                        @click-event="openModal"
+                        aria-label="Modal window" />
+                </div>
+                <textBlock
+                    :customText="mobileFeeText"
+                    cmsWidgetName="MobileFeeDisclaimerWidget"
+                    typeStyle="caption" />
+            </div>
+            <modal
+                :ref="modalName"
+                :headerText="modalHeaderText"
+                :footerButtonText="modalFooterText"
+                @footer-button-event="setMobileLocation">
+                <addressQuestions
+                    ref="addressQuestions"
+                    v-model="internalModel.addressQuestions"
+                    captureApartmentNumberOrBusinessName="true" />
+                <vehicleProtectedQuestion
+                    ref="vehicleProtectedQuestion"
+                    v-model="internalModel.isVehicleProtected"
+                    cmsWidgetName="VehicleProtectedQuestionWidget" />
+                <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
+                <alert
+                    ref="alertInvalidZip"
+                    v-if="displayInvalidZipAlert"
+                    class="my-4"
+                    cmsWidgetName="AlertInvalidZipWidget"
+                    alertClass="alert-danger"
+                    v-bind:isDismissible="false" />
+            </modal>
         </div>
-        <textBlock
+    </transition>
-            :customText="mobileFeeText"
-            cmsWidgetName="MobileFeeDisclaimerWidget"
-            typeStyle="caption" />
-    </div>
-    <modal
-        :ref="modalName"
-        :headerText="modalHeaderText"
-        :footerButtonText="modalFooterText"
-        @footer-button-event="setMobileLocation">
-        <addressQuestions
-            ref="addressQuestions"
-            v-model="internalModel.addressQuestions"
-            captureApartmentNumberOrBusinessName="true" />
-        <vehicleProtectedQuestion
-            ref="vehicleProtectedQuestion"
-            v-model="internalModel.isVehicleProtected"
-            cmsWidgetName="VehicleProtectedQuestionWidget" />
-        <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
-        <alert
-            ref="alertInvalidZip"
-            v-if="displayInvalidZipAlert"
-            class="my-4"
-            cmsWidgetName="AlertInvalidZipWidget"
-            alertClass="alert-danger"
-            v-bind:isDismissible="false" />
-    </modal>
 </template>
 
 <script>
@@ -54,7 +58,7 @@ import addressQuestions from "@/layouts/address-lookup/customer-questions/addres
 import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
 
 // Helpers
-import { deepClone } from "@/helpers/object-cloning-helper";
+import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
 
 export default {
     name: "mobile-location-modal-questions",
@@ -77,10 +81,12 @@ export default {
                     zipCode: "",
                 },
                 isVehicleProtected: null,
-                serviceZipCode: "",
-                mobileFeePart: null,
             }),
         },
+        mobileFeePart: {
+            type: Object,
+            default: () => ({}),
+        },
         isZipServiceableMobile: Boolean,
         isZipServiceableInShop: Boolean,
         linkWidgetName: String,
@@ -94,13 +100,13 @@ export default {
         },
         mobileLocationLinkText() {
             if (
-                this.addressModel.streetAddress !== null &&
+                this.addressModel.streetAddress &&
                 this.addressModel.streetAddress !== "" &&
-                this.addressModel.city !== null &&
+                this.addressModel.city &&
                 this.addressModel.city !== "" &&
-                this.addressModel.state !== null &&
+                this.addressModel.state &&
                 this.addressModel.state !== "" &&
-                this.addressModel.zipCode !== null &&
+                this.addressModel.zipCode &&
                 this.addressModel.zipCode !== ""
             ) {
                 return `${this.addressModel.streetAddress}\n${this.addressModel.city}, ${this.addressModel.state} ${this.addressModel.zipCode}`;
@@ -118,13 +124,14 @@ export default {
             return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
         },
         mobileFee() {
-            if (!this.modelValue.mobileFeePart) {
+            if (!this.mobileFeePart) {
                 return 0;
             }
+
             return (
-                this.modelValue.mobileFeePart.laborAmount +
+                this.mobileFeePart.laborAmount +
-                this.modelValue.mobileFeePart.sellingPrice +
+                this.mobileFeePart.sellingPrice +
-                this.modelValue.mobileFeePart.kitPrice
+                this.mobileFeePart.kitPrice
             );
         },
         modalFooterText() {
@@ -143,23 +150,22 @@ export default {
         closeModal() {
             this.$refs[this.modalName].closeModal();
         },
-        resetComponent() {
+        resetComponent(updatedServiceZipCodeInfo) {
-            this.resetModel();
+            // Reset the validation form, setting the initial values
-
+            // for the state and zipCode to those that were entered
-            // Reset the validation form
+            // on the service-zip-modal-question component
-            this.$refs[this.modalName].form.resetForm();
+            this.$refs[this.modalName].form.resetForm({
-
+                values: {
-            // Reinitialize the Address Auto Complete
+                    state: updatedServiceZipCodeInfo.state,
-            this.$refs.addressQuestions.setupAddressLookup();
+                    zipCode: updatedServiceZipCodeInfo.zipCode,
+                },
+            });
         },
-        resetModel() {
+        resetModalButtonStyle() {
-            // Address
+            this.$refs[this.modalName].resetButtonStyle();
-            this.internalModel.addressQuestions.streetAddress = "";
+        },
-            this.internalModel.addressQuestions.apartmentNumberOrBusinessName = "";
+        onAddressUpdated(updatedServiceZipCodeInfo) {
-            this.internalModel.addressQuestions.city = "";
+            this.resetComponent(updatedServiceZipCodeInfo);
-
-            // Is Vehicle Protected
-            this.internalModel.isVehicleProtected = null;
         },
         async setMobileLocation() {
             // Validate the Zip Code
@@ -169,6 +175,7 @@ export default {
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
+                this.resetModalButtonStyle();
             } else {
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);
@@ -180,6 +187,11 @@ export default {
         modelValue: {
             handler(newValue) {
                 this.internalModel = deepClone(newValue);
+
+                this.resetComponent({
+                    state: newValue.state,
+                    zipCode: newValue.zipCode,
+                });
             },
             deep: true,
         },

src/layouts/service-location/service-location.spec.js

@@ -32,11 +32,14 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
     return Promise.resolve(mobileFeePart);
 };
 
-jest.mock("@/helpers/service-location-helper", () => ({
+jest.mock(
-    getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
+    "@/layouts/service-location/helpers/service-location-helper/service-location-helper",
-        return mockGetPricedMobileFeePart(mockServiceZipCode);
+    () => ({
-    }),
+        getPricedMobileFeePart: jest.fn((mockServiceZipCode) => {
-}));
+            return mockGetPricedMobileFeePart(mockServiceZipCode);
+        }),
+    })
+);
 
 jest.mock("@/store", () => ({
     commit: jest.fn(),
@@ -65,7 +68,6 @@ const mockMixin = {
             if (zip === "43235" || zip === "55555") {
                 return Promise.resolve({
                     containsMilitaryBase: false,
-                    isServiceable: true,
                     isValid: true,
                     state: "OH",
                     zipCodeCtu: "01820",
@@ -74,7 +76,6 @@ const mockMixin = {
 
             return Promise.resolve({
                 containsMilitaryBase: false,
-                isServiceable: false,
                 isValid: false,
                 state: null,
                 zipCodeCtu: null,
@@ -109,6 +110,9 @@ const mockMixin = {
         getTotalLineItemPrice: jest.fn((lineItem) => {
             return 49.99;
         }),
+
+        onSubmit: jest.fn(),
+        onInvalidSubmit: jest.fn(),
     },
 };
 
@@ -130,9 +134,11 @@ beforeEach(() => {
             serviceLocation: {
                 zipCode: "43235",
                 state: "OH",
-                isServiceable: true,
             },
         },
+        damage: {
+            isRepair: false,
+        },
         payment: {
             isInsurance: false,
         },
@@ -171,7 +177,7 @@ describe("service-location.vue", () => {
             );
 
             // Assert
-            expect(wrapper.vm.mobileLocationQuestions.mobileFeePart).toStrictEqual(mobileFeePart);
+            expect(wrapper.vm.mobileFeePart).toStrictEqual(mobileFeePart);
         });
     });
 
@@ -220,13 +226,14 @@ describe("service-location.vue", () => {
     describe("updating service zip", () => {
         test("updates the page model after providing the service zip code", () => {
             // Arrange
-            const { wrapper } = setupMocks({});
+            const { wrapper } = setupMocks({
+                mixins: [mockMixin],
+            });
             wrapper.vm.$refs.mobileLocationModalQuestions.resetComponent = jest.fn();
 
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
-                isServiceable: true,
             };
 
             const serviceZipCodeComponent = wrapper.findComponent({
@@ -249,7 +256,6 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
-                isServiceable: true,
             };
 
             const mobileLocationQuestions = {
@@ -261,7 +267,6 @@ describe("service-location.vue", () => {
                     zipCode: "43054",
                 },
                 isVehicleProtected: true,
-                mobileFeePart: null,
             };
             wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
 
@@ -274,7 +279,6 @@ describe("service-location.vue", () => {
                     zipCode: "61606",
                 },
                 isVehicleProtected: null,
-                mobileFeePart: null,
             };
 
             const serviceZipCodeComponent = wrapper.findComponent({
@@ -304,7 +308,6 @@ describe("service-location.vue", () => {
                     zipCode: "",
                 },
                 isVehicleProtected: null,
-                mobileFeePart: null,
             };
             wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
 
@@ -317,7 +320,6 @@ describe("service-location.vue", () => {
                     zipCode: "43054",
                 },
                 isVehicleProtected: true,
-                mobileFeePart: null,
             };
 
             const mobileLocationComponent = wrapper.findComponent({
@@ -369,13 +371,11 @@ describe("service-location.vue", () => {
             wrapper.vm.serviceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
-                isServiceable: true,
             };
 
             const newServiceZipCodeInfo = {
                 state: "OH",
                 zipCode: "43081",
-                isServiceable: true,
             };
 
             // Act

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

@@ -7,8 +7,7 @@
             <div class="fade-on-route-transition sub-container make-tall">
                 <serviceZipModalQuestion
                     v-model="serviceZipCodeQuestion"
-                    @updated-service-zip-code="resetMobileLocation"
+                        ref="serviceZipCodeQuestion"
-                    ref="serviceZipCodeQuestion"
                     linkWidgetName="ServiceZipLinkWidget"
                     modalWidgetName="ServiceZipModalWidget" />
                 <serviceTypeQuestion
@@ -20,7 +19,8 @@
                 <mobileLocationModalQuestions
                     v-if="selectedServiceType === 'Mobile'"
                     v-model="mobileLocationQuestions"
-                    ref="mobileLocationModalQuestions"
+                    :mobileFeePart="mobileFeePart"
+                ref="mobileLocationModalQuestions"
                     linkWidgetName="MobileLocationLinkWidget"
                     modalWidgetName="MobileLocationModalWidget" />
                 <funnel-footer
@@ -48,7 +48,7 @@ import { Form } from "vee-validate";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import { getPricedMobileFeePart } from "@/helpers/service-location-helper";
+import { getPricedMobileFeePart } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 import store from "@/store";
 
 export default {
@@ -60,7 +60,7 @@ export default {
             city: this.getServiceCityFromStore(),
             state: this.getServiceStateFromStore(),
             zipCode: this.getServiceZipCodeFromStore(),
-            isServiceable: false,
+            isVehicleProtected: null,
             isZipServiceableMobile: null,
             isZipServiceableInShop: null,
             mobileFeePart: null,
@@ -72,7 +72,16 @@ export default {
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
         const serviceZipCode = store.getters.order.serviceLocation.zipCode;
-        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
+        const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
+        const parentAccountNumber = store.getters.payment.parentAccountNumber;
+        const billToAccountNumber = 0;
+
+        const mobileFeePartPromise = getPricedMobileFeePart(
+            serviceZipCode,
+            serviceType,
+            parentAccountNumber,
+            billToAccountNumber
+        );
 
         // Settle promises and get results
         const promiseResultMap = [
@@ -100,19 +109,15 @@ export default {
                 return {
                     state: this.state,
                     zipCode: this.zipCode,
-                    isServiceable: this.isServiceable,
                 };
             },
             set: function (newValue) {
                 if (newValue.zipCode !== this.zipCode) {
-                    this.resetMobileLocation(this.zipCode);
+                    this.resetMobileLocation(newValue);
                 }
 
                 this.state = newValue.state;
                 this.zipCode = newValue.zipCode;
-                this.isServiceable = newValue.isServiceable;
-
-                console.log(this);
             },
         },
         mobileLocationQuestions: {
@@ -126,7 +131,6 @@ export default {
                         zipCode: this.zipCode,
                     },
                     isVehicleProtected: this.isVehicleProtected,
-                    mobileFeePart: this.mobileFeePart,
                 };
             },
             set: function (newValue) {
@@ -137,7 +141,6 @@ export default {
                 this.state = newValue.addressQuestions.state;
                 this.zipCode = newValue.addressQuestions.zipCode;
                 this.isVehicleProtected = newValue.isVehicleProtected;
-                this.mobileFeePart = newValue.mobileFeePart;
             },
         },
     },
@@ -167,27 +170,28 @@ export default {
         getServiceZipCodeFromStore() {
             return store.getters.order.serviceLocation.zipCode;
         },
-        getIsServiceableFromStore() {
-            return store.getters.order.serviceLocation.isServiceable;
-        },
         resetMobileFeePart(serviceZipCode) {
-            getPricedMobileFeePart(serviceZipCode).then((pricedMobileFeePart) => {
+            const serviceType = store.getters.damage.isRepair ? "Repair" : "Replace";
+            const parentAccountNumber = store.getters.payment.parentAccountNumber;
+            const billToAccountNumber = 0;
+
+            getPricedMobileFeePart(
+                serviceZipCode,
+                serviceType,
+                parentAccountNumber,
+                billToAccountNumber
+            ).then((pricedMobileFeePart) => {
                 this.mobileFeePart = pricedMobileFeePart;
             });
         },
         resetMobileLocation(updatedServiceZipCode) {
-            if (!this.$refs.mobileLocationModalQuestions) {
-                return;
-            }
-
             this.streetAddress = "";
             this.apartmentNumberOrBusinessName = "";
             this.city = "";
+
             this.isVehicleProtected = null;
 
-            this.$refs.mobileLocationModalQuestions.resetComponent();
+            this.resetMobileFeePart(updatedServiceZipCodeInfo.zipCode);
-
-            this.resetMobileFeePart(updatedServiceZipCode);
         },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js

@@ -12,6 +12,7 @@ jest.mock("@/digital-components/textbox-question/textbox-question", () => ({
 jest.mock("@/digital-components/modal/modal", () => ({
     methods: {
         closeModal: jest.fn(),
+        resetButtonStyle: jest.fn(),
     },
 }));
 
@@ -44,7 +45,6 @@ const mockMixin = {
             if (zip === "43235") {
                 return {
                     containsMilitaryBase: false,
-                    isServiceable: true,
                     isValid: true,
                     state: "OH",
                     zipCodeCtu: "01820",
@@ -54,7 +54,6 @@ const mockMixin = {
             if (zip === "61606") {
                 return {
                     containsMilitaryBase: false,
-                    isServiceable: true,
                     isValid: true,
                     state: "IL",
                     zipCodeCtu: "01526",
@@ -63,7 +62,6 @@ const mockMixin = {
 
             return {
                 containsMilitaryBase: false,
-                isServiceable: false,
                 isValid: false,
                 state: null,
                 zipCodeCtu: null,
@@ -77,7 +75,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "",
             zipCode: "",
-            isServiceable: undefined,
         };
 
         // Arrange
@@ -100,7 +97,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "OH",
             zipCode: "43235",
-            isServiceable: true,
         };
 
         const wrapper = mount(serviceZipModalQuestion, {
@@ -122,7 +118,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
-            isServiceable: true,
         };
 
         const zip = "43235";
@@ -141,7 +136,7 @@ describe("service-zip-modal-question.vue", () => {
         wrapper.vm.internalModel.zipCode = zip;
         await wrapper.vm.setZipCode();
 
-        let expectedEmit = [[{ isServiceable: true, state: "OH", zipCode: "43235" }]];
+        let expectedEmit = [[{ state: "OH", zipCode: "43235" }]];
 
         // Assert
         expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
@@ -152,7 +147,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
-            isServiceable: true,
         };
 
         const zip = "";
@@ -180,7 +174,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
-            isServiceable: true,
         };
 
         const zip = "11111";
@@ -208,7 +201,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
-            isServiceable: true,
         };
 
         const zip = "";
@@ -237,7 +229,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
-            isServiceable: true,
         };
 
         const zip = "123";

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -54,7 +54,6 @@ export default {
             default: () => ({
                 state: "",
                 zipCode: "",
-                isServiceable: null,
             }),
         },
         linkWidgetName: String,
@@ -104,7 +103,6 @@ export default {
             return {
                 state: modelToCopy.state,
                 zipCode: modelToCopy.zipCode,
-                isServiceable: modelToCopy.isServiceable,
             };
         },
 
@@ -116,6 +114,10 @@ export default {
             this.$refs[this.modalName].closeModal();
         },
 
+        resetModalButtonStyle() {
+            this.$refs[this.modalName].resetButtonStyle();
+        },
+
         onInputIdAssigned(inputId) {
             this.serviceZipCodeTextInputId = inputId;
         },
@@ -134,13 +136,13 @@ export default {
             this.resetAlerts();
 
             const zipCodeData = await this.getZipCodeData(this.internalModel.zipCode);
+            this.resetModalButtonStyle();
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
                 this.focusOnZipInput();
             } else {
                 this.internalModel.state = zipCodeData.state;
-                this.internalModel.isServiceable = zipCodeData.isServiceable;
 
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);

src/store/index.js

@@ -67,11 +67,11 @@ const getDefaultState = () => {
                     isVerified: null,
                     coverageStatus: null,
                 },
+                parentAccountNumber: 0,
             },
             referralNumber: null,
             referralDate: null,
             referralCorrelationId: null,
-            accountNumber: 0,
             eon: null,
         },
         applicationUser: {
@@ -166,7 +166,7 @@ export const mutations = {
         state.order.referralDate = referralDate;
     },
     updateParentAcctNumber(state, parentAcctNumber) {
-        state.order.accountNumber = parentAcctNumber;
+        state.order.payment.parentAccountNumber = parentAcctNumber;
     },
     updateEON(state, eon) {
         state.order.eon = eon;
@@ -355,7 +355,8 @@ export const mutations = {
         state.order.lineItems.supportingItems = sessionInformation.order.lineItems.supportingItems;
         state.order.lineItems.vaps = sessionInformation.order.lineItems.vaps;
         state.order.lineItems.serverData = sessionInformation.order.lineItems.serverData;
-        state.order.accountNumber = sessionInformation.order.accountNumber;
+        state.order.payment.parentAccountNumber =
+            sessionInformation.order.payment.parentAccountNumber;
         state.order.providerNumber = sessionInformation.order.providerNumber;
         (state.order.serviceLocation.address =
             sessionInformation.order.serviceLocation.streetAddress),
@@ -425,7 +426,7 @@ export const getters = {
             funnelServiceCity: state.order.serviceLocation.city,
             funnelServiceState: state.order.serviceLocation.state,
             funnelServiceZipCode: state.order.serviceLocation.zipCode,
-            funnelParentAccountNumber: state.order.accountNumber,
+            funnelParentAccountNumber: state.order.payment.parentAccountNumber,
             funnelIsCoverageVerified: state.order.payment.insuranceCoverage.isVerified,
             funnelHasRecalibrationPart: getHasRecalibrationPart(state),
             funnelSelectedMultiGlass: state.order.damage.glassToReplace?.length > 1,
@@ -677,7 +678,7 @@ export const actions = {
             referralDate,
             referralCorrelationId,
             eon,
-            accountNumber,
+            parentAccountNumber,
             savedSessionId,
             crmCustomerId,
         }
@@ -686,7 +687,7 @@ export const actions = {
         context.commit(storeMutations.UPDATE_REFERRAL_DATE, referralDate);
         context.commit(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, referralCorrelationId);
         context.commit(storeMutations.UPDATE_EON, eon);
-        context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, accountNumber);
+        context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, parentAccountNumber);
         context.commit(storeMutations.UPDATE_SAVED_SESSION_ID, savedSessionId);
         context.commit(storeMutations.UPDATE_CRM_CUSTOMER_ID, crmCustomerId);
     },
@@ -933,7 +934,7 @@ export const actions = {
             payload: {
                 carId: carId,
                 serviceType: isRepair ? "Repair" : "Replace",
-                parentAccountNumber: applicationConfig.CASH_ACCOUNT_NUMBER,
+                parentAccountNumber: applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
                 parts: glassPartsArray,
                 numberOfRepairChips: isRepair ? numberOfChips : 0,
             },
@@ -1029,8 +1030,8 @@ export const actions = {
                             isVerified: order.payment.insuranceCoverage.isVerified ?? false,
                         },
                         isInsurance: order.payment.isInsurance ?? false,
+                        parentAccountNumber: order.payment.parentAccountNumber,
                     },
-                    accountNumber: order.accountNumber,
                     providerNumber: "",
                     serviceLocation: {
                         streetAddress: order.serviceLocation.address,
@@ -1055,8 +1056,8 @@ export const actions = {
             savedSessionId,
             referralNumber,
             referralDate,
+            parentAccountNumber,
             referralCorrelationId,
-            accountNumber,
             isConceptInsurance,
         }
     ) {
@@ -1070,7 +1071,7 @@ export const actions = {
                     savedSessionId: savedSessionId?.toString(),
                     referralNumber: referralNumber?.toString(),
                     referralDate: referralDate?.toString(),
-                    accountNumber: accountNumber,
+                    parentAccountNumber: parentAccountNumber,
                     referralCorrelationId: referralCorrelationId,
                 },
             })
@@ -1420,8 +1421,8 @@ export const actions = {
     savePaymentType(context, isInsurance) {
         context.commit(storeMutations.UPDATE_IS_INSURANCE, isInsurance);
     },
-    saveAccountNumber(context, accountNumber) {
+    saveParentAccountNumber(context, parentAccountNumber) {
-        context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, accountNumber);
+        context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, parentAccountNumber);
     },
     saveSupportingItems(context, supportingItems) {
         context.commit(storeMutations.UPDATE_SUPPORTING_ITEMS, supportingItems);
@@ -1430,11 +1431,16 @@ export const actions = {
         context.commit(storeMutations.UPDATE_VAPS, vaps);
     },
     // Price order actions
-    async priceOrderItemsAndSaveServerData(context, { availableLineItems, serviceZipCode, ctu }) {
+    async priceOrderItemsAndSaveServerData(
+        context,
+        { availableLineItems, serviceZipCode, serviceZipCodeCtu }
+    ) {
         const zipCodeToUse = serviceZipCode
             ? serviceZipCode
             : context.getters.order.serviceLocation.zipCode;
-        const ctuToUse = ctu ? ctu : context.getters.order.serviceLocation.zipCodeCtu;
+        const ctuToUse = serviceZipCodeCtu
+            ? serviceZipCodeCtu
+            : context.getters.order.serviceLocation.zipCodeCtu;
 
         const availableLineItemsFormattedForRequest =
             getLineItemQueryStringForPricing(availableLineItems);
@@ -1442,7 +1448,7 @@ export const actions = {
         const vehicle = context.getters.order.vehicle;
 
         let queryString =
-            `ParentAccountNumber=${applicationConfig.CASH_ACCOUNT_NUMBER}` +
+            `ParentAccountNumber=${applicationConfig.CASH_PARENT_ACCOUNT_NUMBER}` +
             `&CTU=${ctuToUse}` +
             `&CarId=${vehicle.carId}` +
             `&Make=${vehicle.make}` +

src/store/store.spec.js

@@ -235,9 +235,9 @@ describe("Mutations", () => {
                         isVerified: false,
                     },
                     isInsurance: false,
+                    parentAccountNumber: "123456789",
                 },
                 parts: [],
-                accountNumber: "123456789",
                 insuranceInfo: {},
                 serviceLocation: {},
                 customer: {},
@@ -761,7 +761,7 @@ describe("Actions", () => {
             referralNumber: "123",
             referralDate: new Date().toUTCString(),
             referralCorrelationId: "xxx-xxx-xxx",
-            accountNumber: "167132",
+            parentAccountNumber: "167132",
             savedSessionId: "xxx-xxx-xxx",
             crmCustomerId: "xxx-xxx-xxx",
         });

src/styles/common-error-styles.scss

@@ -136,6 +136,18 @@ html {
             }
         }
     }
+    //Quote page radio button group
+    .package-main {
+        .package-wrapper {
+            .has-error {
+                input[type="radio"] {
+                    + .package-label {
+                        border: 1px solid $red;
+                    }
+                }
+            }
+        }
+    }
     //Restore to default style if alert box is present
     .alertError {
         .has-error {