Merge branch 'release/heavy.truck' into feature/CASH-320

package-lock.json

@@ -8,6 +8,7 @@
       "name": "Safelite",
       "version": "0.1.0",
       "dependencies": {
+        "@iframe-resizer/child": "^5.3.3",
         "axios": "^0.23.0",
         "bootstrap": "^5.3.3",
         "core-js": "^3.38.1",
@@ -2162,6 +2163,16 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@iframe-resizer/child": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@iframe-resizer/child/-/child-5.3.3.tgz",
+      "integrity": "sha512-A+avzzQ6R5AaK0RQ/v0sxrN/S7zeS0U7TE/Jcc2Wln0gpVHpkEMHLOYVBAS2ho8ZA6yhbyZeNoDCh3RMtCp14w==",
+      "license": "GPL-3.0",
+      "funding": {
+        "type": "individual",
+        "url": "https://iframe-resizer.com/pricing/"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@iframe-resizer/child": "^5.3.3",
     "axios": "^0.23.0",
     "bootstrap": "^5.3.3",
     "core-js": "^3.38.1",

src/constants/endpoints.js

@@ -188,6 +188,10 @@ const endpoints = {
         url: "/account/api/v1/account/bill-to-account-number",
         method: "GET",
     },
+    ClosestApplicableShops: {
+        url: "/location/api/v1/location/closest-applicable-shops",
+        method: "GET",
+    },
 };
 
 export { endpoints };

src/constants/store-actions.js

@@ -53,6 +53,7 @@ const storeActions = {
     GET_INSURANCE_COMPANY_LIST: "getInsuranceCompanyList",
     GET_BILL_TO_ACCOUNT_NUMBER: "getBillToAccountNumber",
     GET_RECAL_PARTS_AND_SAVE_TO_LINE_ITEMS: "getRecalPartsAndSaveToLineItems",
+    GET_CLOSEST_APPLICABLE_SHOPS: "getClosestApplicableShops",
 
     // Analytics
     LOG_EXPERIMENT_EXPOSURE_AND_UPDATE_STORE: "logExperimentExposureAndUpdateStore",

src/constants/store-mutations.js

@@ -17,6 +17,7 @@ const storeMutations = {
     UPDATE_VEHICLE_IMAGE_COLOR: "updateVehicleImageColor",
     UPDATE_VEHICLE_VIN: "updateVehicleVin",
     UPDATE_VEHICLE: "updateVehicle",
+    UPDATE_VEHICLE_CAN_SAFELITE_SERVICE: "updateVehicleCanSafeliteService",
 
     UPDATE_IS_REPAIR: "updateIsRepair",
     UPDATE_NUMBER_OF_CHIPS: "updateNumberOfChips",

src/experiment-components/donation-block.vue

@@ -12,7 +12,8 @@
                 </div>
                 <div>
                     <p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
-                    <p class="caption mb-0" v-html="DonationBodyText"></p>
+                    <span class="caption mb-0" v-html="DonationBodyText"></span>
+                    &nbsp;
                     <textLink
                         linkType="newWindowLink"
                         text="Learn more"
@@ -61,11 +62,11 @@
                 <div class="col-12">
                     <div
                         v-if="showDonationSuccess"
-                        class="d-flex justify-content-center align-items-center btn-success w-100 mb-2"
+                        class="d-flex justify-content-center align-items-center btn-success w-100"
                         v-html="DonationThanksAlertWidget"></div>
                 </div>
             </div>
-            <div class="row px-4">
+            <div class="row px-4 mt-2">
                 <div class="col">
                     <alert
                         v-if="showDonationError"
@@ -75,7 +76,7 @@
             </div>
             <div class="row">
                 <div class="col-12">
-                    <p class="my-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
+                    <p class="mt-0 mb-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
                 </div>
             </div>
         </form>
@@ -142,7 +143,7 @@ export default {
 
 <style lang="scss" scoped>
 .donation-block {
-    padding: 1rem 0;
+    padding: 1rem 0 0 0;
     background-color: $gray-100;
     border-radius: 0;
 

src/fmg-components/address-questions/address-questions.vue

@@ -124,10 +124,6 @@ export default {
             type: Boolean,
             default: false,
         },
-        isAddressFieldFocused: {
-            type: Boolean,
-            default: true,
-        },
     },
     data() {
         return {
@@ -229,9 +225,6 @@ export default {
             ).then(() => {
                 // When loaded, trigger the setup
                 this.initializeAutocomplete();
-                if (this.isAddressFieldFocused) {
-                    this.addressField1.focus();
-                }
             });
         },
         initializeAutocomplete() {

src/fmg-components/cart/cart.vue

@@ -200,6 +200,7 @@ export default {
         isItac: Boolean,
         isNoComp: Boolean,
         isExpandedOnLoad: Boolean,
+        isMSRFeeApplicable: Boolean,
     },
     data() {
         return {
@@ -846,9 +847,6 @@ export default {
         isCashItacNoComp() {
             return !this.isInsurance || this.isITAC || this.isNoComp;
         },
-        getIsMSRFeeApplicableFromStore() {
-            return this.$store.getters.order.isMSRFeeApplicable;
-        },
         mobileFeeCartItemName() {
             return this.getCmsContent("MobileServiceTextWidget", "Text");
         },
@@ -865,7 +863,7 @@ export default {
                 (mobileFeeLineItem?.sellingPrice ?? 0);
 
             if (mobileTotal > 0) {
-                if (this.getIsMSRFeeApplicableFromStore) {
+                if (this.isMSRFeeApplicable) {
                     showMobileFeeCartItem = this.isCashItacNoComp;
                 } else {
                     showMobileFeeCartItem = true;

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

@@ -19,8 +19,7 @@
                         ref="customerQuestions"
                         v-model="customerQuestions"
                         :validationRules="EmailOrSmsValidationRules"
-                        :isEmailOptional="IsEmailOptional"
+                        :isEmailOptional="IsEmailOptional" />
-                        :isAddressFieldFocused="IsAddressFieldFocused" />
                     <alert
                         ref="alertVinNotFound"
                         v-if="displayVinNotFoundAlert"
@@ -465,9 +464,6 @@ export default {
                 .replaceAll("{custom:vinYmmFound}", vinYmmFound)
                 .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
         },
-        IsAddressFieldFocused() {
-            return false;
-        },
     },
     watch: {
         customerQuestions: {

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

@@ -1,9 +1,6 @@
 <template>
     <div class="customer-questions">
-        <addressQuestions
+        <addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
-            ref="addressQuestions"
-            v-model="customerModel.addressQuestions"
-            :isAddressFieldFocused="isAddressFieldFocused" />
         <div class="row mb-4">
             <div class="col">
                 <textboxQuestion
@@ -90,11 +87,6 @@ export default {
         },
         validationRules: String,
         isEmailOptional: Boolean,
-        isAddressFieldFocused: {
-            required: false,
-            type: Boolean,
-            default: true,
-        },
     },
     computed: {
         customerModel: {

src/layouts/confirmation/confirmation.vue

@@ -62,7 +62,8 @@
                                 :shouldHideRecalibration="shouldHideRecalibration"
                                 :isExpandedOnLoad="false"
                                 :isItac="isItac"
-                                :isNoComp="isNoComp" />
+                                :isNoComp="isNoComp"
+                                :isMSRFeeApplicable="isMSRFeeApplicable" />
 
                             <div class="mt-3" v-if="DisplayFosterLove">
                                 <donationBlock
@@ -423,6 +424,9 @@ export default {
         damageInfo() {
             return this.submittedOrder?.damage;
         },
+        isMSRFeeApplicable() {
+            return this.submittedOrder?.isMSRFeeApplicable;
+        },
         isInsurance() {
             return this.submittedOrder?.payment?.isInsurance;
         },

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

@@ -36,7 +36,8 @@
                         :shouldHideRecalibration="shouldHideRecalibration"
                         :isItac="isItac"
                         :isNoComp="isNoComp"
-                        :isExpandedOnLoad="false" />
+                        :isExpandedOnLoad="false"
+                        :isMSRFeeApplicable="isMSRFeeApplicable" />
 
                     <hr />
 
@@ -683,6 +684,9 @@ export default {
         damageInfo() {
             return this.$store.getters.damage;
         },
+        isMSRFeeApplicable() {
+            return this.$store.getters.order.isMSRFeeApplicable;
+        },
         isInsurance() {
             return this.hasSubmittedOrder()
                 ? this.getSubmittedOrder()?.payment.isInsurance

src/layouts/payment-pia-return/payment-pia-return.vue

@@ -15,6 +15,10 @@ import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form } from "vee-validate";
 import { paymentMethods } from "@/constants/payment-method-constants";
 import { routerParams } from "@/router/router-constants/router-params";
+// iframeResizer IS loaded into the page and necessary for the package to
+//   to auto scale the iFrame this page is loaded in
+// Do not remove despite showing as "unused" CASH-309
+import iframeResizer from "@iframe-resizer/child";
 
 export default {
     name: "payment-pia-return",

src/layouts/vehicle/vehicle.vue

@@ -49,7 +49,7 @@
                         placeHolderText="Select style"
                         customDropdownId="styleQuestionField" />
 
-                    <div v-if="showHeavyTruck">
+                    <div v-if="isHeavyTruck">
                         <div class="separator-line"></div>
                         <textboxQuestion
                             class="mb-4"
@@ -140,6 +140,7 @@ export default {
             modelOptions: [],
             styleOptions: [],
             displayNoServiceAlert: false,
+            canSafeliteService: this.canSafeliteServiceFromStore(),
         };
     },
 
@@ -315,6 +316,9 @@ export default {
     },
 
     watch: {
+        serviceZipCode(newValue, oldValue) {
+            this.resetAlert();
+        },
         async selectedYear(year) {
             this.resetAlert();
             this.makeOptions = [];
@@ -322,6 +326,7 @@ export default {
             this.selectedModel = null;
             this.selectedStyle = null;
             this.vehicleSubType = null;
+            this.canSafeliteService = false;
             this.carId = null;
             if (year) {
                 const result = await this.getMakeOptions(year);
@@ -425,10 +430,8 @@ export default {
                 !!this.carId
             );
         },
-        showHeavyTruck() {
+        isHeavyTruck() {
-            return (
+            return this.vehicleSubType === vehicleSubTypes.HEAVY_TRUCK && this.canSafeliteService;
-                this.vehicleSubType === vehicleSubTypes.HEAVY_TRUCK && !this.displayNoServiceAlert
-            );
         },
     },
     methods: {
@@ -479,11 +482,8 @@ export default {
             this.imageVifNumber = result?.data.imageVifNumber;
             this.imageVifColor = result?.data.imageVifColor;
             this.displayNoServiceAlert = !result?.data.canSafeliteService;
+            this.canSafeliteService = result?.data.canSafeliteService;
             this.vehicleSubType = result?.data.vehicleSubType;
-
-            // if (this.showHeavyTruck) {
-
-            // }
         },
         resetAlert() {
             this.displayNoServiceAlert = false;
@@ -500,6 +500,7 @@ export default {
                     vehicleSubType: this.vehicleSubType,
                     carId: this.carId,
                     category: this.category,
+                    canSafeliteService: this.canSafeliteService,
                     imageUrl: this.imageUrl,
                     imageVifNumber: this.imageVifNumber,
                     imageVifColor: this.imageVifColor,
@@ -507,7 +508,7 @@ export default {
                 false
             );
 
-            if (this.showHeavyTruck) {
+            if (this.isHeavyTruck) {
                 const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
                 await this.dispatchStoreAction(
                     storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
@@ -518,6 +519,18 @@ export default {
                     },
                     false
                 );
+
+                // check the location endpoint to verify this zip can service a heavy truck
+                var closestShops = await this.dispatchStoreActionWithLogging(
+                    storeActions.GET_CLOSEST_APPLICABLE_SHOPS,
+                    { zip: this.serviceZipCode, carId: this.carId },
+                    "vehicle"
+                );
+
+                if (!closestShops || closestShops.data?.providers?.length === 0) {
+                    this.displayNoServiceAlert = true;
+                    return this.$refs.navbar.removeLoader();
+                }
             }
 
             this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
@@ -545,6 +558,9 @@ export default {
         selectedStylefromStore() {
             return store.getters.externalParameterVehicle.style ?? store.getters.vehicle.style;
         },
+        canSafeliteServiceFromStore() {
+            return store.getters.vehicle.canSafeliteService ?? false;
+        },
         async getMakeOptions(year) {
             return await baseMixin.methods.dispatchStoreActionWithLogging(
                 storeActions.GET_VEHICLE_MAKES,

src/store/index.js

@@ -65,6 +65,7 @@ const getDefaultState = () => {
                 carId: null,
                 category: null,
                 vin: null,
+                canSafeliteService: null,
                 imageUrl: null,
                 imageVifNumber: null,
                 imageColor: null,
@@ -221,6 +222,9 @@ export const mutations = {
     updateVehicleCategory(state, category) {
         state.order.vehicle.category = category;
     },
+    updateVehicleCanSafeliteService(state, canSafeliteService) {
+        state.order.vehicle.canSafeliteService = canSafeliteService;
+    },
     updateVehicleImageUrl(state, imageUrl) {
         state.order.vehicle.imageUrl = imageUrl;
     },
@@ -1244,6 +1248,15 @@ export const actions = {
         });
     },
 
+    getClosestApplicableShops(context, { payload: { zip, carId }, pageNameToLog }) {
+        return globalMethods.callHttpClient({
+            methods: endpoints.ClosestApplicableShops.method,
+            endpoint: `${endpoints.ClosestApplicableShops.url}/${zip}/${carId}`,
+            logApiCall: true,
+            pageNameToLog: pageNameToLog,
+        });
+    },
+
     // Dependency Actions
     resetVehicleStateAndDependencies(context) {
         context.commit(storeMutations.RESET_VEHICLE_STATE);
@@ -2348,6 +2361,7 @@ export const actions = {
             vehicleSubType,
             carId,
             category,
+            canSafeliteService,
             imageUrl,
             imageVifNumber,
             imageVifColor,
@@ -2370,6 +2384,7 @@ export const actions = {
             context.commit(storeMutations.UPDATE_VEHICLE_SUBTYPE, vehicleSubType);
             context.commit(storeMutations.UPDATE_CAR_ID, carId);
             context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, category);
+            context.commit(storeMutations.UPDATE_VEHICLE_CAN_SAFELITE_SERVICE, canSafeliteService);
             context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, imageUrl);
             context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, imageVifNumber);
             context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, imageVifColor);