Merge branch 'develop' into rlsmerge/2025.02.27-to-develop

src/constants/experiments.js

@@ -19,6 +19,7 @@ const experimentSettings = {
     INSURANCE_TAB_TO_DISPLAY_THRESHOLD_EXTERNAL: "NextGen_ExternalInsuranceTabDisplayThreshold",
     DISPLAY_MSR: "DisplayMSR",
     PRICING_BY_DAY: "DisplayPricingByDay",
+    FOSTER_LOVE: "DisplayFosterLove",
 };
 
 const experimentTriggers = {

src/experiment-components/donation-block.vue

@@ -20,7 +20,9 @@
                         target="_blank" />
                 </div>
             </div>
-            <div class="px-4" :class="[showDonationSuccess ? 'hide-donation-block' : 'show-donation-block']">
+            <div
+                class="px-4"
+                :class="[showDonationSuccess ? 'hide-donation-block' : 'show-donation-block']">
                 <div class="row">
                     <div class="col-12">
                         <div class="donation-slider my-4">
@@ -31,9 +33,17 @@
                                 :value="donationValues[0]"
                                 checked />
                             <label for="one" class="label">$1</label>
-                            <input name="amount" id="three" type="radio" :value="donationValues[1]" />
+                            <input
+                                name="amount"
+                                id="three"
+                                type="radio"
+                                :value="donationValues[1]" />
                             <label for="three" class="label">$3</label>
-                            <input name="amount" id="five" type="radio" :value="donationValues[2]" />
+                            <input
+                                name="amount"
+                                id="five"
+                                type="radio"
+                                :value="donationValues[2]" />
                             <label for="five" class="label">$5</label>
                             <div class="indicator-bar"></div>
                         </div>

src/experiment-components/service-package-radio.vue

@@ -201,19 +201,44 @@ export default {
                 If this experiment wins, move this to package-label ::before/::after below
                 */
                 &:before {
-                    top: 15px;
+                    top: 0.9375rem;
                 }
                 &:after {
-                    top: 30px;
+                    top: 1.875rem;
+                }
+                @include media-breakpoint-up(lg) {
+                    &:before {
+                        top: .5rem;
+                    }
+                    &:after {
+                        top: 1.4375rem;
+                    }
+                    p {
+                        span {
+                            align-self: center;
+                        }
+                    }
                 }
             }
 
             + .package-label.pricing-by-day-pkg-lbl-ins {
                 &:before {
-                    top: 5px;
+                    top: .3125rem;
                 }
                 &:after {
-                    top: 20px;
+                    top: 1.25rem;
+                }
+            }
+
+            + .package-label.pricing-by-day-pkg-lbl {
+                &:before {
+                    top: 0.9375rem;
+                    @include media-breakpoint-up(lg) {
+                        top: .3125rem;
+                    }
+                }
+                &:after {
+                    top: 1.25rem;
                 }
             }
 
@@ -350,7 +375,8 @@ export default {
                     &.pricing-info-pricing-by-day {
                         text-align: end;
                         color: $green;
-                        font-size: 0.875rem;
+                        font-size: 1rem;
+                        line-height: 1;
                         span.strikethrough-price {
                             text-decoration: line-through;
                             font-size: 0.75rem;
@@ -376,6 +402,7 @@ export default {
                     justify-content: flex-end;
                     align-items: center;
                     align-self: flex-start;
+                    line-height: 1;
                     div.strikethrough-discount-price {
                         display: inline;
                         text-decoration: line-through;
@@ -392,8 +419,12 @@ export default {
                     div.discount-price {
                         color: $green;
                         display: inline;
+                        font-size: 1rem;
                     }
                 }
+                .caption {
+                    font-size: 0.625rem;
+                }
             }
             ul {
                 margin: 1rem 0 0 -5px;

src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

@@ -151,6 +151,7 @@ export default {
 
         &.btn {
             &.btn-secondary {
+                font-weight: 900;
                 border: none;
                 &:hover,
                 &:active,
@@ -180,6 +181,7 @@ export default {
             transition: background 0s 0s ease-in-out;
         }
     }
+    
     .modal.modal-component .modal-dialog .modal-content {
         .modal-header {
             padding-top: 0;

src/layouts/confirmation/confirmation.vue

@@ -64,7 +64,7 @@
                                 :isItac="isItac"
                                 :isNoComp="isNoComp" />
 
-                            <div class="mt-3">
+                            <div class="mt-3" v-if="displayFosterLove">
                                 <donationBlock
                                     cmsWidgetName="DonationWidget"
                                     v-model="donationAmount"
@@ -245,6 +245,12 @@ export default {
         };
     },
     computed: {
+        DisplayFosterLove() {
+            return experimentMixin.methods.hasSettingEqualTo(
+                experimentSettings.FOSTER_LOVE,
+                "true"
+            );
+        },
         isRecalibrationOnOrder() {
             return containsRecalParts(this?.lineItems);
         },

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

@@ -6,7 +6,7 @@ export async function getPricedMobileFeePart(serviceZipCode, pageNameToLog) {
         return null;
     }
 
-    const zipCodeData = await baseMixin.methods.getZipCodeData(serviceZipCode, pageNameToLog);
+    const zipCodeData = await getZipCodeData(serviceZipCode);
 
     // Get the Mobile Fee Part
     const mobileFeePart = await baseMixin.methods.dispatchStoreActionWithLogging(
@@ -103,3 +103,7 @@ export async function getAvailabilityRating(
 
     return shopStatus;
 }
+
+export async function getZipCodeData(serviceZipCode) {
+    return await baseMixin.methods.getZipCodeData(serviceZipCode, "service-location");
+}

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

@@ -69,6 +69,15 @@ jest.mock(
         getShopProviderData: jest.fn((mockServiceZipCode) => {
             return mockGetShopProviderData(mockServiceZipCode);
         }),
+        getZipCodeData: jest.fn().mockImplementation(() => {
+            return Promise.resolve({
+                containsMilitaryBase: false,
+                isServiceable: true,
+                isValid: true,
+                state: "testState",
+                zipCodeCtu: "testCTU",
+            });
+        }),
     })
 );
 
@@ -424,6 +433,7 @@ describe("service-location.vue", () => {
                 },
                 selectedAppointmentType: "Mobile",
                 providerData: { mobileProviderNumber: "01820" },
+                isGlassServiceableMobile: true,
             });
 
             const mobileLocationQuestionsComponent = wrapper.findComponent({
@@ -459,6 +469,7 @@ describe("service-location.vue", () => {
                 isVehicleProtected: true,
             };
 
+            wrapper.vm.closeModalAction = jest.fn();
             // Act
 
             // Trigger the event
@@ -483,6 +494,7 @@ describe("service-location.vue", () => {
                 },
                 selectedAppointmentType: "Mobile",
                 providerData: { mobileProviderNumber: "01820" },
+                isGlassServiceableMobile: true,
             });
 
             const mobileLocationQuestionsComponent = wrapper.findComponent({
@@ -532,6 +544,7 @@ describe("service-location.vue", () => {
                 zipCodeCtu: "01526",
             };
 
+            wrapper.vm.closeModalAction = jest.fn();
             // Act
 
             // Trigger the event
@@ -563,6 +576,7 @@ describe("service-location.vue", () => {
             });
             mobileLocationQuestionsComponent.resetComponent = jest.fn();
             wrapper.vm.forwardButtonAction = jest.fn();
+            wrapper.vm.isServiceableMobile = true;
 
             const serviceZipCodeComponent = wrapper.findComponent({
                 ref: "serviceZipCodeQuestion",
@@ -580,6 +594,7 @@ describe("service-location.vue", () => {
                 isVehicleProtected: "YesAnswer",
             };
 
+            wrapper.vm.closeModalAction = jest.fn();
             // Act
             mobileLocationQuestionsComponent.vm.$emit(
                 "setMobileLocationAndProceed",

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

@@ -149,6 +149,7 @@ import {
     getPricedMobileFeePart,
     getServiceabilityDetails,
     getShopProviderData,
+    getZipCodeData,
 } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { applicationConfig } from "@/constants/application-config";
@@ -206,10 +207,7 @@ export default {
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
         const serviceZipCode = store.getters.order.serviceLocation.zipCode;
-        const zipCodeDataPromise = baseMixin.methods.getZipCodeData(
+        const zipCodeDataPromise = getZipCodeData(serviceZipCode);
-            serviceZipCode,
-            "service-location"
-        );
 
         const serviceabilityDetailsPromise = getServiceabilityDetails(
             serviceZipCode,
@@ -475,17 +473,31 @@ export default {
         },
         //creating async function as the computed property can not directly handle asynchronous operations or promises.
         async setMobileLocationQuestions(newValue) {
-            if (newValue.addressQuestions.zipCode !== this.zipCode) {
+            var newZipCode = newValue.addressQuestions.zipCode;
-                await getShopProviderData(newValue.addressQuestions.zipCode).then((result) => {
+            if (newZipCode !== this.zipCode) {
-                    this.shopProviderData = result.data;
+                await getShopProviderData(newZipCode).then((result) => {
-                    this.selectedProvider = new Provider(
+                    if (this.isServiceableMobile) {
-                        this.shopProviderData.mobileProviderNumber
+                        this.shopProviderData = result.data;
-                    );
+                        this.selectedProvider = new Provider(
+                            this.shopProviderData.mobileProviderNumber
+                        );
+                    }
+                });
+            }
+            if (this.isServiceableMobile) {
+                this.setMobileLocation(newValue);
+                //proceed to next page
+                this.forwardButtonAction();
+            } else {
+                this.closeModalAction("mobileLocationQuestions");
+                await getZipCodeData(newZipCode).then((zipCodeData) => {
+                    this.serviceZipCodeQuestion = {
+                        state: zipCodeData.state,
+                        zipCode: newZipCode,
+                        zipCodeCtu: zipCodeData.zipCodeCtu,
+                    };
                 });
             }
-            this.setMobileLocation(newValue);
-            //proceed to next page
-            this.forwardButtonAction();
         },
         getServiceAddressFromStore() {
             return store.getters.order.serviceLocation.address;
@@ -669,6 +681,9 @@ export default {
         openModalAction(modalName) {
             this.$refs[modalName].openModal();
         },
+        closeModalAction(modalName) {
+            this.$refs[modalName].closeModal();
+        },
     },
     watch: {
         zipCode: {