From 4fb644398aaa983e8582a578c02ca3c56fb9d394 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 11 Apr 2024 16:25:15 -0400
Subject: [PATCH] WIP desktop updates.

---
 .../coverage-statement/coverage-statement.vue |  16 +-
 .../provider-preference.vue                   | 443 ++++----
 .../service-location/service-location.vue     | 976 ++++++++++--------
 src/styles/common-styles.scss                 |   9 +
 4 files changed, 768 insertions(+), 676 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index e66bb65e..debc70a3 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -81,15 +81,15 @@
             cmsWidgetName="DisclaimerWidget"
             typeStyle="caption"
           />
+          <siteFooter
+            ref="siteFooter"
+            class="mt-5"
+            cmsWidgetName="SiteFooterWidget"
+            :isForwardActionDisabled="!meta.valid"
+            @backClicked="navigateBackByVehicleQuestions"
+            @forwardClicked="navigateForward"
+            />
         </div>
-        <siteFooter
-          ref="siteFooter"
-          class="mt-5"
-          cmsWidgetName="SiteFooterWidget"
-          :isForwardActionDisabled="!meta.valid"
-          @backClicked="navigateBackByVehicleQuestions"
-          @forwardClicked="navigateForward"
-        />
       </div>
     </div>
     <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 47fff987..787fd458 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -1,238 +1,263 @@
 <template>
-    <Form
-        ref="theForm"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader
-                    id="sub-header"
-                    cmsWidgetName="SiteSubHeader"
-                    class="mb-5 mt-4" />
-                <buttonQuestion
-                    ref="buttonQuestion"
-                    v-model="selectedProvider"
-                    questionText="Select an option:"
-                    :answers="prefAnswers"
-                    groupName="prefQuestions"
-                    buttonTypeString="providerPrefRadio"
-                    :validationRules="rules.optionRequired"
-                    isRequired
-                    class="mx-5" />
-                <div class="px-5">
-                    <siteFooter
-                        ref="siteFooter"
-                        class="mt-5"
-                        cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="isForwardActionDisabled"
-                        @backClicked="navigateBack"
-                        @forwardClicked="forwardButtonAction" />
-                </div>
-            </div>
+  <Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
+    <div class="container-fluid fade-on-route-transition">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
         </div>
-        <recalModal
-            ref="recalModal"
-            cmsWidgetName="RecalModal" />
-        <steeringModal
-            ref="StateSteeringModal"
-            cmsWidgetName="StateSteeringModal" />
-        <shopPreferenceModal
-            ref="ShopPreferenceDrawer"
-            cmsWidgetName="ShopPreferenceDrawer"
-            :showSteeringLink="showSteeringLink"
-            @openSteering="openStateSteeringModal" />
-        <tpaRecalModal
-            ref="TPARecalModal"
-            cmsWidgetName="TPARecalModal"
-            :ackError="ackError"
-            @buttonClick="navigateWithTPAAck" />
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <siteSubHeader
+            id="sub-header"
+            cmsWidgetName="SiteSubHeader"
+            class="mb-5 mt-4"
+          />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <buttonQuestion
+            ref="buttonQuestion"
+            v-model="selectedProvider"
+            questionText="Select an option:"
+            :answers="prefAnswers"
+            groupName="prefQuestions"
+            buttonTypeString="providerPrefRadio"
+            :validationRules="rules.optionRequired"
+            isRequired
+          />
+          <siteFooter
+            ref="siteFooter"
+            class="mt-5"
+            cmsWidgetName="SiteFooterWidget"
+            :isForwardActionDisabled="isForwardActionDisabled"
+            @backClicked="navigateBack"
+            @forwardClicked="forwardButtonAction"
+          />
+        </div>
+      </div>
+      <recalModal ref="recalModal" cmsWidgetName="RecalModal" />
+      <steeringModal
+        ref="StateSteeringModal"
+        cmsWidgetName="StateSteeringModal"
+      />
+      <shopPreferenceModal
+        ref="ShopPreferenceDrawer"
+        cmsWidgetName="ShopPreferenceDrawer"
+        :showSteeringLink="showSteeringLink"
+        @openSteering="openStateSteeringModal"
+      />
+      <tpaRecalModal
+        ref="TPARecalModal"
+        cmsWidgetName="TPARecalModal"
+        :ackError="ackError"
+        @buttonClick="navigateWithTPAAck"
+      />
+    </div>
+  </Form>
 </template>
 <script>
 // Import Supporting Files
-import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import errorMessages from '@/constants/error-messages';
-import buttonQuestion from '@/digital-components/button-question/button-question.vue';
-import issPageValues from '@/router/router-constants/issPage-values';
+import {
+  fetchCmsContentForPage,
+  setupModalLinks,
+} from "@/helpers/cms-content-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import errorMessages from "@/constants/error-messages";
+import buttonQuestion from "@/digital-components/button-question/button-question.vue";
+import issPageValues from "@/router/router-constants/issPage-values";
 
 // Import Component
-import baseFormMixin from '@/mixins/base-form-mixin';
-import { Form } from 'vee-validate';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
-import steeringModal from '@/layouts/provider-preference/steering-modal/steering-modal.vue';
-import shopPreferenceModal from '@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue';
-import tpaRecalModal from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue';
-import globalRules from '@/constants/global-rules';
-import bailoutCode from '@/constants/bailoutCode';
+import baseFormMixin from "@/mixins/base-form-mixin";
+import { Form } from "vee-validate";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal.vue";
+import steeringModal from "@/layouts/provider-preference/steering-modal/steering-modal.vue";
+import shopPreferenceModal from "@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue";
+import tpaRecalModal from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue";
+import globalRules from "@/constants/global-rules";
+import bailoutCode from "@/constants/bailoutCode";
 import bailoutMessage from "@/constants/bailoutMessage";
 
-const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
+const options = { SAFELITE: "SafeliteOption", TPA: "TPAOption" };
 
 export default {
-    name: 'provider-preference',
+  name: "provider-preference",
 
-    components: {
-        siteFooter,
-        siteHeader,
-        siteSubHeader,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        buttonQuestion,
-        recalModal,
-        steeringModal,
-        shopPreferenceModal,
-        tpaRecalModal
+  components: {
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    buttonQuestion,
+    recalModal,
+    steeringModal,
+    shopPreferenceModal,
+    tpaRecalModal,
+  },
+  mixins: [baseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
+    const resultMap = await settleAllPromises(promiseResultMap);
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+
+      vm.showSteeringLink = !!vm.$refs.StateSteeringModal.ModalBodyText;
+      if (vm.showSteeringLink) {
+        vm.$refs.StateSteeringModal.openModal();
+      }
+    });
+  },
+  data() {
+    return {
+      selectedProvider: null,
+      showSteeringLink: false,
+      tpaAcknowledgement: false,
+      rules: {
+        optionRequired: globalRules.OPTION_REQUIRED,
+      },
+    };
+  },
+  computed: {
+    isForwardActionDisabled() {
+      return this.selectedProvider === null;
     },
-    mixins: [baseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
-        ];
-        const resultMap = await settleAllPromises(promiseResultMap);
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-
-            vm.showSteeringLink = !!vm.$refs.StateSteeringModal.ModalBodyText;
-            if (vm.showSteeringLink) {
-                vm.$refs.StateSteeringModal.openModal();
+    prefAnswers() {
+      const cmsAnswersContent = [
+        {
+          cmsWidgetName: options.SAFELITE,
+        },
+        {
+          cmsWidgetName: options.TPA,
+        },
+      ];
+      // if cms content has not yet loaded, skip
+      if (
+        !this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, "HeaderText") ||
+        this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, "HeaderText") ===
+          ""
+      ) {
+        return {};
+      }
+      const modifiedAnswers = cmsAnswersContent.map((answer) => ({
+        value: answer.cmsWidgetName,
+        buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
+        buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
+        buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName),
+      }));
+      return modifiedAnswers;
+    },
+    ackError() {
+      return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
+    },
+  },
+  mounted() {
+    setupModalLinks(this);
+    const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
+    this.selectedProvider = pageData?.selectedProvider
+      ? pageData.selectedProvider
+      : null;
+    this.tpaAcknowledgement = pageData?.tpaAcknowledgement
+      ? pageData.tpaAcknowledgement
+      : false;
+  },
+  methods: {
+    getHeaderTextFromCms(cmsWidgetName) {
+      const headerText = this.getCmsContent(cmsWidgetName, "HeaderText");
+      return headerText?.replace(
+        "{custom:SafeliteLogo}",
+        "<span class='safeliteLogo'></span>"
+      );
+    },
+    getSubheaderTextFromCms(cmsWidgetName) {
+      return this.getCmsContent(cmsWidgetName, "SubheaderText");
+    },
+    getBodyTextFromCms(cmsWidgetName) {
+      return this.getCmsContent(cmsWidgetName, "BodyText");
+    },
+    arePagePrerequisiteValid() {
+      return true;
+    },
+    navigateForward(scenario) {
+      this.$router.navigate(scenario, this.$route);
+    },
+    navigateWithTPAAck() {
+      this.mainStore.saveProviderPreferenceData({
+        selectedProvider: this.selectedProvider,
+        tpaAcknowledgement: this.tpaAcknowledgement,
+      });
+      this.navigateForward(
+        this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED
+      );
+    },
+    forwardButtonAction() {
+      if (this.selectedProvider) {
+        let scenario = null;
+        switch (this.selectedProvider) {
+          case options.SAFELITE:
+            this.mainStore.updateIsSafeliteProvider(true);
+            scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
+            break;
+          case options.TPA:
+            this.mainStore.updateIsSafeliteProvider(false);
+            if (this.mainStore.issConfig.enableTPAFlow) {
+              if (this.mainStore.hasRecalibrationPart) {
+                this.$refs.TPARecalModal.openModal();
+                this.$refs.siteFooter.removeLoader();
+                return;
+              }
+              scenario =
+                this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
+            } else {
+              this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
+              scenario =
+                this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
             }
+            break;
+          default:
+        }
+        this.navigateForward(scenario);
+        this.mainStore.saveProviderPreferenceData({
+          selectedProvider: this.selectedProvider,
+          tpaAcknowledgement: this.tpaAcknowledgement,
         });
+      }
     },
-    data() {
-        return {
-            selectedProvider: null,
-            showSteeringLink: false,
-            tpaAcknowledgement: false,
-            rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            }
-        };
+    openStateSteeringModal() {
+      this.$refs.StateSteeringModal.openModal();
     },
-    computed: {
-        isForwardActionDisabled() {
-            return this.selectedProvider === null;
-        },
-        prefAnswers() {
-            const cmsAnswersContent = [
-                {
-                    cmsWidgetName: options.SAFELITE
-                },
-                {
-                    cmsWidgetName: options.TPA
-                }
-            ];
-            // if cms content has not yet loaded, skip
-            if (!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
-                || this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') === '') {
-                return {};
-            }
-            const modifiedAnswers = cmsAnswersContent.map((answer) => ({
-                value: answer.cmsWidgetName,
-                buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
-                buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
-                buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName)
-            }));
-            return modifiedAnswers;
-        },
-        ackError() {
-            return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
-        }
-    },
-    mounted() {
-        setupModalLinks(this);
-        const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
-        this.selectedProvider = pageData?.selectedProvider ? pageData.selectedProvider : null;
-        this.tpaAcknowledgement = pageData?.tpaAcknowledgement ? pageData.tpaAcknowledgement : false;
-    },
-    methods: {
-        getHeaderTextFromCms(cmsWidgetName) {
-            const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText');
-            return headerText?.replace('{custom:SafeliteLogo}', "<span class='safeliteLogo'></span>");
-        },
-        getSubheaderTextFromCms(cmsWidgetName) {
-            return this.getCmsContent(cmsWidgetName, 'SubheaderText');
-        },
-        getBodyTextFromCms(cmsWidgetName) {
-            return this.getCmsContent(cmsWidgetName, 'BodyText');
-        },
-        arePagePrerequisiteValid() {
-            return true;
-        },
-        navigateForward(scenario) {
-            this.$router.navigate(scenario, this.$route);
-        },
-        navigateWithTPAAck() {
-            this.mainStore.saveProviderPreferenceData({
-                selectedProvider: this.selectedProvider,
-                tpaAcknowledgement: this.tpaAcknowledgement
-            });
-            this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
-        },
-        forwardButtonAction() {
-            if (this.selectedProvider) {
-                let scenario = null;
-                switch (this.selectedProvider) {
-                    case options.SAFELITE:
-                        this.mainStore.updateIsSafeliteProvider(true);
-                        scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
-                        break;
-                    case options.TPA:
-                        this.mainStore.updateIsSafeliteProvider(false);
-                        if (this.mainStore.issConfig.enableTPAFlow) {
-                            if (this.mainStore.hasRecalibrationPart) {
-                                this.$refs.TPARecalModal.openModal();
-                                this.$refs.siteFooter.removeLoader();
-                                return;
-                            }
-                            scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
-                        } else {
-                            this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
-                            scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
-                        }
-                        break;
-                    default:
-                }
-                this.navigateForward(scenario);
-                this.mainStore.saveProviderPreferenceData({
-                    selectedProvider: this.selectedProvider,
-                    tpaAcknowledgement: this.tpaAcknowledgement
-                });
-            }
-        },
-        openStateSteeringModal() {
-            this.$refs.StateSteeringModal.openModal();
-        }
-    }
+  },
 };
 </script>
 <style lang="scss" scoped>
 #sub-header span {
-    color: $black;
+  color: $black;
 }
 
 .question-text {
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-    & > span {
-        text-align: left;
-    }
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  & > span {
+    text-align: left;
+  }
 }
 
 :deep(.safeliteLogo) {
-    background-image: url(~@/assets/img/icons/safelite-logo.svg);
-    background-repeat: no-repeat;
-    background-size: 4.5rem;
-    margin: 0 0.25rem 0 0.25rem;
-    padding: 0 2.5rem 0 2.5rem;
+  background-image: url(~@/assets/img/icons/safelite-logo.svg);
+  background-repeat: no-repeat;
+  background-size: 4.5rem;
+  margin: 0 0.25rem 0 0.25rem;
+  padding: 0 2.5rem 0 2.5rem;
 }
 </style>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 8d1cfa12..e826becb 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,451 +1,510 @@
 <template>
-    <Form
-        ref="theForm"
-        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"
-                    @forwardClicked="forwardButtonAction" />
-            </div>
+  <Form
+    ref="theForm"
+    v-slot="{ meta }"
+    @submit="onSubmit"
+    @invalidSubmit="onInvalidSubmit"
+  >
+    <div class="container-fluid fade-on-route-transition">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <siteSubHeader
+            id="sub-header"
+            cmsWidgetName="SiteSubHeader"
+            class="mb-5 mt-4"
+          />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <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"
+            @forwardClicked="forwardButtonAction"
+          />
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 <script>
 // Import Supporting Files
-import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import { required } from '@/helpers/validation-rules';
-import errorMessages from '@/constants/error-messages';
-import { useMainStore } from '@/store';
-import { getPricedMobileFeePart, getServiceabilityDetails, getZipCodeData } from '@/helpers/service-location-helper';
+import { AppointmentTypeStrings } from "@/constants/schedule-constants.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import { required } from "@/helpers/validation-rules";
+import errorMessages from "@/constants/error-messages";
+import { useMainStore } from "@/store";
+import {
+  getPricedMobileFeePart,
+  getServiceabilityDetails,
+  getZipCodeData,
+} from "@/helpers/service-location-helper";
 
 // Import Component
-import alert from '@/ux-components/alert/alert.vue';
-import appointmentTypeQuestion from '@/layouts/service-location/appointment-type-question/appointment-type-question.vue';
-import baseFormMixin from '@/mixins/base-form-mixin';
-import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
-import mobileLocationModalQuestions from '@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue';
-import { Form, defineRule } from 'vee-validate';
-import shopQuestion from '@/layouts/service-location/shop-question/shop-question.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import serviceZipModalQuestion from '@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue';
+import alert from "@/ux-components/alert/alert.vue";
+import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question.vue";
+import baseFormMixin from "@/mixins/base-form-mixin";
+import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal.vue";
+import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue";
+import { Form, defineRule } from "vee-validate";
+import shopQuestion from "@/layouts/service-location/shop-question/shop-question.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue";
 
 // DEFINE VALIDATION RULES
-defineRule('mobile-location-required', (value) => {
-    if (
-        value.addressQuestions.streetAddress === ''
-        || value.addressQuestions.city === ''
-        || value.addressQuestions.state === ''
-        || value.addressQuestions.zipCode === ''
-        || value.isVehicleProtected == null
-    ) {
-        return errorMessages.MOBILE_LOCATION_REQUIRED;
-    }
-    return true;
+defineRule("mobile-location-required", (value) => {
+  if (
+    value.addressQuestions.streetAddress === "" ||
+    value.addressQuestions.city === "" ||
+    value.addressQuestions.state === "" ||
+    value.addressQuestions.zipCode === "" ||
+    value.isVehicleProtected == null
+  ) {
+    return errorMessages.MOBILE_LOCATION_REQUIRED;
+  }
+  return true;
 });
-defineRule('selection-required', required(errorMessages.OPTION_REQUIRED));
+defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
 export default {
-    name: 'service-location',
-    components: {
-        alert,
-        appointmentTypeQuestion,
-        contentGroupModal,
-        mobileLocationModalQuestions,
-        siteFooter,
-        siteHeader,
-        siteSubHeader,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        serviceZipModalQuestion,
-        shopQuestion
+  name: "service-location",
+  components: {
+    alert,
+    appointmentTypeQuestion,
+    contentGroupModal,
+    mobileLocationModalQuestions,
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    serviceZipModalQuestion,
+    shopQuestion,
+  },
+  mixins: [baseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+    const serviceZipCode =
+      useMainStore().order.serviceLocation.zipCode ||
+      useMainStore().order.customer.address.zipCode;
+    const zipCodeData = getZipCodeData(serviceZipCode);
+
+    const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
+    const serviceabilityDetailsPromise =
+      getServiceabilityDetails(serviceZipCode);
+    const shopQuestionInitialDataPromise =
+      shopQuestion.methods.loadInitialData(serviceZipCode);
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "mobileFeePart",
+        promise: mobileFeePartPromise,
+      },
+      {
+        resultKey: "serviceabilityDetails",
+        promise: serviceabilityDetailsPromise,
+      },
+      {
+        resultKey: "shopQuestionInitialData",
+        promise: shopQuestionInitialDataPromise,
+      },
+      {
+        resultKey: "zipCodeData",
+        promise: zipCodeData,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+      vm.setData(
+        resultMap.zipCodeData,
+        resultMap.serviceabilityDetails,
+        resultMap.mobileFeePart,
+        resultMap.shopQuestionInitialData?.mobileProviderNumber
+      );
+      vm.$refs.shopQuestion.initializeComponent(
+        resultMap.shopQuestionInitialData
+      );
+    });
+  },
+  setup() {
+    const mainStore = useMainStore();
+    return { mainStore };
+  },
+  data() {
+    return {
+      streetAddress: this.getServiceAddressFromStore(),
+      streetAddress2: this.getServiceAddress2FromStore(),
+      city: this.getServiceCityFromStore(),
+      state: this.getServiceStateFromStore(),
+      zipCode: this.getServiceZipCodeFromStore(),
+      isVehicleProtected: this.getIsVehicleProtectedFromStore(),
+      isGlassServiceableInshop: null,
+      isRecalibrationServiceableInshop: null,
+      isGlassServiceableMobile: null,
+      isRecalibrationServiceableMobile: null,
+      selectedAppointmentType: this.getSelectedAppointmentType(),
+      selectedProvider: this.getSelectedProvider(),
+      mobileFeePart: null,
+      mobileProviderNumber: null,
+      zipContainsMilitaryBase: false,
+      zipCodeCtu: null,
+    };
+  },
+  computed: {
+    questionText() {
+      return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
     },
-    mixins: [baseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-
-        const serviceZipCode = useMainStore().order.serviceLocation.zipCode || useMainStore().order.customer.address.zipCode;
-        const zipCodeData = getZipCodeData(serviceZipCode);
-
-        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
-        const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
-        const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode);
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            },
-            {
-                resultKey: 'mobileFeePart',
-                promise: mobileFeePartPromise
-            },
-            {
-                resultKey: 'serviceabilityDetails',
-                promise: serviceabilityDetailsPromise
-            },
-            {
-                resultKey: 'shopQuestionInitialData',
-                promise: shopQuestionInitialDataPromise
-            },
-            {
-                resultKey: 'zipCodeData',
-                promise: zipCodeData
-            }
-        ];
-
-        const resultMap = await settleAllPromises(promiseResultMap);
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-            vm.setData(
-                resultMap.zipCodeData,
-                resultMap.serviceabilityDetails,
-                resultMap.mobileFeePart,
-                resultMap.shopQuestionInitialData?.mobileProviderNumber
-            );
-            vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
-        });
+    answersFromCms() {
+      return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
     },
-    setup() {
-        const mainStore = useMainStore();
-        return { mainStore };
-    },
-    data() {
+    serviceZipCodeQuestion: {
+      get() {
         return {
-            streetAddress: this.getServiceAddressFromStore(),
-            streetAddress2: this.getServiceAddress2FromStore(),
-            city: this.getServiceCityFromStore(),
-            state: this.getServiceStateFromStore(),
-            zipCode: this.getServiceZipCodeFromStore(),
-            isVehicleProtected: this.getIsVehicleProtectedFromStore(),
-            isGlassServiceableInshop: null,
-            isRecalibrationServiceableInshop: null,
-            isGlassServiceableMobile: null,
-            isRecalibrationServiceableMobile: null,
-            selectedAppointmentType: this.getSelectedAppointmentType(),
-            selectedProvider: this.getSelectedProvider(),
-            mobileFeePart: null,
-            mobileProviderNumber: null,
-            zipContainsMilitaryBase: false,
-            zipCodeCtu: null
+          state: this.state,
+          zipCode: this.zipCode,
         };
-    },
-    computed: {
-        questionText() {
-            return this.getCmsContent('ServiceTypeQuestionWidget', 'QuestionText');
-        },
-        answersFromCms() {
-            return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers');
-        },
-        serviceZipCodeQuestion: {
-            get() {
-                return {
-                    state: this.state,
-                    zipCode: this.zipCode
-                };
-            },
-            set(newValue) {
-                if (newValue.zipCode !== this.zipCode) {
-                    this.resetMobileLocation();
-                    this.selectedAppointmentType = null;
-                    this.selectedProvider = null;
-                }
-
-                this.state = newValue.state;
-                this.zipCode = newValue.zipCode;
-
-                // eslint-disable-next-line vue/valid-next-tick
-                this.$nextTick();
-            }
-        },
-        mobileLocationQuestions: {
-            get() {
-                return {
-                    addressQuestions: {
-                        streetAddress: this.streetAddress,
-                        streetAddress2: this.streetAddress2,
-                        city: this.city,
-                        state: this.state,
-                        zipCode: this.zipCode
-                    },
-                    isVehicleProtected: this.isVehicleProtected
-                };
-            },
-            set(newValue) {
-                this.streetAddress = newValue.addressQuestions.streetAddress;
-                this.streetAddress2 = newValue.addressQuestions.streetAddress2;
-                this.city = newValue.addressQuestions.city;
-                this.state = newValue.addressQuestions.state;
-                this.zipCode = newValue.addressQuestions.zipCode;
-                this.isVehicleProtected = newValue.isVehicleProtected;
-
-                if (newValue.zipCode !== this.zipCode) {
-                    if (!(this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
-                        || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)) {
-                        this.selectedAppointmentType = null;
-                    }
-                    this.selectedProvider = null;
-                }
-            }
-        },
-        isServiceableMobile() {
-            if (this.isRecalibrationServiceableMobile !== null) {
-                return this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile;
-            }
-            return this.isGlassServiceableMobile;
-        },
-        isServiceableInshop() {
-            if (this.isRecalibrationServiceableInshop !== null) {
-                return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
-            }
-
-            return this.isGlassServiceableInshop;
-        },
-        isShopQuestionDisplayed() {
-            return (
-                this.selectedAppointmentType === 'Inshop'
-                || this.selectedAppointmentType === 'Dropoff'
-            );
-        },
-        isAppointmentTypeDisplayed() {
-            return this.zipCode && !this.displayNoShopsAlert;
-        },
-        isMobileLocationDisplayed() {
-            return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
-            || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
-        },
-        requiresInshopRecalibration() {
-            // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
-            return (
-                this.isServiceableInshop
-                && this.isGlassServiceableMobile
-                && this.isRecalibrationServiceableMobile === false
-            );
-        },
-        displayMilitaryZipAlert() {
-            return this.zipContainsMilitaryBase && this.isServiceableMobile;
-        },
-        displayNoShopsAlert() {
-            return !this.isServiceableInshop && !this.isServiceableMobile;
-        },
-        displayRecalibrationWarning() {
-            return this.requiresInshopRecalibration;
-        },
-        displayServiceableInshopOnly() {
-            return (
-                !this.displayRecalibrationWarning
-                && this.isServiceableInshop
-                && !this.isServiceableMobile
-            );
-        },
-        displayServiceableMobileOnly() {
-            return this.isServiceableMobile && !this.isServiceableInshop;
+      },
+      set(newValue) {
+        if (newValue.zipCode !== this.zipCode) {
+          this.resetMobileLocation();
+          this.selectedAppointmentType = null;
+          this.selectedProvider = null;
         }
+
+        this.state = newValue.state;
+        this.zipCode = newValue.zipCode;
+
+        // eslint-disable-next-line vue/valid-next-tick
+        this.$nextTick();
+      },
     },
-    methods: {
-        arePagePrerequisitesValid() {
-            return (
-                useMainStore().lineItems.supportingItems !== null
-                && useMainStore().order.serviceLocation.zipCode !== null
-            );
-        },
-        async reloadShopData(zipCode) {
-            await this.$refs.shopQuestion.reloadShopData(zipCode);
-        },
-        async forwardButtonAction() {
-            let provider = this.selectedProvider;
-            this.mainStore.updateMobileFee(null);
-            if (this.isMobileLocationDisplayed) {
-                if (this.mainStore.isNoComp || this.mainStore.isITAC) {
-                    this.mainStore.updateMobileFee(this.mobileFeePart);
-                }
+    mobileLocationQuestions: {
+      get() {
+        return {
+          addressQuestions: {
+            streetAddress: this.streetAddress,
+            streetAddress2: this.streetAddress2,
+            city: this.city,
+            state: this.state,
+            zipCode: this.zipCode,
+          },
+          isVehicleProtected: this.isVehicleProtected,
+        };
+      },
+      set(newValue) {
+        this.streetAddress = newValue.addressQuestions.streetAddress;
+        this.streetAddress2 = newValue.addressQuestions.streetAddress2;
+        this.city = newValue.addressQuestions.city;
+        this.state = newValue.addressQuestions.state;
+        this.zipCode = newValue.addressQuestions.zipCode;
+        this.isVehicleProtected = newValue.isVehicleProtected;
 
-                provider = {
-                    providerNumber: this.mobileProviderNumber,
-                    address: {
-                        streetAddress: null,
-                        city: null,
-                        state: null,
-                        zipCode: null,
-                        zipCodeCtu: null
-                    }
-                };
-            }
-
-            this.mainStore.saveServiceLocation({
-                address: this.streetAddress,
-                address2: this.streetAddress2,
-                city: this.city,
-                state: this.state,
-                zipCode: this.zipCode,
-                zipCodeCtu: this.zipCodeCtu,
-                appointmentType: this.selectedAppointmentType,
-                isVehicleProtected: this.isVehicleProtected,
-                provider
-            });
-
-            this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
-        },
-        openModalAction(modalName) {
-            this.$refs[modalName].openModal();
-        },
-        resetDependentState() {
-
-        },
-        getServiceAddressFromStore() {
-            return useMainStore().order.serviceLocation.address;
-        },
-        getServiceAddress2FromStore() {
-            return useMainStore().order.serviceLocation.address2;
-        },
-        getServiceCityFromStore() {
-            return useMainStore().order.serviceLocation.city;
-        },
-        getServiceStateFromStore() {
-            return useMainStore().order.serviceLocation.state || useMainStore().order.customer.address.state;
-        },
-        getServiceZipCodeFromStore() {
-            return useMainStore().order.serviceLocation.zipCode || useMainStore().order.customer.address.zipCode;
-        },
-        getIsVehicleProtectedFromStore() {
-            return useMainStore().order.serviceLocation.isVehicleProtected;
-        },
-        getSelectedAppointmentType() {
-            return useMainStore().order.serviceLocation.appointmentType;
-        },
-        getSelectedProvider() {
-            return useMainStore().order.serviceLocation.provider;
-        },
-        setData(zipCodeData, serviceabilityDetails, mobileFeePart, mobileProviderNumber) {
-            if (zipCodeData) {
-                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
-                this.zipCodeCtu = zipCodeData.zipCodeCtu;
-            }
-
-            if (serviceabilityDetails) {
-                this.setServiceabilityDetails(serviceabilityDetails);
-            }
-
-            if (mobileFeePart) {
-                this.mobileFeePart = mobileFeePart;
-            }
-
-            if (mobileProviderNumber) {
-                this.setMobileProviderNumber(mobileProviderNumber);
-            }
-        },
-        setContainsMilitaryBase(val) {
-            if (this.zipContainsMilitaryBase !== val) {
-                this.zipContainsMilitaryBase = val;
-            }
-        },
-        setMobileFeePart(mobileFeePart) {
-            this.mobileFeePart = mobileFeePart;
-        },
-        setMobileProviderNumber(providerNumber) {
-            this.mobileProviderNumber = providerNumber;
-        },
-        resetMobileLocation() {
-            this.streetAddress = '';
-            this.streetAddress2 = '';
-            this.city = '';
-
-            this.isVehicleProtected = null;
-        },
-        setServiceabilityDetails(serviceabilityDetails) {
-            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
-            this.isRecalibrationServiceableInshop = serviceabilityDetails.isRecalibrationServiceableInshop;
-            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
-            this.isRecalibrationServiceableMobile = serviceabilityDetails.isRecalibrationServiceableMobile;
+        if (newValue.zipCode !== this.zipCode) {
+          if (
+            !(
+              this.selectedAppointmentType === AppointmentTypeStrings.MOBILE ||
+              this.selectedAppointmentType ===
+                AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
+            )
+          ) {
+            this.selectedAppointmentType = null;
+          }
+          this.selectedProvider = null;
         }
-    }
+      },
+    },
+    isServiceableMobile() {
+      if (this.isRecalibrationServiceableMobile !== null) {
+        return (
+          this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile
+        );
+      }
+      return this.isGlassServiceableMobile;
+    },
+    isServiceableInshop() {
+      if (this.isRecalibrationServiceableInshop !== null) {
+        return (
+          this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop
+        );
+      }
+
+      return this.isGlassServiceableInshop;
+    },
+    isShopQuestionDisplayed() {
+      return (
+        this.selectedAppointmentType === "Inshop" ||
+        this.selectedAppointmentType === "Dropoff"
+      );
+    },
+    isAppointmentTypeDisplayed() {
+      return this.zipCode && !this.displayNoShopsAlert;
+    },
+    isMobileLocationDisplayed() {
+      return (
+        this.selectedAppointmentType === AppointmentTypeStrings.MOBILE ||
+        this.selectedAppointmentType ===
+          AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
+      );
+    },
+    requiresInshopRecalibration() {
+      // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
+      return (
+        this.isServiceableInshop &&
+        this.isGlassServiceableMobile &&
+        this.isRecalibrationServiceableMobile === false
+      );
+    },
+    displayMilitaryZipAlert() {
+      return this.zipContainsMilitaryBase && this.isServiceableMobile;
+    },
+    displayNoShopsAlert() {
+      return !this.isServiceableInshop && !this.isServiceableMobile;
+    },
+    displayRecalibrationWarning() {
+      return this.requiresInshopRecalibration;
+    },
+    displayServiceableInshopOnly() {
+      return (
+        !this.displayRecalibrationWarning &&
+        this.isServiceableInshop &&
+        !this.isServiceableMobile
+      );
+    },
+    displayServiceableMobileOnly() {
+      return this.isServiceableMobile && !this.isServiceableInshop;
+    },
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      return (
+        useMainStore().lineItems.supportingItems !== null &&
+        useMainStore().order.serviceLocation.zipCode !== null
+      );
+    },
+    async reloadShopData(zipCode) {
+      await this.$refs.shopQuestion.reloadShopData(zipCode);
+    },
+    async forwardButtonAction() {
+      let provider = this.selectedProvider;
+      this.mainStore.updateMobileFee(null);
+      if (this.isMobileLocationDisplayed) {
+        if (this.mainStore.isNoComp || this.mainStore.isITAC) {
+          this.mainStore.updateMobileFee(this.mobileFeePart);
+        }
+
+        provider = {
+          providerNumber: this.mobileProviderNumber,
+          address: {
+            streetAddress: null,
+            city: null,
+            state: null,
+            zipCode: null,
+            zipCodeCtu: null,
+          },
+        };
+      }
+
+      this.mainStore.saveServiceLocation({
+        address: this.streetAddress,
+        address2: this.streetAddress2,
+        city: this.city,
+        state: this.state,
+        zipCode: this.zipCode,
+        zipCodeCtu: this.zipCodeCtu,
+        appointmentType: this.selectedAppointmentType,
+        isVehicleProtected: this.isVehicleProtected,
+        provider,
+      });
+
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_FORWARD,
+        this.$route
+      );
+    },
+    openModalAction(modalName) {
+      this.$refs[modalName].openModal();
+    },
+    resetDependentState() {},
+    getServiceAddressFromStore() {
+      return useMainStore().order.serviceLocation.address;
+    },
+    getServiceAddress2FromStore() {
+      return useMainStore().order.serviceLocation.address2;
+    },
+    getServiceCityFromStore() {
+      return useMainStore().order.serviceLocation.city;
+    },
+    getServiceStateFromStore() {
+      return (
+        useMainStore().order.serviceLocation.state ||
+        useMainStore().order.customer.address.state
+      );
+    },
+    getServiceZipCodeFromStore() {
+      return (
+        useMainStore().order.serviceLocation.zipCode ||
+        useMainStore().order.customer.address.zipCode
+      );
+    },
+    getIsVehicleProtectedFromStore() {
+      return useMainStore().order.serviceLocation.isVehicleProtected;
+    },
+    getSelectedAppointmentType() {
+      return useMainStore().order.serviceLocation.appointmentType;
+    },
+    getSelectedProvider() {
+      return useMainStore().order.serviceLocation.provider;
+    },
+    setData(
+      zipCodeData,
+      serviceabilityDetails,
+      mobileFeePart,
+      mobileProviderNumber
+    ) {
+      if (zipCodeData) {
+        this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
+        this.zipCodeCtu = zipCodeData.zipCodeCtu;
+      }
+
+      if (serviceabilityDetails) {
+        this.setServiceabilityDetails(serviceabilityDetails);
+      }
+
+      if (mobileFeePart) {
+        this.mobileFeePart = mobileFeePart;
+      }
+
+      if (mobileProviderNumber) {
+        this.setMobileProviderNumber(mobileProviderNumber);
+      }
+    },
+    setContainsMilitaryBase(val) {
+      if (this.zipContainsMilitaryBase !== val) {
+        this.zipContainsMilitaryBase = val;
+      }
+    },
+    setMobileFeePart(mobileFeePart) {
+      this.mobileFeePart = mobileFeePart;
+    },
+    setMobileProviderNumber(providerNumber) {
+      this.mobileProviderNumber = providerNumber;
+    },
+    resetMobileLocation() {
+      this.streetAddress = "";
+      this.streetAddress2 = "";
+      this.city = "";
+
+      this.isVehicleProtected = null;
+    },
+    setServiceabilityDetails(serviceabilityDetails) {
+      this.isGlassServiceableInshop =
+        serviceabilityDetails.isGlassServiceableInshop;
+      this.isRecalibrationServiceableInshop =
+        serviceabilityDetails.isRecalibrationServiceableInshop;
+      this.isGlassServiceableMobile =
+        serviceabilityDetails.isGlassServiceableMobile;
+      this.isRecalibrationServiceableMobile =
+        serviceabilityDetails.isRecalibrationServiceableMobile;
+    },
+  },
 };
 </script>
 
@@ -453,48 +512,47 @@ export default {
 $page-side-padding: 1.5rem;
 
 .page-container-grouped-styles {
-    overflow: auto;
+  overflow: auto;
 
-    .main-content-container {
-        padding: 0 1.5rem !important;
-    }
+  .main-content-container {
+    padding: 0 1.5rem !important;
+  }
 }
 
 .question-text {
-    & > span {
-        line-height: 1.5rem;
-    }
+  & > span {
+    line-height: 1.5rem;
+  }
 }
 .list-card-content p {
+  &:first-of-type {
+    line-height: 1.5rem;
+  }
+  &:not(:nth-of-type(1)) {
+    line-height: 1.25rem;
+  }
+}
+.choose-option {
+  .button-question > div {
     &:first-of-type {
-        line-height: 1.5rem;
-    }
-    &:not(:nth-of-type(1)){
-        line-height: 1.250rem;
+      margin-bottom: 0.95rem;
+      line-height: 1.5rem;
     }
+  }
 }
-.choose-option{
-    .button-question >div {
-        &:first-of-type {
-            margin-bottom: 0.95rem;
-            line-height: 1.500rem;
-        }
-    }
-}
-.button-question{
-    .row.form-test-error{
-        line-height:1.500rem;
-        padding-left: 0rem !important;
-    }
+.button-question {
+  .row.form-test-error {
+    line-height: 1.5rem;
+    padding-left: 0rem !important;
+  }
 }
 .service-location-button-question {
-    .question-text {
-        margin-top: 1.5rem;
-
-        span {
-            text-align: center;
-        }
+  .question-text {
+    margin-top: 1.5rem;
 
+    span {
+      text-align: center;
     }
+  }
 }
 </style>
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 4c8b7c67..e8cd429d 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -32,6 +32,15 @@ body {
                     }
                 }
             }
+            .shop-question {
+                .col {
+                    max-width: 472px;
+                    @include media-breakpoint-up(xl) {
+                        max-width: 66.6666666%;
+                        margin: 0 auto;
+                    }
+                }
+            }
         }
         .col-xl-4 {
             max-width: 472px;