Merge branch 'develop' into feature/CSR-1382-loose-ends

src/digital-components/checkbox-question/checkbox-question.vue

@@ -1,16 +1,18 @@
 <template>
     <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-    <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
+    <div
-        <input
+        class="form-check ui-checkbox d-flex align-items-center"
-            v-model="value"
+        :class="[hasError ? 'has-error' : '']">
-            class="form-check-input"
-            type="checkbox"
-            aria-checked="false"
-            :name="checkboxName"
-            :id="buttonID"
-            :tabindex="tabIndex"
-            :aria-required="isRequired" />
         <label class="d-flex align-items-start" :for="buttonID">
+            <input
+                v-model="value"
+                class="form-check-input me-2"
+                type="checkbox"
+                aria-checked="false"
+                :name="checkboxName"
+                :id="buttonID"
+                :tabindex="tabIndex"
+                :aria-required="isRequired" />
             <p v-html="checkboxLabelCopy" class="m-0"></p>
             <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
         </label>

src/digital-components/modal/modal.vue

@@ -198,10 +198,6 @@ export default {
             button {
                 margin: 0;
             }
-            @include media-breakpoint-up(md) {
-                position: relative;
-                background-color: transparent;
-            }
         }
     }
     &.show .modal-dialog {

src/digital-components/textbox-question/textbox-question.vue

@@ -67,7 +67,7 @@
         </div>
         <div v-show="errorMessage" class="row form-test-error">
             <span
-                class="d-inline-flex small my-1"
+                class="d-inline-flex small mt-1"
                 aria-atomic="true"
                 aria-live="polite"
                 :class="[centerErrorMessage ? 'center-error-message' : '']"

src/fmg-components/vehicle-banner/vehicle-banner.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="vehicle_banner mb-3 text-center">
+    <div class="vehicle_banner mb-4 text-center">
         <img class="vehicle-image img-fluid" :src="vehicleImageToDisplay" alt="" />
     </div>
 </template>

src/layouts/customer-details/customer-details.vue

@@ -8,7 +8,7 @@
             </div>
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4 mb-5" />
                     <textboxQuestion
                         class="mb-4"
                         cmsWidgetName="FirstNameWidget"

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

@@ -320,15 +320,7 @@ export default {
                     );
             }
         },
-        async ccdPayment() {
+
-            this.piaSetup("cc");
-        },
-        async paypal() {
-            this.piaSetup("pp");
-        },
-        async afterpay() {
-            this.piaSetup("ap");
-        },
         async piaSetup(payNowType) {
             this.$refs.loadingModal.showModal();
 
@@ -336,7 +328,7 @@ export default {
             await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
             await this.dispatchStoreAction(
                 storeActions.SAVE_PAYMENT_METHOD_CHOICE,
-                this.paymentMethod,
+                payNowType,
                 false
             );
 

src/layouts/payment/payment.vue

@@ -135,7 +135,7 @@
         <input type="hidden" name="sgCCTimeoutURL" :value="piaCancelUrl" />
 
         <input type="hidden" name="sgTransactionType" value="authorization" />
-        <input type="hidden" name="amount" :value="amountDue" />
+        <input type="hidden" name="amount" :value="totalAmount" />
         <input type="hidden" name="ctu" :value="ctu" />
         <input type="hidden" name="orderNumber" :value="workOrderNumber" />
 
@@ -312,10 +312,12 @@ export default {
             return itemsForPia;
         },
         getAmountDue() {
-            return baseMixin.methods.getAmountDue(store.getters.order.lineItems);
+            return 350.0;
+            //return baseMixin.methods.getAmountDue(store.getters.order.lineItems);
         },
         getDisplayAmountDue() {
-            return baseMixin.methods.getDisplayAmountDue(store.getters.order.lineItems);
+            return "$350.00";
+            //return baseMixin.methods.getDisplayAmountDue(store.getters.order.lineItems);
         },
         isPaypal() {
             if (this.getPaymentType() == "pp") {

src/layouts/review/review.vue

@@ -30,7 +30,7 @@
                         isPrimary
                         :buttonText="forwardButtonText"
                         loaderColor="white"
-                        class="mb-2"
+                        class="mb-2 w-100"
                         @click-event="forwardButtonAction" />
 
                     <div>

src/layouts/schedule/location-alerts/location-alerts.vue

@@ -3,7 +3,7 @@
         v-for="alert in prefixedAlertReasons"
         :key="alert.cmsWidgetName"
         :ref="alert.cmsWidgetName"
-        class="mt-2 mb-3"
+        class="mt-5 mb-4"
         :cmsWidgetName="alert.cmsWidgetName"
         alertClass="alert-warning" />
 </template>

src/layouts/schedule/schedule.vue

@@ -439,16 +439,16 @@ export default {
                 this.appointmentType === AppointmentTypeStrings.MOBILE &&
                 this.selectedTimeSlotInfo?.isPremiumAppointment
             ) {
-                const earlyBirdIndex = supportingItems.findIndex(
+                const premiumFeeIndex = supportingItems.findIndex(
                     (item) => item.partType == PREMIUM_FEE_PART_TYPE
                 );
 
-                if (earlyBirdIndex >= 0) {
+                if (premiumFeeIndex >= 0) {
-                    supportingItems[earlyBirdIndex].laborAmount =
+                    supportingItems[premiumFeeIndex].laborAmount =
                         this.mobilePremiumAppointmentFee.laborAmount;
-                    supportingItems[earlyBirdIndex].selingPrice =
+                    supportingItems[premiumFeeIndex].sellingPrice =
-                        this.mobilePremiumAppointmentFee.selingPrice;
+                        this.mobilePremiumAppointmentFee.sellingPrice;
-                    supportingItems[earlyBirdIndex].kitPrice =
+                    supportingItems[premiumFeeIndex].kitPrice =
                         this.mobilePremiumAppointmentFee.kitPrice;
                 } else {
                     supportingItems.push(this.mobilePremiumAppointmentFee);
@@ -461,12 +461,12 @@ export default {
                 );
             } else {
                 // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
-                const removeEarlyBirdIndex = supportingItems.findIndex(
+                const removePremiumFeeIndex = supportingItems.findIndex(
                     (item) => item.partType == PREMIUM_FEE_PART_TYPE
                 );
 
-                if (removeEarlyBirdIndex >= 0) {
+                if (removePremiumFeeIndex >= 0) {
-                    supportingItems.splice(removeEarlyBirdIndex, 1);
+                    supportingItems.splice(removePremiumFeeIndex, 1);
                     this.dispatchStoreAction(
                         this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
                         supportingItems,

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

@@ -7,7 +7,6 @@ import { getMountOptions } from "@/helpers/unit-test-helper";
 
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
-import { getServiceabilityDetails } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 // Define Mocks
 jest.mock("@/helpers/cms-content-helper", () => ({
@@ -412,6 +411,9 @@ describe("service-location.vue", () => {
             const { wrapper } = setupMocks({});
 
             await wrapper.setData({
+                shopProviderData: {
+                    mobileProviderNumber: "001820",
+                },
                 selectedAppointmentType: "Mobile",
                 providerData: { mobileProviderNumber: "01820" },
             });
@@ -464,6 +466,9 @@ describe("service-location.vue", () => {
             const { wrapper } = setupMocks({});
 
             await wrapper.setData({
+                shopProviderData: {
+                    mobileProviderNumber: "001820",
+                },
                 selectedAppointmentType: "Mobile",
                 providerData: { mobileProviderNumber: "01820" },
             });
@@ -528,6 +533,9 @@ describe("service-location.vue", () => {
             const { wrapper } = setupMocks({});
 
             await wrapper.setData({
+                shopProviderData: {
+                    mobileProviderNumber: "001820",
+                },
                 selectedAppointmentType: "Mobile",
                 providerData: { mobileProviderNumber: "01820" },
             });
@@ -984,14 +992,13 @@ describe("service-location.vue", () => {
         describe("should be based only on glass serviceability if recalibration is not defined.", () => {
             test("Should return true", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: null,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: null,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1012,14 +1019,13 @@ describe("service-location.vue", () => {
 
             test("Should return false", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: null,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: null,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1040,14 +1046,13 @@ describe("service-location.vue", () => {
 
             test("displayServiceableMobileOnly should be true if mobile is true and inshop is false.", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: null,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: null,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1069,14 +1074,13 @@ describe("service-location.vue", () => {
 
             test("displayServiceableMobileOnly should be false if mobile is false", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: null,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: null,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1098,14 +1102,13 @@ describe("service-location.vue", () => {
 
             test("displayServiceableMobileOnly should be false if inShop is true", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: null,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: null,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1127,14 +1130,13 @@ describe("service-location.vue", () => {
 
             test("requiresInshopRecalibration should not be true if recalibration info is null.", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: null,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: null,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1158,14 +1160,13 @@ describe("service-location.vue", () => {
         describe("should properly display alerts.", () => {
             test("Should show mobile-only error if only mobile is available.", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: false,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1187,14 +1188,13 @@ describe("service-location.vue", () => {
 
             test("Should not show mobile-only error if not mobile-only.", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1216,14 +1216,13 @@ describe("service-location.vue", () => {
 
             test("Should show no-shop error if no shops are available.", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: false,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1245,14 +1244,13 @@ describe("service-location.vue", () => {
 
             test("Should not show no-shop error if shops are available.", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1274,14 +1272,13 @@ describe("service-location.vue", () => {
 
             test("Should show inshop-only error if only inshop is available", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1303,14 +1300,13 @@ describe("service-location.vue", () => {
 
             test("Should not show inshop-only error if not inshop-only", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: false,
                         isRecalibrationServiceableInshop: false,
                         isGlassServiceableMobile: false,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1332,14 +1328,13 @@ describe("service-location.vue", () => {
 
             test("Should not show inshop-only error if dual or static recalibration, but should show that error instead.", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: false,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 
@@ -1363,14 +1358,13 @@ describe("service-location.vue", () => {
 
             test("Should not show dual/static recalibration error if not those recalibration types", async () => {
                 // Arrange
-                getServiceabilityDetails.mockImplementation(() =>
+                mockGetServiceabilityDetails = () =>
                     Promise.resolve({
                         isGlassServiceableInshop: true,
                         isRecalibrationServiceableInshop: true,
                         isGlassServiceableMobile: true,
                         isRecalibrationServiceableMobile: true,
-                    })
+                    });
-                );
 
                 const { wrapper } = setupMocks({});
 

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

@@ -441,7 +441,7 @@ export default {
                 // If it already exists, update the price with latest data
                 if (mobileFeeIndex >= 0) {
                     supportingItems[mobileFeeIndex].laborAmount = this.mobileFeePart.laborAmount;
-                    supportingItems[mobileFeeIndex].selingPrice = this.mobileFeePart.selingPrice;
+                    supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
                     supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
                 } else {
                     supportingItems.push(this.mobileFeePart);
@@ -502,15 +502,26 @@ export default {
         },
     },
     watch: {
-        selectedAppointmentType: {
+        zipCode: {
-            async handler(newValue) {
+            handler(newValue) {
-                if (newValue === "Mobile") {
+                getShopProviderData(this.zipCode).then(async (result) => {
-                    getShopProviderData(this.zipCode).then(async (result) => {
+                    this.shopProviderData = result.data;
-                        this.shopProviderData = result.data;
+                    if (this.selectedAppointmentType === "Mobile") {
                         this.selectedProvider = new Provider(
                             this.shopProviderData.mobileProviderNumber
                         );
-                    });
+                    } else {
+                        this.selectedProvider = new Provider();
+                    }
+                });
+            },
+        },
+        selectedAppointmentType: {
+            handler(newValue) {
+                if (newValue === "Mobile") {
+                    this.selectedProvider = new Provider(
+                        this.shopProviderData.mobileProviderNumber
+                    );
                 } else {
                     this.selectedProvider = new Provider();
                 }

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

@@ -214,6 +214,8 @@ export default {
         },
         shopProviders: {
             async handler(newValue) {
+                this.resetAnswers();
+
                 await nextTick();
                 const selectedShopIndex = this.getSelectedProviderIndex(
                     newValue,