Merge branch 'develop' into feature/SSR-683

2024-04-24 14:47:34 -04:00 · 2024-04-24 14:47:34 -04:00 · 4a3b41e241
commit 4a3b41e241
parent 071bccb436 415dcbb284
7 changed files with 168 additions and 169 deletions
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@ -141,7 +141,7 @@ export default {
        color: $black;
    }
    .modal-header {
-        padding: 1rem 0 0.5rem 0;
+        padding: 1.5rem 0 0.5rem 0;
        border-bottom: none;
        .btn-close {
            position: absolute;
@ -149,7 +149,6 @@ export default {
            top: 1rem;
            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
            opacity: 1;
-            margin: 0.3rem -0.5rem -0.5rem auto;
        }

        .modal-title {
--- a/src/iss-components/site-sub-header/site-sub-header.vue
+++ b/src/iss-components/site-sub-header/site-sub-header.vue
@ -1,7 +1,7 @@
 <template>
    <div>
        <div
-            class="subheader-primary d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+            class="subheader-primary d-flex align-items-center justify-content-center overflow-hidden">
            <h5
                class="text-center fw-normal mb-0 subheader-primary"
                :class="headerColor">
@ -15,7 +15,7 @@
            </h5>
        </div>
        <div
-            class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden"
+            class="subheader-secondary d-flex align-items-center overflow-hidden"
            :class="[justifySubheader, subHeaderClasses]">
            <p
                class="fw-normal mb-0"
@ -33,7 +33,7 @@ import {
    splitCopyOnCMSPlaceHolder,
    getRouterLinkRouteFromCopy,
    getRouterLinkDisplayTextFromCopy,
-    getRouterLinkHtmlStringFromCopy
+    getRouterLinkHtmlStringFromCopy,
 } from '@/helpers/cms-content-helper';

 import { stripRteStyle } from '@/helpers/text-helper';
@ -51,12 +51,15 @@ export default {
        stripRteStyle: Boolean,
        subContentProperty: String,
        subHeaderClasses: String,
-        subTextClasses: String
+        subTextClasses: String,
    },
    emits: ['click-event'],
    computed: {
        content() {
-            return this.getCmsContent(this.cmsWidgetName, this.contentProperty ?? 'SubHeaderText');
+            return this.getCmsContent(
+                this.cmsWidgetName,
+                this.contentProperty ?? 'SubHeaderText'
+            );
        },
        subText() {
            let subTextFromCms = this.getCmsContent(
@ -84,7 +87,10 @@ export default {
            return subText ?? '';
        },
        backButtonAccessibleText() {
-            return this.getCmsContent(this.cmsWidgetName, 'BackButtonAccessibleText');
+            return this.getCmsContent(
+                this.cmsWidgetName,
+                'BackButtonAccessibleText'
+            );
        },
        headerColor() {
            return this.subText ? 'dark-header' : 'light-header';
@ -97,10 +103,10 @@ export default {
        alternateFormatting() {
            // override for service-packages unique style
            if (this.issContainingPage?.toLowerCase() === 'service-packages') {
-                return 'service-packages-subtext mt-4 mb-2 px-5';
+                return 'service-packages-subtext mt-4 mb-4 px-5';
            }
            return this.darkGraySubText ? 'dark-gray' : 'light-gray';
-        }
+        },
    },
    methods: {
        doesCopyContainRouterLink,
@ -110,8 +116,8 @@ export default {
        getRouterLinkHtmlStringFromCopy,
        clickEvent() {
            this.$emit('click-event');
-        }
-    }
+        },
+    },
 };
 </script>

--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@ -79,7 +79,6 @@ import alert from '@/ux-components/alert/alert.vue';
 // Supporting Items
 import settleAllPromises from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
-import { experimentSettings } from '@/constants/experiments';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { paymentMethods } from '@/constants/payment-method-constants';
 import queryStrings from '@/constants/query-strings';
@ -102,7 +101,7 @@ export default {
        cartDropdown,
        paymentMethodQuestion,
        alert,
-        VehicleBanner,
+        VehicleBanner
    },
    mixins: [baseFormMixin],
    async beforeRouteEnter(to, from, next) {
@ -115,20 +114,20 @@ export default {
        const promiseResultMap = [
            {
                resultKey: 'cmsContent',
-                promise: cmsContentPromise,
+                promise: cmsContentPromise
            },
            {
                resultKey: 'reviewDropdownData',
-                promise: reviewDropdownPromise,
+                promise: reviewDropdownPromise
            },
            {
                resultKey: 'wipers',
-                promise: wipersPromise,
+                promise: wipersPromise
            },
            {
                resultKey: 'rainDefense',
-                promise: rainDefensePromise,
-            },
+                promise: rainDefensePromise
+            }
        ];

        const resultMap = await settleAllPromises(promiseResultMap);
@ -141,12 +140,10 @@ export default {
        const pricedVaps = await useMainStore()
            .getPriceOrderItems(unpricedVaps)
            .catch((err) => {
-                useMainStore().setBailout(
-                    bailoutMessage.pricingResponseError(
-                        unpricedVaps.map((li) => li.partNumber),
-                        { code: err.code, message: err.message, data: err.data }
-                    )
-                );
+                useMainStore().setBailout(bailoutMessage.pricingResponseError(
+                    unpricedVaps.map((li) => li.partNumber),
+                    { code: err.code, message: err.message, data: err.data }
+                ));
                hasBailedOut = true;
                next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
            });
@ -155,9 +152,7 @@ export default {
            next((vm) => {
                vm.setCmsContent(resultMap.cmsContent);
                vm.updateFooterButtonText(vm.customCallToActionButtonCopy);
-                vm.$refs.reviewDropdown.initializeComponent(
-                    resultMap.reviewDropdownData
-                );
+                vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData);
                vm.storeAvailableVaps(pricedVaps ?? []);
            });
        }
@ -166,8 +161,8 @@ export default {
        return {
            paymentMethodInternalModel: this.getPaymentMethodFromStore(),
            rules: {
-                optionRequired: globalRules.OPTION_REQUIRED,
-            },
+                optionRequired: globalRules.OPTION_REQUIRED
+            }
        };
    },
    computed: {
@ -191,61 +186,61 @@ export default {
        },
        paymentMethod() {
            return this.paymentMethodInternalModel;
-        },
+        }
    },
    watch: {
        customCallToActionButtonCopy(newValue) {
            this.updateFooterButtonText(newValue);
-        },
+        }
    },
    methods: {
        arePagePrerequisitesValid() {
            // Vehicle
            const { vehicle } = useMainStore().order;
            const vehicleReqs = !!(
-                vehicle.year &&
-                vehicle.make &&
-                vehicle.model &&
-                vehicle.style
+                vehicle.year
+                && vehicle.make
+                && vehicle.model
+                && vehicle.style
            );

            // Damage
            const { isRepair, numberOfChips, glassToReplace } =
                useMainStore().order.damage;
            const damageReqs = !!(
-                (isRepair && numberOfChips) ||
-                (!isRepair && glassToReplace?.length)
+                (isRepair && numberOfChips)
+                || (!isRepair && glassToReplace?.length)
            );

            // Service Package
            const { lineItems } = useMainStore().order;
            const packageReqs = !!(
-                (isRepair || lineItems.glassParts) &&
-                lineItems.supportingItems
+                (isRepair || lineItems.glassParts)
+                && lineItems.supportingItems
            );

            // Service Location
            const { serviceLocation } = useMainStore().order;
            const mobileReqs = !!(
-                serviceLocation.address &&
-                serviceLocation.city &&
-                serviceLocation.state &&
-                serviceLocation.zipCode
+                serviceLocation.address
+                && serviceLocation.city
+                && serviceLocation.state
+                && serviceLocation.zipCode
            );

            const providerLocation = serviceLocation.provider.address;
            const dropOffInshopReqs = !!(
-                providerLocation.streetAddress &&
-                providerLocation.city &&
-                providerLocation.state &&
-                providerLocation.zipCode
+                providerLocation.streetAddress
+                && providerLocation.city
+                && providerLocation.state
+                && providerLocation.zipCode
            );

            const isMobile =
-                serviceLocation.appointmentType ===
-                    AppointmentTypeStrings.MOBILE ||
-                serviceLocation.appointmentType ===
-                    AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
+                serviceLocation.appointmentType
+                    === AppointmentTypeStrings.MOBILE
+                || serviceLocation.appointmentType
+                    === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
            const serviceLocationReqs =
                (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);

@ -253,11 +248,11 @@ export default {
            const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } =
                useMainStore().order.schedule;
            const scheduleReqs = !!(
-                date &&
-                startTime &&
-                endTime &&
-                jobMaxMinutes &&
-                jobMinMinutes
+                date
+                && startTime
+                && endTime
+                && jobMaxMinutes
+                && jobMinMinutes
            );

            // Customer
@ -268,27 +263,27 @@ export default {
            // Contact Info
            const { contactInfo } = useMainStore().order;
            const contactInfoReqs = !!(
-                contactInfo.firstName &&
-                contactInfo.lastName &&
-                contactInfo.servicePhone &&
-                contactInfo.emailAddress
+                contactInfo.firstName
+                && contactInfo.lastName
+                && contactInfo.servicePhone
+                && contactInfo.emailAddress
            );

            return (
-                vehicleReqs &&
-                damageReqs &&
-                packageReqs &&
-                serviceLocationReqs &&
-                scheduleReqs &&
-                customerReqs &&
-                contactInfoReqs
+                vehicleReqs
+                && damageReqs
+                && packageReqs
+                && serviceLocationReqs
+                && scheduleReqs
+                && customerReqs
+                && contactInfoReqs
            );
        },
        getPaymentMethodFromStore() {
            const { payInAdvanceType } = useMainStore().order.payment;
            const isPayInAdvance =
-                useMainStore().order.payment.isPayInAdvance &&
-                !!payInAdvanceType;
+                useMainStore().order.payment.isPayInAdvance
+                && !!payInAdvanceType;

            return isPayInAdvance
                ? payInAdvanceType
@ -314,8 +309,8 @@ export default {
        },
        storeAvailableVaps(vaps) {
            useMainStore().order.availableVaps = vaps;
-        },
-    },
+        }
+    }
 };
 </script>

--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@ -38,7 +38,7 @@
                    </div>

                    <div v-if="isCreditCard || isAfterPay" class="px-2">
-                        <hr class="my-0">
+                        <hr :class="{'my-0': isCreditCard}">
                        <cartDropdown
                            :readOnly="true"
                            :showDropdownHeader="true"
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@ -14,97 +14,101 @@
                    <siteSubHeader
                        cmsWidgetName="SiteSubHeaderWidget"
                        class="mt-5" />
-                    <div class="main-content-container">
-                        <serviceZipModalQuestion
-                            ref="serviceZipCodeQuestion"
-                            v-model="serviceZipCodeQuestion"
-                            modalWidgetName="ServiceZipModalWidget"
-                            :onZipUpdateCallback="reloadShopData"
-                            @updatedServiceability="setServiceabilityDetails"
-                            @updatedContainsMilitaryBase="
-                                setContainsMilitaryBase
-                            " />
-                        <alert
-                            v-if="displayMilitaryZipAlert"
-                            ref="alertMilitaryBaseZip"
-                            class="my-5"
-                            cmsWidgetName="AlertMilitaryBaseZipWidget"
-                            alertClass="alert-warning" />
-                        <alert
-                            v-if="displayServiceableMobileOnly"
-                            ref="alertMobileOnly"
-                            class="my-5"
-                            cmsWidgetName="AlertMobileOnlyWidget"
-                            alertClass="alert-warning" />
-                        <alert
-                            v-if="displayRecalibrationWarning"
-                            ref="alertRecalNoMobile"
-                            class="my-5"
-                            cmsWidgetName="AlertRecalNoMobileWidget"
-                            alertClass="alert-warning"
-                            @text-link-clicked="openModalAction" />
-                        <alert
-                            v-if="displayServiceableInshopOnly"
-                            ref="alertInshopOnly"
-                            class="my-5"
-                            cmsWidgetName="AlertInshopOnlyWidget"
-                            alertClass="alert-warning" />
-                        <alert
-                            v-if="displayNoShopsAlert"
-                            ref="alertNoShops"
-                            class="my-5"
-                            cmsWidgetName="AlertNoShopsWidget"
-                            alertClass="alert-warning" />
-                        <appointmentTypeQuestion
-                            v-show="isAppointmentTypeDisplayed"
-                            ref="appointmentTypeQuestion"
-                            v-model="selectedAppointmentType"
-                            :isServiceableMobile="isServiceableMobile"
-                            :isServiceableInshop="isServiceableInshop"
-                            :isDisplayed="isAppointmentTypeDisplayed"
-                            groupName="appointmentTypeQuestion"
-                            cmsWidgetName="AppointmentTypeQuestionWidget"
-                            validationRules="option-required" />
-                        <mobileLocationModalQuestions
-                            v-if="isMobileLocationDisplayed"
-                            ref="mobileLocationQuestions"
-                            v-model="mobileLocationQuestions"
-                            customComponentId="mobileLocationQuestions"
-                            :mobileFeePart="mobileFeePart"
-                            validationRules="mobile-location-required"
-                            linkWidgetName="MobileLocationLinkWidget"
-                            modalWidgetName="MobileLocationModalWidget"
-                            :onZipUpdateCallback="reloadShopData"
-                            @updated-mobile-fee-part="setMobileFeePart"
-                            @updated-serviceability="setServiceabilityDetails"
-                            @updated-contains-military-base="
-                                setContainsMilitaryBase
-                            " />
-                        <shopQuestion
-                            v-show="isShopQuestionDisplayed"
-                            ref="shopQuestion"
-                            v-model="selectedProvider"
-                            :selectedAppointmentType="selectedAppointmentType"
-                            :isDisplayed="isShopQuestionDisplayed"
-                            cmsWidgetName="ShopQuestionWidget"
-                            @updatedMobileProviderNumber="
-                                setMobileProviderNumber
-                            " />
-                        <contentGroupModal
-                            ref="RecalModal"
-                            cmsWidgetName="RecalModal" />
-                        <siteFooter
-                            ref="siteFooter"
-                            class="mt-5"
-                            cmsWidgetName="SiteFooterWidget"
-                            :isForwardActionDisabled="
-                                !meta.valid || displayNoShopsAlert
-                            "
-                            @backClicked="
-                                navigateBack(this, navigateBackScenario)
-                            "
-                            @forwardClicked="forwardButtonAction" />
-                    </div>
+                    <serviceZipModalQuestion
+                        ref="serviceZipCodeQuestion"
+                        v-model="serviceZipCodeQuestion"
+                        modalWidgetName="ServiceZipModalWidget"
+                        :onZipUpdateCallback="reloadShopData"
+                        @updatedServiceability="setServiceabilityDetails"
+                        @updatedContainsMilitaryBase="
+                            setContainsMilitaryBase
+                        " />
+                    <alert
+                        v-if="displayMilitaryZipAlert"
+                        ref="alertMilitaryBaseZip"
+                        class="my-5"
+                        cmsWidgetName="AlertMilitaryBaseZipWidget"
+                        alertClass="alert-warning" />
+                    <alert
+                        v-if="displayServiceableMobileOnly"
+                        ref="alertMobileOnly"
+                        class="my-5"
+                        cmsWidgetName="AlertMobileOnlyWidget"
+                        alertClass="alert-warning" />
+                    <alert
+                        v-if="displayRecalibrationWarning"
+                        ref="alertRecalNoMobile"
+                        class="my-5"
+                        cmsWidgetName="AlertRecalNoMobileWidget"
+                        alertClass="alert-warning"
+                        @text-link-clicked="openModalAction" />
+                    <alert
+                        v-if="displayServiceableInshopOnly"
+                        ref="alertInshopOnly"
+                        class="my-5"
+                        cmsWidgetName="AlertInshopOnlyWidget"
+                        alertClass="alert-warning" />
+                    <alert
+                        v-if="displayNoShopsAlert"
+                        ref="alertNoShops"
+                        class="my-5"
+                        cmsWidgetName="AlertNoShopsWidget"
+                        alertClass="alert-warning" />
+                </div>
+            </div>
+            <div class="row justify-content-center appointment-type">
+                <div class="col-md-6">
+                    <appointmentTypeQuestion
+                        v-show="isAppointmentTypeDisplayed"
+                        ref="appointmentTypeQuestion"
+                        v-model="selectedAppointmentType"
+                        :isServiceableMobile="isServiceableMobile"
+                        :isServiceableInshop="isServiceableInshop"
+                        :isDisplayed="isAppointmentTypeDisplayed"
+                        groupName="appointmentTypeQuestion"
+                        cmsWidgetName="AppointmentTypeQuestionWidget"
+                        validationRules="option-required" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <mobileLocationModalQuestions
+                        v-if="isMobileLocationDisplayed"
+                        ref="mobileLocationQuestions"
+                        v-model="mobileLocationQuestions"
+                        customComponentId="mobileLocationQuestions"
+                        :mobileFeePart="mobileFeePart"
+                        validationRules="mobile-location-required"
+                        linkWidgetName="MobileLocationLinkWidget"
+                        modalWidgetName="MobileLocationModalWidget"
+                        :onZipUpdateCallback="reloadShopData"
+                        @updated-mobile-fee-part="setMobileFeePart"
+                        @updated-serviceability="setServiceabilityDetails"
+                        @updated-contains-military-base="
+                            setContainsMilitaryBase
+                        " />
+                    <shopQuestion
+                        v-show="isShopQuestionDisplayed"
+                        ref="shopQuestion"
+                        v-model="selectedProvider"
+                        :selectedAppointmentType="selectedAppointmentType"
+                        :isDisplayed="isShopQuestionDisplayed"
+                        cmsWidgetName="ShopQuestionWidget"
+                        @updatedMobileProviderNumber="
+                            setMobileProviderNumber
+                        " />
+                    <contentGroupModal
+                        ref="RecalModal"
+                        cmsWidgetName="RecalModal" />
+                    <siteFooter
+                        ref="siteFooter"
+                        class="mt-5"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="
+                            !meta.valid || displayNoShopsAlert
+                        "
+                        @backClicked="navigateBack(this, navigateBackScenario)"
+                        @forwardClicked="forwardButtonAction" />
                </div>
            </div>
        </div>
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@ -14,7 +14,6 @@
                <div class="col-md-6 col-xl-4">
                    <siteSubHeader
                        cmsWidgetName="SiteSubHeaderWidget"
-                        justification="left"
                        issContainingPage="service-packages" />
                    <servicePackageQuestion
                        ref="servicePackage"
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@ -35,10 +35,6 @@ body {
            .shop-question {
                .col {
                    max-width: 472px;
-                    @include media-breakpoint-up(xl) {
-                        max-width: 66.6666666%;
-                        margin: 0 auto;
-                    }
                }
            }
        }