Merge branch 'develop' into feature/CSR-1384-modals-for-add-vaps

public/css/site-2020Styling.css

@@ -87,6 +87,20 @@
   display: none;
 }
 
+.buy-backdrop {
+  background-color: rgba(0, 0, 0, 0.3) !important;
+}
+.buy-backdrop #afterpay__iframe-checkout-container {
+  width: 100%;
+}
+.buy-backdrop #afterpay__iframe-checkout-container .style_closeWrapper__lIHJe {
+  display: none;
+}
+
+.buy-container-closer {
+  display: none;
+}
+
 @keyframes rotate {
   0% {
     transform: rotate(0);

public/scss/site-2020Styling.scss

@@ -90,6 +90,24 @@
     }
 }
 
+// AfterPay Styles
+
+.buy-backdrop {
+    background-color: rgba(0,0,0,.3)!important;
+    #afterpay__iframe-checkout-container {
+        width: 100%;
+        .style_closeWrapper__lIHJe {
+            display: none;
+        }
+    }
+}
+
+.buy-container-closer {
+    display: none;
+}
+
+// Modal Spinner
+
 @keyframes rotate {
     0% {  transform: rotate(0)}
     100% { transform: rotate(360deg)}

src/fmg-components/cart/cart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="cart mb-4">
+    <div class="cart mb-5">
         <div class="px-0">
             <div
                 class="row vin-toggle flex align-items-center"
@@ -24,6 +24,7 @@
                     :class="[this.packageCartItems ? 'vaps' : '']">
                     <span>{{ cartItem.name }}</span>
                     <textLink
+                        v-if="allowItemRemoval"
                         ref="removeLink"
                         linkType="text"
                         :text="removeLinkText"
@@ -32,13 +33,13 @@
                 </div>
 
                 <!-- Nonpackaged Cart Items -->
-                <hr style="background: red" />
                 <div
                     class="premium-appt-cart-item"
                     v-for="(cartItem, i) in nonpackageCartItems"
                     :key="i">
                     <span>{{ cartItem.name }}</span>
                     <textLink
+                        v-if="allowItemRemoval"
                         ref="removeLink"
                         linkType="text"
                         :text="removeLinkText"
@@ -53,7 +54,7 @@
                         linkType="text"
                         :text="recycleFeeCartItem.name"
                         href="#!"
-                        @click-event="openModal(recyclingModal)" />
+                        @click-event="openModal(recyclingModalCmsWidgetName)" />
                     <span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
                 </div>
                 <div v-if="mobileFeeCartItem">
@@ -61,9 +62,10 @@
                     ><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
                 </div>
 
-                <div v-if="premiumAppointmentDiscountCartItem">
+                <div v-if="premiumAppointmentDiscountCartItem" class="premium-appt-cart-item">
                     <span>{{ premiumAppointmentDiscountCartItem.name }}</span>
                     <textLink
+                        v-if="allowItemRemoval"
                         ref="removeLink"
                         linkType="text"
                         :text="removeLinkText"
@@ -95,6 +97,9 @@
                 </div>
             </div>
         </div>
+        <contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal">
+            <textBlock cmsWidgetName="RecycleTextBlock" />
+        </contentGroupModal>
     </div>
 </template>
 
@@ -102,6 +107,7 @@
 // Components
 import textLink from "@/ux-components/text-link/text-link";
 import textBlock from "@/digital-components/text-block/text-block";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 
 // Mixins
 import baseMixin from "@/mixins/base-mixin.js";
@@ -122,6 +128,8 @@ export default {
         damage: Object,
         servicePackageOptionsCmsName: String,
         availableVaps: Object,
+        allowItemRemoval: Boolean,
+        recyclingModalCmsWidgetName: String,
     },
     data() {
         return {
@@ -135,6 +143,9 @@ export default {
         };
     },
     methods: {
+        openModal(modalName) {
+            this.$refs[modalName].openModal();
+        },
         toggleClass: function (event) {
             this.isActive = !this.isActive;
         },
@@ -678,6 +689,7 @@ export default {
     components: {
         textBlock,
         textLink,
+        contentGroupModal,
     },
 };
 </script>
@@ -688,6 +700,12 @@ export default {
         border-bottom: 1px solid $gray-500;
         color: $black;
     }
+    .modal-body {
+        h5 {
+            text-align: center;
+            border-bottom: none;
+        }
+    }
     .border-bottom {
         color: $gray;
     }
@@ -730,6 +748,9 @@ export default {
                     justify-content: flex-end;
                 }
             }
+            a {
+                font-size: 0.875rem;
+            }
         }
         .package-type,
         .service-type {
@@ -761,6 +782,7 @@ export default {
             }
             a {
                 order: 3;
+                margin-right: 100%;
             }
         }
     }
@@ -789,4 +811,12 @@ export default {
         }
     }
 }
+.payment-method-question {
+    .question-text {
+        margin: 1rem 0 0.5rem 0;
+    }
+    span {
+        line-height: 24px;
+    }
+}
 </style>

src/helpers/promotions-helper.js

@@ -1,6 +1,7 @@
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions";
 import { partTypeStrings } from "@/constants/part-type-strings";
+import { deepClone } from "@/helpers/object-helper";
 import baseMixin from "@/mixins/base-mixin.js";
 
 export const promoPartNumberStrings = {
@@ -126,6 +127,31 @@ export function getPromosThatMatchLineItemsOnOrder(promos, lineItemsOnOrder) {
     return matchingPromos;
 }
 
+// Returns the vaps that the provided <promos> requires to be on the order to satisfy
+//  Items that are already in <lineItemsOnOrder> will not be returned
+export function getVapsThatNeedToBeAddedToSatisfyPromos(
+    promos,
+    availableLineItems,
+    lineItemsOnOrder
+) {
+    const clonedVaps = deepClone(lineItemsOnOrder.vaps ?? []);
+    const promosWithAddableVaps = getPromosWithAddableVaps(promos);
+    if (promosWithAddableVaps.length) {
+        const matchingLineItems = getLineItemsThatMatchPromos(
+            promosWithAddableVaps,
+            availableLineItems
+        );
+        // Check if matching items are already in the order
+        const idsOfVapsAlreadyInOrder = clonedVaps.map((lineItem) => lineItem.id);
+        const vapsToAddToCart = matchingLineItems.filter(
+            (lineItem) => !idsOfVapsAlreadyInOrder.includes(lineItem.id)
+        );
+        return vapsToAddToCart;
+    } else {
+        return [];
+    }
+}
+
 export function shouldStripPromoQueryString(fmgPageQueryValue) {
     return pagesToStripPromoQueryStringFrom.includes(fmgPageQueryValue);
 }

src/layouts/confirmation/confirmation.vue

@@ -14,6 +14,7 @@
                                 <div>
                                     <vehicleBanner
                                         cmsWidgetName="VehicleBannerWidget"
+                                        :displayVehicleImage="vehicleBannerImageUrl"
                                         :displayGenericVehicleImage="false" />
                                 </div>
                                 <div class="scheduleText">
@@ -205,6 +206,9 @@ export default {
                 return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
             }
         },
+        vehicleBannerImageUrl() {
+            return store.getters.submittedOrder?.vehicle.imageUrl;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -238,7 +242,11 @@ export default {
             const schedule = store.getters.order.schedule;
             const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
 
-            return serviceLocationReqs && scheduleReqs;
+            // Customer
+            const customer = store.getters.order.customer;
+            const customerReqs = !!customer.emailAddress;
+
+            return serviceLocationReqs && scheduleReqs && customerReqs;
         },
         forwardButtonAction() {
             window.location.assign("//www.safelite.com/");

src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue

@@ -97,7 +97,11 @@ export default {
             this.$refs[modalName].closeModal();
         },
         addRainDefenseToCart(modalName, part) {
-            this.currentCartItems.vaps.push(part);
+            // Clone vaps array, then replace this.currentCartItems.vaps with it at the end
+            //  in order to successfully trigger parent's watcher
+            const clonedVaps = this.currentCartItems.vaps.slice(0);
+            clonedVaps.push(part);
+            this.currentCartItems.vaps = clonedVaps;
             this.closeModal(modalName);
             const message = this.getRainDefenseAddedMessage();
             this.$emit("added-to-cart", {
@@ -133,19 +137,23 @@ export default {
                     this.selectedWipers = ["REAR"];
                 }
             }
+            // Clone vaps array, then replace this.currentCartItems.vaps with it at the end
+            //  in order to successfully trigger parent's watcher
+            const clonedVaps = this.currentCartItems.vaps.slice(0);
 
             itemsForCart.forEach((type) => {
                 if (type === wipersOfferedStrings.FRONT) {
                     part.frontWiperLineItems.forEach((part) => {
-                        this.currentCartItems.vaps.push(part);
+                        clonedVaps.push(part);
                     });
                 }
                 if (type === wipersOfferedStrings.REAR) {
                     part.rearWiperLineItems.forEach((part) => {
-                        this.currentCartItems.vaps.push(part);
+                        clonedVaps.push(part);
                     });
                 }
             });
+            this.currentCartItems.vaps = clonedVaps;
 
             this.closeModal(modalName);
 

src/layouts/payment-method/payment-method-question/payment-method-question.vue

@@ -77,6 +77,7 @@ export default {
 .payment-method-question {
     .question-text span {
         text-align: left;
+        line-height: 24px;
     }
 }
 </style>

src/layouts/payment-method/payment-method.vue

@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal notFullScreen ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container-fluid">
             <div class="row">
                 <div class="col">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -24,11 +24,13 @@
                     <cart
                         :damage="damageInfo"
                         :availableVaps="availableVaps"
+                        :allowItemRemoval="true"
                         v-model="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
-                        @cart-remove="cartRemove" />
+                        @cart-remove="cartRemove"
+                        recyclingModalCmsWidgetName="RecycleModal" />
 
-                    <hr />
+                    <hr class="my-5" />
 
                     <div>
                         <alert
@@ -86,7 +88,8 @@ import { paymentMethods } from "@/constants/payment-method-constants";
 import { experimentSettings } from "@/constants/experiments";
 import {
     revalidatePromosAndValidateNewPromo,
-    getAddableVapsFromAvailableLineItems,
+    getPromosWithAddableVaps,
+    getVapsThatNeedToBeAddedToSatisfyPromos,
 } from "@/helpers/promotions-helper";
 import { queryStrings } from "@/constants/query-strings";
 import { getQuerystringParameter } from "@/helpers/querystring-helper";
@@ -166,7 +169,10 @@ export default {
                 "payment-method"
             );
 
-        pricedLineItemsToTax.push(...(validatePromoResponse?.orderPromos ?? []));
+            
+        const newValidatedPromos = validatePromoResponse?.orderPromos ?? [];
+        
+        pricedLineItemsToTax.push(...newValidatedPromos);
         // End of promo logic
 
         const taxedLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
@@ -189,6 +195,16 @@ export default {
         const lineItems = mapTaxedLineItemsToStoreFormat(taxedLineItems, lineItemsFromStore);
         const taxedVaps = mapTaxedLineItemsToStoreFormat(taxedLineItems, availableVaps);
 
+        // Add items that were not in the store yet but added via query string promo validation
+        lineItems.promos = lineItems.promos ?? [];
+        lineItems.promos.push(...newValidatedPromos);
+        const vapsToAddToCart = getVapsThatNeedToBeAddedToSatisfyPromos(
+            newValidatedPromos,
+            taxedVaps,
+            lineItems
+        );
+        lineItems.vaps.push(...vapsToAddToCart);
+
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
@@ -240,7 +256,7 @@ export default {
             const scheduleReqs = !!(
                 schedule.date &&
                 schedule.startTime &&
-                (!isMobile || schedule.endTime) &&
+                schedule.endTime &&
                 schedule.jobMaxMinutes &&
                 schedule.jobMinMinutes
             );
@@ -383,10 +399,11 @@ export default {
             }
         },
         isPiaDisabled() {
-            const piaExperience =
+            const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
-                this.getSettingValue(experimentSettings.PIA_EXPERIENCE) === "PIA Optional";
 
-            return !piaExperience;
+            const isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
+
+            return !isEnabled;
         },
         paymentMethod() {
             if (this.isPiaDisabled) {
@@ -398,11 +415,35 @@ export default {
         shouldDisplayPiaAlert() {
             return this.$route.params[this.routerParams.DISPLAY_PIA_ALERT];
         },
+        // Necessary to make the watcher of lineItems work
+        // JavaScript does not keep a record of the old value, only a reference to it's location in the memory.
+        //  This creates a separate location for oldValue/newValue so they can be compared
+        // See Vue github issue #2164
+        lineItemsCloneForWatcher() {
+            return Object.assign({}, this.lineItems);
+        },
     },
     watch: {
         customCtaCopy(newValue) {
             this.updateFooterButtonText(newValue);
         },
+        lineItemsCloneForWatcher: {
+            handler(newValue, oldValue) {
+                if (
+                    !oldValue ||
+                    oldValue.length == 0 ||
+                    !oldValue.vaps ||
+                    !newValue ||
+                    newValue.length == 0
+                ) {
+                    return;
+                }
+                if (oldValue.vaps.length != newValue.vaps.length) {
+                    this.revalidatePromos();
+                }
+            },
+            deep: true,
+        },
     },
     components: {
         funnelHeader,

src/layouts/payment/payment.vue

@@ -21,6 +21,19 @@
                             scrolling="no">
                         </iframe>
                     </div>
+
+                    <hr />
+
+                    <cart
+                        :damage="damageInfo"
+                        :availableLineItems="availableLineItems"
+                        :allowItemRemoval="false"
+                        v-model="lineItems"
+                        servicePackageOptionsCmsName="ServicePackageTitle"
+                        recyclingModalCmsWidgetName="RecycleModal" />
+
+                    <hr />
+
                     <paymentSwitch
                         cmsWidgetName="PaymentMethodWidget"
                         :paymentType="paymentType"
@@ -163,7 +176,7 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-
+import cart from "@/fmg-components/cart/cart";
 import paymentSwitch from "./payment-switch/payment-switch.vue";
 
 import { storeActions } from "@/constants/store-actions";
@@ -175,6 +188,13 @@ import { applicationConfig } from "@/constants/application-config";
 import { paymentMethods } from "@/constants/payment-method-constants";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import baseMixin from "@/mixins/base-mixin.js";
+import { mapTaxedAvailableLineItemsToStoreFormat } from "../../store";
+import {
+    revalidatePromosAndValidateNewPromo,
+    getAddableVapsFromAvailableLineItems,
+} from "@/helpers/promotions-helper";
+import { queryStrings } from "@/constants/query-strings";
+import { getQuerystringParameter } from "@/helpers/querystring-helper";
 
 import iframeResize from "../../../node_modules/iframe-resizer/js/iframeResizer.js";
 
@@ -207,6 +227,8 @@ export default {
             displayAmount: this.getDisplayAmountDue(),
             piaLineItems: this.getPiaLineItems(),
             paypalPayment: this.isPaypal(),
+            lineItems: [],
+            availableLineItems: [],
         };
     },
     directives: {
@@ -231,6 +253,24 @@ export default {
             "payment"
         );
 
+        const wipersPromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_WIPERS,
+            null,
+            "payment"
+        );
+
+        const rainDefensePromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_RAIN_DEFENSE,
+            null,
+            "payment"
+        );
+
+        const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_SUPPORTING_ITEMS,
+            null,
+            "payment"
+        );
+
         // TODO: Data fetching Promise declarations
 
         const promiseResultMap = [
@@ -242,14 +282,84 @@ export default {
                 resultKey: "signature",
                 promise: signaturePromise,
             },
+            {
+                resultKey: "wipers",
+                promise: wipersPromise,
+            },
+            {
+                resultKey: "rainDefense",
+                promise: rainDefensePromise,
+            },
+            {
+                resultKey: "supportingItems",
+                promise: supportingItemsPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
+        const glassParts = store.getters.order.lineItems.glassParts ?? [];
+
+        let availableLineItems = [
+            resultMap.rainDefense,
+            ...resultMap.supportingItems,
+            ...resultMap.wipers,
+            ...glassParts,
+        ];
+
+        const lineItemsFromStore = store.getters.order.lineItems;
+
+        await baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
+            {
+                availableLineItems: availableLineItems,
+            },
+            "payment",
+            false
+        );
+
+        // Promo logic
+        const promoCodeFromQueryString = getQuerystringParameter(queryStrings.PROMO);
+
+        const { validatePromoResponse, revalidatePromoResponse } =
+            await revalidatePromosAndValidateNewPromo(
+                promoCodeFromQueryString,
+                availableLineItems,
+                "payment-method"
+            );
+
+        availableLineItems.push(...(validatePromoResponse?.orderPromos ?? []));
+        // End of promo logic
+
+        const taxedAvailableLineItems = await baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.TAX_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
+            {
+                billToAccountNumber: "87291",
+                providerNumber: store.getters.order.serviceLocation.provider.providerNumber,
+                appointmentType: store.getters.order.serviceLocation.appointmentType,
+                serviceLocationCity: store.getters.order.serviceLocation.city,
+                serviceLocationState: store.getters.order.serviceLocation.state,
+                serviceLocationZipCode: store.getters.order.serviceLocation.zipCode,
+                pricedAvailableLineItems: availableLineItems,
+            },
+            "payment-method",
+            false
+        );
+
+        // Match all available line items to the line items as they are in the store
+        // and rebuild the original structure.
+        const lineItems = mapTaxedAvailableLineItemsToStoreFormat(
+            availableLineItems,
+            lineItemsFromStore
+        );
+
         // Call the "next" function to complete the transition to this page.
         next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.fetchSignatureInfo(resultMap.signature);
+
+            vm.availableLineItems = taxedAvailableLineItems;
+            vm.lineItems = lineItems;
         });
     },
     computed: {
@@ -276,6 +386,9 @@ export default {
         switchPaymentText() {
             return this.getCmsContent("PaymentMethodWidget", "QuestionText");
         },
+        damageInfo() {
+            return this.$store.getters.damage;
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -312,7 +425,7 @@ export default {
             const scheduleReqs = !!(
                 schedule.date &&
                 schedule.startTime &&
-                (!isMobile || schedule.endTime) &&
+                schedule.endTime &&
                 schedule.jobMaxMinutes &&
                 schedule.jobMinMinutes
             );
@@ -466,6 +579,7 @@ export default {
         funnelHeader,
         navbar,
         loadingModal,
+        cart,
         paymentSwitch,
     },
 };
@@ -474,7 +588,7 @@ export default {
 <style lang="scss">
 .hop-iframe {
     position: relative;
-    min-height: 1120px;
+    min-height: 650px;
     width: 100%;
     border: 0 none;
 }

src/layouts/review/review-block/review-block.vue

@@ -55,4 +55,7 @@ export default {
 :deep(.review-block-content > ul) {
     margin-bottom: 0rem;
 }
+.review-block-content {
+    width: 90%;
+}
 </style>

src/layouts/review/review.vue

@@ -207,7 +207,7 @@ export default {
             const scheduleReqs = !!(
                 schedule.date &&
                 schedule.startTime &&
-                (!isMobile || schedule.endTime) &&
+                schedule.endTime &&
                 schedule.jobMaxMinutes &&
                 schedule.jobMinMinutes
             );

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

@@ -286,6 +286,7 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
+                zipCodeCtu: "01526",
             };
 
             const serviceZipCodeComponent = wrapper.findComponent({
@@ -316,6 +317,7 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
+                zipCodeCtu: "01526",
             };
 
             const mobileLocationQuestions = {
@@ -365,6 +367,7 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
+                zipCodeCtu: "01526",
             };
 
             wrapper.vm.selectedAppointmentType = "Inshop";
@@ -395,6 +398,7 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "45433",
                 state: "OH",
+                zipCodeCtu: "01526",
             };
 
             // Act
@@ -511,11 +515,13 @@ describe("service-location.vue", () => {
             wrapper.vm.serviceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
+                zipCodeCtu: "01526",
             };
 
             const newServiceZipCodeInfo = {
                 state: "OH",
                 zipCode: "43081",
+                zipCodeCtu: "01526",
             };
 
             // Act

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

@@ -245,6 +245,7 @@ export default {
                 return {
                     state: this.state,
                     zipCode: this.zipCode,
+                    zipCodeCtu: this.zipCodeCtu,
                 };
             },
             set: function (newValue) {
@@ -256,6 +257,7 @@ export default {
 
                 this.state = newValue.state;
                 this.zipCode = newValue.zipCode;
+                this.zipCodeCtu = newValue.zipCodeCtu;
 
                 this.$nextTick();
             },

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

@@ -113,6 +113,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "",
             zipCode: "",
+            zipCodeCtu: "",
         };
 
         // Arrange
@@ -135,6 +136,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "OH",
             zipCode: "43235",
+            zipCodeCtu: "01820",
         };
 
         const wrapper = mount(serviceZipModalQuestion, {
@@ -156,6 +158,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
+            zipCodeCtu: "01526",
         };
 
         const zip = "43235";
@@ -176,7 +179,7 @@ describe("service-zip-modal-question.vue", () => {
 
         await wrapper.vm.setZipCode();
 
-        let expectedEmit = [[{ state: "OH", zipCode: "43235" }]];
+        let expectedEmit = [[{ state: "OH", zipCode: "43235", zipCodeCtu: "01820" }]];
 
         // Assert
         expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
@@ -187,6 +190,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
+            zipCodeCtu: "01526",
         };
 
         const zip = "";
@@ -214,6 +218,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
+            zipCodeCtu: "01526",
         };
 
         const zip = "11111";
@@ -241,6 +246,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
+            zipCodeCtu: "01526",
         };
 
         const zip = "";
@@ -269,6 +275,7 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
+            zipCodeCtu: "01526",
         };
 
         const zip = "123";

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

@@ -141,6 +141,7 @@ export default {
                     this.resetModalButtonStyle();
                 } else {
                     this.internalModel.state = zipCodeData.state;
+                    this.internalModel.zipCodeCtu = zipCodeData.zipCodeCtu;
 
                     // retrieve mobile fee part
                     const serviceZipCode = this.internalModel.zipCode;