From 3b092f88c602e790ee9405ff44dece318967f992 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 22 Apr 2024 15:01:53 -0400
Subject: [PATCH] CSR-1160 add wrapper to pages missed in conversion.

---
 src/layouts/payment-method/payment-method.vue | 102 +++++-----
 .../service-location/service-location.vue     | 189 ++++++++++--------
 2 files changed, 159 insertions(+), 132 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 4eca0b17..9254eb6a 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -4,52 +4,62 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
-            <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <siteSubHeader
-                class="mb-5 mt-4 px-3"
-                cmsWidgetName="SiteSubHeaderWidget"
-                subHeaderClasses="mt-2" />
-            <div class="main-content-container">
-                <hr class="my-0" />
-                <reviewDropdown ref="reviewDropdown" />
-                <hr class="my-0" />
-                <cartDropdown
-                    :showAsPaid="false"
-                    :readOnly="false"
-                    :showDropdownHeader="true"
-                    :isInitiallyExpanded="false"
-                    recyclingModalCmsWidgetName="RecycleModal"
-                    servicePackageTitleWidgetName="ServicePackageTitle" />
-                <hr class="mt-0 mb-5" />
-                <alert
-                    v-if="displayPayInAdvanceAlert"
-                    name="payInAdvanceErrorAlert"
-                    class="my-4"
-                    cmsWidgetName="PayInAdvanceErrorAlertWidget"
-                    alertClass="alert-danger"
-                    :isDismissible="false" />
-                <paymentMethodQuestion
-                    v-if="!isPayInAdvanceDisabled"
-                    v-model="paymentMethodInternalModel"
-                    cmsWidgetName="PaymentMethodWidget"
-                    :validationRules="rules.optionRequired" />
-                <alert
-                    v-if="isPayInAdvanceDisabled"
-                    :isDismissible="false"
-                    alertClass="alert-info"
-                    cmsWidgetName="NoPayInAdvanceDisclaimerWidget"
-                    :shouldScrollToOnMount="false" />
-                <siteFooter
-                    ref="siteFooter"
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    :isStackedVertically="true"
-                    @backClicked="navigateBack"
-                    @ForwardClicked="forwardButtonAction" />
+        <div class="container-fluid fade-on-route-transition">
+            <div class="row justify-content-center">
+                <div class="col-md-6 px-0 px-md-2">
+                    <siteHeader
+                        ref="siteHeader"
+                        cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+                    <siteSubHeader
+                        class="mb-5 mt-4 px-3"
+                        cmsWidgetName="SiteSubHeaderWidget"
+                        subHeaderClasses="mt-2" />
+                    <div class="main-content-container">
+                        <hr class="my-0" />
+                        <reviewDropdown ref="reviewDropdown" />
+                        <hr class="my-0" />
+                        <cartDropdown
+                            :showAsPaid="false"
+                            :readOnly="false"
+                            :showDropdownHeader="true"
+                            :isInitiallyExpanded="false"
+                            recyclingModalCmsWidgetName="RecycleModal"
+                            servicePackageTitleWidgetName="ServicePackageTitle" />
+                        <hr class="mt-0 mb-5" />
+                        <alert
+                            v-if="displayPayInAdvanceAlert"
+                            name="payInAdvanceErrorAlert"
+                            class="my-4"
+                            cmsWidgetName="PayInAdvanceErrorAlertWidget"
+                            alertClass="alert-danger"
+                            :isDismissible="false" />
+                        <paymentMethodQuestion
+                            v-if="!isPayInAdvanceDisabled"
+                            v-model="paymentMethodInternalModel"
+                            cmsWidgetName="PaymentMethodWidget"
+                            :validationRules="rules.optionRequired" />
+                        <alert
+                            v-if="isPayInAdvanceDisabled"
+                            :isDismissible="false"
+                            alertClass="alert-info"
+                            cmsWidgetName="NoPayInAdvanceDisclaimerWidget"
+                            :shouldScrollToOnMount="false" />
+                        <siteFooter
+                            ref="siteFooter"
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            :isStackedVertically="true"
+                            @backClicked="navigateBack"
+                            @ForwardClicked="forwardButtonAction" />
+                    </div>
+                </div>
             </div>
         </div>
     </Form>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 12d0cf95..0185e3cb 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -4,92 +4,109 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <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" />
-                >>>>>>> develop
+        <div class="container-fluid fade-on-route-transition">
+            <div class="row justify-content-center">
+                <div class="col-md-6 px-0 px-md-2"></div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                    <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" />
+                        >>>>>>> develop
+                    </div>
+                </div>
             </div>
         </div>
     </Form>