From 8b985690bba29be920bf014ee271748701ff17e9 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 11 Apr 2024 14:54:52 -0400
Subject: [PATCH 01/26] WIP update ISS with desktop views.

---
 .../site-footer/footer-image/footer-image.vue |  28 +
 .../site-footer/site-footer.vue               |  15 +-
 .../coverage-statement/coverage-statement.vue | 910 ++++++++---------
 .../duplicate-check/duplicate-check.vue       | 387 ++++----
 .../policy-vehicles/policy-vehicles.vue       | 532 +++++-----
 src/layouts/vehicle-damage/vehicle-damage.vue | 929 ++++++++++--------
 src/layouts/vehicle-parts/vehicle-parts.vue   | 441 +++++----
 src/layouts/welcome-page/welcome-page.vue     | 775 +++++++--------
 src/styles/common-styles.scss                 | 102 +-
 src/styles/ux-variables.scss                  |   9 +-
 10 files changed, 2156 insertions(+), 1972 deletions(-)
 create mode 100644 src/iss-components/site-footer/footer-image/footer-image.vue

diff --git a/src/iss-components/site-footer/footer-image/footer-image.vue b/src/iss-components/site-footer/footer-image/footer-image.vue
new file mode 100644
index 00000000..8b3ac9e6
--- /dev/null
+++ b/src/iss-components/site-footer/footer-image/footer-image.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="footerImage">
+      <img :src="footerImageURL" />
+    </div>
+</template>
+  <script>
+    export default {
+      name: "footer-image",
+      props: {
+        cmsWidgetName: String,
+    },
+      computed: {
+        footerImageURL() {
+            return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+        },
+      },
+    };
+  </script>
+
+  <style lang="scss" scoped>
+    .footerImage {
+        display: flex;
+        justify-content: center;
+        img {
+            max-width: 375px;
+        }
+    }
+  </style>
diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index e695f422..52ca9273 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -41,14 +41,6 @@
                 </div>
             </div>
         </footer>
-        <div
-            v-if="footerImageURL"
-            id="imgCity"
-            class="footerImage">
-            <img
-                id="siteFooterImage"
-                :src="footerImageURL" />
-        </div>
     </div>
 </template>
 
@@ -61,7 +53,7 @@ export default {
     name: 'site-footer',
     components: {
         textLink,
-        buttonMain
+        buttonMain,
     },
     props: {
         isForwardActionDisabled: Boolean,
@@ -88,7 +80,10 @@ export default {
                 : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
         },
         footerImageURL() {
-            return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+            //return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+            const output = this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+            console.log("original image", output);
+            return output;
         },
         includeFooterImage() {
             const currentPageName = this.getPageNameByQueryString();
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index bd1e0162..e66bb65e 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -3,442 +3,477 @@
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit">
-      <div class="page-container-grouped-styles">
-          <div class="fade-on-route-transition position-relative">
-              <loadingModal
-                ref="loadingModal"
-                :textSlides="loadingText" />
-              <siteHeader
-                ref="siteHeader"
-                cmsWidgetName="SiteHeaderWidget" />
-              <div class="select-car">
-                  <div class="container-fluid pb-2">
-                      <div class="row px-3">
-                          <div class="col">
-                              <div class="pb-1 mt-4">
-                                  <h5
-                                    ref="siteSubHeader"
-                                    class="text-center text-black"
-                                    v-html="coverageStatementSubHeader">
-                                  </h5>
-                                  <div
-                                    ref="explanatoryText"
-                                    class="body-text text-center mt-2"
-                                    v-html="explanatoryText">
-                                  </div>
-                                  <div
-                                    ref="secondaryText"
-                                    class="text-center mt-4 mb-1 fw-bold text-black"
-                                    v-html="secondaryText">
-                                  </div>
-                                  <div
-                                    v-if="verifiedDeductible"
-                                    class="d-flex justify-content-center cost">
-                                    {{ deductibleForDisplay }}
-                                  </div>
-                                  <div
-                                    v-if="isQuoteDisplayed"
-                                    class="d-flex justify-content-center cost mb-0">
-                                    {{ servicePriceForDisplay }}
-                                  </div>
-                                  <div
-                                    v-if="verifiedITAC"
-                                    class="d-flex justify-content-center mb-4 deductible-text">
-                                    {{ deductibleText }}&nbsp;
-                                    <span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
-                                  </div>
-                                  <alert
-                                    v-if="verifiedITAC"
-                                    ref="verifiedITACAlert"
-                                    class="mb-5"
-                                    cmsWidgetName="VerifiedITACAlert"
-                                    :manualHeadline="verifiedItacAlertHeader"
-                                    :manualCopy="verifiedItacAlertBody"
-                                    alertClass="alert-success"
-                                    :isDismissible="false">
-                                  </alert>
-                                  <div
-                                    class="fw-bold text-black mt-5 mb-2"
-                                    v-html="nextStepsHeader">
-                                  </div>
-                                  <div
-                                    class="body-text"
-                                    v-html="nextStepsBody">
-                                  </div>
-                                <buttonQuestion
-                                    v-if="isQuoteDisplayed"
-                                    v-model="selectedProvider"
-                                    cmsWidgetName="ServiceProviderQuestion"
-                                    :questionText="serviceProviderQuestionText"
-                                    :answers="serviceProviderQuestionAnswers"
-                                    groupName="ServiceProviderQuestionOption"
-                                    buttonTypeString="listButton"
-                                    isRequired
-                                    :validationRules="rules.selectionRequired">
-                                </buttonQuestion>
-                                <text-block
-                                    v-if="isQuoteDisplayed"
-                                    cmsWidgetName="DisclaimerWidget"
-                                    typeStyle="caption" />
-                              </div>
-                              <siteFooter
-                                ref="siteFooter"
-                                class="mt-5"
-                                cmsWidgetName="SiteFooterWidget"
-                                :isForwardActionDisabled="!meta.valid"
-                                @backClicked="navigateBackByVehicleQuestions"
-                                @forwardClicked="navigateForward" />
-                          </div>
-                      </div>
-                  </div>
-              </div>
-          </div>
+    @invalidSubmit="onInvalidSubmit"
+  >
+    <div class="container-fluid fade-on-route-transition">
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <loadingModal ref="loadingModal" :textSlides="loadingText" />
+          <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
+        </div>
       </div>
-      <recalModal
-        ref="RecalModal"
-        cmsWidgetName="RecalModal" />
-      <contentGroupModal
-        ref="DeductibleModal"
-        cmsWidgetName="DeductibleModal"
-        class="deductible-modal" />
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <h5
+            ref="siteSubHeader"
+            class="text-center text-black"
+            v-html="coverageStatementSubHeader"
+          ></h5>
+          <div
+            ref="explanatoryText"
+            class="body-text text-center mt-2"
+            v-html="explanatoryText"
+          ></div>
+          <div
+            ref="secondaryText"
+            class="text-center mt-4 mb-1 fw-bold text-black"
+            v-html="secondaryText"
+          ></div>
+          <div
+            v-if="verifiedDeductible"
+            class="d-flex justify-content-center cost"
+          >
+            {{ deductibleForDisplay }}
+          </div>
+          <div
+            v-if="isQuoteDisplayed"
+            class="d-flex justify-content-center cost mb-0"
+          >
+            {{ servicePriceForDisplay }}
+          </div>
+          <div
+            v-if="verifiedITAC"
+            class="d-flex justify-content-center mb-4 deductible-text"
+          >
+            {{ deductibleText }}&nbsp;
+            <span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
+          </div>
+          <alert
+            v-if="verifiedITAC"
+            ref="verifiedITACAlert"
+            class="mb-5"
+            cmsWidgetName="VerifiedITACAlert"
+            :manualHeadline="verifiedItacAlertHeader"
+            :manualCopy="verifiedItacAlertBody"
+            alertClass="alert-success"
+            :isDismissible="false"
+          >
+          </alert>
+          <div
+            class="fw-bold text-black mt-5 mb-2"
+            v-html="nextStepsHeader"
+          ></div>
+          <div class="body-text" v-html="nextStepsBody"></div>
+          <buttonQuestion
+            v-if="isQuoteDisplayed"
+            v-model="selectedProvider"
+            cmsWidgetName="ServiceProviderQuestion"
+            :questionText="serviceProviderQuestionText"
+            :answers="serviceProviderQuestionAnswers"
+            groupName="ServiceProviderQuestionOption"
+            buttonTypeString="listButton"
+            isRequired
+            :validationRules="rules.selectionRequired"
+          >
+          </buttonQuestion>
+          <text-block
+            v-if="isQuoteDisplayed"
+            cmsWidgetName="DisclaimerWidget"
+            typeStyle="caption"
+          />
+        </div>
+        <siteFooter
+          ref="siteFooter"
+          class="mt-5"
+          cmsWidgetName="SiteFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          @backClicked="navigateBackByVehicleQuestions"
+          @forwardClicked="navigateForward"
+        />
+      </div>
+    </div>
+    <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
+    <contentGroupModal
+      ref="DeductibleModal"
+      cmsWidgetName="DeductibleModal"
+      class="deductible-modal"
+    />
   </Form>
 </template>
 <script>
-
 // Import Component
-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 recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
-import alert from '@/ux-components/alert/alert.vue';
-import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
-import buttonQuestion from '@/digital-components/button-question/button-question.vue';
-import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
-import textBlock from '@/digital-components/text-block/text-block.vue';
+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 recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal.vue";
+import alert from "@/ux-components/alert/alert.vue";
+import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal.vue";
+import buttonQuestion from "@/digital-components/button-question/button-question.vue";
+import loadingModal from "@/iss-components/loading-modal/loading-modal.vue";
+import textBlock from "@/digital-components/text-block/text-block.vue";
 
 // Import Supporting Files
-import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper.js';
-import settleAllPromises from '@/helpers/layout-helper.js';
-import { getDamageString } from '@/helpers/damage-helper.js';
-import { useMainStore } from '@/store/index.js';
-import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
-import globalRules from '@/constants/global-rules.js';
-import baseFormMixin from '@/mixins/base-form-mixin.js';
-import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
-import issPageValues from '@/router/router-constants/issPage-values';
-import bailoutMessage from '@/constants/bailoutMessage';
-import coverageStatuses from '@/constants/coverage-statuses';
-import widgetFields from '@/constants/cms-widget-fields.js';
-import getPriceOfLineItems from '@/helpers/price-calculator.js';
-import { formatAmountInDollars } from '@/helpers/text-helper.js';
+import {
+  fetchCmsContentForPage,
+  setupModalLinks,
+  processIfStatements,
+} from "@/helpers/cms-content-helper.js";
+import settleAllPromises from "@/helpers/layout-helper.js";
+import { getDamageString } from "@/helpers/damage-helper.js";
+import { useMainStore } from "@/store/index.js";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin.js";
+import globalRules from "@/constants/global-rules.js";
+import baseFormMixin from "@/mixins/base-form-mixin.js";
+import navigationScenarios from "@/router/router-constants/navigation-scenarios.js";
+import issPageValues from "@/router/router-constants/issPage-values";
+import bailoutMessage from "@/constants/bailoutMessage";
+import coverageStatuses from "@/constants/coverage-statuses";
+import widgetFields from "@/constants/cms-widget-fields.js";
+import getPriceOfLineItems from "@/helpers/price-calculator.js";
+import { formatAmountInDollars } from "@/helpers/text-helper.js";
 
-const SAFELITE_PROVIDER = 'Safelite';
+const SAFELITE_PROVIDER = "Safelite";
 
 export default {
-    name: 'coverage-statement',
-    components: {
-        siteFooter,
-        siteHeader,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        recalModal,
-        alert,
-        contentGroupModal,
-        buttonQuestion,
-        loadingModal,
-        textBlock
-    },
-    mixins: [baseFormMixin, vehicleQuestionsMixin],
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
-        const supportingItemsPromise = await useMainStore().getSupportingItems();
+  name: "coverage-statement",
+  components: {
+    siteFooter,
+    siteHeader,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    recalModal,
+    alert,
+    contentGroupModal,
+    buttonQuestion,
+    loadingModal,
+    textBlock,
+  },
+  mixins: [baseFormMixin, vehicleQuestionsMixin],
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
+    const supportingItemsPromise = await useMainStore().getSupportingItems();
 
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            },
-            {
-                resultKey: 'supportingItems',
-                promise: supportingItemsPromise
-            }
-        ];
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "supportingItems",
+        promise: supportingItemsPromise,
+      },
+    ];
 
-        const resultMap = await settleAllPromises(promiseResultMap);
-        const clonedGlassParts = useMainStore().lineItems.glassParts
-            ? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts))
-            : [];
-        const availableLineItems = [
-            ...(resultMap.supportingItems ?? []),
-            ...(clonedGlassParts ?? [])
-        ];
+    const resultMap = await settleAllPromises(promiseResultMap);
+    const clonedGlassParts = useMainStore().lineItems.glassParts
+      ? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts))
+      : [];
+    const availableLineItems = [
+      ...(resultMap.supportingItems ?? []),
+      ...(clonedGlassParts ?? []),
+    ];
 
-        let hasBailedOut = false;
-        let pricingResults = [];
-        if (useMainStore().policy.policyLookupSuccessful && useMainStore().vehicle.policyVehicleId >= 0) {
-            await useMainStore().getFinalDeductible();
-            pricingResults = await useMainStore().getPriceOrderItems(availableLineItems)
-                .catch((err) => {
-                    useMainStore().setBailout(bailoutMessage.pricingResponseError(
-                        availableLineItems.map((li) => li.partNumber),
-                        { code: err.code, message: err.message, data: err.data }
-                    ));
-                    hasBailedOut = true;
-                    next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
-                });
-        }
-
-        if (!hasBailedOut) {
-            // Call the "next" function to complete the transition to this page.
-            next((vm) => {
-                vm.setCmsContent(resultMap.cmsContent);
-                vm.setSupportingItems(resultMap.supportingItems);
-                // eslint-disable-next-line no-param-reassign
-                vm.setBaseServiceLineItems(pricingResults);
-                vm.$refs.loadingModal.showModal();
-                vm.initializeComponent();
-                if (!vm.unverified) {
-                    useMainStore().disableKeyFields();
-                }
-            });
-        }
-    },
-    data() {
-        const { isRepair } = useMainStore().damage;
-        const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
-        return {
-            isRepair,
-            policyLookupSuccessful,
-            isNoComp: noCoverage ?? false,
-            baseServiceLineItems: [],
-            selectedProvider: '',
-            deductibleText: 'Your deductible is',
-            // TODO update when design team gives appropriate text
-            loadingText: [
-                'Connecting to your insurance company',
-                'Nearly there',
-                'Finishing up'
-            ],
-            rules: {
-                selectionRequired: globalRules.OPTION_REQUIRED
-            },
-            supportingItems: null,
-            widget: {
-                subheader: 'SiteSubHeaderWidget',
-                verifiedItacAlert: 'VerifiedITACAlert',
-                explanatoryText: 'ExplanatoryTextWidget',
-                nextStep: 'NextStepsWidget',
-                serviceProviderQuestion: 'ServiceProviderQuestion'
-            }
-        };
-    },
-    computed: {
-        coverageStatementSubHeader() {
-            return this.getTextFromCmsWithCustomIfStatements(
-                this.widget.subheader,
-                widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
-            );
-        },
-        verifiedItacAlertHeader() {
-            return this.getCmsContent(
-                this.widget.verifiedItacAlert,
-                widgetFields.ALERT_WIDGET.HEADLINE_TEXT
-            );
-        },
-        verifiedItacAlertBody() {
-            return this.getCmsContent(
-                this.widget.verifiedItacAlert,
-                widgetFields.ALERT_WIDGET.BODY_TEXT
-            )?.replaceAll('{custom:costSavings}', this.itacCostSavingsForDisplay);
-        },
-        secondaryText() {
-            return this.getTextFromCmsWithCustomIfStatements(
-                this.widget.subheader,
-                widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
-            );
-        },
-        explanatoryText() {
-            return this.getTextFromCmsWithCustomIfStatements(
-                this.widget.explanatoryText,
-                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
-            );
-        },
-        nextStepsHeader() {
-            return this.getTextFromCmsWithCustomIfStatements(
-                this.widget.nextStep,
-                widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
-            );
-        },
-        nextStepsBody() {
-            return this.getTextFromCmsWithCustomIfStatements(
-                this.widget.nextStep,
-                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
-            )?.replaceAll('{custom:damage}', this.damageText);
-        },
-        damageText() {
-            const damageString = getDamageString();
-            return damageString === 'match' ? '' : damageString;
-        },
-        deductibleValue() {
-            return useMainStore().order.currentDeductible;
-        },
-        deductibleForDisplay() {
-            return formatAmountInDollars(this.deductibleValue);
-        },
-        registerClaimSuccessful() {
-            return useMainStore().payment.insuranceCoverage.isVerified;
-        },
-        verifiedNoComp() {
-            return this.policyLookupSuccessful && this.isNoComp;
-        },
-        verifiedITAC() {
-            return this.policyLookupSuccessful
-                && !this.isNoComp
-                && this.deductibleValue > this.totalServicePrice;
-        },
-        coveredAndServicePriceAboveOrEqualDeductible() {
-            return !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue;
-        },
-        verifiedDeductible() {
-            return useMainStore().isClaimRegistrationRequired
-                ? this.registerClaimSuccessful
-                    && this.coveredAndServicePriceAboveOrEqualDeductible
-                    && this.deductibleValue !== null
-                : this.policyLookupSuccessful
-                    && this.coveredAndServicePriceAboveOrEqualDeductible;
-        },
-        unverified() {
-            return !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp;
-        },
-        isADAS() {
-            const parts = useMainStore().order.lineItems.glassParts;
-            return parts !== null && !!parts.find((part) => part.requiresRecalibration);
-        },
-        totalServicePrice() {
-            return getPriceOfLineItems(this.baseServiceLineItems);
-        },
-        servicePriceForDisplay() {
-            return formatAmountInDollars(this.totalServicePrice);
-        },
-        itacCostSavings() {
-            return this.deductibleValue - this.totalServicePrice;
-        },
-        itacCostSavingsForDisplay() {
-            return formatAmountInDollars(this.itacCostSavings);
-        },
-        serviceProviderQuestionText() {
-            return this.getCmsContent(
-                this.widget.serviceProviderQuestion,
-                widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
-            );
-        },
-        serviceProviderQuestionAnswers() {
-            return this.getCmsContent(
-                this.widget.serviceProviderQuestion,
-                widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
-            );
-        },
-        isQuoteDisplayed() {
-            return this.verifiedITAC || this.verifiedNoComp;
-        },
-        shouldRegisterClaim() {
-            return this.policyLookupSuccessful
-                && useMainStore().vehicle.policyVehicleId != null
-                && useMainStore().vehicle.policyVehicleId >= 0
-                && useMainStore().isClaimRegistrationRequired
-                && !useMainStore().isClaimAlreadyRegistered
-                && (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC);
-        }
-    },
-    watch: {
-        selectedProvider() {
-            const buttonText = this.selectedProvider === SAFELITE_PROVIDER ? 'Continue with Safelite' : 'Safelite';
-            this.$refs.siteFooter.updateButtonText(buttonText);
-        },
-        nextStepsBody(newValue, oldValue) {
-            if (newValue !== oldValue) {
-                setupModalLinks(this, 'RecalModal');
-                setupModalLinks(this, 'DeductibleModal');
-            }
-        }
-    },
-    mounted() {
-        setupModalLinks(this);
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            return !!useMainStore().vehicle.carId;
-        },
-        async initializeComponent() {
-            useMainStore().updatePolicyITACFlag(this.verifiedITAC);
-            const coverageStatus = this.verifiedITAC || this.verifiedNoComp
-                ? coverageStatuses.VERIFIED
-                : coverageStatuses.PENDING;
-            useMainStore().updateCoverageStatus(coverageStatus);
-            if (this.shouldRegisterClaim) {
-                await useMainStore().registerClaim()?.catch(() => {});
-            }
-            this.$refs.loadingModal.hideModal();
-        },
-        async navigateForward() {
-            if (this.unverified || this.verifiedDeductible) {
-                useMainStore().updateSupportingItems(this.supportingItems);
-                this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
-            } else if (this.verifiedITAC || this.verifiedNoComp) {
-                useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
-                if (this.selectedProvider === SAFELITE_PROVIDER) {
-                    useMainStore().updateSupportingItems(this.supportingItems);
-                    this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
-                } else {
-                    useMainStore().setBailout(bailoutMessage.RequestCallback());
-                    this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
-                }
-            } else {
-                useMainStore().setBailout(bailoutMessage.coverageStatementInvalidState());
-                this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
-            }
-        },
-        navigateWithScenario(scenario) {
-            this.$router.navigate(scenario, this.$route);
-        },
-        getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
-            const rawText = this.getCmsContent(widgetName, widgetField);
-            return processIfStatements(rawText, 'custom', this.getCustomValueFromString);
-        },
-        getCustomValueFromString(str) {
-            switch (str) {
-                case 'coverageUnverified':
-                    return this.unverified;
-                case 'verifiedDeductible':
-                    return this.verifiedDeductible;
-                case 'verifiedITAC':
-                    return this.verifiedITAC;
-                case 'verifiedNoComp':
-                    return this.verifiedNoComp;
-                case 'ADASReplace':
-                    return !this.isRepair && this.isADAS;
-                case 'nonADASReplace':
-                    return !this.isRepair && !this.isADAS;
-                case 'nonADASRepair':
-                    return this.isRepair;
-                case 'deductibleOverZero':
-                    return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
-                case 'isDeductibleZero':
-                    return this.verifiedDeductible && this.deductibleValue === 0;
-                default:
-                    return null;
-            }
-        },
-        setSupportingItems(newSupportingItems) {
-            this.supportingItems = newSupportingItems;
-        },
-        setBaseServiceLineItems(lineItems) {
-            this.baseServiceLineItems = lineItems;
-        }
+    let hasBailedOut = false;
+    let pricingResults = [];
+    if (
+      useMainStore().policy.policyLookupSuccessful &&
+      useMainStore().vehicle.policyVehicleId >= 0
+    ) {
+      await useMainStore().getFinalDeductible();
+      pricingResults = await useMainStore()
+        .getPriceOrderItems(availableLineItems)
+        .catch((err) => {
+          useMainStore().setBailout(
+            bailoutMessage.pricingResponseError(
+              availableLineItems.map((li) => li.partNumber),
+              { code: err.code, message: err.message, data: err.data }
+            )
+          );
+          hasBailedOut = true;
+          next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
+        });
     }
+
+    if (!hasBailedOut) {
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.setCmsContent(resultMap.cmsContent);
+        vm.setSupportingItems(resultMap.supportingItems);
+        // eslint-disable-next-line no-param-reassign
+        vm.setBaseServiceLineItems(pricingResults);
+        vm.$refs.loadingModal.showModal();
+        vm.initializeComponent();
+        if (!vm.unverified) {
+          useMainStore().disableKeyFields();
+        }
+      });
+    }
+  },
+  data() {
+    const { isRepair } = useMainStore().damage;
+    const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
+    return {
+      isRepair,
+      policyLookupSuccessful,
+      isNoComp: noCoverage ?? false,
+      baseServiceLineItems: [],
+      selectedProvider: "",
+      deductibleText: "Your deductible is",
+      // TODO update when design team gives appropriate text
+      loadingText: [
+        "Connecting to your insurance company",
+        "Nearly there",
+        "Finishing up",
+      ],
+      rules: {
+        selectionRequired: globalRules.OPTION_REQUIRED,
+      },
+      supportingItems: null,
+      widget: {
+        subheader: "SiteSubHeaderWidget",
+        verifiedItacAlert: "VerifiedITACAlert",
+        explanatoryText: "ExplanatoryTextWidget",
+        nextStep: "NextStepsWidget",
+        serviceProviderQuestion: "ServiceProviderQuestion",
+      },
+    };
+  },
+  computed: {
+    coverageStatementSubHeader() {
+      return this.getTextFromCmsWithCustomIfStatements(
+        this.widget.subheader,
+        widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
+      );
+    },
+    verifiedItacAlertHeader() {
+      return this.getCmsContent(
+        this.widget.verifiedItacAlert,
+        widgetFields.ALERT_WIDGET.HEADLINE_TEXT
+      );
+    },
+    verifiedItacAlertBody() {
+      return this.getCmsContent(
+        this.widget.verifiedItacAlert,
+        widgetFields.ALERT_WIDGET.BODY_TEXT
+      )?.replaceAll("{custom:costSavings}", this.itacCostSavingsForDisplay);
+    },
+    secondaryText() {
+      return this.getTextFromCmsWithCustomIfStatements(
+        this.widget.subheader,
+        widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
+      );
+    },
+    explanatoryText() {
+      return this.getTextFromCmsWithCustomIfStatements(
+        this.widget.explanatoryText,
+        widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+      );
+    },
+    nextStepsHeader() {
+      return this.getTextFromCmsWithCustomIfStatements(
+        this.widget.nextStep,
+        widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
+      );
+    },
+    nextStepsBody() {
+      return this.getTextFromCmsWithCustomIfStatements(
+        this.widget.nextStep,
+        widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+      )?.replaceAll("{custom:damage}", this.damageText);
+    },
+    damageText() {
+      const damageString = getDamageString();
+      return damageString === "match" ? "" : damageString;
+    },
+    deductibleValue() {
+      return useMainStore().order.currentDeductible;
+    },
+    deductibleForDisplay() {
+      return formatAmountInDollars(this.deductibleValue);
+    },
+    registerClaimSuccessful() {
+      return useMainStore().payment.insuranceCoverage.isVerified;
+    },
+    verifiedNoComp() {
+      return this.policyLookupSuccessful && this.isNoComp;
+    },
+    verifiedITAC() {
+      return (
+        this.policyLookupSuccessful &&
+        !this.isNoComp &&
+        this.deductibleValue > this.totalServicePrice
+      );
+    },
+    coveredAndServicePriceAboveOrEqualDeductible() {
+      return (
+        !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue
+      );
+    },
+    verifiedDeductible() {
+      return useMainStore().isClaimRegistrationRequired
+        ? this.registerClaimSuccessful &&
+            this.coveredAndServicePriceAboveOrEqualDeductible &&
+            this.deductibleValue !== null
+        : this.policyLookupSuccessful &&
+            this.coveredAndServicePriceAboveOrEqualDeductible;
+    },
+    unverified() {
+      return (
+        !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp
+      );
+    },
+    isADAS() {
+      const parts = useMainStore().order.lineItems.glassParts;
+      return (
+        parts !== null && !!parts.find((part) => part.requiresRecalibration)
+      );
+    },
+    totalServicePrice() {
+      return getPriceOfLineItems(this.baseServiceLineItems);
+    },
+    servicePriceForDisplay() {
+      return formatAmountInDollars(this.totalServicePrice);
+    },
+    itacCostSavings() {
+      return this.deductibleValue - this.totalServicePrice;
+    },
+    itacCostSavingsForDisplay() {
+      return formatAmountInDollars(this.itacCostSavings);
+    },
+    serviceProviderQuestionText() {
+      return this.getCmsContent(
+        this.widget.serviceProviderQuestion,
+        widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
+      );
+    },
+    serviceProviderQuestionAnswers() {
+      return this.getCmsContent(
+        this.widget.serviceProviderQuestion,
+        widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
+      );
+    },
+    isQuoteDisplayed() {
+      return this.verifiedITAC || this.verifiedNoComp;
+    },
+    shouldRegisterClaim() {
+      return (
+        this.policyLookupSuccessful &&
+        useMainStore().vehicle.policyVehicleId != null &&
+        useMainStore().vehicle.policyVehicleId >= 0 &&
+        useMainStore().isClaimRegistrationRequired &&
+        !useMainStore().isClaimAlreadyRegistered &&
+        (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)
+      );
+    },
+  },
+  watch: {
+    selectedProvider() {
+      const buttonText =
+        this.selectedProvider === SAFELITE_PROVIDER
+          ? "Continue with Safelite"
+          : "Safelite";
+      this.$refs.siteFooter.updateButtonText(buttonText);
+    },
+    nextStepsBody(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        setupModalLinks(this, "RecalModal");
+        setupModalLinks(this, "DeductibleModal");
+      }
+    },
+  },
+  mounted() {
+    setupModalLinks(this);
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      return !!useMainStore().vehicle.carId;
+    },
+    async initializeComponent() {
+      useMainStore().updatePolicyITACFlag(this.verifiedITAC);
+      const coverageStatus =
+        this.verifiedITAC || this.verifiedNoComp
+          ? coverageStatuses.VERIFIED
+          : coverageStatuses.PENDING;
+      useMainStore().updateCoverageStatus(coverageStatus);
+      if (this.shouldRegisterClaim) {
+        await useMainStore()
+          .registerClaim()
+          ?.catch(() => {});
+      }
+      this.$refs.loadingModal.hideModal();
+    },
+    async navigateForward() {
+      if (this.unverified || this.verifiedDeductible) {
+        useMainStore().updateSupportingItems(this.supportingItems);
+        this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
+      } else if (this.verifiedITAC || this.verifiedNoComp) {
+        useMainStore().updateIsSafeliteProvider(
+          this.selectedProvider === SAFELITE_PROVIDER
+        );
+        if (this.selectedProvider === SAFELITE_PROVIDER) {
+          useMainStore().updateSupportingItems(this.supportingItems);
+          this.navigateWithScenario(
+            navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE
+          );
+        } else {
+          useMainStore().setBailout(bailoutMessage.RequestCallback());
+          this.navigateWithScenario(
+            navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
+          );
+        }
+      } else {
+        useMainStore().setBailout(
+          bailoutMessage.coverageStatementInvalidState()
+        );
+        this.navigateWithScenario(
+          navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE
+        );
+      }
+    },
+    navigateWithScenario(scenario) {
+      this.$router.navigate(scenario, this.$route);
+    },
+    getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
+      const rawText = this.getCmsContent(widgetName, widgetField);
+      return processIfStatements(
+        rawText,
+        "custom",
+        this.getCustomValueFromString
+      );
+    },
+    getCustomValueFromString(str) {
+      switch (str) {
+        case "coverageUnverified":
+          return this.unverified;
+        case "verifiedDeductible":
+          return this.verifiedDeductible;
+        case "verifiedITAC":
+          return this.verifiedITAC;
+        case "verifiedNoComp":
+          return this.verifiedNoComp;
+        case "ADASReplace":
+          return !this.isRepair && this.isADAS;
+        case "nonADASReplace":
+          return !this.isRepair && !this.isADAS;
+        case "nonADASRepair":
+          return this.isRepair;
+        case "deductibleOverZero":
+          return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
+        case "isDeductibleZero":
+          return this.verifiedDeductible && this.deductibleValue === 0;
+        default:
+          return null;
+      }
+    },
+    setSupportingItems(newSupportingItems) {
+      this.supportingItems = newSupportingItems;
+    },
+    setBaseServiceLineItems(lineItems) {
+      this.baseServiceLineItems = lineItems;
+    },
+  },
 };
 </script>
 
@@ -451,26 +486,26 @@ export default {
 }
 
 .deductible-text {
-    line-height: 1.5rem;
+  line-height: 1.5rem;
 }
 
 :deep p {
-    line-height: 1.5rem;
-    font-size: 0.875rem;
-    margin-bottom: 0.5rem;
-    strong {
-        color: $black;
-    }
+  line-height: 1.5rem;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+  strong {
+    color: $black;
+  }
 }
 
 :deep .question-text {
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    & > span {
-        text-align: left;
-    }
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  & > span {
+    text-align: left;
+  }
 }
 
 :deep .deductible-modal {
@@ -490,7 +525,6 @@ export default {
   }
 }
 .modal {
-    overflow: hidden;
+  overflow: hidden;
 }
-
 </style>
diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue
index 4a842ba1..6df58973 100644
--- a/src/layouts/duplicate-check/duplicate-check.vue
+++ b/src/layouts/duplicate-check/duplicate-check.vue
@@ -1,210 +1,235 @@
 <template>
-    <Form
-        ref="duplicate-check-form"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition">
-                <siteHeader
-                    ref="siteHeader"
-                    :cmsWidgetName="widget.siteHeader" />
-                <div class="container-fluid px-6">
-                    <siteSubHeader
-                        id="sub-header"
-                        ref="siteSubHeader"
-                        class="mt-5 duplicate-check-subheader"
-                        :cmsWidgetName="widget.siteSubHeader" />
-                    <buttonQuestion
-                        ref="buttonQuestion"
-                        v-model="selectedAnswer"
-                        class="duplicate-check-question"
-                        :cmsWidgetName="widget.existingOrNewQuestion"
-                        :questionText="questionText"
-                        :answers="answers"
-                        groupName="existingOrNewQuestionOption"
-                        buttonTypeString="listButton"
-                        isRequired
-                        :validationRules="rules.selectionRequired">
-                    </buttonQuestion>
-                    <siteFooter
-                        ref="siteFooter"
-                        class="my-5"
-                        :cmsWidgetName="widget.siteFooter"
-                        :isForwardActionDisabled="!meta.valid"
-                        @forwardClicked="forwardButtonAction"
-                        @backClicked="navigateBack" />
-                </div>
-            </div>
+  <Form
+    ref="duplicate-check-form"
+    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 ref="siteHeader" :cmsWidgetName="widget.siteHeader" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <siteSubHeader
+            id="sub-header"
+            ref="siteSubHeader"
+            class="mt-5 duplicate-check-subheader"
+            :cmsWidgetName="widget.siteSubHeader"
+          />
+          <buttonQuestion
+            ref="buttonQuestion"
+            v-model="selectedAnswer"
+            class="duplicate-check-question"
+            :cmsWidgetName="widget.existingOrNewQuestion"
+            :questionText="questionText"
+            :answers="answers"
+            groupName="existingOrNewQuestionOption"
+            buttonTypeString="listButton"
+            isRequired
+            :validationRules="rules.selectionRequired"
+          />
+          <siteFooter
+            ref="siteFooter"
+            class="my-5"
+            :cmsWidgetName="widget.siteFooter"
+            :isForwardActionDisabled="!meta.valid"
+            @forwardClicked="forwardButtonAction"
+            @backClicked="navigateBack"
+          />
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 
 <script>
 // Components
-import { Form } from 'vee-validate';
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+import { Form } from "vee-validate";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import buttonQuestion from "@/digital-components/button-question/button-question.vue";
 
 // Supporting files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import { useMainStore } from '@/store/index.js';
-import globalRules from '@/constants/global-rules.js';
-import { toTitleCase } from '@/helpers/text-helper.js';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper.js";
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import { useMainStore } from "@/store/index.js";
+import globalRules from "@/constants/global-rules.js";
+import { toTitleCase } from "@/helpers/text-helper.js";
 
 export default {
-    name: 'duplicate-check',
-    components: {
-        siteHeader,
-        siteSubHeader,
-        buttonQuestion,
-        siteFooter,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form
-    },
-    mixins: [BaseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        const cmsContent = await fetchCmsContentForPage(to.query.issPage);
+  name: "duplicate-check",
+  components: {
+    siteHeader,
+    siteSubHeader,
+    buttonQuestion,
+    siteFooter,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+  },
+  mixins: [BaseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    const cmsContent = await fetchCmsContentForPage(to.query.issPage);
 
-        next((vm) => {
-            vm.setCmsContent(cmsContent);
-        });
+    next((vm) => {
+      vm.setCmsContent(cmsContent);
+    });
+  },
+  data() {
+    return {
+      selectedAnswer: null,
+      widget: {
+        siteHeader: "SiteHeaderWidget",
+        siteSubHeader: "SiteSubHeaderWidget",
+        existingOrNewQuestion: "ExistingOrNewQuestion",
+        siteFooter: "SiteFooterWidget",
+      },
+      rules: {
+        selectionRequired: globalRules.OPTION_REQUIRED,
+      },
+    };
+  },
+  computed: {
+    questionText() {
+      return this.getCmsContent(
+        this.widget.existingOrNewQuestion,
+        "QuestionText"
+      );
     },
-    data() {
-        return {
-            selectedAnswer: null,
-            widget: {
-                siteHeader: 'SiteHeaderWidget',
-                siteSubHeader: 'SiteSubHeaderWidget',
-                existingOrNewQuestion: 'ExistingOrNewQuestion',
-                siteFooter: 'SiteFooterWidget'
-            },
-            rules: {
-                selectionRequired: globalRules.OPTION_REQUIRED
-            }
-        };
+    answersFromCms() {
+      return (
+        this.getCmsContent(this.widget.existingOrNewQuestion, "Answers") ?? []
+      );
     },
-    computed: {
-        questionText() {
-            return this.getCmsContent(this.widget.existingOrNewQuestion, 'QuestionText');
-        },
-        answersFromCms() {
-            return this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers') ?? [];
-        },
-        getNewOrderSelectionName() {
-            return this.answersFromCms?.[0]?.Name ?? '';
-        },
-        duplicateOrders() {
-            const duplicateOrderText = 'Finish Existing Claim';
-            const orders = useMainStore().applicationUser.duplicateOrders;
-            return orders?.map((o) => {
-                const vehicle = !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
-                    ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
-                    : null;
-
-                const dateOfLoss = o.responseDate == null ? '' : new Date(o.responseDate).toLocaleDateString();
-                const subtext = vehicle && o.responseDate
-                    ? `${vehicle}, ${dateOfLoss}`
-                    : (vehicle ?? '').concat(dateOfLoss);
-
-                return {
-                    Text: duplicateOrderText,
-                    Name: o.referralNumber,
-                    SubText: toTitleCase(subtext),
-                    value: o
-                };
-            }) ?? [];
-        },
-        answers() {
-            return [...this.duplicateOrders, ...this.answersFromCms];
-        }
+    getNewOrderSelectionName() {
+      return this.answersFromCms?.[0]?.Name ?? "";
     },
-    methods: {
-        /**
-         * @summary Steps to perform when forward button clicked.
-         */
-        async forwardButtonAction() {
-            if (this.selectedAnswer !== null && typeof this.selectedAnswer === 'object') {
-                await useMainStore().loadSession(this.selectedAnswer)
-                    .catch(() => {})
-                    .finally(() => {
-                        this.navigateForward();
-                    });
-                return;
-            }
+    duplicateOrders() {
+      const duplicateOrderText = "Finish Existing Claim";
+      const orders = useMainStore().applicationUser.duplicateOrders;
+      return (
+        orders?.map((o) => {
+          const vehicle =
+            !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
+              ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
+              : null;
 
+          const dateOfLoss =
+            o.responseDate == null
+              ? ""
+              : new Date(o.responseDate).toLocaleDateString();
+          const subtext =
+            vehicle && o.responseDate
+              ? `${vehicle}, ${dateOfLoss}`
+              : (vehicle ?? "").concat(dateOfLoss);
+
+          return {
+            Text: duplicateOrderText,
+            Name: o.referralNumber,
+            SubText: toTitleCase(subtext),
+            value: o,
+          };
+        }) ?? []
+      );
+    },
+    answers() {
+      return [...this.duplicateOrders, ...this.answersFromCms];
+    },
+  },
+  methods: {
+    /**
+     * @summary Steps to perform when forward button clicked.
+     */
+    async forwardButtonAction() {
+      if (
+        this.selectedAnswer !== null &&
+        typeof this.selectedAnswer === "object"
+      ) {
+        await useMainStore()
+          .loadSession(this.selectedAnswer)
+          .catch(() => {})
+          .finally(() => {
             this.navigateForward();
-        },
-        navigateForward() {
-            if (!this.mainStore.order.policy.policyLookupSuccessful) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-                    this.$route
-                );
-                return;
-            }
+          });
+        return;
+      }
 
-            const policyVehicles = useMainStore().order.policy.vehicles ?? [];
-            if (!this.mainStore.order.loadedFromDupeCheck) {
-                if (policyVehicles.length !== 0) {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
-                        this.$route
-                    );
-                } else {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
-                        this.$route
-                    );
-                }
-                return;
-            }
+      this.navigateForward();
+    },
+    navigateForward() {
+      if (!this.mainStore.order.policy.policyLookupSuccessful) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+          this.$route
+        );
+        return;
+      }
 
-            if (this.mainStore.order.vehicle.vin) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE,
-                    this.$route
-                );
-            } else if (policyVehicles.length !== 0) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE,
-                    this.$route
-                );
-            } else {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES,
-                    this.$route
-                );
-            }
+      const policyVehicles = useMainStore().order.policy.vehicles ?? [];
+      if (!this.mainStore.order.loadedFromDupeCheck) {
+        if (policyVehicles.length !== 0) {
+          this.$router.navigate(
+            this.navigationScenarios
+              .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+            this.$route
+          );
+        } else {
+          this.$router.navigate(
+            this.navigationScenarios
+              .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+            this.$route
+          );
         }
-    }
+        return;
+      }
+
+      if (this.mainStore.order.vehicle.vin) {
+        this.$router.navigate(
+          this.navigationScenarios
+            .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE,
+          this.$route
+        );
+      } else if (policyVehicles.length !== 0) {
+        this.$router.navigate(
+          this.navigationScenarios
+            .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE,
+          this.$route
+        );
+      } else {
+        this.$router.navigate(
+          this.navigationScenarios
+            .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES,
+          this.$route
+        );
+      }
+    },
+  },
 };
 </script>
 
 <style lang="scss">
 .duplicate-check-subheader {
-    .subheader-secondary {
-        margin-top: map-get($spacers, 2);
-    }
-    p {
-        span {
-            font-size: $h6-font-size;
-        }
+  .subheader-secondary {
+    margin-top: map-get($spacers, 2);
+  }
+  p {
+    span {
+      font-size: $h6-font-size;
     }
+  }
 }
 .duplicate-check-question {
-    .question-text {
-        justify-content: left;
-        display: inline-flex !important;
-        margin-top: map-get($spacers, 4);
-        margin-bottom: map-get($spacers, 2);
-    }
-    .form-test-error{
-        margin-top: 0 !important;
-    }
+  .question-text {
+    justify-content: left;
+    display: inline-flex !important;
+    margin-top: map-get($spacers, 4);
+    margin-bottom: map-get($spacers, 2);
+  }
+  .form-test-error {
+    margin-top: 0 !important;
+  }
 }
-
 </style>
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index ae63de7e..b2024550 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -1,278 +1,298 @@
 <template>
-    <Form
-        ref="theForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader
-                    class="mb-2 header"
-                    cmsWidgetName="SiteHeaderWidget" />
-                <div class="select-car">
-                    <div class="container-fluid pb-2 px-5">
-                        <div class="row">
-                            <div class="col">
-                                <div class="select-car-form rounded text-center">
-                                    <vehicleBanner
-                                        cmsWidgetName="VehicleBannerWidget"
-                                        :displayGenericVehicleImage="displayGeneric"
-                                        class="mt-2 mb-4" />
-                                    <policyVehiclesQuestion
-                                        v-model="selectedVehicleVin"
-                                        class="px-4"
-                                        cmsWidgetName="PolicyVehiclesQuestion"
-                                        :vehicles="VehiclesForQuestions"
-                                        :validationRules="rules.optionRequired" />
-                                    <siteFooter
-                                        ref="siteFooter"
-                                        cmsWidgetName="SiteFooterWidget"
-                                        :isForwardActionDisabled="!meta.valid"
-                                        @ForwardClicked="forwardButtonAction"
-                                        @backClicked="backButtonAction" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </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">
+            <div class="select-car-form rounded text-center">
+              <vehicleBanner
+                cmsWidgetName="VehicleBannerWidget"
+                :displayGenericVehicleImage="displayGeneric"
+                class="mt-2 mb-4"
+              />
+              <policyVehiclesQuestion
+                v-model="selectedVehicleVin"
+                cmsWidgetName="PolicyVehiclesQuestion"
+                :vehicles="VehiclesForQuestions"
+                :validationRules="rules.optionRequired"
+              />
+              <siteFooter
+                ref="siteFooter"
+                cmsWidgetName="SiteFooterWidget"
+                :isForwardActionDisabled="!meta.valid"
+                @ForwardClicked="forwardButtonAction"
+                @backClicked="backButtonAction"
+              />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 <script>
 // Components
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import policyVehiclesQuestion from '@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue';
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
+import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue";
 // Supporting files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
-import { Form } from 'vee-validate';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import vehicleSelectionOptions from '@/constants/vehicle-selection-options.js';
-import endorsementOptions from '@/constants/endorsement-options.js';
-import globalRules from '@/constants/global-rules.js';
-import { useMainStore } from '@/store/index.js';
-import bailoutMessage from '@/constants/bailoutMessage';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper.js";
+import { Form } from "vee-validate";
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import vehicleSelectionOptions from "@/constants/vehicle-selection-options.js";
+import endorsementOptions from "@/constants/endorsement-options.js";
+import globalRules from "@/constants/global-rules.js";
+import { useMainStore } from "@/store/index.js";
+import bailoutMessage from "@/constants/bailoutMessage";
 import {
-    deductibleForSelectedVehicle, endorsementsForSelectedVehicle,
-    noCoverageForSelectedVehicle,
-    repairWaivedForSelectedVehicle
-} from '@/helpers/policy-vehicle-helper';
+  deductibleForSelectedVehicle,
+  endorsementsForSelectedVehicle,
+  noCoverageForSelectedVehicle,
+  repairWaivedForSelectedVehicle,
+} from "@/helpers/policy-vehicle-helper";
 
 export default {
-    name: 'policy-vehicles',
-    components: {
-        siteHeader,
-        siteFooter,
-        vehicleBanner,
-        policyVehiclesQuestion,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+  name: "policy-vehicles",
+  components: {
+    siteHeader,
+    siteFooter,
+    vehicleBanner,
+    policyVehiclesQuestion,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+  },
+  mixins: [BaseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
+    next((vm) => {
+      vm.setCmsContent(cmsContentPromise);
+    });
+  },
+  setup() {
+    const mainStore = useMainStore();
+    return { mainStore };
+  },
+  data() {
+    const policyVehicles = useMainStore().order.policy.vehicles;
+    return {
+      policyVehicles,
+      selectedVehicleVin: "",
+      selectedPolicyVehicle: null,
+      displayGeneric: true,
+      policyVinFound: true,
+      rules: {
+        optionRequired: globalRules.OPTION_REQUIRED,
+      },
+    };
+  },
+  computed: {
+    VehiclesForQuestions() {
+      // Map API result data, to address-vehicles data structure
+      const vehicles = this.policyVehicles;
+      const mappedData =
+        vehicles?.map((v) => {
+          const maskSymbol = "X";
+          const vinStart = maskSymbol.repeat(v.vin.length - 6);
+          const vinEnd = v.vin.substring(v.vin.length - 6);
+          return {
+            vin: v.vin,
+            vehicle: v,
+            Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
+            Name: v.vin,
+            SubText: `VIN ${vinStart}${vinEnd}`,
+          };
+        }) ?? [];
+      return mappedData;
     },
-    mixins: [BaseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
-        next((vm) => {
-            vm.setCmsContent(cmsContentPromise);
+    noCoverageForSelectedVehicle() {
+      return noCoverageForSelectedVehicle(this.selectedPolicyVehicle);
+    },
+    deductibleForSelectedVehicle() {
+      return deductibleForSelectedVehicle(this.selectedPolicyVehicle);
+    },
+    endorsementsForSelectedVehicle() {
+      return endorsementsForSelectedVehicle(this.selectedPolicyVehicle);
+    },
+    repairWaivedForSelectedVehicle() {
+      return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
+    },
+    selectedVehicle() {
+      const vehicle = this.mainStore.lookupVehicleByVin(
+        this.selectedVehicleVin
+      );
+      return vehicle;
+    },
+  },
+  watch: {
+    async selectedVehicleVin(value) {
+      if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
+        // clear previously selected vehicle and image
+        this.mainStore.resetVehicleState();
+        this.displayGeneric = true;
+        this.selectedPolicyVehicle = null;
+      } else {
+        // get vehicle details from selected VIN
+        const vehicle = await this.lookupVehicleByVin(value);
+
+        // handle error in case vehicle info doesn't come back for selected VIN
+        if (vehicle?.error === true) {
+          this.mainStore.resetVehicleState();
+          this.displayGeneric = true;
+          this.selectedPolicyVehicle = null;
+          return;
+        }
+        if (vehicle) {
+          // save selected vehicle to the store
+          this.mainStore.updateVehicle(vehicle.data);
+          this.displayGeneric = false;
+          this.selectedPolicyVehicle = this.policyVehicles.find(
+            (p) => p.vin === value
+          );
+        }
+      }
+    },
+  },
+  beforeMount() {
+    if (this.mainStore.order.vehicle.vin) {
+      this.selectedVehicleVin = this.mainStore.order.vehicle.vin;
+    } else if (this.policyVehicles?.length === 1) {
+      this.selectedVehicleVin = this.policyVehicles[0]?.vin;
+    }
+  },
+  methods: {
+    backButtonAction() {
+      useMainStore().issConfig.disabledFields.policyNumber = true;
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    async forwardButtonAction() {
+      if (
+        this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED
+      ) {
+        const vehicleLookupResponse = await this.lookupVehicleByVin(
+          this.selectedVehicleVin
+        );
+        const vehicle = this.policyVehicles.find(
+          (pv) => pv.vin === this.selectedVehicleVin
+        );
+
+        if (vehicleLookupResponse.error) {
+          if (vehicleLookupResponse.status === 404) {
+            this.mainStore.resetVehicleState();
+            useMainStore().updateVehicle({
+              policyVehicleId: vehicle.id,
+              carId: "0",
+              category: "",
+              year: vehicle.vehicleYear || "",
+              make: vehicle.vehicleMake || "",
+              model: vehicle.vehicleModel || "",
+              style: vehicle.vehicleStyle || "",
+              vin: vehicle.vin,
+              noCoverage: this.noCoverageForSelectedVehicle,
+              deductible: this.deductibleForSelectedVehicle,
+              repairWaived: this.repairWaivedForSelectedVehicle,
+            });
+            this.policyVinFound = false;
+            return this.navigateForward();
+          }
+
+          this.mainStore.setBailout(
+            bailoutMessage.vehicleLookupError(
+              vehicle.vin,
+              vehicleLookupResponse.data
+            )
+          );
+          return this.navigateForward();
+        }
+
+        this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
+          policyVehicleId: vehicle.id,
+          vin: this.selectedVehicleVin,
+          noCoverage: this.noCoverageForSelectedVehicle,
+          deductible: this.deductibleForSelectedVehicle,
+          repairWaived: this.repairWaivedForSelectedVehicle,
+          endorsements: this.endorsementsForSelectedVehicle,
         });
+
+        useMainStore().updateVehicle(this.vehicleFromLookup);
+      }
+      return this.navigateForward();
     },
-    setup() {
-        const mainStore = useMainStore();
-        return { mainStore };
+    navigateForward() {
+      if (this.mainStore.isBailout) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+          this.$route,
+          {},
+          {}
+        );
+      } else if (
+        this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED
+      ) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
+          this.$route,
+          {},
+          {}
+        );
+      } else if (
+        this.endorsementsForSelectedVehicle?.length > 0 &&
+        (this.endorsementsForSelectedVehicle?.includes(
+          endorsementOptions.PARKING_GUARD
+        ) ||
+          this.endorsementsForSelectedVehicle?.includes(
+            endorsementOptions.EDUCATOR
+          ))
+      ) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
+          this.$route
+        );
+      } else if (!this.policyVinFound) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
+          this.$route,
+          {},
+          {}
+        );
+      } else {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
+          this.$route,
+          {},
+          {}
+        );
+      }
     },
-    data() {
-        const policyVehicles = useMainStore().order.policy.vehicles;
+    async lookupVehicleByVin(vin) {
+      try {
+        return await useMainStore().lookupVehicleByVin(vin);
+      } catch (responseError) {
         return {
-            policyVehicles,
-            selectedVehicleVin: '',
-            selectedPolicyVehicle: null,
-            displayGeneric: true,
-            policyVinFound: true,
-            rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            }
+          error: true,
+          status: responseError.status,
+          data: responseError.data,
         };
+      }
     },
-    computed: {
-        VehiclesForQuestions() {
-            // Map API result data, to address-vehicles data structure
-            const vehicles = this.policyVehicles;
-            const mappedData = vehicles?.map((v) => {
-                const maskSymbol = 'X';
-                const vinStart = maskSymbol.repeat(v.vin.length - 6);
-                const vinEnd = v.vin.substring(v.vin.length - 6);
-                return {
-                    vin: v.vin,
-                    vehicle: v,
-                    Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
-                    Name: v.vin,
-                    SubText: `VIN ${vinStart}${vinEnd}`
-                };
-            }) ?? [];
-            return mappedData;
-        },
-        noCoverageForSelectedVehicle() {
-            return noCoverageForSelectedVehicle(this.selectedPolicyVehicle);
-        },
-        deductibleForSelectedVehicle() {
-            return deductibleForSelectedVehicle(this.selectedPolicyVehicle);
-        },
-        endorsementsForSelectedVehicle() {
-            return endorsementsForSelectedVehicle(this.selectedPolicyVehicle);
-        },
-        repairWaivedForSelectedVehicle() {
-            return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
-        },
-        selectedVehicle() {
-            const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
-            return vehicle;
-        }
-    },
-    watch: {
-        async selectedVehicleVin(value) {
-            if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
-                // clear previously selected vehicle and image
-                this.mainStore.resetVehicleState();
-                this.displayGeneric = true;
-                this.selectedPolicyVehicle = null;
-            } else {
-                // get vehicle details from selected VIN
-                const vehicle = await this.lookupVehicleByVin(value);
-
-                // handle error in case vehicle info doesn't come back for selected VIN
-                if (vehicle?.error === true) {
-                    this.mainStore.resetVehicleState();
-                    this.displayGeneric = true;
-                    this.selectedPolicyVehicle = null;
-                    return;
-                }
-                if (vehicle) {
-                    // save selected vehicle to the store
-                    this.mainStore.updateVehicle(vehicle.data);
-                    this.displayGeneric = false;
-                    this.selectedPolicyVehicle = this.policyVehicles.find((p) => p.vin === value);
-                }
-            }
-        }
-    },
-    beforeMount() {
-        if (this.mainStore.order.vehicle.vin) {
-            this.selectedVehicleVin = this.mainStore.order.vehicle.vin;
-        } else if (this.policyVehicles?.length === 1) {
-            this.selectedVehicleVin = this.policyVehicles[0]?.vin;
-        }
-    },
-    methods:
-        {
-            backButtonAction() {
-                useMainStore().issConfig.disabledFields.policyNumber = true;
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
-            async forwardButtonAction() {
-                if (this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
-                    const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin);
-                    const vehicle = this.policyVehicles.find((pv) => pv.vin === this.selectedVehicleVin);
-
-                    if (vehicleLookupResponse.error) {
-                        if (vehicleLookupResponse.status === 404) {
-                            this.mainStore.resetVehicleState();
-                            useMainStore().updateVehicle({
-                                policyVehicleId: vehicle.id,
-                                carId: '0',
-                                category: '',
-                                year: vehicle.vehicleYear || '',
-                                make: vehicle.vehicleMake || '',
-                                model: vehicle.vehicleModel || '',
-                                style: vehicle.vehicleStyle || '',
-                                vin: vehicle.vin,
-                                noCoverage: this.noCoverageForSelectedVehicle,
-                                deductible: this.deductibleForSelectedVehicle,
-                                repairWaived: this.repairWaivedForSelectedVehicle
-
-                            });
-                            this.policyVinFound = false;
-                            return this.navigateForward();
-                        }
-
-                        this.mainStore.setBailout(bailoutMessage.vehicleLookupError(vehicle.vin, vehicleLookupResponse.data));
-                        return this.navigateForward();
-                    }
-
-                    this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
-                        policyVehicleId: vehicle.id,
-                        vin: this.selectedVehicleVin,
-                        noCoverage: this.noCoverageForSelectedVehicle,
-                        deductible: this.deductibleForSelectedVehicle,
-                        repairWaived: this.repairWaivedForSelectedVehicle,
-                        endorsements: this.endorsementsForSelectedVehicle
-                    });
-
-                    useMainStore().updateVehicle(this.vehicleFromLookup);
-                }
-                return this.navigateForward();
-            },
-            navigateForward() {
-                if (this.mainStore.isBailout) {
-                    this.$router
-                        .navigate(
-                            this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
-                            this.$route,
-                            {},
-                            {}
-                        );
-                } else if (this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
-                    this.$router
-                        .navigate(
-                            this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
-                            this.$route,
-                            {},
-                            {}
-                        );
-                } else if (this.endorsementsForSelectedVehicle?.length > 0
-                    && (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD)
-                    || this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))) {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
-                        this.$route
-                    );
-                } else if (!this.policyVinFound) {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
-                        this.$route,
-                        {},
-                        {}
-                    );
-                } else {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
-                        this.$route,
-                        {},
-                        {}
-                    );
-                }
-            },
-            async lookupVehicleByVin(vin) {
-                try {
-                    return await useMainStore().lookupVehicleByVin(vin);
-                } catch (responseError) {
-                    return {
-                        error: true,
-                        status: responseError.status,
-                        data: responseError.data
-                    };
-                }
-            }
-        }
+  },
 };
 </script>
 <style lang="scss" scoped>
-.header{
-    margin-bottom: 0rem !important;
+.header {
+  margin-bottom: 0rem !important;
 }
-:deep(.form-test-error){
-    text-align: left;
-    margin-top: 0rem !important;
-    line-height: 1.50rem;
+:deep(.form-test-error) {
+  text-align: left;
+  margin-top: 0rem !important;
+  line-height: 1.5rem;
 }
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 2771b30e..e5bdd97a 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,443 +1,540 @@
 <template>
-    <Form
-        ref="theForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid pb-2">
-                    <div class="row mt-2 px-3">
-                        <div class="col">
-                            <alert
-                                v-if="shouldDisplayVehicleChangeAlert"
-                                ref="vehicleChangeAlert"
-                                class="mt-5 mb-0"
-                                cmsWidgetName="VehicleChangeAlert"
-                                alertClass="alert-warning"
-                                :isDismissible="false" />
-                            <vehicleBanner
-                                class="mb-4"
-                                cmsWidgetName="VehicleBannerWidget"
-                                :displayGenericVehicleImage="false" />
-                            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-                            <damageLocationQuestion
-                                ref="damageLocation"
-                                v-model="selectedDamageLocations"
-                                cmsWidgetName="DamageLocationQuestion"
-                                groupName="DamageLocationQuestion" />
-                            <windshieldOptions
-                                ref="windshieldOptions"
-                                v-model="selectedWindshieldOptions"
-                                :hasRepairReplaceConflict="hasRepairReplaceConflict"
-                                :hasSplitSingleConflict="hasSplitSingleConflict"
-                                :selectedDamageLocations="selectedDamageLocations"
-                                class="mb-3" />
-                            <alert
-                                v-if="hasRepairReplaceConflict"
-                                class="my-5"
-                                cmsWidgetName="HasReplacementConflict"
-                                alertClass="alert-danger"
-                                :isDismissible="false" />
-                            <sideDoorOptions
-                                v-show="!hasRepairReplaceConflict"
-                                ref="sideDoorOptions"
-                                v-model="sideDoorOptionsData"
-                                cmsWidgetName="SideDoorSideQuestion"
-                                groupName="SideDoorSideQuestion"
-                                :selectedDamageLocations="selectedDamageLocations"
-                                class="mb-1" />
-                            <replaceOptionsQuestion
-                                ref="backGlassOptions"
-                                v-model="selectedRearReplaceOptions"
-                                cmsWidgetName="RearReplaceOptionsQuestion"
-                                :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-                                groupName="BackGlassReplaceOptionsQuestion"
-                                validationRules="replace-options-required" />
-                            <site-footer
-                                ref="siteFooter"
-                                class="mt-5"
-                                cmsWidgetName="SiteFooterWidget"
-                                :isForwardActionDisabled="!meta.valid"
-                                @backClicked="navigateBack"
-                                @forwardClicked="forwardButtonAction" />
-                        </div>
-                    </div>
-                </div>
-            </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 cmsWidgetName="SiteHeaderWidget" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+                <alert
+                  v-if="shouldDisplayVehicleChangeAlert"
+                  ref="vehicleChangeAlert"
+                  class="mt-5 mb-0"
+                  cmsWidgetName="VehicleChangeAlert"
+                  alertClass="alert-warning"
+                  :isDismissible="false"
+                />
+                <vehicleBanner
+                  class="mb-4"
+                  cmsWidgetName="VehicleBannerWidget"
+                  :displayGenericVehicleImage="false"
+                />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                <damageLocationQuestion
+                  ref="damageLocation"
+                  v-model="selectedDamageLocations"
+                  cmsWidgetName="DamageLocationQuestion"
+                  groupName="DamageLocationQuestion"
+                />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                <windshieldOptions
+                  ref="windshieldOptions"
+                  v-model="selectedWindshieldOptions"
+                  :hasRepairReplaceConflict="hasRepairReplaceConflict"
+                  :hasSplitSingleConflict="hasSplitSingleConflict"
+                  :selectedDamageLocations="selectedDamageLocations"
+                  class="mb-3"
+                />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                <alert
+                  v-if="hasRepairReplaceConflict"
+                  class="my-5"
+                  cmsWidgetName="HasReplacementConflict"
+                  alertClass="alert-danger"
+                  :isDismissible="false"
+                />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                <sideDoorOptions
+                  v-show="!hasRepairReplaceConflict"
+                  ref="sideDoorOptions"
+                  v-model="sideDoorOptionsData"
+                  cmsWidgetName="SideDoorSideQuestion"
+                  groupName="SideDoorSideQuestion"
+                  :selectedDamageLocations="selectedDamageLocations"
+                  class="mb-1"
+                />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                <replaceOptionsQuestion
+                  ref="backGlassOptions"
+                  v-model="selectedRearReplaceOptions"
+                  cmsWidgetName="RearReplaceOptionsQuestion"
+                  :isAvailable="
+                    isRearWindowDamageLocation && !hasRepairReplaceConflict
+                  "
+                  groupName="BackGlassReplaceOptionsQuestion"
+                  validationRules="replace-options-required"
+                />
+            </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                <site-footer
+                  ref="siteFooter"
+                  class="mt-5"
+                  cmsWidgetName="SiteFooterWidget"
+                  :isForwardActionDisabled="!meta.valid"
+                  @backClicked="navigateBack"
+                  @forwardClicked="forwardButtonAction"
+                />
+              </div>
+            </div>
+          </div>
+  </Form>
 </template>
 
 <script>
 // Components
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import sideDoorOptions from '@/layouts/vehicle-damage/side-door-options/side-door-options.vue';
-import damageLocationQuestion from '@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue';
-import windshieldOptions from '@/layouts/vehicle-damage/windshield-options/windshield-options.vue';
-import replaceOptionsQuestion from '@/layouts/vehicle-damage/replace-options-question/replace-options-question.vue';
-import alert from '@/ux-components/alert/alert.vue';
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options.vue";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options.vue";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question.vue";
+import alert from "@/ux-components/alert/alert.vue";
 
 // Supporting files
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import { Form, defineRule } from 'vee-validate';
-import { required } from '@/helpers/validation-rules';
-import errorMessages from '@/constants/error-messages';
-import damageLocationsCms from '@/constants/damage-locations-cms.js';
-import damageLocationsSelected from '@/constants/damage-locations-selected.js';
-import { useMainStore } from '@/store';
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import errorMessages from "@/constants/error-messages";
+import damageLocationsCms from "@/constants/damage-locations-cms.js";
+import damageLocationsSelected from "@/constants/damage-locations-selected.js";
+import { useMainStore } from "@/store";
 
 // DEFINE VALIDATION RULES
-defineRule('replace-options-required', required(errorMessages.REPLACE_OPTIONS_REQUIRED));
+defineRule(
+  "replace-options-required",
+  required(errorMessages.REPLACE_OPTIONS_REQUIRED)
+);
 
 export default {
-    name: 'vehicle-damage',
+  name: "vehicle-damage",
 
-    components: {
-        siteHeader,
-        siteFooter,
-        vehicleBanner,
-        siteSubHeader,
-        sideDoorOptions,
-        damageLocationQuestion,
-        windshieldOptions,
-        replaceOptionsQuestion,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        alert
+  components: {
+    siteHeader,
+    siteFooter,
+    vehicleBanner,
+    siteSubHeader,
+    sideDoorOptions,
+    damageLocationQuestion,
+    windshieldOptions,
+    replaceOptionsQuestion,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    alert,
+  },
+  mixins: [BaseFormMixin, vehicleQuestionsMixin],
+  async beforeRouteEnter(to, from, next) {
+    const store = useMainStore();
+
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    const damageOptionsPromise = store.getDamageOptions(
+      store.order.vehicle.carId
+    );
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "damageOptions",
+        promise: damageOptionsPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+      vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
+      vm.$refs.sideDoorOptions.initializeComponent(
+        resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
+        resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+      );
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
+      vm.$refs.backGlassOptions.initializeComponent(
+        resultMap.damageOptions.backGlassOptions.availableReplacementOptions
+      );
+    });
+  },
+  setup() {
+    const mainStore = useMainStore();
+
+    return { mainStore };
+  },
+  data() {
+    return {
+      selectedDamageLocations: this.getDamageLocationsFromStore(),
+      sideDoorOptionsData: {
+        selectedDoorSides: this.getDoorSidesFromStore(),
+        selectedDriverSideReplaceOptions:
+          this.getDriverSideReplaceOptionsFromStore(),
+        selectedPassengerSideReplaceOptions:
+          this.getPassengerSideReplaceOptionsFromStore(),
+      },
+      selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
+      selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
+    };
+  },
+  computed: {
+    isWindshieldDamageLocation() {
+      return this.selectedDamageLocations.some(
+        (selectedDamages) =>
+          selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD
+      );
     },
-    mixins: [BaseFormMixin, vehicleQuestionsMixin],
-    async beforeRouteEnter(to, from, next) {
-        const store = useMainStore();
+    isSideDoorDamageLocation() {
+      return this.selectedDamageLocations.some(
+        (selectedDamages) =>
+          selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR
+      );
+    },
+    isRearWindowDamageLocation() {
+      return this.selectedDamageLocations.some(
+        (selectedDamages) =>
+          selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW
+      );
+    },
+    isWindshieldRepair() {
+      return (
+        this.isWindshieldDamageLocation &&
+        this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+          damageLocationsSelected.REPAIR
+      );
+    },
+    isDriverSideReplace() {
+      if (!this.isSideDoorDamageLocation) return false;
 
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId);
+      return this.sideDoorOptionsData.selectedDoorSides.some(
+        (selectedDriverSide) =>
+          selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE
+      );
+    },
+    isPassengerSideReplace() {
+      if (!this.isSideDoorDamageLocation) return false;
 
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            },
-            {
-                resultKey: 'damageOptions',
-                promise: damageOptionsPromise
-            }
-        ];
+      return this.sideDoorOptionsData.selectedDoorSides.some(
+        (selectedPassengerSide) =>
+          selectedPassengerSide.toUpperCase() ===
+          damageLocationsCms.PASSENGERSIDE
+      );
+    },
+    hasRepairReplaceConflict() {
+      return (
+        this.isWindshieldDamageLocation &&
+        this.selectedDamageLocations.length > 1 &&
+        this.isWindshieldRepair
+      );
+    },
+    hasSplitSingleConflict() {
+      if (
+        !this.selectedDamageLocations?.includes("Windshield") ||
+        this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+          damageLocationsSelected.REPAIR ||
+        !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
+      )
+        return false;
 
-        const resultMap = await settleAllPromises(promiseResultMap);
+      return (
+        this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+          (selectedSingleWindshield) =>
+            selectedSingleWindshield.toUpperCase() ===
+            damageLocationsSelected.SINGLE.toUpperCase()
+        ) &&
+        (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+          (selectedDriverWindshield) =>
+            selectedDriverWindshield.toUpperCase() ===
+            damageLocationsSelected.DRIVER.toUpperCase()
+        ) ||
+          this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+            (selectedPassengerWindshield) =>
+              selectedPassengerWindshield.toUpperCase() ===
+              damageLocationsSelected.PASSENGER.toUpperCase()
+          ))
+      );
+    },
+    shouldDisplayVehicleChangeAlert() {
+      return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
+    },
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      if (useMainStore().order.vehicle.carId) {
+        return true;
+      }
+      return false;
+    },
+    getDamageLocationsFromStore() {
+      const glassSelections = [];
 
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
-            vm.$refs.sideDoorOptions.initializeComponent(
-                resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
-                resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
-            );
-            vm.$refs.windshieldOptions.initializeComponent(resultMap.damageOptions.windshieldOptions.availableReplacementOptions);
-            vm.$refs.backGlassOptions.initializeComponent(resultMap.damageOptions.backGlassOptions.availableReplacementOptions);
+      if (
+        this.mainStore.order.damage.glassToReplace?.some(
+          (glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD
+        ) ||
+        this.mainStore.order.damage.isRepair
+      ) {
+        glassSelections.push(damageLocationsSelected.WINDSHIELD);
+      }
+      if (
+        this.mainStore.order.damage.glassToReplace?.some(
+          (glass) =>
+            glass.glassLocation === damageLocationsSelected.DRIVER ||
+            glass.glassLocation === damageLocationsSelected.PASSENGER
+        )
+      ) {
+        glassSelections.push(damageLocationsSelected.SIDEDOOR);
+      }
+
+      if (
+        this.mainStore.order.damage.glassToReplace?.some(
+          (glass) => glass.glassLocation === damageLocationsSelected.REAR
+        )
+      ) {
+        glassSelections.push(damageLocationsSelected.REARWINDOW);
+      }
+
+      return glassSelections;
+    },
+    getWindshieldOptionsFromStore() {
+      const windShieldOptions = {
+        selectedWindshieldDamageType: "",
+        selectedWindshieldChipCount: null,
+        selectedWindshieldReplaceOptions: [],
+      };
+
+      if (this.mainStore.order.damage.isRepair === undefined)
+        return windshieldOptions;
+
+      if (this.mainStore.order.damage.isRepair) {
+        windShieldOptions.selectedWindshieldDamageType =
+          damageLocationsSelected.REPAIR;
+        windShieldOptions.selectedWindshieldChipCount =
+          this.mainStore.order.damage.numberOfChips;
+      } else {
+        if (
+          this.mainStore.order.damage.glassToReplace?.some(
+            (glass) =>
+              glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
+              glass.glassName === damageLocationsSelected.SINGLE
+          )
+        ) {
+          windShieldOptions.selectedWindshieldDamageType =
+            damageLocationsSelected.REPLACE;
+          windShieldOptions.selectedWindshieldReplaceOptions.push(
+            damageLocationsSelected.SINGLE
+          );
+        }
+
+        if (
+          this.mainStore.order.damage.glassToReplace?.some(
+            (glass) =>
+              glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
+              glass.glassName === damageLocationsSelected.DRIVER
+          )
+        ) {
+          windShieldOptions.selectedWindshieldDamageType =
+            damageLocationsSelected.REPLACE;
+          windShieldOptions.selectedWindshieldReplaceOptions.push(
+            damageLocationsSelected.DRIVER
+          );
+        }
+
+        if (
+          this.mainStore.order.damage.glassToReplace?.some(
+            (glass) =>
+              glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
+              glass.glassName === damageLocationsSelected.PASSENGER
+          )
+        ) {
+          windShieldOptions.selectedWindshieldDamageType =
+            damageLocationsSelected.REPLACE;
+          windShieldOptions.selectedWindshieldReplaceOptions.push(
+            damageLocationsSelected.PASSENGER
+          );
+        }
+      }
+
+      return windShieldOptions;
+    },
+    getDoorSidesFromStore() {
+      const doorSides = [];
+      if (
+        this.mainStore.order.damage.glassToReplace?.some(
+          (glass) => glass.glassLocation === damageLocationsSelected.DRIVER
+        )
+      ) {
+        doorSides.push(damageLocationsSelected.DRIVERSIDE);
+      }
+
+      if (
+        this.mainStore.order.damage.glassToReplace?.some(
+          (glass) => glass.glassLocation === damageLocationsSelected.PASSENGER
+        )
+      ) {
+        doorSides.push(damageLocationsSelected.PASSENGERSIDE);
+      }
+
+      return doorSides;
+    },
+    getDriverSideReplaceOptionsFromStore() {
+      const driverSideReplaceOptions = [];
+
+      this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
+        if (glass.glassLocation === damageLocationsSelected.DRIVER) {
+          driverSideReplaceOptions.push(glass.glassName);
+        }
+      });
+
+      return driverSideReplaceOptions;
+    },
+    getPassengerSideReplaceOptionsFromStore() {
+      const passengerSideReplaceOptions = [];
+
+      this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
+        if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
+          passengerSideReplaceOptions.push(glass.glassName);
+        }
+      });
+
+      return passengerSideReplaceOptions;
+    },
+    getRearReplaceOptionsFromStore() {
+      const rearReplaceOptions =
+        this.mainStore.order.damage.glassToReplace?.filter(
+          (glass) => glass.glassLocation === damageLocationsSelected.REAR
+        )[0]?.glassName;
+
+      return rearReplaceOptions;
+    },
+    async forwardButtonAction() {
+      this.mainStore.saveVehicleDamage(
+        this.isWindshieldRepair,
+        this.selectedGlassToReplace(),
+        this.selectedWindshieldOptions.selectedWindshieldChipCount
+      );
+
+      if (this.isWindshieldRepair) {
+        const supportingItems = await useMainStore().getSupportingItems();
+        useMainStore().updateSupportingItems(supportingItems.data);
+      }
+
+      if (this.mainStore.damage.isRepair) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
+          this.$route
+        );
+      } else if (this.mainStore.order.vehicle.vin) {
+        // If vin already exists, navigate directly to vin-lookup
+
+        const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+        if (partsOrQuestionsResponse.error) {
+          // To Do: Need requirement on what to do here
+          window.console.error("Error on retrieving PartsOrQuestions");
+          this.$refs.siteFooter.removeLoader();
+          return null;
+        }
+
+        // Comes from vehicleQuestionsMixin.navigateForward()
+        await this.navigateForward(
+          partsOrQuestionsResponse.data.partsOrQuestions,
+          this
+        );
+      } else {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+          this.$route
+        );
+      }
+
+      return null;
+    },
+    selectedGlassToReplace() {
+      const selectedGlassToReplace = [];
+      if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
+        this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
+          (wsItem) => {
+            selectedGlassToReplace.push({
+              glassLocation: damageLocationsSelected.WINDSHIELD,
+              glassName: wsItem,
+            });
+          }
+        );
+      }
+
+      if (this.isDriverSideReplace) {
+        this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(
+          (driverItem) => {
+            selectedGlassToReplace.push({
+              glassLocation: damageLocationsSelected.DRIVER,
+              glassName: driverItem,
+            });
+          }
+        );
+      }
+
+      if (this.isPassengerSideReplace) {
+        this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
+          (passengerItem) => {
+            selectedGlassToReplace.push({
+              glassLocation: damageLocationsSelected.PASSENGER,
+              glassName: passengerItem,
+            });
+          }
+        );
+      }
+
+      if (this.isRearWindowDamageLocation) {
+        selectedGlassToReplace.push({
+          glassLocation: damageLocationsSelected.REAR,
+          glassName: this.selectedRearReplaceOptions,
         });
+      }
+
+      return selectedGlassToReplace;
     },
-    setup() {
-        const mainStore = useMainStore();
-
-        return { mainStore };
-    },
-    data() {
-        return {
-            selectedDamageLocations: this.getDamageLocationsFromStore(),
-            sideDoorOptionsData: {
-                selectedDoorSides: this.getDoorSidesFromStore(),
-                selectedDriverSideReplaceOptions: this.getDriverSideReplaceOptionsFromStore(),
-                selectedPassengerSideReplaceOptions: this.getPassengerSideReplaceOptionsFromStore()
-            },
-            selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
-            selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore()
-        };
-    },
-    computed: {
-        isWindshieldDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD);
-        },
-        isSideDoorDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR);
-        },
-        isRearWindowDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW);
-        },
-        isWindshieldRepair() {
-            return (
-                this.isWindshieldDamageLocation
-                && this.selectedWindshieldOptions.selectedWindshieldDamageType
-                === damageLocationsSelected.REPAIR
-            );
-        },
-        isDriverSideReplace() {
-            if (!this.isSideDoorDamageLocation) return false;
-
-            return this
-                .sideDoorOptionsData.selectedDoorSides
-                .some((selectedDriverSide) => selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE);
-        },
-        isPassengerSideReplace() {
-            if (!this.isSideDoorDamageLocation) return false;
-
-            return this
-                .sideDoorOptionsData.selectedDoorSides
-                .some((selectedPassengerSide) => selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE);
-        },
-        hasRepairReplaceConflict() {
-            return (
-                this.isWindshieldDamageLocation
-                && this.selectedDamageLocations.length > 1
-                && this.isWindshieldRepair
-            );
-        },
-        hasSplitSingleConflict() {
-            if (
-                !this.selectedDamageLocations?.includes('Windshield')
-                || this.selectedWindshieldOptions.selectedWindshieldDamageType
-                === damageLocationsSelected.REPAIR
-                || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
-            ) return false;
-
-            return (
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedSingleWindshield) => (
-                    selectedSingleWindshield.toUpperCase()
-                            === damageLocationsSelected.SINGLE.toUpperCase()
-                ))
-                && (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedDriverWindshield) => (
-                    selectedDriverWindshield.toUpperCase()
-                            === damageLocationsSelected.DRIVER.toUpperCase()
-                ))
-                || this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedPassengerWindshield) => (
-                    selectedPassengerWindshield.toUpperCase()
-                            === damageLocationsSelected.PASSENGER.toUpperCase()
-                )))
-            );
-        },
-        shouldDisplayVehicleChangeAlert() {
-            return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
-        }
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            if (useMainStore().order.vehicle.carId) {
-                return true;
-            }
-            return false;
-        },
-        getDamageLocationsFromStore() {
-            const glassSelections = [];
-
-            if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD)
-                || this.mainStore.order.damage.isRepair
-            ) {
-                glassSelections.push(damageLocationsSelected.WINDSHIELD);
-            }
-            if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => (
-                    glass.glassLocation === damageLocationsSelected.DRIVER
-                        || glass.glassLocation === damageLocationsSelected.PASSENGER
-                ))
-            ) {
-                glassSelections.push(damageLocationsSelected.SIDEDOOR);
-            }
-
-            if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.REAR)
-            ) {
-                glassSelections.push(damageLocationsSelected.REARWINDOW);
-            }
-
-            return glassSelections;
-        },
-        getWindshieldOptionsFromStore() {
-            const windShieldOptions = {
-                selectedWindshieldDamageType: '',
-                selectedWindshieldChipCount: null,
-                selectedWindshieldReplaceOptions: []
-            };
-
-            if (this.mainStore.order.damage.isRepair === undefined) return windshieldOptions;
-
-            if (this.mainStore.order.damage.isRepair) {
-                windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
-                windShieldOptions.selectedWindshieldChipCount = this.mainStore.order.damage.numberOfChips;
-            } else {
-                if (
-                    this.mainStore.order.damage.glassToReplace?.some((glass) => (
-                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
-                            && glass.glassName === damageLocationsSelected.SINGLE
-                    ))
-                ) {
-                    windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
-                }
-
-                if (
-                    this.mainStore.order.damage.glassToReplace?.some((glass) => (
-                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
-                            && glass.glassName === damageLocationsSelected.DRIVER
-                    ))
-                ) {
-                    windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
-                }
-
-                if (
-                    this.mainStore.order.damage.glassToReplace?.some((glass) => (
-                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
-                            && glass.glassName === damageLocationsSelected.PASSENGER
-                    ))
-                ) {
-                    windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
-                }
-            }
-
-            return windShieldOptions;
-        },
-        getDoorSidesFromStore() {
-            const doorSides = [];
-            if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.DRIVER)
-            ) {
-                doorSides.push(damageLocationsSelected.DRIVERSIDE);
-            }
-
-            if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.PASSENGER)
-            ) {
-                doorSides.push(damageLocationsSelected.PASSENGERSIDE);
-            }
-
-            return doorSides;
-        },
-        getDriverSideReplaceOptionsFromStore() {
-            const driverSideReplaceOptions = [];
-
-            this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
-                if (glass.glassLocation === damageLocationsSelected.DRIVER) {
-                    driverSideReplaceOptions.push(glass.glassName);
-                }
-            });
-
-            return driverSideReplaceOptions;
-        },
-        getPassengerSideReplaceOptionsFromStore() {
-            const passengerSideReplaceOptions = [];
-
-            this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
-                if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
-                    passengerSideReplaceOptions.push(glass.glassName);
-                }
-            });
-
-            return passengerSideReplaceOptions;
-        },
-        getRearReplaceOptionsFromStore() {
-            const rearReplaceOptions = this.mainStore.order.damage
-                .glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
-
-            return rearReplaceOptions;
-        },
-        async forwardButtonAction() {
-            this.mainStore.saveVehicleDamage(
-                this.isWindshieldRepair,
-                this.selectedGlassToReplace(),
-                this.selectedWindshieldOptions.selectedWindshieldChipCount
-            );
-
-            if (this.isWindshieldRepair) {
-                const supportingItems = await useMainStore().getSupportingItems();
-                useMainStore().updateSupportingItems(supportingItems.data);
-            }
-
-            if (this.mainStore.damage.isRepair) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
-                    this.$route
-                );
-            } else if (this.mainStore.order.vehicle.vin) {
-                // If vin already exists, navigate directly to vin-lookup
-
-                const partsOrQuestionsResponse = await this.getPartsOrQuestions();
-                if (partsOrQuestionsResponse.error) {
-                    // To Do: Need requirement on what to do here
-                    window.console.error('Error on retrieving PartsOrQuestions');
-                    this.$refs.siteFooter.removeLoader();
-                    return null;
-                }
-
-                // Comes from vehicleQuestionsMixin.navigateForward()
-                await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
-            } else {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
-                    this.$route
-                );
-            }
-
-            return null;
-        },
-        selectedGlassToReplace() {
-            const selectedGlassToReplace = [];
-            if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach((wsItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.WINDSHIELD,
-                        glassName: wsItem
-                    });
-                });
-            }
-
-            if (this.isDriverSideReplace) {
-                this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.DRIVER,
-                        glassName: driverItem
-                    });
-                });
-            }
-
-            if (this.isPassengerSideReplace) {
-                this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach((passengerItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.PASSENGER,
-                        glassName: passengerItem
-                    });
-                });
-            }
-
-            if (this.isRearWindowDamageLocation) {
-                selectedGlassToReplace.push({
-                    glassLocation: damageLocationsSelected.REAR,
-                    glassName: this.selectedRearReplaceOptions
-                });
-            }
-
-            return selectedGlassToReplace;
-        }
-    }
+  },
 };
 </script>
 
 <style lang="scss">
 .replace-options-question {
-    .two-list-card-width {
-        width: 100%;
-        flex: 0 auto;
-    }
+  .two-list-card-width {
+    width: 100%;
+    flex: 0 auto;
+  }
 }
 </style>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index f74e1c96..d8b4aac1 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,244 +1,251 @@
 <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" />
-                <div class="select-car">
-                    <div class="container-fluid pb-2">
-                        <div class="row px-3">
-                            <div class="col">
-                                <div class="select-car-form rounded">
-                                    <vehicleBanner
-                                    ref="vehicleBanner"
-                                    class="mt-2 mb-4"
-                                    cmsWidgetName="VehicleBannerWidget"
-                                    :displayGenericVehicleImage="false" />
-                                    <siteSubHeader
-                                        ref="siteSubHeader"
-                                        cmsWidgetName="SiteSubHeaderWidget" />
-                                    <div class="prevent-squish my-5">
-                                        <div class="row">
-                                            <div class="col">
-                                                <alert
-                                                id="vehicle-parts-alert"
-                                                class="rounded border-0 shadow-sm"
-                                                alertClass="alert-warning"
-                                                cmsWidgetName="AlertWidget"
-                                                :isDismissible="false" />
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div
-                                        v-for="(item, i) in PartsOrQuestions"
-                                        :key="i">
-                                        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-                                        <hr v-if="i > 0" />
-                                        <glassPartQuestion
-                                        :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-                                        v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
-                                        :glassLocation="item.glassLocation"
-                                        :glassName="item.glassName"
-                                        :colorAnswers="item.colorAnswers"
-                                        :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
-                                    </div>
-                                    <siteFooter
-                                    ref="siteFooter"
-                                    class="mt-5"
-                                    cmsWidgetName="SiteFooterWidget"
-                                    :isForwardActionDisabled="isForwardActionDisabled"
-                                    @backClicked="navigateBackByVehicleQuestions"
-                                    @ForwardClicked="forwardButtonAction" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </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 cmsWidgetName="SiteHeaderWidget" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <vehicleBanner
+            ref="vehicleBanner"
+            class="mt-2 mb-4"
+            cmsWidgetName="VehicleBannerWidget"
+            :displayGenericVehicleImage="false"
+          />
+          <siteSubHeader
+            ref="siteSubHeader"
+            cmsWidgetName="SiteSubHeaderWidget"
+          />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <alert
+            id="vehicle-parts-alert"
+            class="mt-3 mb-3"
+            alertClass="alert-warning"
+            cmsWidgetName="AlertWidget"
+            :isDismissible="false"
+          />
+          <div v-for="(item, i) in PartsOrQuestions" :key="i">
+            <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+            <hr v-if="i > 0" />
+            <glassPartQuestion
+              :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+              v-model="
+                selectedGlassParts[item.glassLocation + '-' + item.glassName]
+              "
+              :glassLocation="item.glassLocation"
+              :glassName="item.glassName"
+              :colorAnswers="item.colorAnswers"
+              :alreadyPopulatedPartsData="alreadyPopulatedPartsData"
+            />
+          </div>
+          <siteFooter
+            ref="siteFooter"
+            class="mt-5"
+            cmsWidgetName="SiteFooterWidget"
+            :isForwardActionDisabled="isForwardActionDisabled"
+            @backClicked="navigateBackByVehicleQuestions"
+            @ForwardClicked="forwardButtonAction"
+          />
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 
 <script>
 // Components
-import glassPartQuestion from '@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue';
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import alert from '@/ux-components/alert/alert.vue';
+import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import alert from "@/ux-components/alert/alert.vue";
 
 // Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import issPageValues from '@/router/router-constants/issPage-values';
-import { Form } from 'vee-validate';
-import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import { useMainStore } from '@/store';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import issPageValues from "@/router/router-constants/issPage-values";
+import { Form } from "vee-validate";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import { useMainStore } from "@/store";
 
 export default {
-    name: 'vehicle-parts',
-    components: {
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        glassPartQuestion,
-        siteHeader,
-        vehicleBanner,
-        siteSubHeader,
-        siteFooter,
-        alert
+  name: "vehicle-parts",
+  components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    glassPartQuestion,
+    siteHeader,
+    vehicleBanner,
+    siteSubHeader,
+    siteFooter,
+    alert,
+  },
+  mixins: [BaseFormMixin, vehicleQuestionsMixin],
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
+    const resultMap = await settleAllPromises(promiseResultMap);
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+
+      // Glass Part Question dynamic component
+      Object.keys(vm.$refs)
+        .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
+        .forEach((c) =>
+          vm.$refs[c][0].initializeComponent({
+            ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+            FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
+          })
+        );
+    });
+  },
+  data() {
+    return {
+      selectedGlassParts: {},
+      alertWidgetData: Object,
+      alreadyPopulatedPartsData: [],
+    };
+  },
+  computed: {
+    isForwardActionDisabled() {
+      return (
+        this.selectedGlassPartNumbers?.length !==
+        this.PartsFromApi.partsOrQuestions?.length
+      );
     },
-    mixins: [BaseFormMixin, vehicleQuestionsMixin],
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
-        ];
-        const resultMap = await settleAllPromises(promiseResultMap);
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-
-            // Glass Part Question dynamic component
-            Object.keys(vm.$refs)
-                .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
-                .forEach((c) =>
-                    vm.$refs[c][0].initializeComponent({
-                        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-                        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget
-                    }));
-        });
-    },
-    data() {
-        return {
-            selectedGlassParts: {},
-            alertWidgetData: Object,
-            alreadyPopulatedPartsData: []
-        };
-    },
-    computed: {
-        isForwardActionDisabled() {
-            return this.selectedGlassPartNumbers?.length !== this.PartsFromApi.partsOrQuestions?.length;
-        },
-        selectedGlassPartNumbers() {
-        // Compile all selected parts from the page.
-            const numberArray = [];
-            // eslint-disable-next-line no-restricted-syntax
-            for (const glassPart of Object.values(this.selectedGlassParts)) {
-                if (glassPart?.partNumber) {
-                    numberArray.push(glassPart.partNumber);
-                }
-            }
-            return numberArray;
-        },
-        PartsOrQuestions() {
-            const partsData = this.PartsFromApi;
-
-            // Map API result data, to vehicle-parts data structure
-            const mappedData = partsData.partsOrQuestions?.map((g) => ({
-                glassName: g.glassName,
-                glassLocation: g.glassLocation,
-                colorAnswers: g.parts?.reduce((arr, p) => {
-                    arr.push({
-                        ColorAnswerText: p.color,
-                        FeatureAnswers: [
-                            {
-                                FeatureAnswerText:
-                                p.description === '' ? p.color : p.description,
-                                PartNumber: p.partNumber
-                            }
-                        ]
-                    });
-                    return arr;
-                }, [])
-            }));
-
-            return mappedData;
-        },
-
-        PartsFromApi() {
-            return this.mainStore.pageData(issPageValues.VEHICLE_PARTS);
-        },
-
-        RefPrefix() {
-            return 'partQuestion';
+    selectedGlassPartNumbers() {
+      // Compile all selected parts from the page.
+      const numberArray = [];
+      // eslint-disable-next-line no-restricted-syntax
+      for (const glassPart of Object.values(this.selectedGlassParts)) {
+        if (glassPart?.partNumber) {
+          numberArray.push(glassPart.partNumber);
         }
+      }
+      return numberArray;
     },
-    mounted() {
-        this.LoadInitialPartsData();
+    PartsOrQuestions() {
+      const partsData = this.PartsFromApi;
+
+      // Map API result data, to vehicle-parts data structure
+      const mappedData = partsData.partsOrQuestions?.map((g) => ({
+        glassName: g.glassName,
+        glassLocation: g.glassLocation,
+        colorAnswers: g.parts?.reduce((arr, p) => {
+          arr.push({
+            ColorAnswerText: p.color,
+            FeatureAnswers: [
+              {
+                FeatureAnswerText:
+                  p.description === "" ? p.color : p.description,
+                PartNumber: p.partNumber,
+              },
+            ],
+          });
+          return arr;
+        }, []),
+      }));
+
+      return mappedData;
     },
-    methods: {
-        arePagePrerequisitesValid() {
-        // Check if isRepair is populated and if the pageData we need is here (Parts data)
-            return (
-                useMainStore().damage.isRepair != null
-            && useMainStore().pageData(issPageValues.VEHICLE_PARTS)
-            && Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS)).length !== 0
-            );
-        },
-        async forwardButtonAction() {
-            const matchedParts = [];
 
-            // Match them to the parts from the API.
-            // eslint-disable-next-line no-restricted-syntax
-            for (const [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
-                // eslint-disable-next-line no-restricted-syntax
-                for (const [partKey, partValue] of Object.entries(value.parts)) {
-                    const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+    PartsFromApi() {
+      return this.mainStore.pageData(issPageValues.VEHICLE_PARTS);
+    },
 
-                    const isMatched = this.selectedGlassPartNumbers.some((p) => p === currentPart.partNumber);
+    RefPrefix() {
+      return "partQuestion";
+    },
+  },
+  mounted() {
+    this.LoadInitialPartsData();
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      // Check if isRepair is populated and if the pageData we need is here (Parts data)
+      return (
+        useMainStore().damage.isRepair != null &&
+        useMainStore().pageData(issPageValues.VEHICLE_PARTS) &&
+        Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS))
+          .length !== 0
+      );
+    },
+    async forwardButtonAction() {
+      const matchedParts = [];
 
-                    if (isMatched) {
-                        matchedParts.push({
-                            glassLocation: value.glassLocation,
-                            glassName: value.glassName,
-                            parts: [currentPart]
-                        });
-                    }
-                }
-            }
-            // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
-            if (this.isForwardActionDisabled) {
-                this.$refs.siteFooter.removeLoader();
-                throw new Error('Could not match any parts to the selected parts');
-            }
+      // Match them to the parts from the API.
+      // eslint-disable-next-line no-restricted-syntax
+      for (const [key, value] of Object.entries(
+        this.PartsFromApi.partsOrQuestions
+      )) {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const [partKey, partValue] of Object.entries(value.parts)) {
+          const currentPart =
+            this.PartsFromApi.partsOrQuestions[key].parts[partKey];
 
-            this.navigateForward(matchedParts, null);
-        },
+          const isMatched = this.selectedGlassPartNumbers.some(
+            (p) => p === currentPart.partNumber
+          );
 
-        LoadInitialPartsData() {
-            const partsData = this.PartsFromApi;
-            this.alreadyPopulatedPartsData = this.mainStore.lineItems.glassParts === null
-                ? []
-                : this.mainStore.lineItems.glassParts;
-
-            partsData.partsOrQuestions.map((g) => {
-            // If the part is already populated, use the value from the store and populate the v-model.
-                Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
-                    const { partNumber } = this.alreadyPopulatedPartsData[key];
-                    g.parts.forEach((p) => {
-                        if (p.partNumber === partNumber) {
-                            this.selectedGlassParts[`${g.glassLocation}-${g.glassName}`] = p;
-                        }
-                    });
-                });
+          if (isMatched) {
+            matchedParts.push({
+              glassLocation: value.glassLocation,
+              glassName: value.glassName,
+              parts: [currentPart],
             });
+          }
         }
-    }
+      }
+      // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
+      if (this.isForwardActionDisabled) {
+        this.$refs.siteFooter.removeLoader();
+        throw new Error("Could not match any parts to the selected parts");
+      }
+
+      this.navigateForward(matchedParts, null);
+    },
+
+    LoadInitialPartsData() {
+      const partsData = this.PartsFromApi;
+      this.alreadyPopulatedPartsData =
+        this.mainStore.lineItems.glassParts === null
+          ? []
+          : this.mainStore.lineItems.glassParts;
+
+      partsData.partsOrQuestions.map((g) => {
+        // If the part is already populated, use the value from the store and populate the v-model.
+        Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
+          const { partNumber } = this.alreadyPopulatedPartsData[key];
+          g.parts.forEach((p) => {
+            if (p.partNumber === partNumber) {
+              this.selectedGlassParts[`${g.glassLocation}-${g.glassName}`] = p;
+            }
+          });
+        });
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
 #vehicle-parts-alert {
-    .alert-heading {
-        margin-top: 0.25rem !important;
-    }
+  .alert-heading {
+    margin-top: 0.25rem !important;
+  }
 }
 </style>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index e8a6bddb..15ba5d02 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,412 +1,413 @@
 <template>
-    <Form
-        ref="theForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles welcome">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader
-                    cmsWidgetName="SiteSubHeaderWidget"
-                    class="mt-4" />
-                <div class="container-fluid px-5">
-                    <div class="row mt-5">
-                        <div class="col">
-                            <textboxQuestion
-                                ref="policyNumber"
-                                v-model="welcomePageModel.policyNumber"
-                                inputId="policyNumberField"
-                                cmsWidgetName="PolicyNumberQuestion"
-                                isRequired
-                                disableAutoFill
-                                :isDisabled="isPolicyHolderDisabled"
-                                :validationRules="rules.policyNumber" />
-                        </div>
-                    </div>
-                    <div
-                        class="row mt-4">
-                        <div class="col">
-                            <textboxQuestion
-                                ref="policyZip"
-                                v-model="welcomePageModel.policyZipCode"
-                                inputId="policyZipCode"
-                                cmsWidgetName="PolicyZipQuestion"
-                                isRequired
-                                mask="#####"
-                                :isDisabled="isPolicyZipDisabled"
-                                :validationRules="rules.policyZip" />
-                        </div>
-                    </div>
-                    <div class="row mt-4">
-                        <div class="col">
-                            <textboxQuestion
-                                ref="dateOfLoss"
-                                v-model="welcomePageModel.dateOfLoss"
-                                type="date"
-                                cmsWidgetName="DateOfLossQuestion"
-                                inputId="dateOfLossField"
-                                isRequired
-                                :isDisabled="isDateOfLossDisabled"
-                                disableAutoFill
-                                :max="new Date().toJSON().slice(0, 10)"
-                                :min="'1972-12-01'"
-                                :validationRules="rules.lossDate" />
-                        </div>
-                    </div>
-                    <div class="row px-4">
-                        <div class="col px-0">
-                            <textBlock
-                                cmsWidgetName="DamageDateEstimateWidget"
-                                typeStyle="small"
-                                class="mt-2" />
-                        </div>
-                    </div>
-                    <div class="row mt-4">
-                        <div class="col">
-                            <dropdownQuestion
-                                id="welcomeDropdown"
-                                ref="damageCause"
-                                v-model="welcomePageModel.damageCause"
-                                cmsWidgetName="DamageCauseQuestion"
-                                inputId="damageCauseQuestionField"
-                                :options="DamageCauseOptions"
-                                disableAutoFill
-                                :validationRules="rules.damageOption"
-                                placeHolderText="Select an option" />
-                        </div>
-                    </div>
-                    <div class="row mt-4">
-                        <div class="col">
-                            <textboxQuestion
-                                ref="phoneNumber"
-                                v-model="welcomePageModel.phoneNumber"
-                                inputId="phoneNumberField"
-                                cmsWidgetName="PhoneNumberQuestion"
-                                :validationRules="rules.phoneNumber"
-                                isRequired
-                                :mask="phoneMask"
-                                disableAutoFill />
-                        </div>
-                    </div>
-                    <div class="row mt-4">
-                        <div class="col">
-                            <textboxQuestion
-                                ref="email"
-                                v-model="welcomePageModel.email"
-                                inputId="emailField"
-                                cmsWidgetName="EmailAddressQuestion"
-                                :validationRules="rules.email"
-                                isRequired
-                                disableAutoFill />
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <textboxQuestion
-                                v-if="displayDamageCityQuestion"
-                                ref="damageCity"
-                                v-model="welcomePageModel.damageCity"
-                                class="mt-4"
-                                inputId="damageCityField"
-                                cmsWidgetName="DamageCityQuestion"
-                                isRequired
-                                disableAutoFill
-                                :validationRules="rules.lossCity" />
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <dropdownQuestion
-                                v-if="displayDamageStateQuestion"
-                                id="welcomeDropdown"
-                                ref="state"
-                                v-model="welcomePageModel.damageState"
-                                class="mt-4"
-                                cmsWidgetName="DamageStateQuestion"
-                                inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-                                :options="getStates"
-                                :validationRules="rules.lossState"
-                                isRequired
-                                disableAutoFill
-                                placeHolderText="Select an option" />
-                        </div>
-                    </div>
-                    <div class="row mb-3">
-                        <buttonQuestion
-                            v-if="displayGlassOnlyQuestion"
-                            ref="glassOnlyDamage"
-                            v-model="welcomePageModel.isDamageGlassOnly"
-                            class="px-0 mt-4"
-                            cmsWidgetName="GlassOnlyQuestion"
-                            inputId="isDamageGlassOnly"
-                            :answers="DamageGlassOnlyOptions"
-                            :questionText="DamageGlassOnlyQuestion"
-                            groupName="glassOnlyDamageOption"
-                            buttonTypeString="listButtonHorizontal"
-                            :validationRules="rules.damageOption"
-                            isRequired
-                            isSmallQuestionLabelText
-                            disableAutoFill />
-                    </div>
-                    <div
-                        id="welcomeFooter"
-                        class="row position-sticky top-100">
-                        <div class="col">
-                            <alert
-                                v-if="displayInvalidZipAlert"
-                                ref="alertInvalidZip"
-                                class="my-4"
-                                cmsWidgetName="AlertInvalidZipWidget"
-                                alertClass="alert-danger"
-                                :isDismissible="false" />
-                            <siteFooter
-                                ref="siteFooter"
-                                class="mt-3"
-                                cmsWidgetName="SiteFooterWidget"
-                                :isForwardActionDisabled="!meta.valid"
-                                @ForwardClicked="forwardButtonAction" />
-                        </div>
-                    </div>
-                </div>
-            </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 cmsWidgetName="SiteHeaderWidget" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4" />
+          <textboxQuestion
+            ref="policyNumber"
+            v-model="welcomePageModel.policyNumber"
+            inputId="policyNumberField"
+            cmsWidgetName="PolicyNumberQuestion"
+            isRequired
+            disableAutoFill
+            :isDisabled="isPolicyHolderDisabled"
+            :validationRules="rules.policyNumber"
+          />
+          <textboxQuestion
+            ref="policyZip"
+            v-model="welcomePageModel.policyZipCode"
+            inputId="policyZipCode"
+            cmsWidgetName="PolicyZipQuestion"
+            isRequired
+            mask="#####"
+            :isDisabled="isPolicyZipDisabled"
+            :validationRules="rules.policyZip"
+          />
+          <textboxQuestion
+            ref="dateOfLoss"
+            v-model="welcomePageModel.dateOfLoss"
+            type="date"
+            cmsWidgetName="DateOfLossQuestion"
+            inputId="dateOfLossField"
+            isRequired
+            :isDisabled="isDateOfLossDisabled"
+            disableAutoFill
+            :max="new Date().toJSON().slice(0, 10)"
+            :min="'1972-12-01'"
+            :validationRules="rules.lossDate"
+          />
+          <textBlock
+            cmsWidgetName="DamageDateEstimateWidget"
+            typeStyle="small"
+            class="mt-2"
+          />
+          <dropdownQuestion
+            id="welcomeDropdown"
+            ref="damageCause"
+            v-model="welcomePageModel.damageCause"
+            cmsWidgetName="DamageCauseQuestion"
+            inputId="damageCauseQuestionField"
+            :options="DamageCauseOptions"
+            disableAutoFill
+            :validationRules="rules.damageOption"
+            placeHolderText="Select an option"
+          />
+          <textboxQuestion
+            ref="phoneNumber"
+            v-model="welcomePageModel.phoneNumber"
+            inputId="phoneNumberField"
+            cmsWidgetName="PhoneNumberQuestion"
+            :validationRules="rules.phoneNumber"
+            isRequired
+            :mask="phoneMask"
+            disableAutoFill
+          />
+          <textboxQuestion
+            ref="email"
+            v-model="welcomePageModel.email"
+            inputId="emailField"
+            cmsWidgetName="EmailAddressQuestion"
+            :validationRules="rules.email"
+            isRequired
+            disableAutoFill
+          />
+          <textboxQuestion
+            v-if="displayDamageCityQuestion"
+            ref="damageCity"
+            v-model="welcomePageModel.damageCity"
+            class="mt-4"
+            inputId="damageCityField"
+            cmsWidgetName="DamageCityQuestion"
+            isRequired
+            disableAutoFill
+            :validationRules="rules.lossCity"
+          />
+          <dropdownQuestion
+            v-if="displayDamageStateQuestion"
+            id="welcomeDropdown"
+            ref="state"
+            v-model="welcomePageModel.damageState"
+            class="mt-4"
+            cmsWidgetName="DamageStateQuestion"
+            inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+            :options="getStates"
+            :validationRules="rules.lossState"
+            isRequired
+            disableAutoFill
+            placeHolderText="Select an option"
+          />
+          <buttonQuestion
+            v-if="displayGlassOnlyQuestion"
+            ref="glassOnlyDamage"
+            v-model="welcomePageModel.isDamageGlassOnly"
+            class="px-0 mt-4"
+            cmsWidgetName="GlassOnlyQuestion"
+            inputId="isDamageGlassOnly"
+            :answers="DamageGlassOnlyOptions"
+            :questionText="DamageGlassOnlyQuestion"
+            groupName="glassOnlyDamageOption"
+            buttonTypeString="listButtonHorizontal"
+            :validationRules="rules.damageOption"
+            isRequired
+            isSmallQuestionLabelText
+            disableAutoFill
+          />
+          <div id="welcomeFooter" class="row">
+            <alert
+              v-if="displayInvalidZipAlert"
+              ref="alertInvalidZip"
+              class="my-4"
+              cmsWidgetName="AlertInvalidZipWidget"
+              alertClass="alert-danger"
+              :isDismissible="false"
+            />
+            <siteFooter
+              ref="siteFooter"
+              class="mt-3"
+              cmsWidgetName="SiteFooterWidget"
+              :isForwardActionDisabled="!meta.valid"
+              @ForwardClicked="forwardButtonAction"
+            />
+          </div>
+        </div>
+      </div>
+      <footerImage
+        cmsWidgetName="SiteFooterWidget" />
+    </div>
+  </Form>
 </template>
 
 <script>
 // Components
-import { Form, defineRule } from 'vee-validate';
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import alert from '@/ux-components/alert/alert.vue';
-import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
-import buttonQuestion from '@/digital-components/button-question/button-question.vue';
-import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
-import textBlock from '@/digital-components/text-block/text-block.vue';
+import { Form, defineRule } from "vee-validate";
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import alert from "@/ux-components/alert/alert.vue";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
+import buttonQuestion from "@/digital-components/button-question/button-question.vue";
+import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question.vue";
+import textBlock from "@/digital-components/text-block/text-block.vue";
+import footerImage from "@/iss-components/site-footer/footer-image/footer-image.vue";
 
 // Supporting files
-import { fetchCmsContentForPage, fetchGlobalCmsContent, updateCmsSiteHeader } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import { required } from '@/helpers/validation-rules';
-import errorMessages from '@/constants/error-messages';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import { useMainStore } from '@/store';
-import states from '@/constants/states';
-import globalRules from '@/constants/global-rules';
-import routerParams from '@/router/router-constants/router-params';
-import MaskaFormattedMasks from '@/constants/maska-masks';
+import {
+  fetchCmsContentForPage,
+  fetchGlobalCmsContent,
+  updateCmsSiteHeader,
+} from "@/helpers/cms-content-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import { required } from "@/helpers/validation-rules";
+import errorMessages from "@/constants/error-messages";
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import { useMainStore } from "@/store";
+import states from "@/constants/states";
+import globalRules from "@/constants/global-rules";
+import routerParams from "@/router/router-constants/router-params";
+import MaskaFormattedMasks from "@/constants/maska-masks";
 
 // define validation rules
-defineRule('damage-option-required', required(errorMessages.DAMAGE_OPTION_REQUIRED));
+defineRule(
+  "damage-option-required",
+  required(errorMessages.DAMAGE_OPTION_REQUIRED)
+);
 
 export default {
-    name: 'welcome-page',
-    components: {
-        siteHeader,
-        siteSubHeader,
-        alert,
-        buttonQuestion,
-        textboxQuestion,
-        dropdownQuestion,
-        siteFooter,
-        textBlock,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+  name: "welcome-page",
+  components: {
+    siteHeader,
+    siteSubHeader,
+    footerImage,
+    alert,
+    buttonQuestion,
+    textboxQuestion,
+    dropdownQuestion,
+    siteFooter,
+    textBlock,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+  },
+  mixins: [BaseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    const cmsGlobalSiteHeaderContentPromise =
+      fetchGlobalCmsContent("iss-siteheader");
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "globalSiteHeaderCmsContent",
+        promise: cmsGlobalSiteHeaderContentPromise,
+      },
+    ];
+
+    // use resultMap to populate layout content.
+    const resultMap = await settleAllPromises(promiseResultMap);
+    next((vm) => {
+      updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent);
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  setup() {
+    const mainStore = useMainStore();
+
+    // Set order account number from the issConfig.
+    mainStore.order.accountNumber = mainStore.issConfig.parentAccountNumber;
+
+    return { mainStore };
+  },
+  data() {
+    return {
+      welcomePageModel: this.getWelcomePageModelFromStore(),
+      displayInvalidZipAlert: false,
+      duplicates: [],
+      rules: {
+        damageOption: "damage-option-required",
+        email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+        lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
+        // eslint-disable-next-line max-len
+        lossDate: `${globalRules.DATE_OF_LOSS_REQUIRED}|${globalRules.DATE_OF_LOSS_NOT_TEN_YEARS_PAST}|${globalRules.DATE_OF_LOSS_NOT_FUTURE}`,
+        lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
+        policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
+        policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
+        phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
+      },
+    };
+  },
+  computed: {
+    DamageCauseOptions() {
+      const damageCauseAnswers = this.getCmsContent(
+        "DamageCauseQuestion",
+        "Answers"
+      );
+      const damageCauseAnswersObj = {};
+      if (damageCauseAnswers) {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const answer of Object.values(damageCauseAnswers)) {
+          if (answer?.Name) {
+            damageCauseAnswersObj[answer.Name] = answer.Name;
+          }
+        }
+      }
+      return damageCauseAnswersObj;
     },
-    mixins: [BaseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const cmsGlobalSiteHeaderContentPromise = fetchGlobalCmsContent('iss-siteheader');
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            },
-            {
-                resultKey: 'globalSiteHeaderCmsContent',
-                promise: cmsGlobalSiteHeaderContentPromise
-            }
-        ];
-
-        // use resultMap to populate layout content.
-        const resultMap = await settleAllPromises(promiseResultMap);
-        next((vm) => {
-            updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent);
-            vm.setCmsContent(resultMap.cmsContent);
+    DamageGlassOnlyOptions() {
+      return this.getCmsContent("GlassOnlyQuestion", "Answers");
+    },
+    DamageGlassOnlyQuestion() {
+      return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
+    },
+    displayDamageCityQuestion() {
+      return !!this.getCmsContent("DamageCityQuestion", "QuestionText");
+    },
+    displayDamageStateQuestion() {
+      return !!this.getCmsContent("DamageStateQuestion", "QuestionText");
+    },
+    displayGlassOnlyQuestion() {
+      return !!this.getCmsContent("GlassOnlyQuestion", "QuestionText");
+    },
+    getStates() {
+      return states;
+    },
+    isPolicyHolderDisabled() {
+      return !!this.mainStore.issConfig.disabledFields.policyNumber;
+    },
+    isPolicyZipDisabled() {
+      return !!this.mainStore.issConfig.disabledFields.policyZipCode;
+    },
+    isDateOfLossDisabled() {
+      return !!this.mainStore.issConfig.disabledFields.dateOfLoss;
+    },
+    isCoverageEnabled() {
+      return this.mainStore.issConfig.isCoverageEnabled;
+    },
+    maxCoverageLookupAttemptsReached() {
+      return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
+    },
+    phoneMask() {
+      return MaskaFormattedMasks.PHONE_NUMBER;
+    },
+  },
+  methods: {
+    async forwardButtonAction() {
+      await this.mainStore
+        .validateZip({ zip: this.welcomePageModel.policyZipCode })
+        .then(async (zipInfo) => {
+          if (zipInfo?.data?.isValid === true) {
+            this.mainStore.updatePolicyData(this.welcomePageModel);
+            await this.mainStore
+              .getDuplicateReferrals()
+              .then(
+                () => {},
+                () => {}
+              )
+              .finally(async () => {
+                if (
+                  this.isCoverageEnabled &&
+                  !this.maxCoverageLookupAttemptsReached
+                ) {
+                  await this.mainStore.getCoveragePolicyInfo()?.then(
+                    () => {},
+                    () => {}
+                  );
+                } else {
+                  this.mainStore.order.policy.policyLookupSuccessful = false;
+                }
+                this.navigateForward();
+              });
+          } else {
+            this.displayInvalidZipAlert = true;
+            this.$refs.siteFooter.removeLoader();
+          }
         });
     },
-    setup() {
-        const mainStore = useMainStore();
-
-        // Set order account number from the issConfig.
-        mainStore.order.accountNumber = mainStore.issConfig.parentAccountNumber;
-
-        return { mainStore };
-    },
-    data() {
-        return {
-            welcomePageModel: this.getWelcomePageModelFromStore(),
-            displayInvalidZipAlert: false,
-            duplicates: [],
-            rules: {
-                damageOption: 'damage-option-required',
-                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
-                lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
-                // eslint-disable-next-line max-len
-                lossDate: `${globalRules.DATE_OF_LOSS_REQUIRED}|${globalRules.DATE_OF_LOSS_NOT_TEN_YEARS_PAST}|${globalRules.DATE_OF_LOSS_NOT_FUTURE}`,
-                lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
-                policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
-                policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
-                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
-            }
-        };
-    },
-    computed: {
-        DamageCauseOptions() {
-            const damageCauseAnswers = this.getCmsContent('DamageCauseQuestion', 'Answers');
-            const damageCauseAnswersObj = {};
-            if (damageCauseAnswers) {
-                // eslint-disable-next-line no-restricted-syntax
-                for (const answer of Object.values(damageCauseAnswers)) {
-                    if (answer?.Name) {
-                        damageCauseAnswersObj[answer.Name] = answer.Name;
-                    }
-                }
-            }
-            return damageCauseAnswersObj;
-        },
-        DamageGlassOnlyOptions() {
-            return this.getCmsContent('GlassOnlyQuestion', 'Answers');
-        },
-        DamageGlassOnlyQuestion() {
-            return this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
-        },
-        displayDamageCityQuestion() {
-            return !!this.getCmsContent('DamageCityQuestion', 'QuestionText');
-        },
-        displayDamageStateQuestion() {
-            return !!this.getCmsContent('DamageStateQuestion', 'QuestionText');
-        },
-        displayGlassOnlyQuestion() {
-            return !!this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
-        },
-        getStates() {
-            return states;
-        },
-        isPolicyHolderDisabled() {
-            return !!this.mainStore.issConfig.disabledFields.policyNumber;
-        },
-        isPolicyZipDisabled() {
-            return !!this.mainStore.issConfig.disabledFields.policyZipCode;
-        },
-        isDateOfLossDisabled() {
-            return !!this.mainStore.issConfig.disabledFields.dateOfLoss;
-        },
-        isCoverageEnabled() {
-            return this.mainStore.issConfig.isCoverageEnabled;
-        },
-        maxCoverageLookupAttemptsReached() {
-            return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
-        },
-        phoneMask() {
-            return MaskaFormattedMasks.PHONE_NUMBER;
+    navigateForward() {
+      if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
+          this.$route,
+          {},
+          { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+        );
+      } else if (this.mainStore.policy.policyLookupSuccessful) {
+        if (this.mainStore.order.policy.vehicles?.length > 0 ?? false) {
+          // navigate to policy-vehicles page
+          this.$router.navigate(
+            this.navigationScenarios
+              .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+            this.$route,
+            {},
+            { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+          );
+        } else {
+          // navigate to vehicle-selection page (manual entry)
+          this.$router.navigate(
+            this.navigationScenarios
+              .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+            this.$route,
+            {},
+            { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+          );
         }
+      } else {
+        // if policy lookup is unsuccessful, navigate to policy-holder-details page
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+          this.$route,
+          {},
+          { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+        );
+      }
     },
-    methods: {
-        async forwardButtonAction() {
-            await this.mainStore.validateZip({ zip: this.welcomePageModel.policyZipCode })
-                .then(async (zipInfo) => {
-                    if (zipInfo?.data?.isValid === true) {
-                        this.mainStore.updatePolicyData(this.welcomePageModel);
-                        await this.mainStore.getDuplicateReferrals()
-                            .then(() => {}, () => {})
-                            .finally(async () => {
-                                if (this.isCoverageEnabled && !this.maxCoverageLookupAttemptsReached) {
-                                    await this.mainStore.getCoveragePolicyInfo()?.then(() => {}, () => {});
-                                } else {
-                                    this.mainStore.order.policy.policyLookupSuccessful = false;
-                                }
-                                this.navigateForward();
-                            });
-                    } else {
-                        this.displayInvalidZipAlert = true;
-                        this.$refs.siteFooter.removeLoader();
-                    }
-                });
-        },
-        navigateForward() {
-            if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
-                    this.$route,
-                    {},
-                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                );
-            } else if (this.mainStore.policy.policyLookupSuccessful) {
-                if (this.mainStore.order.policy.vehicles?.length > 0 ?? false) {
-                    // navigate to policy-vehicles page
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
-                        this.$route,
-                        {},
-                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                    );
-                } else {
-                    // navigate to vehicle-selection page (manual entry)
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
-                        this.$route,
-                        {},
-                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                    );
-                }
-            } else {
-                // if policy lookup is unsuccessful, navigate to policy-holder-details page
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-                    this.$route,
-                    {},
-                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                );
-            }
-        },
-        getWelcomePageModelFromStore() {
-            return {
-                policyNumber: this.mainStore.order.policy.policyNumber,
-                policyZipCode: this.mainStore.order.policy.policyZipCode,
-                dateOfLoss: this.mainStore.order.policy.dateOfLoss,
-                damageCause: this.mainStore.order.policy.damageCause,
-                damageState: this.mainStore.order.policy.damageState,
-                damageCity: this.mainStore.order.policy.damageCity,
-                isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
-                phoneNumber: this.mainStore.order.customer.phoneNumber,
-                email: this.mainStore.order.customer.emailAddress,
-                isPolicyNumberDisabled: this.mainStore.order.policy.isPolicyNumberDisabled
-            };
-        }
-    }
+    getWelcomePageModelFromStore() {
+      return {
+        policyNumber: this.mainStore.order.policy.policyNumber,
+        policyZipCode: this.mainStore.order.policy.policyZipCode,
+        dateOfLoss: this.mainStore.order.policy.dateOfLoss,
+        damageCause: this.mainStore.order.policy.damageCause,
+        damageState: this.mainStore.order.policy.damageState,
+        damageCity: this.mainStore.order.policy.damageCity,
+        isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
+        phoneNumber: this.mainStore.order.customer.phoneNumber,
+        email: this.mainStore.order.customer.emailAddress,
+        isPolicyNumberDisabled:
+          this.mainStore.order.policy.isPolicyNumberDisabled,
+      };
+    },
+  },
 };
 </script>
 
-<style lang="scss">
-.page-container-grouped-styles.welcome {
-    height: auto;
+<style lang="scss" scoped>
+.container-fluid {
+    height: 100dvh;
 }
 @-moz-document url-prefix() {
-    // Temporary solution that prevents the Continue button from being hidden in Firefox
-    #welcomeFooter {
-        position: static !important;
-    }
-    // Fixes Firefox styling defect for placeholder text in dropdown fields
-    #welcomeDropdown {
-        .form-select {
-            padding: 0.75rem 1rem;
-        }
+  // Temporary solution that prevents the Continue button from being hidden in Firefox
+  #welcomeFooter {
+    position: static !important;
+  }
+  // Fixes Firefox styling defect for placeholder text in dropdown fields
+  #welcomeDropdown {
+    .form-select {
+      padding: 0.75rem 1rem;
     }
+  }
 }
 </style>
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 357c14d1..4c8b7c67 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -1,35 +1,52 @@
 // Common/Global Styles
 // Use this file for global styles that don't or won't have their own stylesheet
+html, body {
+    height: 100%;
+}
 body {
     font-size: 16px;
     background-color: #fff;
-    color: #4D5151;
-
+    color: #4d5151;
     .container-fluid {
-        max-width: 576px; //Remove once desktop app is complete
-
-        &.container-shadow {
-            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15); //Use instead of Bootstrap's helper
-        }
-
-        &.make-tall {
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-        }
-
         .prevent-squish {
             overflow-x: unset;
         }
+        &.page-container-grouped-styles {
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        // Set max-width on columns to prevent overly-wide
+        // components on extra wide screens.
+        .col-md-6 {
+            max-width: 472px;
+            @include media-breakpoint-up(xl) {
+                max-width: 708px;
+            }
+            .col {
+                max-width: 236px;
+                &.one-list-card-width {
+                    max-width: 472px;
+                    @include media-breakpoint-up(xl) {
+                        max-width: 66.6666666%;
+                    }
+                }
+            }
+        }
+        .col-xl-4 {
+            max-width: 472px;
+            .col {
+                max-width: 100%;
+            }
+        }
+        //END set max-width on columns
     }
-
     .pointer {
         cursor: pointer;
     }
-
     .container,
     .container-fluid {
-        overflow: hidden;
+        overflow-x: hidden;
     }
 
     .sub-container {
@@ -38,7 +55,6 @@ body {
             width: 100%;
             display: flex;
             flex-direction: column;
-            overflow-x: hidden;
         }
     }
 
@@ -50,50 +66,12 @@ body {
         height: 1px;
         overflow: hidden;
     }
-
-    .pac-container {
-        z-index: 10000 !important;
-    }
-
-    .page-container-grouped-styles {
-        @extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
-    }
-
-    //Footer modal backdrop adjustments for positioning
-    .modal-backdrop {
-        left: 50%;
-        transform: translateX(-50%);
-        max-width: 576px;
-
-        &.show {
-            opacity: 0.4;
-        }
-    }
-
-    // Scroll page when modal isn't open
-    .fade-on-route-transition {
-        height: calc(100% - 10px);
-        overflow: auto;
-    }
-
-    // Prevent scroll when modal is open
-    &.modal-open {
-        div.page-container-grouped-styles {
-            overflow: hidden;
-        }
-
-        .fade-on-route-transition {
+}
+.modal-open {
+    .container-fluid {
+        &.page-container-grouped-styles {
             overflow: hidden;
+            height: auto;
         }
     }
-
-    .modal-text {
-        display: inline;
-        color: $blue;
-        cursor: pointer;
-        border: none;
-        font-size: 14px;
-        line-height: 24px;
-        font-weight: 500;
-    }
-}
\ No newline at end of file
+}
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index fc4b50ee..82b6648a 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -180,13 +180,12 @@ $spacers: (
 //Line Height
 
 
-//Grid breakpoints
+//Bootstrap Grid Breakpoints - Use these breakpoints only
 $grid-breakpoints: (
     xs: 0,
-    sm: 576px,
-    md: 838px,
-    lg: 1074px,
-    xl: 1416px,
+    md: 768px,
+    xl: 1200px,
+    xxl: 1440px,
 );
 
 //Shadow

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 02/26] 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;

From 567657b3b4058498567494cf8871a73ed0a3df5c Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 12 Apr 2024 09:19:31 -0400
Subject: [PATCH 03/26] WIP update css for welcome page.

---
 .../site-footer/footer-image/footer-image.vue              | 1 +
 src/layouts/service-location/service-location.vue          | 4 ++++
 src/layouts/welcome-page/welcome-page.vue                  | 7 ++++++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/iss-components/site-footer/footer-image/footer-image.vue b/src/iss-components/site-footer/footer-image/footer-image.vue
index 8b3ac9e6..ec021d19 100644
--- a/src/iss-components/site-footer/footer-image/footer-image.vue
+++ b/src/iss-components/site-footer/footer-image/footer-image.vue
@@ -21,6 +21,7 @@
     .footerImage {
         display: flex;
         justify-content: center;
+        margin-top: auto;
         img {
             max-width: 375px;
         }
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index e826becb..5169ee64 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -101,6 +101,10 @@
             @updatedMobileProviderNumber="setMobileProviderNumber"
           />
           <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
+    </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
           <siteFooter
             ref="siteFooter"
             class="mt-5"
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 15ba5d02..5b67ee47 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -395,8 +395,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container-fluid {
+form {
     height: 100dvh;
+    .container-fluid {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
 }
 @-moz-document url-prefix() {
   // Temporary solution that prevents the Continue button from being hidden in Firefox

From fa3c7711f6addbb754078371faf37165abd9938d Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 12 Apr 2024 10:52:01 -0400
Subject: [PATCH 04/26] WIP ISS desktop updates.

---
 src/digital-components/modal/modal.vue        |  59 +-
 .../contact-details/contact-details.vue       | 410 ++++----
 .../coverage-statement/coverage-statement.vue |   4 +-
 .../duplicate-check/duplicate-check.vue       |   2 +-
 .../policy-vehicles/policy-vehicles.vue       |   2 +-
 .../provider-preference.vue                   |   2 +-
 src/layouts/schedule-page/schedule-page.vue   | 891 ++++++++++--------
 .../service-location/service-location.vue     |   2 +-
 src/layouts/vehicle-damage/vehicle-damage.vue |   2 +-
 src/layouts/vehicle-lookup/vehicle-lookup.vue | 209 ++--
 src/layouts/vehicle-parts/vehicle-parts.vue   |   2 +-
 .../vehicle-selection/vehicle-selection.vue   | 423 +++++----
 src/layouts/vin-lookup/vin-lookup.vue         | 543 ++++++-----
 src/layouts/welcome-page/welcome-page.vue     |   4 +-
 14 files changed, 1349 insertions(+), 1206 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index bd7d5796..f2a7b8a9 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -119,25 +119,17 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .modal {
     top: auto;
     bottom: 0;
-
-    :deep(h5) {
-        color: $black;
-    }
-
-    :deep(p) {
-        strong {
-            color: $black;
-        }
-    }
-
+    h5,
+    strong,
     .subheader-text {
         color: $black;
     }
     .modal-header {
+        padding: 1rem 0 0.5rem 0;
         border-bottom: none;
         .btn-close {
             position: absolute;
@@ -145,11 +137,14 @@ 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 {
             font-weight: 500;
-            color: $black;
+            font-size: 1.25rem;
+            line-height: 32px;
+            color: rgb(0, 0, 0);
         }
     }
     .modal-footer {
@@ -157,17 +152,31 @@ export default {
         width: 100%;
         bottom: 0;
         z-index: 5;
-        background-color: $gray-100;
     }
     &.modal-component {
         .modal-dialog {
-            max-width: 576px;
+            max-width: 767px;
             margin: 0 auto;
+            @include media-breakpoint-up(md) {
+                width: 376px;
+                position: absolute;
+                top: 0;
+                right: 0;
+                transform: translate(100%, 0);
+            }
             .modal-content {
-                margin: 0 auto;
+                margin: 1.5rem auto 0 auto;
                 box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
                 border-radius: 1.5rem 1.5rem 0 0;
+                @include media-breakpoint-up(md) {
+                    box-shadow: none;
+                    border-radius: 0;
+                    margin: 0 auto;
+                }
                 .modal-body {
+                    .col {
+                        max-width: 100%;
+                    }
                     .modal-sub-body {
                         color: $gray-600;
                     }
@@ -179,22 +188,36 @@ export default {
                             margin-bottom: 0;
                         }
                     }
+                    @include media-breakpoint-up(md) {
+                        overflow: auto;
+                        flex: none;
+                    }
                 }
             }
             &.modal-dialog-centered {
                 align-items: flex-end;
                 min-height: 100%;
+                @include media-breakpoint-up(md) {
+                    align-items: inherit;
+                }
             }
         }
         .modal-footer {
             border-top: none;
-            background-color: $gray-100;
-            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
+
             button {
                 margin: 0;
             }
         }
     }
+    &.show .modal-dialog {
+        transform: translateY(0);
+    }
+    @include media-breakpoint-up(md) {
+        &.fade {
+            transition: opacity 0.25s linear;
+        }
+    }
 }
 body {
     .modal-backdrop {
diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue
index dcca28ee..8ed25420 100644
--- a/src/layouts/contact-details/contact-details.vue
+++ b/src/layouts/contact-details/contact-details.vue
@@ -1,222 +1,234 @@
 <template>
-    <Form
-        ref="contact-details-form"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader
-                    ref="siteHeader"
-                    :cmsWidgetName="widget.siteHeader" />
-                <div class="container-fluid px-6">
-                    <siteSubHeader
-                        id="sub-header"
-                        ref="siteSubHeader"
-                        class="mt-5"
-                        :cmsWidgetName="widget.siteSubHeader" />
-                    <textboxQuestion
-                        ref="firstNameQuestion"
-                        v-model="firstName"
-                        class="mt-6"
-                        inputId="firstName"
-                        :cmsWidgetName="widget.firstNameQuestion"
-                        isRequired
-                        :validationRules="rules.firstName" />
-                    <textboxQuestion
-                        ref="lastNameQuestion"
-                        v-model="lastName"
-                        class="mt-5"
-                        inputId="lastName"
-                        :cmsWidgetName="widget.lastNameQuestion"
-                        isRequired
-                        :validationRules="rules.lastName" />
-                    <textboxQuestion
-                        ref="emailQuestion"
-                        v-model="emailAddress"
-                        class="mt-5"
-                        inputId="emailAddress"
-                        :cmsWidgetName="widget.emailQuestion"
-                        isRequired
-                        :validationRules="rules.emailAddress" />
-                    <textboxQuestion
-                        ref="phoneNumberQuestion"
-                        v-model="phoneNumber"
-                        class="mt-5"
-                        inputId="phoneNumber"
-                        :cmsWidgetName="widget.phoneNumberQuestion"
-                        isRequired
-                        :mask="phoneMask"
-                        :validationRules="rules.phoneNumber" />
-                    <checkbox
-                        ref="requestTextUpdatesCheckbox"
-                        v-model="requestTextUpdates"
-                        :isChecked="requestTextUpdates"
-                        class="mt-3"
-                        checkboxName="requestTextUpdates"
-                        buttonID="requestTextUpdates"
-                        :checkboxLabel="requestTextUpdatesCheckboxText" />
-                    <textareaQuestion
-                        ref="notesQuestion"
-                        v-model="notesForTechnician"
-                        class="mt-5"
-                        inputId="technicianNotes"
-                        :isDisabled="false"
-                        :isRequired="false"
-                        :cmsWidgetName="widget.notesQuestion"
-                        maxLength="250"
-                        :inputRows="4" />
-                    <p
-                        ref="disclaimerText"
-                        class="caption dark-gray mt-6">
-                        {{ textUpdateDisclaimerText }} I also agree to Safelite's
-                        <textLink
-                            ref="privacyPolicyLink"
-                            class="normal-line-height"
-                            linkType="text"
-                            text="Privacy Policy"
-                            href="//www.safelite.com/privacy-center" />
-                        and
-                        <textLink
-                            ref="termsOfUseLink"
-                            class="normal-line-height"
-                            linkType="text"
-                            text="Terms of Use"
-                            href="//www.safelite.com/terms-of-use" />.
-                    </p>
-                    <siteFooter
-                        ref="siteFooter"
-                        class="my-5"
-                        :cmsWidgetName="widget.siteFooter"
-                        :isForwardActionDisabled="!meta.valid"
-                        @forwardClicked="forwardButtonAction"
-                        @backClicked="navigateBack" />
-                </div>
-            </div>
+  <Form
+    ref="contact-details-form"
+    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 px-0 px-md-2">
+          <siteHeader ref="siteHeader" :cmsWidgetName="widget.siteHeader" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <siteSubHeader
+            id="sub-header"
+            ref="siteSubHeader"
+            class="mt-5"
+            :cmsWidgetName="widget.siteSubHeader"
+          />
+          <textboxQuestion
+            ref="firstNameQuestion"
+            v-model="firstName"
+            class="mt-6"
+            inputId="firstName"
+            :cmsWidgetName="widget.firstNameQuestion"
+            isRequired
+            :validationRules="rules.firstName"
+          />
+          <textboxQuestion
+            ref="lastNameQuestion"
+            v-model="lastName"
+            class="mt-5"
+            inputId="lastName"
+            :cmsWidgetName="widget.lastNameQuestion"
+            isRequired
+            :validationRules="rules.lastName"
+          />
+          <textboxQuestion
+            ref="emailQuestion"
+            v-model="emailAddress"
+            class="mt-5"
+            inputId="emailAddress"
+            :cmsWidgetName="widget.emailQuestion"
+            isRequired
+            :validationRules="rules.emailAddress"
+          />
+          <textboxQuestion
+            ref="phoneNumberQuestion"
+            v-model="phoneNumber"
+            class="mt-5"
+            inputId="phoneNumber"
+            :cmsWidgetName="widget.phoneNumberQuestion"
+            isRequired
+            :mask="phoneMask"
+            :validationRules="rules.phoneNumber"
+          />
+          <checkbox
+            ref="requestTextUpdatesCheckbox"
+            v-model="requestTextUpdates"
+            :isChecked="requestTextUpdates"
+            class="mt-3"
+            checkboxName="requestTextUpdates"
+            buttonID="requestTextUpdates"
+            :checkboxLabel="requestTextUpdatesCheckboxText"
+          />
+          <textareaQuestion
+            ref="notesQuestion"
+            v-model="notesForTechnician"
+            class="mt-5"
+            inputId="technicianNotes"
+            :isDisabled="false"
+            :isRequired="false"
+            :cmsWidgetName="widget.notesQuestion"
+            maxLength="250"
+            :inputRows="4"
+          />
+          <p ref="disclaimerText" class="caption dark-gray mt-6">
+            {{ textUpdateDisclaimerText }} I also agree to Safelite's
+            <textLink
+              ref="privacyPolicyLink"
+              class="normal-line-height"
+              linkType="text"
+              text="Privacy Policy"
+              href="//www.safelite.com/privacy-center"
+            />
+            and
+            <textLink
+              ref="termsOfUseLink"
+              class="normal-line-height"
+              linkType="text"
+              text="Terms of Use"
+              href="//www.safelite.com/terms-of-use"
+            />.
+          </p>
+          <siteFooter
+            ref="siteFooter"
+            class="my-5"
+            :cmsWidgetName="widget.siteFooter"
+            :isForwardActionDisabled="!meta.valid"
+            @forwardClicked="forwardButtonAction"
+            @backClicked="navigateBack"
+          />
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 <script>
 // Components
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
-import checkbox from '@/ux-components/checkbox/checkbox.vue';
-import textareaQuestion from '@/digital-components/textarea-question/textarea-question.vue';
-import textLink from '@/ux-components/text-link/text-link.vue';
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
+import checkbox from "@/ux-components/checkbox/checkbox.vue";
+import textareaQuestion from "@/digital-components/textarea-question/textarea-question.vue";
+import textLink from "@/ux-components/text-link/text-link.vue";
 
 // Supporting files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
-import { Form } from 'vee-validate';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import { useMainStore } from '@/store/index.js';
-import globalRules from '@/constants/global-rules.js';
-import MaskaFormattedMasks from '@/constants/maska-masks';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper.js";
+import { Form } from "vee-validate";
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import { useMainStore } from "@/store/index.js";
+import globalRules from "@/constants/global-rules.js";
+import MaskaFormattedMasks from "@/constants/maska-masks";
 
 export default {
-    name: 'contact-details',
-    components: {
-        siteHeader,
-        siteSubHeader,
-        textboxQuestion,
-        checkbox,
-        textareaQuestion,
-        siteFooter,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        textLink
-    },
-    mixins: [BaseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        const cmsContent = await fetchCmsContentForPage(to.query.issPage);
+  name: "contact-details",
+  components: {
+    siteHeader,
+    siteSubHeader,
+    textboxQuestion,
+    checkbox,
+    textareaQuestion,
+    siteFooter,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    textLink,
+  },
+  mixins: [BaseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    const cmsContent = await fetchCmsContentForPage(to.query.issPage);
 
-        next((vm) => {
-            vm.setCmsContent(cmsContent);
-        });
+    next((vm) => {
+      vm.setCmsContent(cmsContent);
+    });
+  },
+  data() {
+    const {
+      firstName,
+      lastName,
+      emailAddress,
+      phoneNumber,
+      requestTextUpdates,
+      notesForTechnician,
+    } = useMainStore().contactInfo;
+    return {
+      firstName,
+      lastName,
+      emailAddress,
+      phoneNumber,
+      requestTextUpdates,
+      notesForTechnician,
+      widget: {
+        siteHeader: "SiteHeaderWidget",
+        siteSubHeader: "SiteSubHeaderWidget",
+        firstNameQuestion: "FirstNameQuestionWidget",
+        lastNameQuestion: "LastNameQuestionWidget",
+        emailQuestion: "EmailQuestionWidget",
+        phoneNumberQuestion: "PhoneNumberQuestionWidget",
+        requestTextUpdates: "TextContentWidget",
+        notesQuestion: "NotesQuestionWidget",
+        disclaimer: "TextUpdateDisclaimerWidget",
+        siteFooter: "SiteFooterWidget",
+      },
+      rules: {
+        firstName: globalRules.FIRST_NAME_REQUIRED,
+        lastName: globalRules.LAST_NAME_REQUIRED,
+        emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+        phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
+      },
+    };
+  },
+  computed: {
+    /**
+     * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
+     */
+    requestTextUpdatesCheckboxText() {
+      return `${this.getCmsContent(this.widget.requestTextUpdates, "Text")}*`;
     },
-    data() {
-        const { firstName,
-            lastName,
-            emailAddress,
-            phoneNumber,
-            requestTextUpdates,
-            notesForTechnician } = useMainStore().contactInfo;
-        return {
-            firstName,
-            lastName,
-            emailAddress,
-            phoneNumber,
-            requestTextUpdates,
-            notesForTechnician,
-            widget: {
-                siteHeader: 'SiteHeaderWidget',
-                siteSubHeader: 'SiteSubHeaderWidget',
-                firstNameQuestion: 'FirstNameQuestionWidget',
-                lastNameQuestion: 'LastNameQuestionWidget',
-                emailQuestion: 'EmailQuestionWidget',
-                phoneNumberQuestion: 'PhoneNumberQuestionWidget',
-                requestTextUpdates: 'TextContentWidget',
-                notesQuestion: 'NotesQuestionWidget',
-                disclaimer: 'TextUpdateDisclaimerWidget',
-                siteFooter: 'SiteFooterWidget'
-            },
-            rules: {
-                firstName: globalRules.FIRST_NAME_REQUIRED,
-                lastName: globalRules.LAST_NAME_REQUIRED,
-                emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
-                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
-            }
-        };
+    /**
+     * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
+     */
+    textUpdateDisclaimerText() {
+      return `*${this.getCmsContent(this.widget.disclaimer, "Text")}`;
     },
-    computed: {
-        /**
-         * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
-         */
-        requestTextUpdatesCheckboxText() {
-            return `${this.getCmsContent(this.widget.requestTextUpdates, 'Text')}*`;
-        },
-        /**
-         * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
-         */
-        textUpdateDisclaimerText() {
-            return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
-        },
-        phoneMask() {
-            return MaskaFormattedMasks.PHONE_NUMBER;
-        }
+    phoneMask() {
+      return MaskaFormattedMasks.PHONE_NUMBER;
     },
-    methods:
-    {
-        /**
-         * @summary Steps to perform when forward button clicked.
-         */
-        forwardButtonAction() {
-            const contactInfo = {
-                firstName: this.firstName,
-                lastName: this.lastName,
-                emailAddress: this.emailAddress,
-                phoneNumber: this.phoneNumber,
-                requestTextUpdates: this.requestTextUpdates,
-                notesForTechnician: this.notesForTechnician
-            };
-            useMainStore().updateContactInfo(contactInfo);
-            const scenario = useMainStore().order.serviceLocation.IsSafeliteProvider === false
-                ? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
-                : this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
-            this.$router.navigate(scenario, this.$route);
-        }
-    }
+  },
+  methods: {
+    /**
+     * @summary Steps to perform when forward button clicked.
+     */
+    forwardButtonAction() {
+      const contactInfo = {
+        firstName: this.firstName,
+        lastName: this.lastName,
+        emailAddress: this.emailAddress,
+        phoneNumber: this.phoneNumber,
+        requestTextUpdates: this.requestTextUpdates,
+        notesForTechnician: this.notesForTechnician,
+      };
+      useMainStore().updateContactInfo(contactInfo);
+      const scenario =
+        useMainStore().order.serviceLocation.IsSafeliteProvider === false
+          ? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
+          : this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
+      this.$router.navigate(scenario, this.$route);
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .dark-gray {
-    color: $darker-gray;
+  color: $darker-gray;
 }
 
 .normal-line-height {
-    line-height: normal;
+  line-height: normal;
 }
-
 </style>
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index debc70a3..54959779 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -7,12 +7,12 @@
   >
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
-        <div class="col-md-6">
+        <div class="col-md-6 px-0 px-md-2">
           <loadingModal ref="loadingModal" :textSlides="loadingText" />
           <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
-      <div class="row justify-content-center">
+      <div class="row justify-content-center pt-5">
         <div class="col-md-6 col-xl-4">
           <h5
             ref="siteSubHeader"
diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue
index 6df58973..6d13b877 100644
--- a/src/layouts/duplicate-check/duplicate-check.vue
+++ b/src/layouts/duplicate-check/duplicate-check.vue
@@ -7,7 +7,7 @@
   >
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
-        <div class="col-md-6">
+        <div class="col-md-6 px-0 px-md-2">
           <siteHeader ref="siteHeader" :cmsWidgetName="widget.siteHeader" />
         </div>
       </div>
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index b2024550..9cb86b76 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -7,7 +7,7 @@
   >
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
-        <div class="col-md-6">
+        <div class="col-md-6 px-0 px-md-2">
           <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 787fd458..63ebe119 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -2,7 +2,7 @@
   <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">
+        <div class="col-md-6 px-0 px-md-2">
           <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index 4636b834..479907b5 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -1,434 +1,498 @@
 <template>
-    <Form
-        ref="theForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <siteSubHeader
-                cmsWidgetName="ScheduleSubHeaderWidget"
-                subTextClasses="text-center small sub-text"
-                class="mt-4" />
-            <template v-if="ChangeShopLink.length">
-                <textBlock
-                    cmsWidgetName="ChangeShopLink"
-                    justifyText="center"
-                    class="mb-3 text-link-small"
-                    :marginTopSizeOverride="1" />
-            </template>
-            <div class="main-content-container">
-                <locationAlerts
-                    ref="locationAlerts"
-                    cmsWidgetPrefix="LocationAlert-" />
-                <datePicker
-                    ref="datePicker"
-                    v-model="selectedDate"
-                    customComponentId="dateQuestion"
-                    selectableDatesSetting="custom"
-                    class="text-link-small"
-                    :customSelectableDatesCallback="getAvailableDatesMethod"
-                    validationRules="date-required"
-                    @dateClicked="openInshopTimeSlotsModal" />
-                <timeSlotModalQuestion
-                    ref="timeSlotModalQuestion"
-                    v-model="selectedTimeSlotInfo"
-                    customComponentId="timeSlotModalQuestion"
-                    cmsWidgetName="TimeSlotModalQuestion"
-                    mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
-                    mobileCmsWidgetName="MobileTimeSlotModal"
-                    dropoffCmsWidgetName="DropOffTimeSlotModal"
-                    sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-                    overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
-                    :selectedDate="selectedDate"
-                    :appointmentType="appointmentType"
-                    :premiumAppointmentFee="mobilePremiumAppointmentFee"
-                    :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-                    :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
-                    :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
-                    validationRules="time-slot-selection-required"
-                    @timeSlotModalClosed="timeSlotModalClosed" />
-                <siteFooter
-                    ref="navbar"
-                    class="mt-5"
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @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 px-0 px-md-2">
+          <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
+            cmsWidgetName="ScheduleSubHeaderWidget"
+            subTextClasses="text-center small sub-text"
+            class="mt-4"
+          />
+          <template v-if="ChangeShopLink.length">
+            <textBlock
+              cmsWidgetName="ChangeShopLink"
+              justifyText="center"
+              class="mb-3 text-link-small"
+              :marginTopSizeOverride="1"
+            />
+          </template>
+          <div class="main-content-container">
+            <locationAlerts
+              ref="locationAlerts"
+              cmsWidgetPrefix="LocationAlert-"
+            />
+            <datePicker
+              ref="datePicker"
+              v-model="selectedDate"
+              customComponentId="dateQuestion"
+              selectableDatesSetting="custom"
+              class="text-link-small"
+              :customSelectableDatesCallback="getAvailableDatesMethod"
+              validationRules="date-required"
+              @dateClicked="openInshopTimeSlotsModal"
+            />
+            <timeSlotModalQuestion
+              ref="timeSlotModalQuestion"
+              v-model="selectedTimeSlotInfo"
+              customComponentId="timeSlotModalQuestion"
+              cmsWidgetName="TimeSlotModalQuestion"
+              mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
+              mobileCmsWidgetName="MobileTimeSlotModal"
+              dropoffCmsWidgetName="DropOffTimeSlotModal"
+              sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
+              overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+              :selectedDate="selectedDate"
+              :appointmentType="appointmentType"
+              :premiumAppointmentFee="mobilePremiumAppointmentFee"
+              :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+              :estimatedServiceMinutesMinimum="
+                selectableDatesData.estimatedServiceMinutesMinimum
+              "
+              :estimatedServiceMinutesMaximum="
+                selectableDatesData.estimatedServiceMinutesMaximum
+              "
+              validationRules="time-slot-selection-required"
+              @timeSlotModalClosed="timeSlotModalClosed"
+            />
+            <siteFooter
+              ref="navbar"
+              class="mt-5"
+              cmsWidgetName="SiteFooterWidget"
+              :isForwardActionDisabled="!meta.valid"
+              @backClicked="navigateBack"
+              @forwardClicked="forwardButtonAction"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 <script>
 // Components
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
-import datePicker from '@/digital-components/date-picker/date-picker.vue';
-import timeSlotModalQuestion from '@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import textBlock from '@/digital-components/text-block/text-block.vue';
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import locationAlerts from "@/layouts/schedule-page/location-alerts/location-alerts.vue";
+import datePicker from "@/digital-components/date-picker/date-picker.vue";
+import timeSlotModalQuestion from "@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import textBlock from "@/digital-components/text-block/text-block.vue";
 
 // Supporting files
 import {
-    AppointmentTypeStrings,
-    GET_MOBILE_TIME_SLOTS,
-    GET_SHOP_TIME_SLOTS,
-    PREMIUM_FEE_PART_TYPE
-} from '@/constants/schedule-constants.js';
-import { fetchCmsContentForPage, splitCopyOnCMSPlaceHolder } from '@/helpers/cms-content-helper';
-import { calcDaysBetweenDates, convertDateStringToDate, sumDateString } from '@/helpers/date-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import { Form, defineRule } from 'vee-validate';
-import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import errorMessages from '@/constants/error-messages';
-import { required } from '@/helpers/validation-rules';
-import { useMainStore } from '@/store';
+  AppointmentTypeStrings,
+  GET_MOBILE_TIME_SLOTS,
+  GET_SHOP_TIME_SLOTS,
+  PREMIUM_FEE_PART_TYPE,
+} from "@/constants/schedule-constants.js";
+import {
+  fetchCmsContentForPage,
+  splitCopyOnCMSPlaceHolder,
+} from "@/helpers/cms-content-helper";
+import {
+  calcDaysBetweenDates,
+  convertDateStringToDate,
+  sumDateString,
+} from "@/helpers/date-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import { Form, defineRule } from "vee-validate";
+import BaseFormMixin from "@/mixins/base-form-mixin.js";
+import errorMessages from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+import { useMainStore } from "@/store";
 
 // DEFINE VALIDATION RULES
-defineRule('date-required', required(errorMessages.DATE_REQUIRED));
-defineRule('time-slot-selection-required', (value) => {
-    if (value?.timeSlot?.routeCode == null) {
-        return errorMessages.DATE_REQUIRED;
-    }
-    return true;
+defineRule("date-required", required(errorMessages.DATE_REQUIRED));
+defineRule("time-slot-selection-required", (value) => {
+  if (value?.timeSlot?.routeCode == null) {
+    return errorMessages.DATE_REQUIRED;
+  }
+  return true;
 });
 
 // Define constants
 const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
 
 const getAvailableDates = async (
-    startDateString,
-    endDateString,
-    appointmentType,
-    providerNumber
+  startDateString,
+  endDateString,
+  appointmentType,
+  providerNumber
 ) => {
-    const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
-    const difference = calcDaysBetweenDates(startDateString, endDateString);
-    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
-    const storeActionConfigs = [];
-    const timeSlotsData = {};
-    timeSlotsData.days = [];
-    let apiStartDate = startDateString;
-    let apiEndDate = endDateString;
+  const apiEndDateLimit = sumDateString(
+    startDateString,
+    TIME_SLOTS_CALL_DAYS_LIMIT
+  );
+  const difference = calcDaysBetweenDates(startDateString, endDateString);
+  const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
+  const storeActionConfigs = [];
+  const timeSlotsData = {};
+  timeSlotsData.days = [];
+  let apiStartDate = startDateString;
+  let apiEndDate = endDateString;
 
-    for (let i = 1; i <= apiCallsCount; i++) {
-        let storeActionConfig;
+  for (let i = 1; i <= apiCallsCount; i++) {
+    let storeActionConfig;
 
-        if (i > 1) {
-            apiStartDate = sumDateString(apiEndDate, 1);
-            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
+    if (i > 1) {
+      apiStartDate = sumDateString(apiEndDate, 1);
+      apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
 
-            if (i === apiCallsCount) {
-                apiEndDate = endDateString;
-            }
-        } else if (apiEndDate > apiEndDateLimit) {
-            apiEndDate = apiEndDateLimit;
-        }
+      if (i === apiCallsCount) {
+        apiEndDate = endDateString;
+      }
+    } else if (apiEndDate > apiEndDateLimit) {
+      apiEndDate = apiEndDateLimit;
+    }
 
-        if (appointmentType === AppointmentTypeStrings.MOBILE
-            || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
-            storeActionConfig = {
-                storeAction: GET_MOBILE_TIME_SLOTS,
-                payload: {
-                    startDate: apiStartDate,
-                    endDate: apiEndDate
-                }
-            };
+    if (
+      appointmentType === AppointmentTypeStrings.MOBILE ||
+      appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
+    ) {
+      storeActionConfig = {
+        storeAction: GET_MOBILE_TIME_SLOTS,
+        payload: {
+          startDate: apiStartDate,
+          endDate: apiEndDate,
+        },
+      };
+    } else {
+      storeActionConfig = {
+        storeAction: GET_SHOP_TIME_SLOTS,
+        payload: {
+          startDate: apiStartDate,
+          endDate: apiEndDate,
+          shopAppointmentType: appointmentType,
+          providerNumber,
+        },
+      };
+    }
+    if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
+  }
+
+  const timeSlotsResponsesData = {
+    days: [],
+  };
+
+  function compareDayStrings(a, b) {
+    if (a.date < b.date) return -1;
+    if (a.date > b.date) return 1;
+    return 0;
+  }
+
+  const makeParallelCalls = async () => {
+    await Promise.all(
+      storeActionConfigs.map(async (storeAction) => {
+        let timeSlotsResponse = null;
+        if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
+          timeSlotsResponse = await useMainStore().getShopTimeSlots(
+            storeAction.payload.startDate,
+            storeAction.payload.endDate,
+            storeAction.payload.shopAppointmentType,
+            storeAction.payload.providerNumber
+          );
         } else {
-            storeActionConfig = {
-                storeAction: GET_SHOP_TIME_SLOTS,
-                payload: {
-                    startDate: apiStartDate,
-                    endDate: apiEndDate,
-                    shopAppointmentType: appointmentType,
-                    providerNumber
-                }
-            };
+          timeSlotsResponse = await useMainStore().getMobileTimeSlots(
+            storeAction.payload.startDate,
+            storeAction.payload.endDate
+          );
         }
-        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
-    }
 
-    const timeSlotsResponsesData = {
-        days: []
-    };
+        timeSlotsResponsesData.estimatedServiceMinutesMinimum =
+          timeSlotsResponse.data.estimatedServiceMinutesMinimum;
+        timeSlotsResponsesData.estimatedServiceMinutesMaximum =
+          timeSlotsResponse.data.estimatedServiceMinutesMaximum;
+        timeSlotsResponsesData.days = [
+          ...timeSlotsResponsesData.days,
+          ...timeSlotsResponse.data.days,
+        ];
+      })
+    );
+  };
 
-    function compareDayStrings(a, b) {
-        if (a.date < b.date) return -1;
-        if (a.date > b.date) return 1;
-        return 0;
-    }
-
-    const makeParallelCalls = async () => {
-        await Promise.all(storeActionConfigs.map(async (storeAction) => {
-            let timeSlotsResponse = null;
-            if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
-                timeSlotsResponse = await useMainStore().getShopTimeSlots(
-                    storeAction.payload.startDate,
-                    storeAction.payload.endDate,
-                    storeAction.payload.shopAppointmentType,
-                    storeAction.payload.providerNumber
-                );
-            } else {
-                timeSlotsResponse = await useMainStore().getMobileTimeSlots(storeAction.payload.startDate, storeAction.payload.endDate);
-            }
-
-            timeSlotsResponsesData.estimatedServiceMinutesMinimum = timeSlotsResponse.data.estimatedServiceMinutesMinimum;
-            timeSlotsResponsesData.estimatedServiceMinutesMaximum = timeSlotsResponse.data.estimatedServiceMinutesMaximum;
-            timeSlotsResponsesData.days = [
-                ...timeSlotsResponsesData.days,
-                ...timeSlotsResponse.data.days
-            ];
-        }));
-    };
-
-    return makeParallelCalls().then(() => {
-        // sort days chronologically
-        timeSlotsResponsesData.days.sort(compareDayStrings);
-        return timeSlotsResponsesData;
-    });
+  return makeParallelCalls().then(() => {
+    // sort days chronologically
+    timeSlotsResponsesData.days.sort(compareDayStrings);
+    return timeSlotsResponsesData;
+  });
 };
 
 export default {
-    name: 'schedule-page',
-    components: {
-        siteHeader,
-        siteSubHeader,
-        locationAlerts,
-        datePicker,
-        timeSlotModalQuestion,
-        siteFooter,
-        textBlock,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form
-    },
-    mixins: [BaseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        let preSelectedDate = await useMainStore().order.schedule.date;
-        if (!preSelectedDate || preSelectedDate.startTime === null) {
-            preSelectedDate = null;
-        }
-
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-
-        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
-            selectableDatesSetting: 'custom',
-            initialViewRowsToShow: 5,
-            customSelectableDatesCallback: getAvailableDates,
-            preSelectedDate
-        });
-
-        const premiumFeePromise = useMainStore().getMobilePremiumFee();
-
-        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
-            if (result.data) {
-                return useMainStore().priceOrderItemsAndSaveServerData(result.data);
-            }
-            return result.data;
-        });
-
-        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
-            useMainStore().order.serviceLocation.zipCodeCtu,
-            useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
-        );
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            },
-            {
-                resultKey: 'alertReasons',
-                promise: alertReasonsPromise
-            },
-            {
-                resultKey: 'datePickerInitialData',
-                promise: datePickerInitialDataPromise
-            },
-            {
-                resultKey: 'premiumFeeWithPrice',
-                promise: premiumFeeWithPricePromise
-            }
-        ];
-
-        // use resultMap to populate layout content.
-        const resultMap = await settleAllPromises(promiseResultMap);
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
-            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
-            vm.setData(resultMap.datePickerInitialData.initialShopTimeSlotsResponse, resultMap.premiumFeeWithPrice);
-            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
-        });
-    },
-    setup() {
-        const mainStore = useMainStore();
-        return { mainStore };
-    },
-    data() {
-        return {
-            selectedDate: this.getSelectedDate(),
-            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
-            selectableDatesData: [],
-            mobilePremiumAppointmentFee: null
-        };
-    },
-    computed: {
-        ChangeShopLinkText() {
-            return this.getCmsContent('ChangeShopLink', 'Text');
-        },
-        ChangeShopLink() {
-            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
-        },
-        appointmentType() {
-            return useMainStore().order.serviceLocation.appointmentType;
-        },
-        timeSlotsForSelectedDate() {
-            if (!this.selectedDate) {
-                return null;
-            }
-
-            return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
-        },
-        supportingItems() {
-            return useMainStore().lineItems.supportingItems;
-        }
-    },
-    watch: {
-        selectedDate(newValue, oldValue) {
-            // Clear time slot selection if date selected changes
-            if (newValue !== oldValue) {
-                this.selectedTimeSlotInfo = {
-                    timeSlot: {
-                        date: null,
-                        routeCode: null,
-                        startTime: null,
-                        endTime: null,
-                        jobMaxMinutes: null,
-                        jobMinMinutes: null
-                    },
-                    isPremiumAppointment: null
-                };
-            }
-        },
-        selectedTimeSlotInfo(newValue) {
-            this.updateFooterButtonText(newValue);
-        }
-    },
-    methods: {
-        splitCopyOnCMSPlaceHolder,
-        arePagePrerequisitesValid() {
-            const { serviceLocation } = useMainStore().order;
-            const serviceLocationPreReqs = serviceLocation.zipCode
-                && serviceLocation.zipCodeCtu
-                && serviceLocation.appointmentType
-                && ((serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
-                        || serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)
-                    || serviceLocation.provider.providerNumber);
-            const supportingItems = this.supportingItems !== null;
-            const damageInfo =
-                useMainStore().order.damage.isRepair
-                || (useMainStore().order.lineItems?.glassParts != null
-                    && useMainStore().order.lineItems.glassParts.length > 0);
-
-            return serviceLocationPreReqs && supportingItems && damageInfo;
-        },
-        setData(initialShopTimeSlotsResponse, premiumFeeWithPriceResponse) {
-            this.selectableDatesData = initialShopTimeSlotsResponse;
-            this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
-                ? premiumFeeWithPriceResponse[0]
-                : null;
-        },
-        async getAvailableDatesMethod(startDate, endDate) {
-            const newShopTimeSlots = await getAvailableDates(
-                startDate,
-                endDate,
-                this.appointmentType,
-                this.mainStore.order.serviceLocation.provider.providerNumber
-            );
-            // ADD API CALL RESULTS TO EXISTING DATE DATA
-            this.selectableDatesData.days = this.selectableDatesData.days.concat(newShopTimeSlots.days);
-            return newShopTimeSlots;
-        },
-        getAvailableDates,
-        getServiceZipCtuCodeFromStore() {
-            return this.mainStore.order.serviceLocation.zipCodeCtu;
-        },
-        openInshopTimeSlotsModal() {
-            this.$refs.timeSlotModalQuestion.openModal();
-        },
-        getSelectedDate() {
-            return this.mainStore.order.schedule.date;
-        },
-        getSelectedTimeSlotInfo() {
-            const isPremiumAppointment =
-                !!(this.supportingItems?.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE) ?? [])
-                    .length > 0;
-
-            const selectedTimeSlotInfo = {
-                timeSlot: this.mainStore.order.schedule,
-                isPremiumAppointment
-            };
-
-            return selectedTimeSlotInfo;
-        },
-        timeSlotModalClosed() {
-            // Clear the selectedDate if no timeSlot has been selected
-            if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
-                this.selectedDate = null;
-            }
-        },
-        updateFooterButtonText(timeSlotInfo) {
-            let navbarButtonText;
-            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
-                navbarButtonText = 'Continue';
-            } else {
-                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(timeSlotInfo.timeSlot.date)}`;
-                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(timeSlotInfo.timeSlot.startTime)}`;
-                } else if (
-                    this.appointmentType === AppointmentTypeStrings.MOBILE
-                    && !timeSlotInfo.isPremiumAppointment
-                ) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.startTime,
-                        true
-                    )} - ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.endTime,
-                        true
-                    )}`;
-                }
-            }
-            this.$refs.navbar.updateButtonText(navbarButtonText);
-        },
-        convertSelectedDateToShortMonthAndDay(selectedDate) {
-            // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = convertDateStringToDate(selectedDate);
-            return dateObject.toLocaleDateString('en-us', { month: 'short', day: 'numeric' });
-        },
-        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
-            // Expected input: "HH:MM"
-            let hours = parseInt(militaryTimeInput.split(':')[0], 10);
-            const minutes = militaryTimeInput.split(':')[1];
-            const meridianNotation = hours > 11 ? 'PM' : 'AM';
-
-            if (hours > 12) {
-                hours -= 12;
-            }
-
-            if (shouldTrimMinutesIfEmpty && minutes === '00') {
-                return `${hours} ${meridianNotation}`;
-            }
-            return `${hours}:${minutes} ${meridianNotation}`;
-        },
-        forwardButtonAction() {
-            this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
-
-            this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
-        }
+  name: "schedule-page",
+  components: {
+    siteHeader,
+    siteSubHeader,
+    locationAlerts,
+    datePicker,
+    timeSlotModalQuestion,
+    siteFooter,
+    textBlock,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+  },
+  mixins: [BaseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    let preSelectedDate = await useMainStore().order.schedule.date;
+    if (!preSelectedDate || preSelectedDate.startTime === null) {
+      preSelectedDate = null;
     }
+
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+
+    const datePickerInitialDataPromise =
+      await datePicker.methods.loadInitialData({
+        selectableDatesSetting: "custom",
+        initialViewRowsToShow: 5,
+        customSelectableDatesCallback: getAvailableDates,
+        preSelectedDate,
+      });
+
+    const premiumFeePromise = useMainStore().getMobilePremiumFee();
+
+    const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
+      if (result.data) {
+        return useMainStore().priceOrderItemsAndSaveServerData(result.data);
+      }
+      return result.data;
+    });
+
+    const alertReasonsPromise = locationAlerts.methods.loadInitialData(
+      useMainStore().order.serviceLocation.zipCodeCtu,
+      useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
+    );
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+      {
+        resultKey: "alertReasons",
+        promise: alertReasonsPromise,
+      },
+      {
+        resultKey: "datePickerInitialData",
+        promise: datePickerInitialDataPromise,
+      },
+      {
+        resultKey: "premiumFeeWithPrice",
+        promise: premiumFeeWithPricePromise,
+      },
+    ];
+
+    // use resultMap to populate layout content.
+    const resultMap = await settleAllPromises(promiseResultMap);
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+      vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
+      vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
+      vm.setData(
+        resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
+        resultMap.premiumFeeWithPrice
+      );
+      vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
+    });
+  },
+  setup() {
+    const mainStore = useMainStore();
+    return { mainStore };
+  },
+  data() {
+    return {
+      selectedDate: this.getSelectedDate(),
+      selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
+      selectableDatesData: [],
+      mobilePremiumAppointmentFee: null,
+    };
+  },
+  computed: {
+    ChangeShopLinkText() {
+      return this.getCmsContent("ChangeShopLink", "Text");
+    },
+    ChangeShopLink() {
+      return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
+    },
+    appointmentType() {
+      return useMainStore().order.serviceLocation.appointmentType;
+    },
+    timeSlotsForSelectedDate() {
+      if (!this.selectedDate) {
+        return null;
+      }
+
+      return this.selectableDatesData.days?.find(
+        (selectableDate) => selectableDate.date === this.selectedDate
+      );
+    },
+    supportingItems() {
+      return useMainStore().lineItems.supportingItems;
+    },
+  },
+  watch: {
+    selectedDate(newValue, oldValue) {
+      // Clear time slot selection if date selected changes
+      if (newValue !== oldValue) {
+        this.selectedTimeSlotInfo = {
+          timeSlot: {
+            date: null,
+            routeCode: null,
+            startTime: null,
+            endTime: null,
+            jobMaxMinutes: null,
+            jobMinMinutes: null,
+          },
+          isPremiumAppointment: null,
+        };
+      }
+    },
+    selectedTimeSlotInfo(newValue) {
+      this.updateFooterButtonText(newValue);
+    },
+  },
+  methods: {
+    splitCopyOnCMSPlaceHolder,
+    arePagePrerequisitesValid() {
+      const { serviceLocation } = useMainStore().order;
+      const serviceLocationPreReqs =
+        serviceLocation.zipCode &&
+        serviceLocation.zipCodeCtu &&
+        serviceLocation.appointmentType &&
+        (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
+          serviceLocation.appointmentType ===
+            AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP ||
+          serviceLocation.provider.providerNumber);
+      const supportingItems = this.supportingItems !== null;
+      const damageInfo =
+        useMainStore().order.damage.isRepair ||
+        (useMainStore().order.lineItems?.glassParts != null &&
+          useMainStore().order.lineItems.glassParts.length > 0);
+
+      return serviceLocationPreReqs && supportingItems && damageInfo;
+    },
+    setData(initialShopTimeSlotsResponse, premiumFeeWithPriceResponse) {
+      this.selectableDatesData = initialShopTimeSlotsResponse;
+      this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
+        ? premiumFeeWithPriceResponse[0]
+        : null;
+    },
+    async getAvailableDatesMethod(startDate, endDate) {
+      const newShopTimeSlots = await getAvailableDates(
+        startDate,
+        endDate,
+        this.appointmentType,
+        this.mainStore.order.serviceLocation.provider.providerNumber
+      );
+      // ADD API CALL RESULTS TO EXISTING DATE DATA
+      this.selectableDatesData.days = this.selectableDatesData.days.concat(
+        newShopTimeSlots.days
+      );
+      return newShopTimeSlots;
+    },
+    getAvailableDates,
+    getServiceZipCtuCodeFromStore() {
+      return this.mainStore.order.serviceLocation.zipCodeCtu;
+    },
+    openInshopTimeSlotsModal() {
+      this.$refs.timeSlotModalQuestion.openModal();
+    },
+    getSelectedDate() {
+      return this.mainStore.order.schedule.date;
+    },
+    getSelectedTimeSlotInfo() {
+      const isPremiumAppointment =
+        !!(
+          this.supportingItems?.filter(
+            (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
+          ) ?? []
+        ).length > 0;
+
+      const selectedTimeSlotInfo = {
+        timeSlot: this.mainStore.order.schedule,
+        isPremiumAppointment,
+      };
+
+      return selectedTimeSlotInfo;
+    },
+    timeSlotModalClosed() {
+      // Clear the selectedDate if no timeSlot has been selected
+      if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
+        this.selectedDate = null;
+      }
+    },
+    updateFooterButtonText(timeSlotInfo) {
+      let navbarButtonText;
+      if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
+        navbarButtonText = "Continue";
+      } else {
+        navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
+          timeSlotInfo.timeSlot.date
+        )}`;
+        if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+          navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+            timeSlotInfo.timeSlot.startTime
+          )}`;
+        } else if (
+          this.appointmentType === AppointmentTypeStrings.MOBILE &&
+          !timeSlotInfo.isPremiumAppointment
+        ) {
+          navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+            timeSlotInfo.timeSlot.startTime,
+            true
+          )} - ${this.getDisplayTextForMilitaryTime(
+            timeSlotInfo.timeSlot.endTime,
+            true
+          )}`;
+        }
+      }
+      this.$refs.navbar.updateButtonText(navbarButtonText);
+    },
+    convertSelectedDateToShortMonthAndDay(selectedDate) {
+      // This conversion ensures we don't get get GMT induced date changes
+      const dateObject = convertDateStringToDate(selectedDate);
+      return dateObject.toLocaleDateString("en-us", {
+        month: "short",
+        day: "numeric",
+      });
+    },
+    getDisplayTextForMilitaryTime(
+      militaryTimeInput,
+      shouldTrimMinutesIfEmpty = false
+    ) {
+      // Expected input: "HH:MM"
+      let hours = parseInt(militaryTimeInput.split(":")[0], 10);
+      const minutes = militaryTimeInput.split(":")[1];
+      const meridianNotation = hours > 11 ? "PM" : "AM";
+
+      if (hours > 12) {
+        hours -= 12;
+      }
+
+      if (shouldTrimMinutesIfEmpty && minutes === "00") {
+        return `${hours} ${meridianNotation}`;
+      }
+      return `${hours}:${minutes} ${meridianNotation}`;
+    },
+    forwardButtonAction() {
+      this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
+
+      this.$router.navigate(
+        this.navigationScenarios.CLICKED_FORWARD,
+        this.$route
+      );
+    },
+  },
 };
 </script>
 
@@ -436,23 +500,24 @@ 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;
+  }
 }
 
 :deep(.text-link-small) {
-    a, .btn-link {
-        font-size: 0.875rem;
-        line-height: 1.5;
-    }
+  a,
+  .btn-link {
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
 }
 
 :deep(.subheader-primary) {
-    h5.dark-header {
-        margin-bottom: 0.25rem !important;
-    }
+  h5.dark-header {
+    margin-bottom: 0.25rem !important;
+  }
 }
 </style>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 5169ee64..113bfad1 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -7,7 +7,7 @@
   >
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
-        <div class="col-md-6">
+        <div class="col-md-6 px-0 px-md-2">
           <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index e5bdd97a..3045c593 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -7,7 +7,7 @@
   >
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
-        <div class="col-md-6">
+        <div class="col-md-6 px-0 px-md-2">
           <siteHeader cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index 23278486..3112f083 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -1,117 +1,126 @@
 <template>
-    <Form
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="select-car">
-                    <div class="container-fluid pb-2">
-                        <div class="row px-3">
-                            <div class="col">
-                                <div class="select-car-form rounded">
-                                    <VehicleBanner
-                                        class="mt-2 mb-4"
-                                        cmsWidgetName="VehicleBannerWidget"
-                                        :displayGenericVehicleImage="false" />
-                                    <SiteSubHeader
-                                        cmsWidgetName="SiteSubHeaderWidget"
-                                        class="mt-5 mb-2" />
-                                    <VinLookupMethods
-                                        ref="VinLookupMethods"
-                                        v-model="selectedVinLookupMethod"
-                                        cmsWidgetName="VINLookupMethod"
-                                        groupName="VinLookupMethods" />
-                                    <SiteFooter
-                                        cmsWidgetName="SiteFooterWidget"
-                                        :isForwardActionDisabled="isForwardActionDisabled"
-                                        class="mt-5"
-                                        @backClicked="navigateBack"
-                                        @forwardClicked="forwardButtonAction" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+  <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
+    <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 cmsWidgetName="SiteHeaderWidget" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <div class="select-car-form rounded">
+            <VehicleBanner
+              class="mt-2 mb-4"
+              cmsWidgetName="VehicleBannerWidget"
+              :displayGenericVehicleImage="false"
+            />
+            <SiteSubHeader
+              cmsWidgetName="SiteSubHeaderWidget"
+              class="mt-5 mb-2"
+            />
+            <VinLookupMethods
+              ref="VinLookupMethods"
+              v-model="selectedVinLookupMethod"
+              cmsWidgetName="VINLookupMethod"
+              groupName="VinLookupMethods"
+            />
+            <SiteFooter
+              cmsWidgetName="SiteFooterWidget"
+              :isForwardActionDisabled="isForwardActionDisabled"
+              class="mt-5"
+              @backClicked="navigateBack"
+              @forwardClicked="forwardButtonAction"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 <script>
 // Import Supporting Files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import { Form } from 'vee-validate';
-import BaseFormMixin from '@/mixins/base-form-mixin';
-import vinLookupMethodSelections from '@/constants/vin-lookup-methods';
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import { Form } from "vee-validate";
+import BaseFormMixin from "@/mixins/base-form-mixin";
+import vinLookupMethodSelections from "@/constants/vin-lookup-methods";
 
 // Import Component
-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 VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.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 VehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
+import VinLookupMethods from "@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue";
 
 export default {
-    name: 'vehicle-lookup',
-    components: {
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        SiteFooter,
-        SiteHeader,
-        SiteSubHeader,
-        VehicleBanner,
-        VinLookupMethods
-    },
-    mixins: [BaseFormMixin],
-    async beforeRouteEnter(to, from, next) {
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+  name: "vehicle-lookup",
+  components: {
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    SiteFooter,
+    SiteHeader,
+    SiteSubHeader,
+    VehicleBanner,
+    VinLookupMethods,
+  },
+  mixins: [BaseFormMixin],
+  async beforeRouteEnter(to, from, next) {
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
-        ];
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
 
-        const resultMap = await settleAllPromises(promiseResultMap);
+    const resultMap = await settleAllPromises(promiseResultMap);
 
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.VinLookupMethods.initializeComponent();
-        });
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+      vm.$refs.VinLookupMethods.initializeComponent();
+    });
+  },
+  data() {
+    return {
+      selectedVinLookupMethod: null,
+    };
+  },
+  computed: {
+    isForwardActionDisabled() {
+      return this.selectedVinLookupMethod === null;
     },
-    data() {
-        return {
-            selectedVinLookupMethod: null
-        };
+  },
+  methods: {
+    arePagePrerequisiteValid() {
+      return true;
     },
-    computed: {
-        isForwardActionDisabled() {
-            return this.selectedVinLookupMethod === null;
-        }
+    forwardButtonAction() {
+      switch (this.selectedVinLookupMethod) {
+        case vinLookupMethodSelections.MANUALVIN:
+          this.$router.navigate(
+            this.navigationScenarios.SELECTED_MANUAL_VIN,
+            this.$route
+          );
+          break;
+        case vinLookupMethodSelections.LICENSEPLATE:
+          this.$router.navigate(
+            this.navigationScenarios.SELECTED_LICENSE_PLATE,
+            this.$route
+          );
+          break;
+        case vinLookupMethodSelections.HOMEADDRESS:
+          this.$router.navigate(
+            this.navigationScenarios.SELECTED_HOME_ADDRESS,
+            this.$route
+          );
+          break;
+        default:
+          break;
+      }
     },
-    methods: {
-        arePagePrerequisiteValid() {
-            return true;
-        },
-        forwardButtonAction() {
-            switch (this.selectedVinLookupMethod) {
-                case vinLookupMethodSelections.MANUALVIN:
-                    this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route);
-                    break;
-                case vinLookupMethodSelections.LICENSEPLATE:
-                    this.$router.navigate(this.navigationScenarios.SELECTED_LICENSE_PLATE, this.$route);
-                    break;
-                case vinLookupMethodSelections.HOMEADDRESS:
-                    this.$router.navigate(this.navigationScenarios.SELECTED_HOME_ADDRESS, this.$route);
-                    break;
-                default:
-                    break;
-            }
-        },
-        resetDependentState() {}
-    }
+    resetDependentState() {},
+  },
 };
 </script>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index d8b4aac1..f7437c1b 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -2,7 +2,7 @@
   <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">
+        <div class="col-md-6 px-0 px-md-2">
           <siteHeader cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
diff --git a/src/layouts/vehicle-selection/vehicle-selection.vue b/src/layouts/vehicle-selection/vehicle-selection.vue
index 05a9e8ef..16c42dde 100644
--- a/src/layouts/vehicle-selection/vehicle-selection.vue
+++ b/src/layouts/vehicle-selection/vehicle-selection.vue
@@ -1,240 +1,247 @@
 <template>
-   <Form
+  <Form
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit">
-   <div class="page-container-grouped-styles position-relative">
-       <div class="fade-on-route-transition position-relative">
-           <siteHeader cmsWidgetName="SiteHeaderWidget" />
-           <div class="select-car">
-               <div class="container-fluid pb-2">
-                   <div class="row">
-                       <div class="col">
-                           <div class="select-car-form rounded">
-                                <siteSubHeader
-                                    cmsWidgetName="SiteSubHeaderWidget"
-                                    class="siteSubHeader"
-                                    justification="center"
-                                    darkGraySubText />
+    @invalidSubmit="onInvalidSubmit"
+  >
+    <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 class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <siteSubHeader
+            cmsWidgetName="SiteSubHeaderWidget"
+            class="siteSubHeader"
+            justification="center"
+            darkGraySubText
+          />
 
-                                <vehicleQuestion
-                                    ref="vehicleYearQuestion"
-                                    v-model="selectedYear"
-                                    class="mb-2 mt-4"
-                                    cmsWidgetName="VehicleYearQuestion"
-                                    :updateValues="updateYearValues"
-                                    validationRules="year-required"
-                                    inputId="yearQuestionField" />
-                                <vehicleQuestion
-                                    ref="vehicleMakeQuestion"
-                                    v-model="selectedMake"
-                                    class="mb-2 mt-4"
-                                    cmsWidgetName="VehicleMakeQuestion"
-                                    :updateValues="updateMakeValues"
-                                    validationRules="make-required"
-                                    inputId="makeQuestionField" />
-                                <vehicleQuestion
-                                    ref="vehicleModelQuestion"
-                                    v-model="selectedModel"
-                                    class="mb-2 mt-4"
-                                    cmsWidgetName="VehicleModelQuestion"
-                                    :updateValues="updateModelValues"
-                                    validationRules="model-required"
-                                    inputId="modelQuestionField" />
-                                <vehicleQuestion
-                                    ref="vehicleStyleQuestion"
-                                    v-model="selectedStyle"
-                                    class="mb-2 mt-4"
-                                    cmsWidgetName="VehicleStyleQuestion"
-                                    :updateValues="updateStyleValues"
-                                    validationRules="style-required"
-                                    inputId="styleQuestionField" />
+          <vehicleQuestion
+            ref="vehicleYearQuestion"
+            v-model="selectedYear"
+            class="mb-2 mt-4"
+            cmsWidgetName="VehicleYearQuestion"
+            :updateValues="updateYearValues"
+            validationRules="year-required"
+            inputId="yearQuestionField"
+          />
+          <vehicleQuestion
+            ref="vehicleMakeQuestion"
+            v-model="selectedMake"
+            class="mb-2 mt-4"
+            cmsWidgetName="VehicleMakeQuestion"
+            :updateValues="updateMakeValues"
+            validationRules="make-required"
+            inputId="makeQuestionField"
+          />
+          <vehicleQuestion
+            ref="vehicleModelQuestion"
+            v-model="selectedModel"
+            class="mb-2 mt-4"
+            cmsWidgetName="VehicleModelQuestion"
+            :updateValues="updateModelValues"
+            validationRules="model-required"
+            inputId="modelQuestionField"
+          />
+          <vehicleQuestion
+            ref="vehicleStyleQuestion"
+            v-model="selectedStyle"
+            class="mb-2 mt-4"
+            cmsWidgetName="VehicleStyleQuestion"
+            :updateValues="updateStyleValues"
+            validationRules="style-required"
+            inputId="styleQuestionField"
+          />
 
-                                <vehicleBanner
-                                    ref="banner"
-                                    cmsWidgetName="VehicleBannerWidget"
-                                    :displayGenericVehicleImage="displayGeneric"
-                                    class="mt-5 mb-3" />
+          <vehicleBanner
+            ref="banner"
+            cmsWidgetName="VehicleBannerWidget"
+            :displayGenericVehicleImage="displayGeneric"
+            class="mt-5 mb-3"
+          />
 
-                                <siteFooter
-                                    ref="siteFooter"
-                                    class="mt-5"
-                                    cmsWidgetName="SiteFooterWidget"
-                                    :isForwardActionDisabled="!meta.valid"
-                                    @ForwardClicked="forwardButtonAction"
-                                    @backClicked="navigateBack" />
-                           </div>
-                       </div>
-                   </div>
-               </div>
-           </div>
-       </div>
-   </div>
-</Form>
+          <siteFooter
+            ref="siteFooter"
+            class="mt-5"
+            cmsWidgetName="SiteFooterWidget"
+            :isForwardActionDisabled="!meta.valid"
+            @ForwardClicked="forwardButtonAction"
+            @backClicked="navigateBack"
+          />
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 
 <script>
 // Components
-import siteHeader from '@/iss-components/site-header/site-header.vue';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import vehicleQuestion from '@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue';
-import { useMainStore } from '@/store';
+import siteHeader from "@/iss-components/site-header/site-header.vue";
+import siteFooter from "@/iss-components/site-footer/site-footer.vue";
+import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
+import vehicleQuestion from "@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue";
+import { useMainStore } from "@/store";
 
 // Supporting files
-import baseFormMixin from '@/mixins/base-form-mixin.js';
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import { Form, defineRule } from 'vee-validate';
-import { required } from '@/helpers/validation-rules';
-import errorMessages from '@/constants/error-messages';
+import baseFormMixin from "@/mixins/base-form-mixin.js";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import { Form, defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import errorMessages from "@/constants/error-messages";
 
 // define validation rules
-defineRule('year-required', required(errorMessages.YEAR_REQUIRED));
-defineRule('make-required', required(errorMessages.MAKE_REQUIRED));
-defineRule('model-required', required(errorMessages.MODEL_REQUIRED));
-defineRule('style-required', required(errorMessages.STYLE_REQUIRED));
+defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
+defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
+defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
+defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
 
 export default {
-    name: 'vehicle-selection',
-    components: {
-        siteHeader,
-        siteSubHeader,
-        vehicleBanner,
-        siteFooter,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        vehicleQuestion
-    },
-    mixins: [baseFormMixin],
+  name: "vehicle-selection",
+  components: {
+    siteHeader,
+    siteSubHeader,
+    vehicleBanner,
+    siteFooter,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    vehicleQuestion,
+  },
+  mixins: [baseFormMixin],
 
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
-        ];
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
 
-        const resultMap = await settleAllPromises(promiseResultMap);
+    const resultMap = await settleAllPromises(promiseResultMap);
 
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-        });
-    },
-    props: {
-        cmsWidgetName: String,
-        validationRules: String
-    },
-    data() {
-        const { year, make, model, style } = useMainStore().order.vehicle;
-        return {
-            selectedYear: year,
-            selectedMake: make,
-            selectedModel: model,
-            selectedStyle: style
-        };
-    },
-    computed: {
-        displayGeneric() {
-            return !this.selectedStyle;
-        }
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  props: {
+    cmsWidgetName: String,
+    validationRules: String,
+  },
+  data() {
+    const { year, make, model, style } = useMainStore().order.vehicle;
+    return {
+      selectedYear: year,
+      selectedMake: make,
+      selectedModel: model,
+      selectedStyle: style,
+    };
+  },
+  computed: {
+    displayGeneric() {
+      return !this.selectedStyle;
     },
+  },
 
-    watch: {
-        selectedYear(value) {
-            this.mainStore.updateVehicleYear(value);
-            this.$refs.vehicleMakeQuestion.clearValues();
-            if (value) {
-                this.$refs.vehicleMakeQuestion.getNewValues();
-            }
-        },
-        selectedMake(value) {
-            this.mainStore.updateVehicleMake(value);
-            this.$refs.vehicleModelQuestion.clearValues();
-            if (value) {
-                this.$refs.vehicleModelQuestion.getNewValues();
-            }
-        },
-        selectedModel(value) {
-            this.mainStore.updateVehicleModel(value);
-            this.$refs.vehicleStyleQuestion.clearValues();
-            if (value) {
-                this.$refs.vehicleStyleQuestion.getNewValues();
-            }
-        },
-        selectedStyle(value) {
-            this.mainStore.updateVehicleStyle(value);
-            this.mainStore.setVehicle();
-        }
+  watch: {
+    selectedYear(value) {
+      this.mainStore.updateVehicleYear(value);
+      this.$refs.vehicleMakeQuestion.clearValues();
+      if (value) {
+        this.$refs.vehicleMakeQuestion.getNewValues();
+      }
     },
-    mounted() {
-        this.$refs.vehicleYearQuestion.getNewValues();
-        if (this.selectedYear) {
-            this.$refs.vehicleMakeQuestion.getNewValues();
-        }
-        if (this.selectedMake) {
-            this.$refs.vehicleModelQuestion.getNewValues();
-        }
-        if (this.selectedModel) {
-            this.$refs.vehicleStyleQuestion.getNewValues();
-        }
+    selectedMake(value) {
+      this.mainStore.updateVehicleMake(value);
+      this.$refs.vehicleModelQuestion.clearValues();
+      if (value) {
+        this.$refs.vehicleModelQuestion.getNewValues();
+      }
     },
-    methods: {
-        arePagePrerequisitesValid() {
-            return true;
-        },
-        async forwardButtonAction() {
-            return this.navigateForward();
-        },
-
-        navigateForward() {
-            this.mainStore.setVehicle().then(() => {
-                if (this.mainStore.isBailout) {
-                    this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT, this.$route);
-                    return;
-                }
-
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD,
-                    this.$route
-                );
-            });
-        },
-        async updateYearValues() {
-            return useMainStore().getVehicleYears();
-        },
-        async updateMakeValues() {
-            return this.mainStore.getVehicleMakes();
-        },
-        async updateModelValues() {
-            return this.mainStore.getVehicleModels();
-        },
-        async updateStyleValues() {
-            return this.mainStore.getVehicleStyles();
-        }
+    selectedModel(value) {
+      this.mainStore.updateVehicleModel(value);
+      this.$refs.vehicleStyleQuestion.clearValues();
+      if (value) {
+        this.$refs.vehicleStyleQuestion.getNewValues();
+      }
+    },
+    selectedStyle(value) {
+      this.mainStore.updateVehicleStyle(value);
+      this.mainStore.setVehicle();
+    },
+  },
+  mounted() {
+    this.$refs.vehicleYearQuestion.getNewValues();
+    if (this.selectedYear) {
+      this.$refs.vehicleMakeQuestion.getNewValues();
     }
+    if (this.selectedMake) {
+      this.$refs.vehicleModelQuestion.getNewValues();
+    }
+    if (this.selectedModel) {
+      this.$refs.vehicleStyleQuestion.getNewValues();
+    }
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+      return true;
+    },
+    async forwardButtonAction() {
+      return this.navigateForward();
+    },
+
+    navigateForward() {
+      this.mainStore.setVehicle().then(() => {
+        if (this.mainStore.isBailout) {
+          this.$router.navigate(
+            this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+            this.$route
+          );
+          return;
+        }
+
+        this.$router.navigate(
+          this.navigationScenarios.CLICKED_FORWARD,
+          this.$route
+        );
+      });
+    },
+    async updateYearValues() {
+      return useMainStore().getVehicleYears();
+    },
+    async updateMakeValues() {
+      return this.mainStore.getVehicleMakes();
+    },
+    async updateModelValues() {
+      return this.mainStore.getVehicleModels();
+    },
+    async updateStyleValues() {
+      return this.mainStore.getVehicleStyles();
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-    .select-car-form {
-        margin-left: .75rem;
-        margin-right: .75rem;
-    }
-    .siteSubHeader {
-        margin-top: 1.5rem;
-    }
+.select-car-form {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+.siteSubHeader {
+  margin-top: 1.5rem;
+}
 
-    .subheader-secondary {
-        margin-top: .5rem;
-        padding: 0px;
-    }
+.subheader-secondary {
+  margin-top: 0.5rem;
+  padding: 0px;
+}
 </style>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 50f146ba..2eb1f1de 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,283 +1,308 @@
 <template>
-    <Form
-        ref="theForm"
-        v-slot="{ meta }"
-        @submit="onSubmit"
-        @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="select-car">
-                    <div class="container-fluid pb-2">
-                        <div class="row px-3">
-                            <div class="col">
-                                <div class="select-car-form rounded">
-                                    <vehicleBanner
-                                        class="mt-2 mb-4"
-                                        cmsWidgetName="VehicleBannerWidget"
-                                        :displayGenericVehicleImage="!carIdIsValid" />
-                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-                                    <vinLookupAlerts
-                                        class="mt-5"
-                                        :activeAlertType="activeVehicleLookupAlertType" />
-                                    <vinQuestion
-                                        v-model="vin"
-                                        :mask="vinMask"
-                                        :isDisabled="vinPopulatedOnPageLoad"
-                                        textPosition="left" />
-                                    <vinLocationInformation />
-                                    <siteFooter
-                                        ref="siteFooter"
-                                        cmsWidgetName="SiteFooterWidget"
-                                        :isForwardActionDisabled="!meta.valid"
-                                        class="mt-5"
-                                        @backClicked="navigateBack"
-                                        @forwardClicked="forwardButtonAction" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </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 px-0 px-md-2">
+          <siteHeader cmsWidgetName="SiteHeaderWidget" />
         </div>
-    </Form>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <div class="select-car-form rounded">
+            <vehicleBanner
+              class="mt-2 mb-4"
+              cmsWidgetName="VehicleBannerWidget"
+              :displayGenericVehicleImage="!carIdIsValid"
+            />
+            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+            <vinLookupAlerts
+              class="mt-5"
+              :activeAlertType="activeVehicleLookupAlertType"
+            />
+            <vinQuestion
+              v-model="vin"
+              :mask="vinMask"
+              :isDisabled="vinPopulatedOnPageLoad"
+              textPosition="left"
+            />
+            <vinLocationInformation />
+            <siteFooter
+              ref="siteFooter"
+              cmsWidgetName="SiteFooterWidget"
+              :isForwardActionDisabled="!meta.valid"
+              class="mt-5"
+              @backClicked="navigateBack"
+              @forwardClicked="forwardButtonAction"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Form>
 </template>
 <script>
 // Import Supporting Files
-import { computed } from 'vue';
-import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import { isGlassAvailableForCarId } from '@/helpers/damage-helper';
-import settleAllPromises from '@/helpers/layout-helper';
-import routerParams from '@/router/router-constants/router-params';
-import { useMainStore } from '@/store';
+import { computed } from "vue";
+import vehicleLookupAlertTypes from "@/constants/vehicle-lookup-alert-types";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
+import settleAllPromises from "@/helpers/layout-helper";
+import routerParams from "@/router/router-constants/router-params";
+import { useMainStore } from "@/store";
 
 // Import Component
-import baseFormMixin from '@/mixins/base-form-mixin';
-import vehicleQuestionsMixin from '@/mixins/vehicle-questions-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 vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-import vinLocationInformation from '@/layouts/vin-lookup/vin-location-information/vin-location-information.vue';
-import vinLookupAlerts from '@/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue';
-import vinQuestion from '@/layouts/vin-lookup/vin-question/vin-question.vue';
-import bailoutCode from '@/constants/bailoutCode';
-import bailoutMessage from '@/constants/bailoutMessage';
+import baseFormMixin from "@/mixins/base-form-mixin";
+import vehicleQuestionsMixin from "@/mixins/vehicle-questions-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 vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
+import vinLocationInformation from "@/layouts/vin-lookup/vin-location-information/vin-location-information.vue";
+import vinLookupAlerts from "@/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue";
+import vinQuestion from "@/layouts/vin-lookup/vin-question/vin-question.vue";
+import bailoutCode from "@/constants/bailoutCode";
+import bailoutMessage from "@/constants/bailoutMessage";
 
 export default {
-    name: 'vin-lookup',
-    components: {
-        siteFooter,
-        siteHeader,
-        siteSubHeader,
-        // eslint-disable-next-line vue/no-reserved-component-names
-        Form,
-        vehicleBanner,
-        vinLocationInformation,
-        vinLookupAlerts,
-        vinQuestion
+  name: "vin-lookup",
+  components: {
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
+    // eslint-disable-next-line vue/no-reserved-component-names
+    Form,
+    vehicleBanner,
+    vinLocationInformation,
+    vinLookupAlerts,
+    vinQuestion,
+  },
+  mixins: [baseFormMixin, vehicleQuestionsMixin],
+  provide() {
+    return {
+      vehicleFromLookup: computed(() => this.vehicleFromLookup),
+    };
+  },
+  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);
+    });
+  },
+  setup() {
+    const mainStore = useMainStore();
+
+    return { mainStore };
+  },
+  data() {
+    const vin = this.getVinFromStore();
+    return {
+      activeVehicleLookupAlertType:
+        vin?.length > 0 && !this.hasValidCarId()
+          ? vehicleLookupAlertTypes.NOT_FOUND
+          : null,
+      needToLookupVehicle: true,
+      vehicleFromLookup: null,
+      vinWithNonMatchingCarId: vin?.length > 0 && !this.hasValidCarId(),
+      vin,
+      forwardButtonCarStyle: "",
+      vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId(),
+    };
+  },
+  computed: {
+    isCarIdDifferentFromTheStore() {
+      return (
+        this.vehicleFromLookup !== null &&
+        this.hasValidCarId() &&
+        this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
+      );
     },
-    mixins: [baseFormMixin, vehicleQuestionsMixin],
-    provide() {
-        return {
-            vehicleFromLookup: computed(() => this.vehicleFromLookup)
-        };
+    isTwoIdenticalYMMVehicleFound() {
+      if (this.vehicleFromLookup === null) {
+        return false;
+      }
+      const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+      const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+      return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
     },
-    async beforeRouteEnter(to, from, next) {
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+    vinMask() {
+      // TODO: Side effects in computed.
+      if (this.vinPopulatedOnPageLoad) {
+        // TODO: Modify to remove side effects in computed
+        this.activeVehicleLookupAlertType =
+          vehicleLookupAlertTypes.PERFECT_MATCH;
+        this.needToLookupVehicle = false;
+        const lastSixChars = this.vin.substring(11, this.vin.length);
+        return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
+      }
+      return "*****************";
+    },
+    carIdIsValid() {
+      return this.hasValidCarId();
+    },
+  },
+  watch: {
+    vin() {
+      this.resetActiveAlert();
+      this.$refs.siteFooter.enableForwardAction();
+      this.needToLookupVehicle = true;
+      this.$refs.siteFooter.updateButtonText(
+        this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
+      );
+    },
+  },
+  methods: {
+    arePagePrerequisiteValid() {
+      return true;
+    },
+    getVinFromStore() {
+      return this.mainStore.vehicle.vin;
+    },
+    hasValidCarId() {
+      return (
+        this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== "0"
+      );
+    },
+    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+    async forwardButtonAction() {
+      this.resetActiveAlert();
+      // Temp solution to reset the 'disabled' style on the Continue button
+      this.$refs.siteFooter.enableForwardAction();
 
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
-        ];
+      if (this.needToLookupVehicle) {
+        const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
 
-        const resultMap = await settleAllPromises(promiseResultMap);
+        if (vehicleLookupResponse.error) {
+          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
+          this.mainStore.setBailout(bailoutMessage.vehicleNotFound(this.vin));
+          this.resetVehicleFromLookup();
+          this.$refs.siteFooter.removeLoader();
+          // Temp solution to turn on 'disabled' style on the Continue button
+          //  because the form itself actually passes its client-side validation.
+          //  SSR-189 Scenario #4.
+          this.$refs.siteFooter.enableForwardAction();
+          return;
+        }
 
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
+        this.mainStore.resetBailout();
+
+        // Add vin bcs the response from the service doesn't contain vin
+        this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
+          vin: this.vin,
         });
-    },
-    setup() {
-        const mainStore = useMainStore();
+      }
 
-        return { mainStore };
+      if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
+        if (this.isTwoIdenticalYMMVehicleFound) {
+          this.activeVehicleLookupAlertType =
+            vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
+          this.forwardButtonCarStyle = this.vehicleFromLookup.style;
+        } else {
+          this.activeVehicleLookupAlertType =
+            vehicleLookupAlertTypes.NOT_MATCHED;
+        }
+
+        const vehicleYearMakeModelStyle =
+          // eslint-disable-next-line max-len
+          `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
+        this.$refs.siteFooter.updateButtonText(
+          `Continue with ${vehicleYearMakeModelStyle}`
+        );
+        this.$refs.siteFooter.removeLoader();
+
+        this.needToLookupVehicle = false;
+
+        return null;
+      }
+
+      let isSelectedGlassAvailableForVehicle = true;
+      if (this.isCarIdDifferentFromTheStore) {
+        isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
+          this.vehicleFromLookup.carId
+        );
+      }
+
+      // navigate back to vehicle-damage
+      if (
+        this.isCarIdDifferentFromTheStore &&
+        !isSelectedGlassAvailableForVehicle
+      ) {
+        this.mainStore.updateVehicle(this.vehicleFromLookup);
+        this.mainStore.resetDamageState();
+        this.$router.navigate(
+          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+          this.$route,
+          {},
+          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+        );
+
+        // navigate() doesn't stop the processing flow
+        return null;
+      }
+
+      // save vehicle to store if it hasn't already been saved
+      if (!this.vinPopulatedOnPageLoad) {
+        this.mainStore.updateVehicle(this.vehicleFromLookup);
+      }
+
+      if (this.vinWithNonMatchingCarId) {
+        this.$router.navigate(
+          this.navigationScenarios.CORRECTED_VIN_FROM_POLICY_VEHICLE,
+          this.$route
+        );
+        return null;
+      }
+
+      const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+      if (partsOrQuestionsResponse.error) {
+        // To Do: Need requirement on what to do here
+        window.console.error("Error on retrieving PartsOrQuestions");
+        this.$refs.siteFooter.removeLoader();
+        return null;
+      }
+
+      // Comes from vehicleQuestionsMixin.navigateForward()
+      await this.navigateForward(
+        partsOrQuestionsResponse.data.partsOrQuestions,
+        this
+      );
+
+      return null;
     },
-    data() {
-        const vin = this.getVinFromStore();
+    async lookupVehicleByVin(vin) {
+      try {
+        return await this.mainStore.lookupVehicleByVin(vin);
+      } catch (responseError) {
         return {
-            activeVehicleLookupAlertType: vin?.length > 0 && !this.hasValidCarId() ? vehicleLookupAlertTypes.NOT_FOUND : null,
-            needToLookupVehicle: true,
-            vehicleFromLookup: null,
-            vinWithNonMatchingCarId: vin?.length > 0 && !this.hasValidCarId(),
-            vin,
-            forwardButtonCarStyle: '',
-            vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId()
+          error: {
+            status: responseError.status,
+          },
         };
+      }
     },
-    computed: {
-        isCarIdDifferentFromTheStore() {
-            return (
-                this.vehicleFromLookup !== null && this.hasValidCarId()
-                && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
-            );
-        },
-        isTwoIdenticalYMMVehicleFound() {
-            if (this.vehicleFromLookup === null) {
-                return false;
-            }
-            const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
-            const vinYmmExpected =
-                `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-            return (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase());
-        },
-        vinMask() {
-            // TODO: Side effects in computed.
-            if (this.vinPopulatedOnPageLoad) {
-                // TODO: Modify to remove side effects in computed
-                this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
-                this.needToLookupVehicle = false;
-                const lastSixChars = this.vin.substring(11, this.vin.length);
-                return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
-            }
-            return '*****************';
-        },
-        carIdIsValid() {
-            return this.hasValidCarId();
-        }
+    resetActiveAlert() {
+      this.activeVehicleLookupAlertType = null;
     },
-    watch: {
-        vin() {
-            this.resetActiveAlert();
-            this.$refs.siteFooter.enableForwardAction();
-            this.needToLookupVehicle = true;
-            this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
-        }
+    resetVehicleFromLookup() {
+      this.vehicleFromLookup = null;
     },
-    methods: {
-        arePagePrerequisiteValid() {
-            return true;
-        },
-        getVinFromStore() {
-            return this.mainStore.vehicle.vin;
-        },
-        hasValidCarId() {
-            return this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== '0';
-        },
-        // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-        async forwardButtonAction() {
-            this.resetActiveAlert();
-            // Temp solution to reset the 'disabled' style on the Continue button
-            this.$refs.siteFooter.enableForwardAction();
-
-            if (this.needToLookupVehicle) {
-                const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
-
-                if (vehicleLookupResponse.error) {
-                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
-                    this.mainStore.setBailout(bailoutMessage.vehicleNotFound(this.vin));
-                    this.resetVehicleFromLookup();
-                    this.$refs.siteFooter.removeLoader();
-                    // Temp solution to turn on 'disabled' style on the Continue button
-                    //  because the form itself actually passes its client-side validation.
-                    //  SSR-189 Scenario #4.
-                    this.$refs.siteFooter.enableForwardAction();
-                    return;
-                }
-
-                this.mainStore.resetBailout();
-
-                // Add vin bcs the response from the service doesn't contain vin
-                this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
-            }
-
-            if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
-                if (this.isTwoIdenticalYMMVehicleFound) {
-                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
-                    this.forwardButtonCarStyle = this.vehicleFromLookup.style;
-                } else {
-                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
-                }
-
-                const vehicleYearMakeModelStyle =
-                    // eslint-disable-next-line max-len
-                    `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
-                this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
-                this.$refs.siteFooter.removeLoader();
-
-                this.needToLookupVehicle = false;
-
-                return null;
-            }
-
-            let isSelectedGlassAvailableForVehicle = true;
-            if (this.isCarIdDifferentFromTheStore) {
-                isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
-            }
-
-            // navigate back to vehicle-damage
-            if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
-                this.mainStore.updateVehicle(this.vehicleFromLookup);
-                this.mainStore.resetDamageState();
-                this.$router.navigate(
-                    this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-                    this.$route,
-                    {},
-                    { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
-                );
-
-                // navigate() doesn't stop the processing flow
-                return null;
-            }
-
-            // save vehicle to store if it hasn't already been saved
-            if (!this.vinPopulatedOnPageLoad) {
-                this.mainStore.updateVehicle(this.vehicleFromLookup);
-            }
-
-            if (this.vinWithNonMatchingCarId) {
-                this.$router.navigate(
-                    this.navigationScenarios.CORRECTED_VIN_FROM_POLICY_VEHICLE,
-                    this.$route
-                );
-                return null;
-            }
-
-            const partsOrQuestionsResponse = await this.getPartsOrQuestions();
-            if (partsOrQuestionsResponse.error) {
-                // To Do: Need requirement on what to do here
-                window.console.error('Error on retrieving PartsOrQuestions');
-                this.$refs.siteFooter.removeLoader();
-                return null;
-            }
-
-            // Comes from vehicleQuestionsMixin.navigateForward()
-            await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
-
-            return null;
-        },
-        async lookupVehicleByVin(vin) {
-            try {
-                return await this.mainStore.lookupVehicleByVin(vin);
-            } catch (responseError) {
-                return {
-                    error: {
-                        status: responseError.status
-                    }
-                };
-            }
-        },
-        resetActiveAlert() {
-            this.activeVehicleLookupAlertType = null;
-        },
-        resetVehicleFromLookup() {
-            this.vehicleFromLookup = null;
-        },
-        resetDependentState() {}
-    }
+    resetDependentState() {},
+  },
 };
 </script>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 5b67ee47..c8220560 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -7,7 +7,7 @@
   >
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
-        <div class="col-md-6">
+        <div class="col-md-6 px-0 px-md-2">
           <siteHeader cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
@@ -142,6 +142,8 @@
           </div>
         </div>
       </div>
+      <!-- Footer image component must have parent (usually container-fluid)
+        set to display: flex and height 100dvh or height 100% -->
       <footerImage
         cmsWidgetName="SiteFooterWidget" />
     </div>

From 7e5c8fd1b6398e735717b24aa5ccfec9c3ad36ae Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 15 Apr 2024 09:22:44 -0400
Subject: [PATCH 05/26] WIP update files with updated ESLint settings.

---
 package-lock.json                             |   2 +-
 package.json                                  |   4 +-
 .../site-footer/footer-image/footer-image.vue |  20 +-
 .../site-footer/site-footer.vue               | 184 ++--
 .../contact-details/contact-details.vue       | 237 +++--
 .../coverage-statement/coverage-statement.vue | 751 +++++++-------
 .../duplicate-check/duplicate-check.vue       | 296 +++---
 .../policy-vehicles/policy-vehicles.vue       | 494 +++++-----
 .../provider-preference.vue                   | 363 ++++---
 src/layouts/schedule-page/schedule-page.vue   | 745 +++++++-------
 .../service-location/service-location.vue     | 762 +++++++-------
 src/layouts/vehicle-damage/vehicle-damage.vue | 927 ++++++++----------
 src/layouts/vehicle-lookup/vehicle-lookup.vue | 166 ++--
 src/layouts/vehicle-parts/vehicle-parts.vue   | 349 ++++---
 .../vehicle-selection/vehicle-selection.vue   | 288 +++---
 src/layouts/vin-lookup/vin-lookup.vue         | 473 +++++----
 src/layouts/welcome-page/welcome-page.vue     | 512 +++++-----
 17 files changed, 3204 insertions(+), 3369 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0ab28ced..109308ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,7 +37,7 @@
         "@vue/vue3-jest": "^27.0.0-alpha.1",
         "axios-mock-adapter": "^1.21.5",
         "babel-jest": "^27.0.6",
-        "eslint": "8.45.0",
+        "eslint": "^8.45.0",
         "eslint-config-airbnb-base": "15.0.0",
         "eslint-import-resolver-alias": "1.1.2",
         "eslint-plugin-import": "2.26.0",
diff --git a/package.json b/package.json
index 82ca9450..f246df9c 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "@vue/vue3-jest": "^27.0.0-alpha.1",
     "axios-mock-adapter": "^1.21.5",
     "babel-jest": "^27.0.6",
-    "eslint": "8.45.0",
+    "eslint": "^8.45.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-plugin-import": "2.26.0",
@@ -61,4 +61,4 @@
     "vitest": "^0.33.0",
     "volar-service-vetur": "latest"
   }
-}
\ No newline at end of file
+}
diff --git a/src/iss-components/site-footer/footer-image/footer-image.vue b/src/iss-components/site-footer/footer-image/footer-image.vue
index ec021d19..7be1128b 100644
--- a/src/iss-components/site-footer/footer-image/footer-image.vue
+++ b/src/iss-components/site-footer/footer-image/footer-image.vue
@@ -3,19 +3,19 @@
       <img :src="footerImageURL" />
     </div>
 </template>
-  <script>
-    export default {
-      name: "footer-image",
-      props: {
-        cmsWidgetName: String,
+<script>
+export default {
+    name: 'footer-image',
+    props: {
+        cmsWidgetName: String
     },
-      computed: {
+    computed: {
         footerImageURL() {
             return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
-        },
-      },
-    };
-  </script>
+        }
+    }
+};
+</script>
 
   <style lang="scss" scoped>
     .footerImage {
diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index 52ca9273..57298762 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -1,47 +1,50 @@
 <template>
-    <div>
-        <footer
-            id="infoBox"
-            class="footer container-fluid g-5 my-5 px-0">
-            <div
-                class="row d-flex vw-100 mx-0"
-                :class="[
-                    isStackedVertically
-                        ? 'flex-column align-items-stretch'
-                        : 'flex-row-reverse align-items-center'
-                ]">
-                <div
-                    id="stacked"
-                    class="col button-col d-flex px-0">
-                    <buttonMain
-                        v-if="!isForwardButtonHidden"
-                        ref="buttonMain"
-                        isPrimary
-                        :buttonText="buttonText"
-                        loaderColor="white"
-                        :class="(disableForwardAction || isForwardActionDisabled) && 'form-test-invalid'"
-                        :aria-disabled="isForwardActionDisabled"
-                        :isDisabled="isForwardActionDisabled"
-                        data-bs-target="#footerModal"
-                        data-bs-dismiss="modal"
-                        data-test-id="site-footer-main-button"
-                        @clickEvent="buttonClick" />
-                </div>
-                <div
-                    v-if="!isBackButtonHidden"
-                    class="col-auto link-col py-1 px-0 text-break">
-                    <textLink
-                        linkType="navigation"
-                        :text="backLink"
-                        href="javascript:void(0)"
-                        data-bs-target="#footerModal"
-                        data-bs-dismiss="modal"
-                        data-test-id="site-footer-back-button"
-                        @clickEvent="linkClick" />
-                </div>
-            </div>
-        </footer>
-    </div>
+  <div>
+    <footer
+id="infoBox"
+class="footer container-fluid g-5 my-5 px-0">
+      <div
+        class="row d-flex vw-100 mx-0"
+        :class="[
+          isStackedVertically
+            ? 'flex-column align-items-stretch'
+            : 'flex-row-reverse align-items-center',
+        ]">
+        <div
+id="stacked"
+class="col button-col d-flex px-0">
+          <buttonMain
+            v-if="!isForwardButtonHidden"
+            ref="buttonMain"
+            isPrimary
+            :buttonText="buttonText"
+            loaderColor="white"
+            :class="
+              (disableForwardAction || isForwardActionDisabled) &&
+              'form-test-invalid'
+            "
+            :aria-disabled="isForwardActionDisabled"
+            :isDisabled="isForwardActionDisabled"
+            data-bs-target="#footerModal"
+            data-bs-dismiss="modal"
+            data-test-id="site-footer-main-button"
+            @clickEvent="buttonClick" />
+        </div>
+        <div
+          v-if="!isBackButtonHidden"
+          class="col-auto link-col py-1 px-0 text-break">
+          <textLink
+            linkType="navigation"
+            :text="backLink"
+            href="javascript:void(0)"
+            data-bs-target="#footerModal"
+            data-bs-dismiss="modal"
+            data-test-id="site-footer-back-button"
+            @clickEvent="linkClick" />
+        </div>
+      </div>
+    </footer>
+  </div>
 </template>
 
 <script>
@@ -53,7 +56,7 @@ export default {
     name: 'site-footer',
     components: {
         textLink,
-        buttonMain,
+        buttonMain
     },
     props: {
         isForwardActionDisabled: Boolean,
@@ -80,18 +83,20 @@ export default {
                 : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
         },
         footerImageURL() {
-            //return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+            // return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
             const output = this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
-            console.log("original image", output);
+            console.log('original image', output);
             return output;
         },
         includeFooterImage() {
             const currentPageName = this.getPageNameByQueryString();
-            return (currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE);
+            return currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE;
         }
     },
     mounted() {
-        this.paddingHeight = this.includeFooterImage ? this.getFooterInfoBoxHeight() + 16 : this.getFooterInfoBoxHeight() + 24;
+        this.paddingHeight = this.includeFooterImage
+            ? this.getFooterInfoBoxHeight() + 16
+            : this.getFooterInfoBoxHeight() + 24;
         this.$nextTick(() => {
             window.addEventListener('resize', this.onResize);
         });
@@ -133,63 +138,60 @@ export default {
 
 <style lang="scss" scoped>
 .footer {
+  display: flex;
+  overflow: visible;
+  a {
     display: flex;
-    overflow: visible;
-    a {
-        display: flex;
-        justify-content: center;
-    }
+    justify-content: center;
+  }
+  .col,
+  .col-auto,
+  .col button {
+    width: 100%;
+  }
+  @media only screen and (min-width: 340px) {
     .col,
     .col-auto,
     .col button {
-        width: 100%;
+      width: auto;
+      justify-content: flex-end;
     }
-    @media only screen and (min-width: 340px) {
-        .col,
-        .col-auto,
-        .col button {
-            width: auto;
-            justify-content: flex-end;
-        }
-        .btn-primary {
-            width: auto;
-        }
-        a {
-            display: flex;
-            justify-content: flex-start;
-        }
+    .btn-primary {
+      width: auto;
     }
+    a {
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
 
-    & > .container-fluid {
-        overflow-x: visible; // needed to fix hidden footer on some iphones
+  & > .container-fluid {
+    overflow-x: visible; // needed to fix hidden footer on some iphones
+  }
+  div.flex-column {
+    .btn-primary {
+      width: 100%;
+      justify-content: center;
     }
-    div.flex-column {
-        .btn-primary {
-            width: 100%;
-            justify-content: center;
-        }
-        div.link-col {
-            display: flex;
-            justify-content: center;
-            margin-top: 1.25rem;
-        }
+    div.link-col {
+      display: flex;
+      justify-content: center;
+      margin-top: 1.25rem;
     }
+  }
 }
-.footerImage
-{
-    text-align: center;
-    position: sticky;
+.footerImage {
+  text-align: center;
+  position: sticky;
 }
 
 @media only screen and (max-width: 340px) {
-    .footerImage
-    {
-        bottom: 78px;
-    }
+  .footerImage {
+    bottom: 78px;
+  }
 }
 
-#siteFooterImage
-{
-    width: 100%;
+#siteFooterImage {
+  width: 100%;
 }
 </style>
diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue
index 8ed25420..52e1db41 100644
--- a/src/layouts/contact-details/contact-details.vue
+++ b/src/layouts/contact-details/contact-details.vue
@@ -3,12 +3,13 @@
     ref="contact-details-form"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-  >
+    @invalidSubmit="onInvalidSubmit">
     <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="widget.siteHeader" />
+          <siteHeader
+ref="siteHeader"
+:cmsWidgetName="widget.siteHeader" />
         </div>
       </div>
       <div class="row justify-content-center">
@@ -17,8 +18,7 @@
             id="sub-header"
             ref="siteSubHeader"
             class="mt-5"
-            :cmsWidgetName="widget.siteSubHeader"
-          />
+            :cmsWidgetName="widget.siteSubHeader" />
           <textboxQuestion
             ref="firstNameQuestion"
             v-model="firstName"
@@ -26,8 +26,7 @@
             inputId="firstName"
             :cmsWidgetName="widget.firstNameQuestion"
             isRequired
-            :validationRules="rules.firstName"
-          />
+            :validationRules="rules.firstName" />
           <textboxQuestion
             ref="lastNameQuestion"
             v-model="lastName"
@@ -35,8 +34,7 @@
             inputId="lastName"
             :cmsWidgetName="widget.lastNameQuestion"
             isRequired
-            :validationRules="rules.lastName"
-          />
+            :validationRules="rules.lastName" />
           <textboxQuestion
             ref="emailQuestion"
             v-model="emailAddress"
@@ -44,8 +42,7 @@
             inputId="emailAddress"
             :cmsWidgetName="widget.emailQuestion"
             isRequired
-            :validationRules="rules.emailAddress"
-          />
+            :validationRules="rules.emailAddress" />
           <textboxQuestion
             ref="phoneNumberQuestion"
             v-model="phoneNumber"
@@ -54,8 +51,7 @@
             :cmsWidgetName="widget.phoneNumberQuestion"
             isRequired
             :mask="phoneMask"
-            :validationRules="rules.phoneNumber"
-          />
+            :validationRules="rules.phoneNumber" />
           <checkbox
             ref="requestTextUpdatesCheckbox"
             v-model="requestTextUpdates"
@@ -63,8 +59,7 @@
             class="mt-3"
             checkboxName="requestTextUpdates"
             buttonID="requestTextUpdates"
-            :checkboxLabel="requestTextUpdatesCheckboxText"
-          />
+            :checkboxLabel="requestTextUpdatesCheckboxText" />
           <textareaQuestion
             ref="notesQuestion"
             v-model="notesForTechnician"
@@ -74,25 +69,24 @@
             :isRequired="false"
             :cmsWidgetName="widget.notesQuestion"
             maxLength="250"
-            :inputRows="4"
-          />
-          <p ref="disclaimerText" class="caption dark-gray mt-6">
+            :inputRows="4" />
+          <p
+ref="disclaimerText"
+class="caption dark-gray mt-6">
             {{ textUpdateDisclaimerText }} I also agree to Safelite's
             <textLink
               ref="privacyPolicyLink"
               class="normal-line-height"
               linkType="text"
               text="Privacy Policy"
-              href="//www.safelite.com/privacy-center"
-            />
+              href="//www.safelite.com/privacy-center" />
             and
             <textLink
               ref="termsOfUseLink"
               class="normal-line-height"
               linkType="text"
               text="Terms of Use"
-              href="//www.safelite.com/terms-of-use"
-            />.
+              href="//www.safelite.com/terms-of-use" />.
           </p>
           <siteFooter
             ref="siteFooter"
@@ -100,8 +94,7 @@
             :cmsWidgetName="widget.siteFooter"
             :isForwardActionDisabled="!meta.valid"
             @forwardClicked="forwardButtonAction"
-            @backClicked="navigateBack"
-          />
+            @backClicked="navigateBack" />
         </div>
       </div>
     </div>
@@ -109,117 +102,117 @@
 </template>
 <script>
 // Components
-import siteHeader from "@/iss-components/site-header/site-header.vue";
-import siteFooter from "@/iss-components/site-footer/site-footer.vue";
-import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
-import textboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
-import checkbox from "@/ux-components/checkbox/checkbox.vue";
-import textareaQuestion from "@/digital-components/textarea-question/textarea-question.vue";
-import textLink from "@/ux-components/text-link/text-link.vue";
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
+import checkbox from '@/ux-components/checkbox/checkbox.vue';
+import textareaQuestion from '@/digital-components/textarea-question/textarea-question.vue';
+import textLink from '@/ux-components/text-link/text-link.vue';
 
 // Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper.js";
-import { Form } from "vee-validate";
-import BaseFormMixin from "@/mixins/base-form-mixin.js";
-import { useMainStore } from "@/store/index.js";
-import globalRules from "@/constants/global-rules.js";
-import MaskaFormattedMasks from "@/constants/maska-masks";
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
+import { Form } from 'vee-validate';
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store/index.js';
+import globalRules from '@/constants/global-rules.js';
+import MaskaFormattedMasks from '@/constants/maska-masks';
 
 export default {
-  name: "contact-details",
-  components: {
-    siteHeader,
-    siteSubHeader,
-    textboxQuestion,
-    checkbox,
-    textareaQuestion,
-    siteFooter,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-    textLink,
-  },
-  mixins: [BaseFormMixin],
-  async beforeRouteEnter(to, from, next) {
-    const cmsContent = await fetchCmsContentForPage(to.query.issPage);
+    name: 'contact-details',
+    components: {
+        siteHeader,
+        siteSubHeader,
+        textboxQuestion,
+        checkbox,
+        textareaQuestion,
+        siteFooter,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form,
+        textLink
+    },
+    mixins: [BaseFormMixin],
+    async beforeRouteEnter(to, from, next) {
+        const cmsContent = await fetchCmsContentForPage(to.query.issPage);
 
-    next((vm) => {
-      vm.setCmsContent(cmsContent);
-    });
-  },
-  data() {
-    const {
-      firstName,
-      lastName,
-      emailAddress,
-      phoneNumber,
-      requestTextUpdates,
-      notesForTechnician,
-    } = useMainStore().contactInfo;
-    return {
-      firstName,
-      lastName,
-      emailAddress,
-      phoneNumber,
-      requestTextUpdates,
-      notesForTechnician,
-      widget: {
-        siteHeader: "SiteHeaderWidget",
-        siteSubHeader: "SiteSubHeaderWidget",
-        firstNameQuestion: "FirstNameQuestionWidget",
-        lastNameQuestion: "LastNameQuestionWidget",
-        emailQuestion: "EmailQuestionWidget",
-        phoneNumberQuestion: "PhoneNumberQuestionWidget",
-        requestTextUpdates: "TextContentWidget",
-        notesQuestion: "NotesQuestionWidget",
-        disclaimer: "TextUpdateDisclaimerWidget",
-        siteFooter: "SiteFooterWidget",
-      },
-      rules: {
-        firstName: globalRules.FIRST_NAME_REQUIRED,
-        lastName: globalRules.LAST_NAME_REQUIRED,
-        emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
-        phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
-      },
-    };
-  },
-  computed: {
+        next((vm) => {
+            vm.setCmsContent(cmsContent);
+        });
+    },
+    data() {
+        const {
+            firstName,
+            lastName,
+            emailAddress,
+            phoneNumber,
+            requestTextUpdates,
+            notesForTechnician
+        } = useMainStore().contactInfo;
+        return {
+            firstName,
+            lastName,
+            emailAddress,
+            phoneNumber,
+            requestTextUpdates,
+            notesForTechnician,
+            widget: {
+                siteHeader: 'SiteHeaderWidget',
+                siteSubHeader: 'SiteSubHeaderWidget',
+                firstNameQuestion: 'FirstNameQuestionWidget',
+                lastNameQuestion: 'LastNameQuestionWidget',
+                emailQuestion: 'EmailQuestionWidget',
+                phoneNumberQuestion: 'PhoneNumberQuestionWidget',
+                requestTextUpdates: 'TextContentWidget',
+                notesQuestion: 'NotesQuestionWidget',
+                disclaimer: 'TextUpdateDisclaimerWidget',
+                siteFooter: 'SiteFooterWidget'
+            },
+            rules: {
+                firstName: globalRules.FIRST_NAME_REQUIRED,
+                lastName: globalRules.LAST_NAME_REQUIRED,
+                emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
+            }
+        };
+    },
+    computed: {
     /**
      * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
      */
-    requestTextUpdatesCheckboxText() {
-      return `${this.getCmsContent(this.widget.requestTextUpdates, "Text")}*`;
+        requestTextUpdatesCheckboxText() {
+            return `${this.getCmsContent(this.widget.requestTextUpdates, 'Text')}*`;
+        },
+        /**
+         * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
+         */
+        textUpdateDisclaimerText() {
+            return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
+        },
+        phoneMask() {
+            return MaskaFormattedMasks.PHONE_NUMBER;
+        }
     },
-    /**
-     * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
-     */
-    textUpdateDisclaimerText() {
-      return `*${this.getCmsContent(this.widget.disclaimer, "Text")}`;
-    },
-    phoneMask() {
-      return MaskaFormattedMasks.PHONE_NUMBER;
-    },
-  },
-  methods: {
+    methods: {
     /**
      * @summary Steps to perform when forward button clicked.
      */
-    forwardButtonAction() {
-      const contactInfo = {
-        firstName: this.firstName,
-        lastName: this.lastName,
-        emailAddress: this.emailAddress,
-        phoneNumber: this.phoneNumber,
-        requestTextUpdates: this.requestTextUpdates,
-        notesForTechnician: this.notesForTechnician,
-      };
-      useMainStore().updateContactInfo(contactInfo);
-      const scenario =
+        forwardButtonAction() {
+            const contactInfo = {
+                firstName: this.firstName,
+                lastName: this.lastName,
+                emailAddress: this.emailAddress,
+                phoneNumber: this.phoneNumber,
+                requestTextUpdates: this.requestTextUpdates,
+                notesForTechnician: this.notesForTechnician
+            };
+            useMainStore().updateContactInfo(contactInfo);
+            const scenario =
         useMainStore().order.serviceLocation.IsSafeliteProvider === false
-          ? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
-          : this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
-      this.$router.navigate(scenario, this.$route);
-    },
-  },
+            ? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
+            : this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
+            this.$router.navigate(scenario, this.$route);
+        }
+    }
 };
 </script>
 
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 54959779..3e8b176a 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -3,13 +3,16 @@
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-  >
+    @invalidSubmit="onInvalidSubmit">
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
         <div class="col-md-6 px-0 px-md-2">
-          <loadingModal ref="loadingModal" :textSlides="loadingText" />
-          <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
+          <loadingModal
+ref="loadingModal"
+:textSlides="loadingText" />
+          <siteHeader
+ref="siteHeader"
+cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
       <div class="row justify-content-center pt-5">
@@ -17,34 +20,28 @@
           <h5
             ref="siteSubHeader"
             class="text-center text-black"
-            v-html="coverageStatementSubHeader"
-          ></h5>
+            v-html="coverageStatementSubHeader"></h5>
           <div
             ref="explanatoryText"
             class="body-text text-center mt-2"
-            v-html="explanatoryText"
-          ></div>
+            v-html="explanatoryText"></div>
           <div
             ref="secondaryText"
             class="text-center mt-4 mb-1 fw-bold text-black"
-            v-html="secondaryText"
-          ></div>
+            v-html="secondaryText"></div>
           <div
             v-if="verifiedDeductible"
-            class="d-flex justify-content-center cost"
-          >
+            class="d-flex justify-content-center cost">
             {{ deductibleForDisplay }}
           </div>
           <div
             v-if="isQuoteDisplayed"
-            class="d-flex justify-content-center cost mb-0"
-          >
+            class="d-flex justify-content-center cost mb-0">
             {{ servicePriceForDisplay }}
           </div>
           <div
             v-if="verifiedITAC"
-            class="d-flex justify-content-center mb-4 deductible-text"
-          >
+            class="d-flex justify-content-center mb-4 deductible-text">
             {{ deductibleText }}&nbsp;
             <span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
           </div>
@@ -56,14 +53,14 @@
             :manualHeadline="verifiedItacAlertHeader"
             :manualCopy="verifiedItacAlertBody"
             alertClass="alert-success"
-            :isDismissible="false"
-          >
+            :isDismissible="false">
           </alert>
           <div
             class="fw-bold text-black mt-5 mb-2"
-            v-html="nextStepsHeader"
-          ></div>
-          <div class="body-text" v-html="nextStepsBody"></div>
+            v-html="nextStepsHeader"></div>
+          <div
+class="body-text"
+v-html="nextStepsBody"></div>
           <buttonQuestion
             v-if="isQuoteDisplayed"
             v-model="selectedProvider"
@@ -73,407 +70,393 @@
             groupName="ServiceProviderQuestionOption"
             buttonTypeString="listButton"
             isRequired
-            :validationRules="rules.selectionRequired"
-          >
+            :validationRules="rules.selectionRequired">
           </buttonQuestion>
           <text-block
             v-if="isQuoteDisplayed"
             cmsWidgetName="DisclaimerWidget"
-            typeStyle="caption"
-          />
+            typeStyle="caption" />
           <siteFooter
             ref="siteFooter"
             class="mt-5"
             cmsWidgetName="SiteFooterWidget"
             :isForwardActionDisabled="!meta.valid"
             @backClicked="navigateBackByVehicleQuestions"
-            @forwardClicked="navigateForward"
-            />
+            @forwardClicked="navigateForward" />
         </div>
       </div>
     </div>
-    <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
+    <recalModal
+ref="RecalModal"
+cmsWidgetName="RecalModal" />
     <contentGroupModal
       ref="DeductibleModal"
       cmsWidgetName="DeductibleModal"
-      class="deductible-modal"
-    />
+      class="deductible-modal" />
   </Form>
 </template>
 <script>
 // Import Component
-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 recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal.vue";
-import alert from "@/ux-components/alert/alert.vue";
-import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal.vue";
-import buttonQuestion from "@/digital-components/button-question/button-question.vue";
-import loadingModal from "@/iss-components/loading-modal/loading-modal.vue";
-import textBlock from "@/digital-components/text-block/text-block.vue";
+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 recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
+import alert from '@/ux-components/alert/alert.vue';
+import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
 
 // Import Supporting Files
 import {
-  fetchCmsContentForPage,
-  setupModalLinks,
-  processIfStatements,
-} from "@/helpers/cms-content-helper.js";
-import settleAllPromises from "@/helpers/layout-helper.js";
-import { getDamageString } from "@/helpers/damage-helper.js";
-import { useMainStore } from "@/store/index.js";
-import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin.js";
-import globalRules from "@/constants/global-rules.js";
-import baseFormMixin from "@/mixins/base-form-mixin.js";
-import navigationScenarios from "@/router/router-constants/navigation-scenarios.js";
-import issPageValues from "@/router/router-constants/issPage-values";
-import bailoutMessage from "@/constants/bailoutMessage";
-import coverageStatuses from "@/constants/coverage-statuses";
-import widgetFields from "@/constants/cms-widget-fields.js";
-import getPriceOfLineItems from "@/helpers/price-calculator.js";
-import { formatAmountInDollars } from "@/helpers/text-helper.js";
+    fetchCmsContentForPage,
+    setupModalLinks,
+    processIfStatements
+} from '@/helpers/cms-content-helper.js';
+import settleAllPromises from '@/helpers/layout-helper.js';
+import { getDamageString } from '@/helpers/damage-helper.js';
+import { useMainStore } from '@/store/index.js';
+import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
+import globalRules from '@/constants/global-rules.js';
+import baseFormMixin from '@/mixins/base-form-mixin.js';
+import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
+import issPageValues from '@/router/router-constants/issPage-values';
+import bailoutMessage from '@/constants/bailoutMessage';
+import coverageStatuses from '@/constants/coverage-statuses';
+import widgetFields from '@/constants/cms-widget-fields.js';
+import getPriceOfLineItems from '@/helpers/price-calculator.js';
+import { formatAmountInDollars } from '@/helpers/text-helper.js';
 
-const SAFELITE_PROVIDER = "Safelite";
+const SAFELITE_PROVIDER = 'Safelite';
 
 export default {
-  name: "coverage-statement",
-  components: {
-    siteFooter,
-    siteHeader,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-    recalModal,
-    alert,
-    contentGroupModal,
-    buttonQuestion,
-    loadingModal,
-    textBlock,
-  },
-  mixins: [baseFormMixin, vehicleQuestionsMixin],
-  async beforeRouteEnter(to, from, next) {
+    name: 'coverage-statement',
+    components: {
+        siteFooter,
+        siteHeader,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form,
+        recalModal,
+        alert,
+        contentGroupModal,
+        buttonQuestion,
+        loadingModal,
+        textBlock
+    },
+    mixins: [baseFormMixin, vehicleQuestionsMixin],
+    async beforeRouteEnter(to, from, next) {
     // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
-    const supportingItemsPromise = await useMainStore().getSupportingItems();
+        const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
+        const supportingItemsPromise = await useMainStore().getSupportingItems();
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-      {
-        resultKey: "supportingItems",
-        promise: supportingItemsPromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise
+            },
+            {
+                resultKey: 'supportingItems',
+                promise: supportingItemsPromise
+            }
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
-    const clonedGlassParts = useMainStore().lineItems.glassParts
-      ? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts))
-      : [];
-    const availableLineItems = [
-      ...(resultMap.supportingItems ?? []),
-      ...(clonedGlassParts ?? []),
-    ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        const clonedGlassParts = useMainStore().lineItems.glassParts
+            ? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts))
+            : [];
+        const availableLineItems = [
+            ...(resultMap.supportingItems ?? []),
+            ...(clonedGlassParts ?? [])
+        ];
 
-    let hasBailedOut = false;
-    let pricingResults = [];
-    if (
-      useMainStore().policy.policyLookupSuccessful &&
-      useMainStore().vehicle.policyVehicleId >= 0
-    ) {
-      await useMainStore().getFinalDeductible();
-      pricingResults = await useMainStore()
-        .getPriceOrderItems(availableLineItems)
-        .catch((err) => {
-          useMainStore().setBailout(
-            bailoutMessage.pricingResponseError(
-              availableLineItems.map((li) => li.partNumber),
-              { code: err.code, message: err.message, data: err.data }
-            )
-          );
-          hasBailedOut = true;
-          next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
-        });
-    }
-
-    if (!hasBailedOut) {
-      // Call the "next" function to complete the transition to this page.
-      next((vm) => {
-        vm.setCmsContent(resultMap.cmsContent);
-        vm.setSupportingItems(resultMap.supportingItems);
-        // eslint-disable-next-line no-param-reassign
-        vm.setBaseServiceLineItems(pricingResults);
-        vm.$refs.loadingModal.showModal();
-        vm.initializeComponent();
-        if (!vm.unverified) {
-          useMainStore().disableKeyFields();
+        let hasBailedOut = false;
+        let pricingResults = [];
+        if (
+            useMainStore().policy.policyLookupSuccessful
+      && useMainStore().vehicle.policyVehicleId >= 0
+        ) {
+            await useMainStore().getFinalDeductible();
+            pricingResults = await useMainStore()
+                .getPriceOrderItems(availableLineItems)
+                .catch((err) => {
+                    useMainStore().setBailout(bailoutMessage.pricingResponseError(
+                        availableLineItems.map((li) => li.partNumber),
+                        { code: err.code, message: err.message, data: err.data }
+                    ));
+                    hasBailedOut = true;
+                    next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
+                });
+        }
+
+        if (!hasBailedOut) {
+            // Call the "next" function to complete the transition to this page.
+            next((vm) => {
+                vm.setCmsContent(resultMap.cmsContent);
+                vm.setSupportingItems(resultMap.supportingItems);
+                // eslint-disable-next-line no-param-reassign
+                vm.setBaseServiceLineItems(pricingResults);
+                vm.$refs.loadingModal.showModal();
+                vm.initializeComponent();
+                if (!vm.unverified) {
+                    useMainStore().disableKeyFields();
+                }
+            });
         }
-      });
-    }
-  },
-  data() {
-    const { isRepair } = useMainStore().damage;
-    const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
-    return {
-      isRepair,
-      policyLookupSuccessful,
-      isNoComp: noCoverage ?? false,
-      baseServiceLineItems: [],
-      selectedProvider: "",
-      deductibleText: "Your deductible is",
-      // TODO update when design team gives appropriate text
-      loadingText: [
-        "Connecting to your insurance company",
-        "Nearly there",
-        "Finishing up",
-      ],
-      rules: {
-        selectionRequired: globalRules.OPTION_REQUIRED,
-      },
-      supportingItems: null,
-      widget: {
-        subheader: "SiteSubHeaderWidget",
-        verifiedItacAlert: "VerifiedITACAlert",
-        explanatoryText: "ExplanatoryTextWidget",
-        nextStep: "NextStepsWidget",
-        serviceProviderQuestion: "ServiceProviderQuestion",
-      },
-    };
-  },
-  computed: {
-    coverageStatementSubHeader() {
-      return this.getTextFromCmsWithCustomIfStatements(
-        this.widget.subheader,
-        widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
-      );
     },
-    verifiedItacAlertHeader() {
-      return this.getCmsContent(
-        this.widget.verifiedItacAlert,
-        widgetFields.ALERT_WIDGET.HEADLINE_TEXT
-      );
+    data() {
+        const { isRepair } = useMainStore().damage;
+        const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
+        return {
+            isRepair,
+            policyLookupSuccessful,
+            isNoComp: noCoverage ?? false,
+            baseServiceLineItems: [],
+            selectedProvider: '',
+            deductibleText: 'Your deductible is',
+            // TODO update when design team gives appropriate text
+            loadingText: [
+                'Connecting to your insurance company',
+                'Nearly there',
+                'Finishing up'
+            ],
+            rules: {
+                selectionRequired: globalRules.OPTION_REQUIRED
+            },
+            supportingItems: null,
+            widget: {
+                subheader: 'SiteSubHeaderWidget',
+                verifiedItacAlert: 'VerifiedITACAlert',
+                explanatoryText: 'ExplanatoryTextWidget',
+                nextStep: 'NextStepsWidget',
+                serviceProviderQuestion: 'ServiceProviderQuestion'
+            }
+        };
     },
-    verifiedItacAlertBody() {
-      return this.getCmsContent(
-        this.widget.verifiedItacAlert,
-        widgetFields.ALERT_WIDGET.BODY_TEXT
-      )?.replaceAll("{custom:costSavings}", this.itacCostSavingsForDisplay);
+    computed: {
+        coverageStatementSubHeader() {
+            return this.getTextFromCmsWithCustomIfStatements(
+                this.widget.subheader,
+                widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
+            );
+        },
+        verifiedItacAlertHeader() {
+            return this.getCmsContent(
+                this.widget.verifiedItacAlert,
+                widgetFields.ALERT_WIDGET.HEADLINE_TEXT
+            );
+        },
+        verifiedItacAlertBody() {
+            return this.getCmsContent(
+                this.widget.verifiedItacAlert,
+                widgetFields.ALERT_WIDGET.BODY_TEXT
+            )?.replaceAll('{custom:costSavings}', this.itacCostSavingsForDisplay);
+        },
+        secondaryText() {
+            return this.getTextFromCmsWithCustomIfStatements(
+                this.widget.subheader,
+                widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
+            );
+        },
+        explanatoryText() {
+            return this.getTextFromCmsWithCustomIfStatements(
+                this.widget.explanatoryText,
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+            );
+        },
+        nextStepsHeader() {
+            return this.getTextFromCmsWithCustomIfStatements(
+                this.widget.nextStep,
+                widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
+            );
+        },
+        nextStepsBody() {
+            return this.getTextFromCmsWithCustomIfStatements(
+                this.widget.nextStep,
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+            )?.replaceAll('{custom:damage}', this.damageText);
+        },
+        damageText() {
+            const damageString = getDamageString();
+            return damageString === 'match' ? '' : damageString;
+        },
+        deductibleValue() {
+            return useMainStore().order.currentDeductible;
+        },
+        deductibleForDisplay() {
+            return formatAmountInDollars(this.deductibleValue);
+        },
+        registerClaimSuccessful() {
+            return useMainStore().payment.insuranceCoverage.isVerified;
+        },
+        verifiedNoComp() {
+            return this.policyLookupSuccessful && this.isNoComp;
+        },
+        verifiedITAC() {
+            return (
+                this.policyLookupSuccessful
+        && !this.isNoComp
+        && this.deductibleValue > this.totalServicePrice
+            );
+        },
+        coveredAndServicePriceAboveOrEqualDeductible() {
+            return (
+                !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue
+            );
+        },
+        verifiedDeductible() {
+            return useMainStore().isClaimRegistrationRequired
+                ? this.registerClaimSuccessful
+            && this.coveredAndServicePriceAboveOrEqualDeductible
+            && this.deductibleValue !== null
+                : this.policyLookupSuccessful
+            && this.coveredAndServicePriceAboveOrEqualDeductible;
+        },
+        unverified() {
+            return (
+                !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp
+            );
+        },
+        isADAS() {
+            const parts = useMainStore().order.lineItems.glassParts;
+            return (
+                parts !== null && !!parts.find((part) => part.requiresRecalibration)
+            );
+        },
+        totalServicePrice() {
+            return getPriceOfLineItems(this.baseServiceLineItems);
+        },
+        servicePriceForDisplay() {
+            return formatAmountInDollars(this.totalServicePrice);
+        },
+        itacCostSavings() {
+            return this.deductibleValue - this.totalServicePrice;
+        },
+        itacCostSavingsForDisplay() {
+            return formatAmountInDollars(this.itacCostSavings);
+        },
+        serviceProviderQuestionText() {
+            return this.getCmsContent(
+                this.widget.serviceProviderQuestion,
+                widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
+            );
+        },
+        serviceProviderQuestionAnswers() {
+            return this.getCmsContent(
+                this.widget.serviceProviderQuestion,
+                widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
+            );
+        },
+        isQuoteDisplayed() {
+            return this.verifiedITAC || this.verifiedNoComp;
+        },
+        shouldRegisterClaim() {
+            return (
+                this.policyLookupSuccessful
+        && useMainStore().vehicle.policyVehicleId != null
+        && useMainStore().vehicle.policyVehicleId >= 0
+        && useMainStore().isClaimRegistrationRequired
+        && !useMainStore().isClaimAlreadyRegistered
+        && (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)
+            );
+        }
     },
-    secondaryText() {
-      return this.getTextFromCmsWithCustomIfStatements(
-        this.widget.subheader,
-        widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
-      );
-    },
-    explanatoryText() {
-      return this.getTextFromCmsWithCustomIfStatements(
-        this.widget.explanatoryText,
-        widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
-      );
-    },
-    nextStepsHeader() {
-      return this.getTextFromCmsWithCustomIfStatements(
-        this.widget.nextStep,
-        widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
-      );
-    },
-    nextStepsBody() {
-      return this.getTextFromCmsWithCustomIfStatements(
-        this.widget.nextStep,
-        widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
-      )?.replaceAll("{custom:damage}", this.damageText);
-    },
-    damageText() {
-      const damageString = getDamageString();
-      return damageString === "match" ? "" : damageString;
-    },
-    deductibleValue() {
-      return useMainStore().order.currentDeductible;
-    },
-    deductibleForDisplay() {
-      return formatAmountInDollars(this.deductibleValue);
-    },
-    registerClaimSuccessful() {
-      return useMainStore().payment.insuranceCoverage.isVerified;
-    },
-    verifiedNoComp() {
-      return this.policyLookupSuccessful && this.isNoComp;
-    },
-    verifiedITAC() {
-      return (
-        this.policyLookupSuccessful &&
-        !this.isNoComp &&
-        this.deductibleValue > this.totalServicePrice
-      );
-    },
-    coveredAndServicePriceAboveOrEqualDeductible() {
-      return (
-        !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue
-      );
-    },
-    verifiedDeductible() {
-      return useMainStore().isClaimRegistrationRequired
-        ? this.registerClaimSuccessful &&
-            this.coveredAndServicePriceAboveOrEqualDeductible &&
-            this.deductibleValue !== null
-        : this.policyLookupSuccessful &&
-            this.coveredAndServicePriceAboveOrEqualDeductible;
-    },
-    unverified() {
-      return (
-        !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp
-      );
-    },
-    isADAS() {
-      const parts = useMainStore().order.lineItems.glassParts;
-      return (
-        parts !== null && !!parts.find((part) => part.requiresRecalibration)
-      );
-    },
-    totalServicePrice() {
-      return getPriceOfLineItems(this.baseServiceLineItems);
-    },
-    servicePriceForDisplay() {
-      return formatAmountInDollars(this.totalServicePrice);
-    },
-    itacCostSavings() {
-      return this.deductibleValue - this.totalServicePrice;
-    },
-    itacCostSavingsForDisplay() {
-      return formatAmountInDollars(this.itacCostSavings);
-    },
-    serviceProviderQuestionText() {
-      return this.getCmsContent(
-        this.widget.serviceProviderQuestion,
-        widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
-      );
-    },
-    serviceProviderQuestionAnswers() {
-      return this.getCmsContent(
-        this.widget.serviceProviderQuestion,
-        widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
-      );
-    },
-    isQuoteDisplayed() {
-      return this.verifiedITAC || this.verifiedNoComp;
-    },
-    shouldRegisterClaim() {
-      return (
-        this.policyLookupSuccessful &&
-        useMainStore().vehicle.policyVehicleId != null &&
-        useMainStore().vehicle.policyVehicleId >= 0 &&
-        useMainStore().isClaimRegistrationRequired &&
-        !useMainStore().isClaimAlreadyRegistered &&
-        (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)
-      );
-    },
-  },
-  watch: {
-    selectedProvider() {
-      const buttonText =
+    watch: {
+        selectedProvider() {
+            const buttonText =
         this.selectedProvider === SAFELITE_PROVIDER
-          ? "Continue with Safelite"
-          : "Safelite";
-      this.$refs.siteFooter.updateButtonText(buttonText);
-    },
-    nextStepsBody(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        setupModalLinks(this, "RecalModal");
-        setupModalLinks(this, "DeductibleModal");
-      }
-    },
-  },
-  mounted() {
-    setupModalLinks(this);
-  },
-  methods: {
-    arePagePrerequisitesValid() {
-      return !!useMainStore().vehicle.carId;
-    },
-    async initializeComponent() {
-      useMainStore().updatePolicyITACFlag(this.verifiedITAC);
-      const coverageStatus =
-        this.verifiedITAC || this.verifiedNoComp
-          ? coverageStatuses.VERIFIED
-          : coverageStatuses.PENDING;
-      useMainStore().updateCoverageStatus(coverageStatus);
-      if (this.shouldRegisterClaim) {
-        await useMainStore()
-          .registerClaim()
-          ?.catch(() => {});
-      }
-      this.$refs.loadingModal.hideModal();
-    },
-    async navigateForward() {
-      if (this.unverified || this.verifiedDeductible) {
-        useMainStore().updateSupportingItems(this.supportingItems);
-        this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
-      } else if (this.verifiedITAC || this.verifiedNoComp) {
-        useMainStore().updateIsSafeliteProvider(
-          this.selectedProvider === SAFELITE_PROVIDER
-        );
-        if (this.selectedProvider === SAFELITE_PROVIDER) {
-          useMainStore().updateSupportingItems(this.supportingItems);
-          this.navigateWithScenario(
-            navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE
-          );
-        } else {
-          useMainStore().setBailout(bailoutMessage.RequestCallback());
-          this.navigateWithScenario(
-            navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
-          );
+            ? 'Continue with Safelite'
+            : 'Safelite';
+            this.$refs.siteFooter.updateButtonText(buttonText);
+        },
+        nextStepsBody(newValue, oldValue) {
+            if (newValue !== oldValue) {
+                setupModalLinks(this, 'RecalModal');
+                setupModalLinks(this, 'DeductibleModal');
+            }
         }
-      } else {
-        useMainStore().setBailout(
-          bailoutMessage.coverageStatementInvalidState()
-        );
-        this.navigateWithScenario(
-          navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE
-        );
-      }
     },
-    navigateWithScenario(scenario) {
-      this.$router.navigate(scenario, this.$route);
+    mounted() {
+        setupModalLinks(this);
     },
-    getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
-      const rawText = this.getCmsContent(widgetName, widgetField);
-      return processIfStatements(
-        rawText,
-        "custom",
-        this.getCustomValueFromString
-      );
-    },
-    getCustomValueFromString(str) {
-      switch (str) {
-        case "coverageUnverified":
-          return this.unverified;
-        case "verifiedDeductible":
-          return this.verifiedDeductible;
-        case "verifiedITAC":
-          return this.verifiedITAC;
-        case "verifiedNoComp":
-          return this.verifiedNoComp;
-        case "ADASReplace":
-          return !this.isRepair && this.isADAS;
-        case "nonADASReplace":
-          return !this.isRepair && !this.isADAS;
-        case "nonADASRepair":
-          return this.isRepair;
-        case "deductibleOverZero":
-          return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
-        case "isDeductibleZero":
-          return this.verifiedDeductible && this.deductibleValue === 0;
-        default:
-          return null;
-      }
-    },
-    setSupportingItems(newSupportingItems) {
-      this.supportingItems = newSupportingItems;
-    },
-    setBaseServiceLineItems(lineItems) {
-      this.baseServiceLineItems = lineItems;
-    },
-  },
+    methods: {
+        arePagePrerequisitesValid() {
+            return !!useMainStore().vehicle.carId;
+        },
+        async initializeComponent() {
+            useMainStore().updatePolicyITACFlag(this.verifiedITAC);
+            const coverageStatus =
+        this.verifiedITAC || this.verifiedNoComp
+            ? coverageStatuses.VERIFIED
+            : coverageStatuses.PENDING;
+            useMainStore().updateCoverageStatus(coverageStatus);
+            if (this.shouldRegisterClaim) {
+                await useMainStore()
+                    .registerClaim()
+                    ?.catch(() => {});
+            }
+            this.$refs.loadingModal.hideModal();
+        },
+        async navigateForward() {
+            if (this.unverified || this.verifiedDeductible) {
+                useMainStore().updateSupportingItems(this.supportingItems);
+                this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
+            } else if (this.verifiedITAC || this.verifiedNoComp) {
+                useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
+                if (this.selectedProvider === SAFELITE_PROVIDER) {
+                    useMainStore().updateSupportingItems(this.supportingItems);
+                    this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
+                } else {
+                    useMainStore().setBailout(bailoutMessage.RequestCallback());
+                    this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
+                }
+            } else {
+                useMainStore().setBailout(bailoutMessage.coverageStatementInvalidState());
+                this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
+            }
+        },
+        navigateWithScenario(scenario) {
+            this.$router.navigate(scenario, this.$route);
+        },
+        getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
+            const rawText = this.getCmsContent(widgetName, widgetField);
+            return processIfStatements(
+                rawText,
+                'custom',
+                this.getCustomValueFromString
+            );
+        },
+        getCustomValueFromString(str) {
+            switch (str) {
+                case 'coverageUnverified':
+                    return this.unverified;
+                case 'verifiedDeductible':
+                    return this.verifiedDeductible;
+                case 'verifiedITAC':
+                    return this.verifiedITAC;
+                case 'verifiedNoComp':
+                    return this.verifiedNoComp;
+                case 'ADASReplace':
+                    return !this.isRepair && this.isADAS;
+                case 'nonADASReplace':
+                    return !this.isRepair && !this.isADAS;
+                case 'nonADASRepair':
+                    return this.isRepair;
+                case 'deductibleOverZero':
+                    return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
+                case 'isDeductibleZero':
+                    return this.verifiedDeductible && this.deductibleValue === 0;
+                default:
+                    return null;
+            }
+        },
+        setSupportingItems(newSupportingItems) {
+            this.supportingItems = newSupportingItems;
+        },
+        setBaseServiceLineItems(lineItems) {
+            this.baseServiceLineItems = lineItems;
+        }
+    }
 };
 </script>
 
diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue
index 6d13b877..0a6a8c69 100644
--- a/src/layouts/duplicate-check/duplicate-check.vue
+++ b/src/layouts/duplicate-check/duplicate-check.vue
@@ -3,12 +3,13 @@
     ref="duplicate-check-form"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-  >
+    @invalidSubmit="onInvalidSubmit">
     <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="widget.siteHeader" />
+          <siteHeader
+ref="siteHeader"
+:cmsWidgetName="widget.siteHeader" />
         </div>
       </div>
       <div class="row justify-content-center">
@@ -17,8 +18,7 @@
             id="sub-header"
             ref="siteSubHeader"
             class="mt-5 duplicate-check-subheader"
-            :cmsWidgetName="widget.siteSubHeader"
-          />
+            :cmsWidgetName="widget.siteSubHeader" />
           <buttonQuestion
             ref="buttonQuestion"
             v-model="selectedAnswer"
@@ -29,16 +29,14 @@
             groupName="existingOrNewQuestionOption"
             buttonTypeString="listButton"
             isRequired
-            :validationRules="rules.selectionRequired"
-          />
+            :validationRules="rules.selectionRequired" />
           <siteFooter
             ref="siteFooter"
             class="my-5"
             :cmsWidgetName="widget.siteFooter"
             :isForwardActionDisabled="!meta.valid"
             @forwardClicked="forwardButtonAction"
-            @backClicked="navigateBack"
-          />
+            @backClicked="navigateBack" />
         </div>
       </div>
     </div>
@@ -47,166 +45,166 @@
 
 <script>
 // Components
-import { Form } from "vee-validate";
-import siteHeader from "@/iss-components/site-header/site-header.vue";
-import siteFooter from "@/iss-components/site-footer/site-footer.vue";
-import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
-import buttonQuestion from "@/digital-components/button-question/button-question.vue";
+import { Form } from 'vee-validate';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
 
 // Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper.js";
-import BaseFormMixin from "@/mixins/base-form-mixin.js";
-import { useMainStore } from "@/store/index.js";
-import globalRules from "@/constants/global-rules.js";
-import { toTitleCase } from "@/helpers/text-helper.js";
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store/index.js';
+import globalRules from '@/constants/global-rules.js';
+import { toTitleCase } from '@/helpers/text-helper.js';
 
 export default {
-  name: "duplicate-check",
-  components: {
-    siteHeader,
-    siteSubHeader,
-    buttonQuestion,
-    siteFooter,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-  },
-  mixins: [BaseFormMixin],
-  async beforeRouteEnter(to, from, next) {
-    const cmsContent = await fetchCmsContentForPage(to.query.issPage);
+    name: 'duplicate-check',
+    components: {
+        siteHeader,
+        siteSubHeader,
+        buttonQuestion,
+        siteFooter,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form
+    },
+    mixins: [BaseFormMixin],
+    async beforeRouteEnter(to, from, next) {
+        const cmsContent = await fetchCmsContentForPage(to.query.issPage);
 
-    next((vm) => {
-      vm.setCmsContent(cmsContent);
-    });
-  },
-  data() {
-    return {
-      selectedAnswer: null,
-      widget: {
-        siteHeader: "SiteHeaderWidget",
-        siteSubHeader: "SiteSubHeaderWidget",
-        existingOrNewQuestion: "ExistingOrNewQuestion",
-        siteFooter: "SiteFooterWidget",
-      },
-      rules: {
-        selectionRequired: globalRules.OPTION_REQUIRED,
-      },
-    };
-  },
-  computed: {
-    questionText() {
-      return this.getCmsContent(
-        this.widget.existingOrNewQuestion,
-        "QuestionText"
-      );
+        next((vm) => {
+            vm.setCmsContent(cmsContent);
+        });
     },
-    answersFromCms() {
-      return (
-        this.getCmsContent(this.widget.existingOrNewQuestion, "Answers") ?? []
-      );
+    data() {
+        return {
+            selectedAnswer: null,
+            widget: {
+                siteHeader: 'SiteHeaderWidget',
+                siteSubHeader: 'SiteSubHeaderWidget',
+                existingOrNewQuestion: 'ExistingOrNewQuestion',
+                siteFooter: 'SiteFooterWidget'
+            },
+            rules: {
+                selectionRequired: globalRules.OPTION_REQUIRED
+            }
+        };
     },
-    getNewOrderSelectionName() {
-      return this.answersFromCms?.[0]?.Name ?? "";
-    },
-    duplicateOrders() {
-      const duplicateOrderText = "Finish Existing Claim";
-      const orders = useMainStore().applicationUser.duplicateOrders;
-      return (
-        orders?.map((o) => {
-          const vehicle =
+    computed: {
+        questionText() {
+            return this.getCmsContent(
+                this.widget.existingOrNewQuestion,
+                'QuestionText'
+            );
+        },
+        answersFromCms() {
+            return (
+                this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers') ?? []
+            );
+        },
+        getNewOrderSelectionName() {
+            return this.answersFromCms?.[0]?.Name ?? '';
+        },
+        duplicateOrders() {
+            const duplicateOrderText = 'Finish Existing Claim';
+            const orders = useMainStore().applicationUser.duplicateOrders;
+            return (
+                orders?.map((o) => {
+                    const vehicle =
             !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
-              ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
-              : null;
+                ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
+                : null;
 
-          const dateOfLoss =
+                    const dateOfLoss =
             o.responseDate == null
-              ? ""
-              : new Date(o.responseDate).toLocaleDateString();
-          const subtext =
+                ? ''
+                : new Date(o.responseDate).toLocaleDateString();
+                    const subtext =
             vehicle && o.responseDate
-              ? `${vehicle}, ${dateOfLoss}`
-              : (vehicle ?? "").concat(dateOfLoss);
+                ? `${vehicle}, ${dateOfLoss}`
+                : (vehicle ?? '').concat(dateOfLoss);
 
-          return {
-            Text: duplicateOrderText,
-            Name: o.referralNumber,
-            SubText: toTitleCase(subtext),
-            value: o,
-          };
-        }) ?? []
-      );
+                    return {
+                        Text: duplicateOrderText,
+                        Name: o.referralNumber,
+                        SubText: toTitleCase(subtext),
+                        value: o
+                    };
+                }) ?? []
+            );
+        },
+        answers() {
+            return [...this.duplicateOrders, ...this.answersFromCms];
+        }
     },
-    answers() {
-      return [...this.duplicateOrders, ...this.answersFromCms];
-    },
-  },
-  methods: {
+    methods: {
     /**
      * @summary Steps to perform when forward button clicked.
      */
-    async forwardButtonAction() {
-      if (
-        this.selectedAnswer !== null &&
-        typeof this.selectedAnswer === "object"
-      ) {
-        await useMainStore()
-          .loadSession(this.selectedAnswer)
-          .catch(() => {})
-          .finally(() => {
+        async forwardButtonAction() {
+            if (
+                this.selectedAnswer !== null
+        && typeof this.selectedAnswer === 'object'
+            ) {
+                await useMainStore()
+                    .loadSession(this.selectedAnswer)
+                    .catch(() => {})
+                    .finally(() => {
+                        this.navigateForward();
+                    });
+                return;
+            }
+
             this.navigateForward();
-          });
-        return;
-      }
+        },
+        navigateForward() {
+            if (!this.mainStore.order.policy.policyLookupSuccessful) {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+                    this.$route
+                );
+                return;
+            }
 
-      this.navigateForward();
-    },
-    navigateForward() {
-      if (!this.mainStore.order.policy.policyLookupSuccessful) {
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-          this.$route
-        );
-        return;
-      }
+            const policyVehicles = useMainStore().order.policy.vehicles ?? [];
+            if (!this.mainStore.order.loadedFromDupeCheck) {
+                if (policyVehicles.length !== 0) {
+                    this.$router.navigate(
+                        this.navigationScenarios
+                            .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+                        this.$route
+                    );
+                } else {
+                    this.$router.navigate(
+                        this.navigationScenarios
+                            .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+                        this.$route
+                    );
+                }
+                return;
+            }
 
-      const policyVehicles = useMainStore().order.policy.vehicles ?? [];
-      if (!this.mainStore.order.loadedFromDupeCheck) {
-        if (policyVehicles.length !== 0) {
-          this.$router.navigate(
-            this.navigationScenarios
-              .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
-            this.$route
-          );
-        } else {
-          this.$router.navigate(
-            this.navigationScenarios
-              .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
-            this.$route
-          );
+            if (this.mainStore.order.vehicle.vin) {
+                this.$router.navigate(
+                    this.navigationScenarios
+                        .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE,
+                    this.$route
+                );
+            } else if (policyVehicles.length !== 0) {
+                this.$router.navigate(
+                    this.navigationScenarios
+                        .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE,
+                    this.$route
+                );
+            } else {
+                this.$router.navigate(
+                    this.navigationScenarios
+                        .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES,
+                    this.$route
+                );
+            }
         }
-        return;
-      }
-
-      if (this.mainStore.order.vehicle.vin) {
-        this.$router.navigate(
-          this.navigationScenarios
-            .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE,
-          this.$route
-        );
-      } else if (policyVehicles.length !== 0) {
-        this.$router.navigate(
-          this.navigationScenarios
-            .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE,
-          this.$route
-        );
-      } else {
-        this.$router.navigate(
-          this.navigationScenarios
-            .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES,
-          this.$route
-        );
-      }
-    },
-  },
+    }
 };
 </script>
 
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index 9cb86b76..959511e4 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -3,35 +3,33 @@
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-  >
+    @invalidSubmit="onInvalidSubmit">
     <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 class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
+          <siteHeader
+class="mb-2 header"
+cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
       <div class="row justify-content-center">
         <div class="col-md-6 col-xl-4">
-            <div class="select-car-form rounded text-center">
-              <vehicleBanner
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="displayGeneric"
-                class="mt-2 mb-4"
-              />
-              <policyVehiclesQuestion
-                v-model="selectedVehicleVin"
-                cmsWidgetName="PolicyVehiclesQuestion"
-                :vehicles="VehiclesForQuestions"
-                :validationRules="rules.optionRequired"
-              />
-              <siteFooter
-                ref="siteFooter"
-                cmsWidgetName="SiteFooterWidget"
-                :isForwardActionDisabled="!meta.valid"
-                @ForwardClicked="forwardButtonAction"
-                @backClicked="backButtonAction"
-              />
+          <div class="select-car-form rounded text-center">
+            <vehicleBanner
+              cmsWidgetName="VehicleBannerWidget"
+              :displayGenericVehicleImage="displayGeneric"
+              class="mt-2 mb-4" />
+            <policyVehiclesQuestion
+              v-model="selectedVehicleVin"
+              cmsWidgetName="PolicyVehiclesQuestion"
+              :vehicles="VehiclesForQuestions"
+              :validationRules="rules.optionRequired" />
+            <siteFooter
+              ref="siteFooter"
+              cmsWidgetName="SiteFooterWidget"
+              :isForwardActionDisabled="!meta.valid"
+              @ForwardClicked="forwardButtonAction"
+              @backClicked="backButtonAction" />
           </div>
         </div>
       </div>
@@ -40,250 +38,236 @@
 </template>
 <script>
 // Components
-import siteHeader from "@/iss-components/site-header/site-header.vue";
-import siteFooter from "@/iss-components/site-footer/site-footer.vue";
-import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
-import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue";
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import policyVehiclesQuestion from '@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue';
 // Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper.js";
-import { Form } from "vee-validate";
-import BaseFormMixin from "@/mixins/base-form-mixin.js";
-import vehicleSelectionOptions from "@/constants/vehicle-selection-options.js";
-import endorsementOptions from "@/constants/endorsement-options.js";
-import globalRules from "@/constants/global-rules.js";
-import { useMainStore } from "@/store/index.js";
-import bailoutMessage from "@/constants/bailoutMessage";
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
+import { Form } from 'vee-validate';
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import vehicleSelectionOptions from '@/constants/vehicle-selection-options.js';
+import endorsementOptions from '@/constants/endorsement-options.js';
+import globalRules from '@/constants/global-rules.js';
+import { useMainStore } from '@/store/index.js';
+import bailoutMessage from '@/constants/bailoutMessage';
 import {
-  deductibleForSelectedVehicle,
-  endorsementsForSelectedVehicle,
-  noCoverageForSelectedVehicle,
-  repairWaivedForSelectedVehicle,
-} from "@/helpers/policy-vehicle-helper";
+    deductibleForSelectedVehicle,
+    endorsementsForSelectedVehicle,
+    noCoverageForSelectedVehicle,
+    repairWaivedForSelectedVehicle
+} from '@/helpers/policy-vehicle-helper';
 
 export default {
-  name: "policy-vehicles",
-  components: {
-    siteHeader,
-    siteFooter,
-    vehicleBanner,
-    policyVehiclesQuestion,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-  },
-  mixins: [BaseFormMixin],
-  async beforeRouteEnter(to, from, next) {
-    const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
-    next((vm) => {
-      vm.setCmsContent(cmsContentPromise);
-    });
-  },
-  setup() {
-    const mainStore = useMainStore();
-    return { mainStore };
-  },
-  data() {
-    const policyVehicles = useMainStore().order.policy.vehicles;
-    return {
-      policyVehicles,
-      selectedVehicleVin: "",
-      selectedPolicyVehicle: null,
-      displayGeneric: true,
-      policyVinFound: true,
-      rules: {
-        optionRequired: globalRules.OPTION_REQUIRED,
-      },
-    };
-  },
-  computed: {
-    VehiclesForQuestions() {
-      // Map API result data, to address-vehicles data structure
-      const vehicles = this.policyVehicles;
-      const mappedData =
-        vehicles?.map((v) => {
-          const maskSymbol = "X";
-          const vinStart = maskSymbol.repeat(v.vin.length - 6);
-          const vinEnd = v.vin.substring(v.vin.length - 6);
-          return {
-            vin: v.vin,
-            vehicle: v,
-            Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
-            Name: v.vin,
-            SubText: `VIN ${vinStart}${vinEnd}`,
-          };
-        }) ?? [];
-      return mappedData;
+    name: 'policy-vehicles',
+    components: {
+        siteHeader,
+        siteFooter,
+        vehicleBanner,
+        policyVehiclesQuestion,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form
     },
-    noCoverageForSelectedVehicle() {
-      return noCoverageForSelectedVehicle(this.selectedPolicyVehicle);
-    },
-    deductibleForSelectedVehicle() {
-      return deductibleForSelectedVehicle(this.selectedPolicyVehicle);
-    },
-    endorsementsForSelectedVehicle() {
-      return endorsementsForSelectedVehicle(this.selectedPolicyVehicle);
-    },
-    repairWaivedForSelectedVehicle() {
-      return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
-    },
-    selectedVehicle() {
-      const vehicle = this.mainStore.lookupVehicleByVin(
-        this.selectedVehicleVin
-      );
-      return vehicle;
-    },
-  },
-  watch: {
-    async selectedVehicleVin(value) {
-      if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
-        // clear previously selected vehicle and image
-        this.mainStore.resetVehicleState();
-        this.displayGeneric = true;
-        this.selectedPolicyVehicle = null;
-      } else {
-        // get vehicle details from selected VIN
-        const vehicle = await this.lookupVehicleByVin(value);
-
-        // handle error in case vehicle info doesn't come back for selected VIN
-        if (vehicle?.error === true) {
-          this.mainStore.resetVehicleState();
-          this.displayGeneric = true;
-          this.selectedPolicyVehicle = null;
-          return;
-        }
-        if (vehicle) {
-          // save selected vehicle to the store
-          this.mainStore.updateVehicle(vehicle.data);
-          this.displayGeneric = false;
-          this.selectedPolicyVehicle = this.policyVehicles.find(
-            (p) => p.vin === value
-          );
-        }
-      }
-    },
-  },
-  beforeMount() {
-    if (this.mainStore.order.vehicle.vin) {
-      this.selectedVehicleVin = this.mainStore.order.vehicle.vin;
-    } else if (this.policyVehicles?.length === 1) {
-      this.selectedVehicleVin = this.policyVehicles[0]?.vin;
-    }
-  },
-  methods: {
-    backButtonAction() {
-      useMainStore().issConfig.disabledFields.policyNumber = true;
-      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-    },
-    async forwardButtonAction() {
-      if (
-        this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED
-      ) {
-        const vehicleLookupResponse = await this.lookupVehicleByVin(
-          this.selectedVehicleVin
-        );
-        const vehicle = this.policyVehicles.find(
-          (pv) => pv.vin === this.selectedVehicleVin
-        );
-
-        if (vehicleLookupResponse.error) {
-          if (vehicleLookupResponse.status === 404) {
-            this.mainStore.resetVehicleState();
-            useMainStore().updateVehicle({
-              policyVehicleId: vehicle.id,
-              carId: "0",
-              category: "",
-              year: vehicle.vehicleYear || "",
-              make: vehicle.vehicleMake || "",
-              model: vehicle.vehicleModel || "",
-              style: vehicle.vehicleStyle || "",
-              vin: vehicle.vin,
-              noCoverage: this.noCoverageForSelectedVehicle,
-              deductible: this.deductibleForSelectedVehicle,
-              repairWaived: this.repairWaivedForSelectedVehicle,
-            });
-            this.policyVinFound = false;
-            return this.navigateForward();
-          }
-
-          this.mainStore.setBailout(
-            bailoutMessage.vehicleLookupError(
-              vehicle.vin,
-              vehicleLookupResponse.data
-            )
-          );
-          return this.navigateForward();
-        }
-
-        this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
-          policyVehicleId: vehicle.id,
-          vin: this.selectedVehicleVin,
-          noCoverage: this.noCoverageForSelectedVehicle,
-          deductible: this.deductibleForSelectedVehicle,
-          repairWaived: this.repairWaivedForSelectedVehicle,
-          endorsements: this.endorsementsForSelectedVehicle,
+    mixins: [BaseFormMixin],
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
+        next((vm) => {
+            vm.setCmsContent(cmsContentPromise);
         });
-
-        useMainStore().updateVehicle(this.vehicleFromLookup);
-      }
-      return this.navigateForward();
     },
-    navigateForward() {
-      if (this.mainStore.isBailout) {
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
-          this.$route,
-          {},
-          {}
-        );
-      } else if (
-        this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED
-      ) {
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
-          this.$route,
-          {},
-          {}
-        );
-      } else if (
-        this.endorsementsForSelectedVehicle?.length > 0 &&
-        (this.endorsementsForSelectedVehicle?.includes(
-          endorsementOptions.PARKING_GUARD
-        ) ||
-          this.endorsementsForSelectedVehicle?.includes(
-            endorsementOptions.EDUCATOR
-          ))
-      ) {
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
-          this.$route
-        );
-      } else if (!this.policyVinFound) {
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
-          this.$route,
-          {},
-          {}
-        );
-      } else {
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
-          this.$route,
-          {},
-          {}
-        );
-      }
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
     },
-    async lookupVehicleByVin(vin) {
-      try {
-        return await useMainStore().lookupVehicleByVin(vin);
-      } catch (responseError) {
+    data() {
+        const policyVehicles = useMainStore().order.policy.vehicles;
         return {
-          error: true,
-          status: responseError.status,
-          data: responseError.data,
+            policyVehicles,
+            selectedVehicleVin: '',
+            selectedPolicyVehicle: null,
+            displayGeneric: true,
+            policyVinFound: true,
+            rules: {
+                optionRequired: globalRules.OPTION_REQUIRED
+            }
         };
-      }
     },
-  },
+    computed: {
+        VehiclesForQuestions() {
+            // Map API result data, to address-vehicles data structure
+            const vehicles = this.policyVehicles;
+            const mappedData =
+        vehicles?.map((v) => {
+            const maskSymbol = 'X';
+            const vinStart = maskSymbol.repeat(v.vin.length - 6);
+            const vinEnd = v.vin.substring(v.vin.length - 6);
+            return {
+                vin: v.vin,
+                vehicle: v,
+                Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
+                Name: v.vin,
+                SubText: `VIN ${vinStart}${vinEnd}`
+            };
+        }) ?? [];
+            return mappedData;
+        },
+        noCoverageForSelectedVehicle() {
+            return noCoverageForSelectedVehicle(this.selectedPolicyVehicle);
+        },
+        deductibleForSelectedVehicle() {
+            return deductibleForSelectedVehicle(this.selectedPolicyVehicle);
+        },
+        endorsementsForSelectedVehicle() {
+            return endorsementsForSelectedVehicle(this.selectedPolicyVehicle);
+        },
+        repairWaivedForSelectedVehicle() {
+            return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
+        },
+        selectedVehicle() {
+            const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
+            return vehicle;
+        }
+    },
+    watch: {
+        async selectedVehicleVin(value) {
+            if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
+                // clear previously selected vehicle and image
+                this.mainStore.resetVehicleState();
+                this.displayGeneric = true;
+                this.selectedPolicyVehicle = null;
+            } else {
+                // get vehicle details from selected VIN
+                const vehicle = await this.lookupVehicleByVin(value);
+
+                // handle error in case vehicle info doesn't come back for selected VIN
+                if (vehicle?.error === true) {
+                    this.mainStore.resetVehicleState();
+                    this.displayGeneric = true;
+                    this.selectedPolicyVehicle = null;
+                    return;
+                }
+                if (vehicle) {
+                    // save selected vehicle to the store
+                    this.mainStore.updateVehicle(vehicle.data);
+                    this.displayGeneric = false;
+                    this.selectedPolicyVehicle = this.policyVehicles.find((p) => p.vin === value);
+                }
+            }
+        }
+    },
+    beforeMount() {
+        if (this.mainStore.order.vehicle.vin) {
+            this.selectedVehicleVin = this.mainStore.order.vehicle.vin;
+        } else if (this.policyVehicles?.length === 1) {
+            this.selectedVehicleVin = this.policyVehicles[0]?.vin;
+        }
+    },
+    methods: {
+        backButtonAction() {
+            useMainStore().issConfig.disabledFields.policyNumber = true;
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        async forwardButtonAction() {
+            if (
+                this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED
+            ) {
+                const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin);
+                const vehicle = this.policyVehicles.find((pv) => pv.vin === this.selectedVehicleVin);
+
+                if (vehicleLookupResponse.error) {
+                    if (vehicleLookupResponse.status === 404) {
+                        this.mainStore.resetVehicleState();
+                        useMainStore().updateVehicle({
+                            policyVehicleId: vehicle.id,
+                            carId: '0',
+                            category: '',
+                            year: vehicle.vehicleYear || '',
+                            make: vehicle.vehicleMake || '',
+                            model: vehicle.vehicleModel || '',
+                            style: vehicle.vehicleStyle || '',
+                            vin: vehicle.vin,
+                            noCoverage: this.noCoverageForSelectedVehicle,
+                            deductible: this.deductibleForSelectedVehicle,
+                            repairWaived: this.repairWaivedForSelectedVehicle
+                        });
+                        this.policyVinFound = false;
+                        return this.navigateForward();
+                    }
+
+                    this.mainStore.setBailout(bailoutMessage.vehicleLookupError(
+                        vehicle.vin,
+                        vehicleLookupResponse.data
+                    ));
+                    return this.navigateForward();
+                }
+
+                this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
+                    policyVehicleId: vehicle.id,
+                    vin: this.selectedVehicleVin,
+                    noCoverage: this.noCoverageForSelectedVehicle,
+                    deductible: this.deductibleForSelectedVehicle,
+                    repairWaived: this.repairWaivedForSelectedVehicle,
+                    endorsements: this.endorsementsForSelectedVehicle
+                });
+
+                useMainStore().updateVehicle(this.vehicleFromLookup);
+            }
+            return this.navigateForward();
+        },
+        navigateForward() {
+            if (this.mainStore.isBailout) {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+                    this.$route,
+                    {},
+                    {}
+                );
+            } else if (
+                this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED
+            ) {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
+                    this.$route,
+                    {},
+                    {}
+                );
+            } else if (
+                this.endorsementsForSelectedVehicle?.length > 0
+        && (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD)
+          || this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))
+            ) {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
+                    this.$route
+                );
+            } else if (!this.policyVinFound) {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
+                    this.$route,
+                    {},
+                    {}
+                );
+            } else {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
+                    this.$route,
+                    {},
+                    {}
+                );
+            }
+        },
+        async lookupVehicleByVin(vin) {
+            try {
+                return await useMainStore().lookupVehicleByVin(vin);
+            } catch (responseError) {
+                return {
+                    error: true,
+                    status: responseError.status,
+                    data: responseError.data
+                };
+            }
+        }
+    }
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 63ebe119..b8b34c72 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -1,9 +1,14 @@
 <template>
-  <Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
+  <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 px-0 px-md-2">
-          <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
+          <siteHeader
+class="mb-2 header"
+cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
       <div class="row justify-content-center">
@@ -11,8 +16,7 @@
           <siteSubHeader
             id="sub-header"
             cmsWidgetName="SiteSubHeader"
-            class="mb-5 mt-4"
-          />
+            class="mb-5 mt-4" />
         </div>
       </div>
       <div class="row justify-content-center">
@@ -25,219 +29,214 @@
             groupName="prefQuestions"
             buttonTypeString="providerPrefRadio"
             :validationRules="rules.optionRequired"
-            isRequired
-          />
+            isRequired />
           <siteFooter
             ref="siteFooter"
             class="mt-5"
             cmsWidgetName="SiteFooterWidget"
             :isForwardActionDisabled="isForwardActionDisabled"
             @backClicked="navigateBack"
-            @forwardClicked="forwardButtonAction"
-          />
+            @forwardClicked="forwardButtonAction" />
         </div>
       </div>
-      <recalModal ref="recalModal" cmsWidgetName="RecalModal" />
+      <recalModal
+ref="recalModal"
+cmsWidgetName="RecalModal" />
       <steeringModal
         ref="StateSteeringModal"
-        cmsWidgetName="StateSteeringModal"
-      />
+        cmsWidgetName="StateSteeringModal" />
       <shopPreferenceModal
         ref="ShopPreferenceDrawer"
         cmsWidgetName="ShopPreferenceDrawer"
         :showSteeringLink="showSteeringLink"
-        @openSteering="openStateSteeringModal"
-      />
+        @openSteering="openStateSteeringModal" />
       <tpaRecalModal
         ref="TPARecalModal"
         cmsWidgetName="TPARecalModal"
         :ackError="ackError"
-        @buttonClick="navigateWithTPAAck"
-      />
+        @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";
+    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 bailoutMessage from "@/constants/bailoutMessage";
+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,
-  },
-  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;
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form,
+        buttonQuestion,
+        recalModal,
+        steeringModal,
+        shopPreferenceModal,
+        tpaRecalModal
     },
-    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;
+    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();
             }
-            break;
-          default:
-        }
-        this.navigateForward(scenario);
-        this.mainStore.saveProviderPreferenceData({
-          selectedProvider: this.selectedProvider,
-          tpaAcknowledgement: this.tpaAcknowledgement,
         });
-      }
     },
-    openStateSteeringModal() {
-      this.$refs.StateSteeringModal.openModal();
+    data() {
+        return {
+            selectedProvider: null,
+            showSteeringLink: false,
+            tpaAcknowledgement: false,
+            rules: {
+                optionRequired: globalRules.OPTION_REQUIRED
+            }
+        };
     },
-  },
+    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>
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index 479907b5..0483c177 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -3,12 +3,13 @@
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-  >
+    @invalidSubmit="onInvalidSubmit">
     <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 class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
+          <siteHeader
+class="mb-2 header"
+cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
       <div class="row justify-content-center">
@@ -16,21 +17,18 @@
           <siteSubHeader
             cmsWidgetName="ScheduleSubHeaderWidget"
             subTextClasses="text-center small sub-text"
-            class="mt-4"
-          />
+            class="mt-4" />
           <template v-if="ChangeShopLink.length">
             <textBlock
               cmsWidgetName="ChangeShopLink"
               justifyText="center"
               class="mb-3 text-link-small"
-              :marginTopSizeOverride="1"
-            />
+              :marginTopSizeOverride="1" />
           </template>
           <div class="main-content-container">
             <locationAlerts
               ref="locationAlerts"
-              cmsWidgetPrefix="LocationAlert-"
-            />
+              cmsWidgetPrefix="LocationAlert-" />
             <datePicker
               ref="datePicker"
               v-model="selectedDate"
@@ -39,8 +37,7 @@
               class="text-link-small"
               :customSelectableDatesCallback="getAvailableDatesMethod"
               validationRules="date-required"
-              @dateClicked="openInshopTimeSlotsModal"
-            />
+              @dateClicked="openInshopTimeSlotsModal" />
             <timeSlotModalQuestion
               ref="timeSlotModalQuestion"
               v-model="selectedTimeSlotInfo"
@@ -62,16 +59,14 @@
                 selectableDatesData.estimatedServiceMinutesMaximum
               "
               validationRules="time-slot-selection-required"
-              @timeSlotModalClosed="timeSlotModalClosed"
-            />
+              @timeSlotModalClosed="timeSlotModalClosed" />
             <siteFooter
               ref="navbar"
               class="mt-5"
               cmsWidgetName="SiteFooterWidget"
               :isForwardActionDisabled="!meta.valid"
               @backClicked="navigateBack"
-              @forwardClicked="forwardButtonAction"
-            />
+              @forwardClicked="forwardButtonAction" />
           </div>
         </div>
       </div>
@@ -80,419 +75,407 @@
 </template>
 <script>
 // Components
-import siteHeader from "@/iss-components/site-header/site-header.vue";
-import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
-import locationAlerts from "@/layouts/schedule-page/location-alerts/location-alerts.vue";
-import datePicker from "@/digital-components/date-picker/date-picker.vue";
-import timeSlotModalQuestion from "@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue";
-import siteFooter from "@/iss-components/site-footer/site-footer.vue";
-import textBlock from "@/digital-components/text-block/text-block.vue";
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
+import datePicker from '@/digital-components/date-picker/date-picker.vue';
+import timeSlotModalQuestion from '@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
 
 // Supporting files
 import {
-  AppointmentTypeStrings,
-  GET_MOBILE_TIME_SLOTS,
-  GET_SHOP_TIME_SLOTS,
-  PREMIUM_FEE_PART_TYPE,
-} from "@/constants/schedule-constants.js";
+    AppointmentTypeStrings,
+    GET_MOBILE_TIME_SLOTS,
+    GET_SHOP_TIME_SLOTS,
+    PREMIUM_FEE_PART_TYPE
+} from '@/constants/schedule-constants.js';
 import {
-  fetchCmsContentForPage,
-  splitCopyOnCMSPlaceHolder,
-} from "@/helpers/cms-content-helper";
+    fetchCmsContentForPage,
+    splitCopyOnCMSPlaceHolder
+} from '@/helpers/cms-content-helper';
 import {
-  calcDaysBetweenDates,
-  convertDateStringToDate,
-  sumDateString,
-} from "@/helpers/date-helper";
-import settleAllPromises from "@/helpers/layout-helper";
-import { Form, defineRule } from "vee-validate";
-import BaseFormMixin from "@/mixins/base-form-mixin.js";
-import errorMessages from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import { useMainStore } from "@/store";
+    calcDaysBetweenDates,
+    convertDateStringToDate,
+    sumDateString
+} from '@/helpers/date-helper';
+import settleAllPromises from '@/helpers/layout-helper';
+import { Form, defineRule } from 'vee-validate';
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import errorMessages from '@/constants/error-messages';
+import { required } from '@/helpers/validation-rules';
+import { useMainStore } from '@/store';
 
 // DEFINE VALIDATION RULES
-defineRule("date-required", required(errorMessages.DATE_REQUIRED));
-defineRule("time-slot-selection-required", (value) => {
-  if (value?.timeSlot?.routeCode == null) {
-    return errorMessages.DATE_REQUIRED;
-  }
-  return true;
+defineRule('date-required', required(errorMessages.DATE_REQUIRED));
+defineRule('time-slot-selection-required', (value) => {
+    if (value?.timeSlot?.routeCode == null) {
+        return errorMessages.DATE_REQUIRED;
+    }
+    return true;
 });
 
 // Define constants
 const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
 
 const getAvailableDates = async (
-  startDateString,
-  endDateString,
-  appointmentType,
-  providerNumber
-) => {
-  const apiEndDateLimit = sumDateString(
     startDateString,
-    TIME_SLOTS_CALL_DAYS_LIMIT
-  );
-  const difference = calcDaysBetweenDates(startDateString, endDateString);
-  const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
-  const storeActionConfigs = [];
-  const timeSlotsData = {};
-  timeSlotsData.days = [];
-  let apiStartDate = startDateString;
-  let apiEndDate = endDateString;
+    endDateString,
+    appointmentType,
+    providerNumber
+) => {
+    const apiEndDateLimit = sumDateString(
+        startDateString,
+        TIME_SLOTS_CALL_DAYS_LIMIT
+    );
+    const difference = calcDaysBetweenDates(startDateString, endDateString);
+    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
+    const storeActionConfigs = [];
+    const timeSlotsData = {};
+    timeSlotsData.days = [];
+    let apiStartDate = startDateString;
+    let apiEndDate = endDateString;
 
-  for (let i = 1; i <= apiCallsCount; i++) {
-    let storeActionConfig;
+    for (let i = 1; i <= apiCallsCount; i++) {
+        let storeActionConfig;
 
-    if (i > 1) {
-      apiStartDate = sumDateString(apiEndDate, 1);
-      apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
+        if (i > 1) {
+            apiStartDate = sumDateString(apiEndDate, 1);
+            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
 
-      if (i === apiCallsCount) {
-        apiEndDate = endDateString;
-      }
-    } else if (apiEndDate > apiEndDateLimit) {
-      apiEndDate = apiEndDateLimit;
-    }
-
-    if (
-      appointmentType === AppointmentTypeStrings.MOBILE ||
-      appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
-    ) {
-      storeActionConfig = {
-        storeAction: GET_MOBILE_TIME_SLOTS,
-        payload: {
-          startDate: apiStartDate,
-          endDate: apiEndDate,
-        },
-      };
-    } else {
-      storeActionConfig = {
-        storeAction: GET_SHOP_TIME_SLOTS,
-        payload: {
-          startDate: apiStartDate,
-          endDate: apiEndDate,
-          shopAppointmentType: appointmentType,
-          providerNumber,
-        },
-      };
-    }
-    if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
-  }
-
-  const timeSlotsResponsesData = {
-    days: [],
-  };
-
-  function compareDayStrings(a, b) {
-    if (a.date < b.date) return -1;
-    if (a.date > b.date) return 1;
-    return 0;
-  }
-
-  const makeParallelCalls = async () => {
-    await Promise.all(
-      storeActionConfigs.map(async (storeAction) => {
-        let timeSlotsResponse = null;
-        if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
-          timeSlotsResponse = await useMainStore().getShopTimeSlots(
-            storeAction.payload.startDate,
-            storeAction.payload.endDate,
-            storeAction.payload.shopAppointmentType,
-            storeAction.payload.providerNumber
-          );
-        } else {
-          timeSlotsResponse = await useMainStore().getMobileTimeSlots(
-            storeAction.payload.startDate,
-            storeAction.payload.endDate
-          );
+            if (i === apiCallsCount) {
+                apiEndDate = endDateString;
+            }
+        } else if (apiEndDate > apiEndDateLimit) {
+            apiEndDate = apiEndDateLimit;
         }
 
-        timeSlotsResponsesData.estimatedServiceMinutesMinimum =
-          timeSlotsResponse.data.estimatedServiceMinutesMinimum;
-        timeSlotsResponsesData.estimatedServiceMinutesMaximum =
-          timeSlotsResponse.data.estimatedServiceMinutesMaximum;
-        timeSlotsResponsesData.days = [
-          ...timeSlotsResponsesData.days,
-          ...timeSlotsResponse.data.days,
-        ];
-      })
-    );
-  };
+        if (
+            appointmentType === AppointmentTypeStrings.MOBILE
+      || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
+        ) {
+            storeActionConfig = {
+                storeAction: GET_MOBILE_TIME_SLOTS,
+                payload: {
+                    startDate: apiStartDate,
+                    endDate: apiEndDate
+                }
+            };
+        } else {
+            storeActionConfig = {
+                storeAction: GET_SHOP_TIME_SLOTS,
+                payload: {
+                    startDate: apiStartDate,
+                    endDate: apiEndDate,
+                    shopAppointmentType: appointmentType,
+                    providerNumber
+                }
+            };
+        }
+        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
+    }
 
-  return makeParallelCalls().then(() => {
+    const timeSlotsResponsesData = {
+        days: []
+    };
+
+    function compareDayStrings(a, b) {
+        if (a.date < b.date) return -1;
+        if (a.date > b.date) return 1;
+        return 0;
+    }
+
+    const makeParallelCalls = async () => {
+        await Promise.all(storeActionConfigs.map(async (storeAction) => {
+            let timeSlotsResponse = null;
+            if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
+                timeSlotsResponse = await useMainStore().getShopTimeSlots(
+                    storeAction.payload.startDate,
+                    storeAction.payload.endDate,
+                    storeAction.payload.shopAppointmentType,
+                    storeAction.payload.providerNumber
+                );
+            } else {
+                timeSlotsResponse = await useMainStore().getMobileTimeSlots(
+                    storeAction.payload.startDate,
+                    storeAction.payload.endDate
+                );
+            }
+
+            timeSlotsResponsesData.estimatedServiceMinutesMinimum =
+          timeSlotsResponse.data.estimatedServiceMinutesMinimum;
+            timeSlotsResponsesData.estimatedServiceMinutesMaximum =
+          timeSlotsResponse.data.estimatedServiceMinutesMaximum;
+            timeSlotsResponsesData.days = [
+                ...timeSlotsResponsesData.days,
+                ...timeSlotsResponse.data.days
+            ];
+        }));
+    };
+
+    return makeParallelCalls().then(() => {
     // sort days chronologically
-    timeSlotsResponsesData.days.sort(compareDayStrings);
-    return timeSlotsResponsesData;
-  });
+        timeSlotsResponsesData.days.sort(compareDayStrings);
+        return timeSlotsResponsesData;
+    });
 };
 
 export default {
-  name: "schedule-page",
-  components: {
-    siteHeader,
-    siteSubHeader,
-    locationAlerts,
-    datePicker,
-    timeSlotModalQuestion,
-    siteFooter,
-    textBlock,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-  },
-  mixins: [BaseFormMixin],
-  async beforeRouteEnter(to, from, next) {
+    name: 'schedule-page',
+    components: {
+        siteHeader,
+        siteSubHeader,
+        locationAlerts,
+        datePicker,
+        timeSlotModalQuestion,
+        siteFooter,
+        textBlock,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form
+    },
+    mixins: [BaseFormMixin],
+    async beforeRouteEnter(to, from, next) {
     // Call APIs
-    let preSelectedDate = await useMainStore().order.schedule.date;
-    if (!preSelectedDate || preSelectedDate.startTime === null) {
-      preSelectedDate = null;
-    }
+        let preSelectedDate = await useMainStore().order.schedule.date;
+        if (!preSelectedDate || preSelectedDate.startTime === null) {
+            preSelectedDate = null;
+        }
 
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    const datePickerInitialDataPromise =
+        const datePickerInitialDataPromise =
       await datePicker.methods.loadInitialData({
-        selectableDatesSetting: "custom",
-        initialViewRowsToShow: 5,
-        customSelectableDatesCallback: getAvailableDates,
-        preSelectedDate,
+          selectableDatesSetting: 'custom',
+          initialViewRowsToShow: 5,
+          customSelectableDatesCallback: getAvailableDates,
+          preSelectedDate
       });
 
-    const premiumFeePromise = useMainStore().getMobilePremiumFee();
+        const premiumFeePromise = useMainStore().getMobilePremiumFee();
 
-    const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
-      if (result.data) {
-        return useMainStore().priceOrderItemsAndSaveServerData(result.data);
-      }
-      return result.data;
-    });
+        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
+            if (result.data) {
+                return useMainStore().priceOrderItemsAndSaveServerData(result.data);
+            }
+            return result.data;
+        });
 
-    const alertReasonsPromise = locationAlerts.methods.loadInitialData(
-      useMainStore().order.serviceLocation.zipCodeCtu,
-      useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
-    );
+        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
+            useMainStore().order.serviceLocation.zipCodeCtu,
+            useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
+        );
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-      {
-        resultKey: "alertReasons",
-        promise: alertReasonsPromise,
-      },
-      {
-        resultKey: "datePickerInitialData",
-        promise: datePickerInitialDataPromise,
-      },
-      {
-        resultKey: "premiumFeeWithPrice",
-        promise: premiumFeeWithPricePromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise
+            },
+            {
+                resultKey: 'alertReasons',
+                promise: alertReasonsPromise
+            },
+            {
+                resultKey: 'datePickerInitialData',
+                promise: datePickerInitialDataPromise
+            },
+            {
+                resultKey: 'premiumFeeWithPrice',
+                promise: premiumFeeWithPricePromise
+            }
+        ];
 
-    // use resultMap to populate layout content.
-    const resultMap = await settleAllPromises(promiseResultMap);
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-      vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
-      vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
-      vm.setData(
-        resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
-        resultMap.premiumFeeWithPrice
-      );
-      vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
-    });
-  },
-  setup() {
-    const mainStore = useMainStore();
-    return { mainStore };
-  },
-  data() {
-    return {
-      selectedDate: this.getSelectedDate(),
-      selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
-      selectableDatesData: [],
-      mobilePremiumAppointmentFee: null,
-    };
-  },
-  computed: {
-    ChangeShopLinkText() {
-      return this.getCmsContent("ChangeShopLink", "Text");
+        // use resultMap to populate layout content.
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
+            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
+            vm.setData(
+                resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
+                resultMap.premiumFeeWithPrice
+            );
+            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
+        });
     },
-    ChangeShopLink() {
-      return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
     },
-    appointmentType() {
-      return useMainStore().order.serviceLocation.appointmentType;
-    },
-    timeSlotsForSelectedDate() {
-      if (!this.selectedDate) {
-        return null;
-      }
-
-      return this.selectableDatesData.days?.find(
-        (selectableDate) => selectableDate.date === this.selectedDate
-      );
-    },
-    supportingItems() {
-      return useMainStore().lineItems.supportingItems;
-    },
-  },
-  watch: {
-    selectedDate(newValue, oldValue) {
-      // Clear time slot selection if date selected changes
-      if (newValue !== oldValue) {
-        this.selectedTimeSlotInfo = {
-          timeSlot: {
-            date: null,
-            routeCode: null,
-            startTime: null,
-            endTime: null,
-            jobMaxMinutes: null,
-            jobMinMinutes: null,
-          },
-          isPremiumAppointment: null,
+    data() {
+        return {
+            selectedDate: this.getSelectedDate(),
+            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
+            selectableDatesData: [],
+            mobilePremiumAppointmentFee: null
         };
-      }
     },
-    selectedTimeSlotInfo(newValue) {
-      this.updateFooterButtonText(newValue);
-    },
-  },
-  methods: {
-    splitCopyOnCMSPlaceHolder,
-    arePagePrerequisitesValid() {
-      const { serviceLocation } = useMainStore().order;
-      const serviceLocationPreReqs =
-        serviceLocation.zipCode &&
-        serviceLocation.zipCodeCtu &&
-        serviceLocation.appointmentType &&
-        (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
-          serviceLocation.appointmentType ===
-            AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP ||
-          serviceLocation.provider.providerNumber);
-      const supportingItems = this.supportingItems !== null;
-      const damageInfo =
-        useMainStore().order.damage.isRepair ||
-        (useMainStore().order.lineItems?.glassParts != null &&
-          useMainStore().order.lineItems.glassParts.length > 0);
+    computed: {
+        ChangeShopLinkText() {
+            return this.getCmsContent('ChangeShopLink', 'Text');
+        },
+        ChangeShopLink() {
+            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
+        },
+        appointmentType() {
+            return useMainStore().order.serviceLocation.appointmentType;
+        },
+        timeSlotsForSelectedDate() {
+            if (!this.selectedDate) {
+                return null;
+            }
 
-      return serviceLocationPreReqs && supportingItems && damageInfo;
+            return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
+        },
+        supportingItems() {
+            return useMainStore().lineItems.supportingItems;
+        }
     },
-    setData(initialShopTimeSlotsResponse, premiumFeeWithPriceResponse) {
-      this.selectableDatesData = initialShopTimeSlotsResponse;
-      this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
-        ? premiumFeeWithPriceResponse[0]
-        : null;
+    watch: {
+        selectedDate(newValue, oldValue) {
+            // Clear time slot selection if date selected changes
+            if (newValue !== oldValue) {
+                this.selectedTimeSlotInfo = {
+                    timeSlot: {
+                        date: null,
+                        routeCode: null,
+                        startTime: null,
+                        endTime: null,
+                        jobMaxMinutes: null,
+                        jobMinMinutes: null
+                    },
+                    isPremiumAppointment: null
+                };
+            }
+        },
+        selectedTimeSlotInfo(newValue) {
+            this.updateFooterButtonText(newValue);
+        }
     },
-    async getAvailableDatesMethod(startDate, endDate) {
-      const newShopTimeSlots = await getAvailableDates(
-        startDate,
-        endDate,
-        this.appointmentType,
-        this.mainStore.order.serviceLocation.provider.providerNumber
-      );
-      // ADD API CALL RESULTS TO EXISTING DATE DATA
-      this.selectableDatesData.days = this.selectableDatesData.days.concat(
-        newShopTimeSlots.days
-      );
-      return newShopTimeSlots;
-    },
-    getAvailableDates,
-    getServiceZipCtuCodeFromStore() {
-      return this.mainStore.order.serviceLocation.zipCodeCtu;
-    },
-    openInshopTimeSlotsModal() {
-      this.$refs.timeSlotModalQuestion.openModal();
-    },
-    getSelectedDate() {
-      return this.mainStore.order.schedule.date;
-    },
-    getSelectedTimeSlotInfo() {
-      const isPremiumAppointment =
+    methods: {
+        splitCopyOnCMSPlaceHolder,
+        arePagePrerequisitesValid() {
+            const { serviceLocation } = useMainStore().order;
+            const serviceLocationPreReqs =
+        serviceLocation.zipCode
+        && serviceLocation.zipCodeCtu
+        && serviceLocation.appointmentType
+        && (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
+          || serviceLocation.appointmentType
+            === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
+          || serviceLocation.provider.providerNumber);
+            const supportingItems = this.supportingItems !== null;
+            const damageInfo =
+        useMainStore().order.damage.isRepair
+        || (useMainStore().order.lineItems?.glassParts != null
+          && useMainStore().order.lineItems.glassParts.length > 0);
+
+            return serviceLocationPreReqs && supportingItems && damageInfo;
+        },
+        setData(initialShopTimeSlotsResponse, premiumFeeWithPriceResponse) {
+            this.selectableDatesData = initialShopTimeSlotsResponse;
+            this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
+                ? premiumFeeWithPriceResponse[0]
+                : null;
+        },
+        async getAvailableDatesMethod(startDate, endDate) {
+            const newShopTimeSlots = await getAvailableDates(
+                startDate,
+                endDate,
+                this.appointmentType,
+                this.mainStore.order.serviceLocation.provider.providerNumber
+            );
+            // ADD API CALL RESULTS TO EXISTING DATE DATA
+            this.selectableDatesData.days = this.selectableDatesData.days.concat(newShopTimeSlots.days);
+            return newShopTimeSlots;
+        },
+        getAvailableDates,
+        getServiceZipCtuCodeFromStore() {
+            return this.mainStore.order.serviceLocation.zipCodeCtu;
+        },
+        openInshopTimeSlotsModal() {
+            this.$refs.timeSlotModalQuestion.openModal();
+        },
+        getSelectedDate() {
+            return this.mainStore.order.schedule.date;
+        },
+        getSelectedTimeSlotInfo() {
+            const isPremiumAppointment =
         !!(
-          this.supportingItems?.filter(
-            (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
-          ) ?? []
+            this.supportingItems?.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE) ?? []
         ).length > 0;
 
-      const selectedTimeSlotInfo = {
-        timeSlot: this.mainStore.order.schedule,
-        isPremiumAppointment,
-      };
+            const selectedTimeSlotInfo = {
+                timeSlot: this.mainStore.order.schedule,
+                isPremiumAppointment
+            };
 
-      return selectedTimeSlotInfo;
-    },
-    timeSlotModalClosed() {
-      // Clear the selectedDate if no timeSlot has been selected
-      if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
-        this.selectedDate = null;
-      }
-    },
-    updateFooterButtonText(timeSlotInfo) {
-      let navbarButtonText;
-      if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
-        navbarButtonText = "Continue";
-      } else {
-        navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
-          timeSlotInfo.timeSlot.date
-        )}`;
-        if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-          navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-            timeSlotInfo.timeSlot.startTime
-          )}`;
-        } else if (
-          this.appointmentType === AppointmentTypeStrings.MOBILE &&
-          !timeSlotInfo.isPremiumAppointment
+            return selectedTimeSlotInfo;
+        },
+        timeSlotModalClosed() {
+            // Clear the selectedDate if no timeSlot has been selected
+            if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
+                this.selectedDate = null;
+            }
+        },
+        updateFooterButtonText(timeSlotInfo) {
+            let navbarButtonText;
+            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
+                navbarButtonText = 'Continue';
+            } else {
+                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(timeSlotInfo.timeSlot.date)}`;
+                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(timeSlotInfo.timeSlot.startTime)}`;
+                } else if (
+                    this.appointmentType === AppointmentTypeStrings.MOBILE
+          && !timeSlotInfo.isPremiumAppointment
+                ) {
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.startTime,
+                        true
+                    )} - ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.endTime,
+                        true
+                    )}`;
+                }
+            }
+            this.$refs.navbar.updateButtonText(navbarButtonText);
+        },
+        convertSelectedDateToShortMonthAndDay(selectedDate) {
+            // This conversion ensures we don't get get GMT induced date changes
+            const dateObject = convertDateStringToDate(selectedDate);
+            return dateObject.toLocaleDateString('en-us', {
+                month: 'short',
+                day: 'numeric'
+            });
+        },
+        getDisplayTextForMilitaryTime(
+            militaryTimeInput,
+            shouldTrimMinutesIfEmpty = false
         ) {
-          navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-            timeSlotInfo.timeSlot.startTime,
-            true
-          )} - ${this.getDisplayTextForMilitaryTime(
-            timeSlotInfo.timeSlot.endTime,
-            true
-          )}`;
+            // Expected input: "HH:MM"
+            let hours = parseInt(militaryTimeInput.split(':')[0], 10);
+            const minutes = militaryTimeInput.split(':')[1];
+            const meridianNotation = hours > 11 ? 'PM' : 'AM';
+
+            if (hours > 12) {
+                hours -= 12;
+            }
+
+            if (shouldTrimMinutesIfEmpty && minutes === '00') {
+                return `${hours} ${meridianNotation}`;
+            }
+            return `${hours}:${minutes} ${meridianNotation}`;
+        },
+        forwardButtonAction() {
+            this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
+
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.$route
+            );
         }
-      }
-      this.$refs.navbar.updateButtonText(navbarButtonText);
-    },
-    convertSelectedDateToShortMonthAndDay(selectedDate) {
-      // This conversion ensures we don't get get GMT induced date changes
-      const dateObject = convertDateStringToDate(selectedDate);
-      return dateObject.toLocaleDateString("en-us", {
-        month: "short",
-        day: "numeric",
-      });
-    },
-    getDisplayTextForMilitaryTime(
-      militaryTimeInput,
-      shouldTrimMinutesIfEmpty = false
-    ) {
-      // Expected input: "HH:MM"
-      let hours = parseInt(militaryTimeInput.split(":")[0], 10);
-      const minutes = militaryTimeInput.split(":")[1];
-      const meridianNotation = hours > 11 ? "PM" : "AM";
-
-      if (hours > 12) {
-        hours -= 12;
-      }
-
-      if (shouldTrimMinutesIfEmpty && minutes === "00") {
-        return `${hours} ${meridianNotation}`;
-      }
-      return `${hours}:${minutes} ${meridianNotation}`;
-    },
-    forwardButtonAction() {
-      this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
-
-      this.$router.navigate(
-        this.navigationScenarios.CLICKED_FORWARD,
-        this.$route
-      );
-    },
-  },
+    }
 };
 </script>
 
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 113bfad1..dc6406ff 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -3,12 +3,13 @@
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-  >
+    @invalidSubmit="onInvalidSubmit">
     <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 class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
+          <siteHeader
+class="mb-2 header"
+cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
       <div class="row justify-content-center">
@@ -16,8 +17,7 @@
           <siteSubHeader
             id="sub-header"
             cmsWidgetName="SiteSubHeader"
-            class="mb-5 mt-4"
-          />
+            class="mb-5 mt-4" />
         </div>
       </div>
       <div class="row justify-content-center">
@@ -28,44 +28,38 @@
             modalWidgetName="ServiceZipModalWidget"
             :onZipUpdateCallback="reloadShopData"
             @updatedServiceability="setServiceabilityDetails"
-            @updatedContainsMilitaryBase="setContainsMilitaryBase"
-          />
+            @updatedContainsMilitaryBase="setContainsMilitaryBase" />
           <alert
             v-if="displayMilitaryZipAlert"
             ref="alertMilitaryBaseZip"
             class="my-5"
             cmsWidgetName="AlertMilitaryBaseZipWidget"
-            alertClass="alert-warning"
-          />
+            alertClass="alert-warning" />
           <alert
             v-if="displayServiceableMobileOnly"
             ref="alertMobileOnly"
             class="my-5"
             cmsWidgetName="AlertMobileOnlyWidget"
-            alertClass="alert-warning"
-          />
+            alertClass="alert-warning" />
           <alert
             v-if="displayRecalibrationWarning"
             ref="alertRecalNoMobile"
             class="my-5"
             cmsWidgetName="AlertRecalNoMobileWidget"
             alertClass="alert-warning"
-            @text-link-clicked="openModalAction"
-          />
+            @text-link-clicked="openModalAction" />
           <alert
             v-if="displayServiceableInshopOnly"
             ref="alertInshopOnly"
             class="my-5"
             cmsWidgetName="AlertInshopOnlyWidget"
-            alertClass="alert-warning"
-          />
+            alertClass="alert-warning" />
           <alert
             v-if="displayNoShopsAlert"
             ref="alertNoShops"
             class="my-5"
             cmsWidgetName="AlertNoShopsWidget"
-            alertClass="alert-warning"
-          />
+            alertClass="alert-warning" />
           <appointmentTypeQuestion
             v-show="isAppointmentTypeDisplayed"
             ref="appointmentTypeQuestion"
@@ -75,8 +69,7 @@
             :isDisplayed="isAppointmentTypeDisplayed"
             groupName="appointmentTypeQuestion"
             cmsWidgetName="AppointmentTypeQuestionWidget"
-            validationRules="option-required"
-          />
+            validationRules="option-required" />
           <mobileLocationModalQuestions
             v-if="isMobileLocationDisplayed"
             ref="mobileLocationQuestions"
@@ -89,8 +82,7 @@
             :onZipUpdateCallback="reloadShopData"
             @updated-mobile-fee-part="setMobileFeePart"
             @updated-serviceability="setServiceabilityDetails"
-            @updated-contains-military-base="setContainsMilitaryBase"
-          />
+            @updated-contains-military-base="setContainsMilitaryBase" />
           <shopQuestion
             v-show="isShopQuestionDisplayed"
             ref="shopQuestion"
@@ -98,10 +90,11 @@
             :selectedAppointmentType="selectedAppointmentType"
             :isDisplayed="isShopQuestionDisplayed"
             cmsWidgetName="ShopQuestionWidget"
-            @updatedMobileProviderNumber="setMobileProviderNumber"
-          />
-          <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
-    </div>
+            @updatedMobileProviderNumber="setMobileProviderNumber" />
+          <contentGroupModal
+ref="RecalModal"
+cmsWidgetName="RecalModal" />
+        </div>
       </div>
       <div class="row justify-content-center">
         <div class="col-md-6 col-xl-4">
@@ -111,8 +104,7 @@
             cmsWidgetName="SiteFooterWidget"
             :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
             @backClicked="navigateBack"
-            @forwardClicked="forwardButtonAction"
-          />
+            @forwardClicked="forwardButtonAction" />
         </div>
       </div>
     </div>
@@ -120,395 +112,393 @@
 </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 { 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";
+    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,
-  },
-  mixins: [baseFormMixin],
-  async beforeRouteEnter(to, from, next) {
+    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 cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    const serviceZipCode =
-      useMainStore().order.serviceLocation.zipCode ||
-      useMainStore().order.customer.address.zipCode;
-    const zipCodeData = getZipCodeData(serviceZipCode);
+        const serviceZipCode =
+      useMainStore().order.serviceLocation.zipCode
+      || useMainStore().order.customer.address.zipCode;
+        const zipCodeData = getZipCodeData(serviceZipCode);
 
-    const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
-    const serviceabilityDetailsPromise =
+        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
+        const serviceabilityDetailsPromise =
       getServiceabilityDetails(serviceZipCode);
-    const shopQuestionInitialDataPromise =
+        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,
-      },
-    ];
+        // 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");
+        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 };
     },
-    serviceZipCodeQuestion: {
-      get() {
+    data() {
         return {
-          state: this.state,
-          zipCode: this.zipCode,
+            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
         };
-      },
-      set(newValue) {
-        if (newValue.zipCode !== this.zipCode) {
-          this.resetMobileLocation();
-          this.selectedAppointmentType = null;
-          this.selectedProvider = null;
+    },
+    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;
         }
+    },
+    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);
+                }
 
-        this.state = newValue.state;
-        this.zipCode = newValue.zipCode;
+                provider = {
+                    providerNumber: this.mobileProviderNumber,
+                    address: {
+                        streetAddress: null,
+                        city: null,
+                        state: null,
+                        zipCode: null,
+                        zipCodeCtu: null
+                    }
+                };
+            }
 
-        // 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;
+            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
+            });
 
-        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
-        );
-      }
+            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;
+            }
 
-      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);
-        }
+            if (serviceabilityDetails) {
+                this.setServiceabilityDetails(serviceabilityDetails);
+            }
 
-        provider = {
-          providerNumber: this.mobileProviderNumber,
-          address: {
-            streetAddress: null,
-            city: null,
-            state: null,
-            zipCode: null,
-            zipCodeCtu: null,
-          },
-        };
-      }
+            if (mobileFeePart) {
+                this.mobileFeePart = mobileFeePart;
+            }
 
-      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,
-      });
+            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.$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 =
+            this.isVehicleProtected = null;
+        },
+        setServiceabilityDetails(serviceabilityDetails) {
+            this.isGlassServiceableInshop =
         serviceabilityDetails.isGlassServiceableInshop;
-      this.isRecalibrationServiceableInshop =
+            this.isRecalibrationServiceableInshop =
         serviceabilityDetails.isRecalibrationServiceableInshop;
-      this.isGlassServiceableMobile =
+            this.isGlassServiceableMobile =
         serviceabilityDetails.isGlassServiceableMobile;
-      this.isRecalibrationServiceableMobile =
+            this.isRecalibrationServiceableMobile =
         serviceabilityDetails.isRecalibrationServiceableMobile;
-    },
-  },
+        }
+    }
 };
 </script>
 
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 3045c593..07e26a39 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -3,8 +3,7 @@
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-  >
+    @invalidSubmit="onInvalidSubmit">
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
         <div class="col-md-6 px-0 px-md-2">
@@ -13,520 +12,458 @@
       </div>
       <div class="row justify-content-center">
         <div class="col-md-6 col-xl-4">
-                <alert
-                  v-if="shouldDisplayVehicleChangeAlert"
-                  ref="vehicleChangeAlert"
-                  class="mt-5 mb-0"
-                  cmsWidgetName="VehicleChangeAlert"
-                  alertClass="alert-warning"
-                  :isDismissible="false"
-                />
-                <vehicleBanner
-                  class="mb-4"
-                  cmsWidgetName="VehicleBannerWidget"
-                  :displayGenericVehicleImage="false"
-                />
-                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-            </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                <damageLocationQuestion
-                  ref="damageLocation"
-                  v-model="selectedDamageLocations"
-                  cmsWidgetName="DamageLocationQuestion"
-                  groupName="DamageLocationQuestion"
-                />
-            </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                <windshieldOptions
-                  ref="windshieldOptions"
-                  v-model="selectedWindshieldOptions"
-                  :hasRepairReplaceConflict="hasRepairReplaceConflict"
-                  :hasSplitSingleConflict="hasSplitSingleConflict"
-                  :selectedDamageLocations="selectedDamageLocations"
-                  class="mb-3"
-                />
-            </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                <alert
-                  v-if="hasRepairReplaceConflict"
-                  class="my-5"
-                  cmsWidgetName="HasReplacementConflict"
-                  alertClass="alert-danger"
-                  :isDismissible="false"
-                />
-            </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                <sideDoorOptions
-                  v-show="!hasRepairReplaceConflict"
-                  ref="sideDoorOptions"
-                  v-model="sideDoorOptionsData"
-                  cmsWidgetName="SideDoorSideQuestion"
-                  groupName="SideDoorSideQuestion"
-                  :selectedDamageLocations="selectedDamageLocations"
-                  class="mb-1"
-                />
-            </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                <replaceOptionsQuestion
-                  ref="backGlassOptions"
-                  v-model="selectedRearReplaceOptions"
-                  cmsWidgetName="RearReplaceOptionsQuestion"
-                  :isAvailable="
-                    isRearWindowDamageLocation && !hasRepairReplaceConflict
-                  "
-                  groupName="BackGlassReplaceOptionsQuestion"
-                  validationRules="replace-options-required"
-                />
-            </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                <site-footer
-                  ref="siteFooter"
-                  class="mt-5"
-                  cmsWidgetName="SiteFooterWidget"
-                  :isForwardActionDisabled="!meta.valid"
-                  @backClicked="navigateBack"
-                  @forwardClicked="forwardButtonAction"
-                />
-              </div>
-            </div>
-          </div>
+          <alert
+            v-if="shouldDisplayVehicleChangeAlert"
+            ref="vehicleChangeAlert"
+            class="mt-5 mb-0"
+            cmsWidgetName="VehicleChangeAlert"
+            alertClass="alert-warning"
+            :isDismissible="false" />
+          <vehicleBanner
+            class="mb-4"
+            cmsWidgetName="VehicleBannerWidget"
+            :displayGenericVehicleImage="false" />
+          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6">
+          <damageLocationQuestion
+            ref="damageLocation"
+            v-model="selectedDamageLocations"
+            cmsWidgetName="DamageLocationQuestion"
+            groupName="DamageLocationQuestion" />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <windshieldOptions
+            ref="windshieldOptions"
+            v-model="selectedWindshieldOptions"
+            :hasRepairReplaceConflict="hasRepairReplaceConflict"
+            :hasSplitSingleConflict="hasSplitSingleConflict"
+            :selectedDamageLocations="selectedDamageLocations"
+            class="mb-3" />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <alert
+            v-if="hasRepairReplaceConflict"
+            class="my-5"
+            cmsWidgetName="HasReplacementConflict"
+            alertClass="alert-danger"
+            :isDismissible="false" />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <sideDoorOptions
+            v-show="!hasRepairReplaceConflict"
+            ref="sideDoorOptions"
+            v-model="sideDoorOptionsData"
+            cmsWidgetName="SideDoorSideQuestion"
+            groupName="SideDoorSideQuestion"
+            :selectedDamageLocations="selectedDamageLocations"
+            class="mb-1" />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <replaceOptionsQuestion
+            ref="backGlassOptions"
+            v-model="selectedRearReplaceOptions"
+            cmsWidgetName="RearReplaceOptionsQuestion"
+            :isAvailable="
+              isRearWindowDamageLocation && !hasRepairReplaceConflict
+            "
+            groupName="BackGlassReplaceOptionsQuestion"
+            validationRules="replace-options-required" />
+        </div>
+      </div>
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-xl-4">
+          <site-footer
+            ref="siteFooter"
+            class="mt-5"
+            cmsWidgetName="SiteFooterWidget"
+            :isForwardActionDisabled="!meta.valid"
+            @backClicked="navigateBack"
+            @forwardClicked="forwardButtonAction" />
+        </div>
+      </div>
+    </div>
   </Form>
 </template>
 
 <script>
 // Components
-import siteHeader from "@/iss-components/site-header/site-header.vue";
-import siteFooter from "@/iss-components/site-footer/site-footer.vue";
-import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
-import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
-import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options.vue";
-import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue";
-import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options.vue";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question.vue";
-import alert from "@/ux-components/alert/alert.vue";
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import sideDoorOptions from '@/layouts/vehicle-damage/side-door-options/side-door-options.vue';
+import damageLocationQuestion from '@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue';
+import windshieldOptions from '@/layouts/vehicle-damage/windshield-options/windshield-options.vue';
+import replaceOptionsQuestion from '@/layouts/vehicle-damage/replace-options-question/replace-options-question.vue';
+import alert from '@/ux-components/alert/alert.vue';
 
 // Supporting files
-import BaseFormMixin from "@/mixins/base-form-mixin.js";
-import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import settleAllPromises from "@/helpers/layout-helper";
-import { Form, defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
-import errorMessages from "@/constants/error-messages";
-import damageLocationsCms from "@/constants/damage-locations-cms.js";
-import damageLocationsSelected from "@/constants/damage-locations-selected.js";
-import { useMainStore } from "@/store";
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import settleAllPromises from '@/helpers/layout-helper';
+import { Form, defineRule } from 'vee-validate';
+import { required } from '@/helpers/validation-rules';
+import errorMessages from '@/constants/error-messages';
+import damageLocationsCms from '@/constants/damage-locations-cms.js';
+import damageLocationsSelected from '@/constants/damage-locations-selected.js';
+import { useMainStore } from '@/store';
 
 // DEFINE VALIDATION RULES
 defineRule(
-  "replace-options-required",
-  required(errorMessages.REPLACE_OPTIONS_REQUIRED)
+    'replace-options-required',
+    required(errorMessages.REPLACE_OPTIONS_REQUIRED)
 );
 
 export default {
-  name: "vehicle-damage",
+    name: 'vehicle-damage',
 
-  components: {
-    siteHeader,
-    siteFooter,
-    vehicleBanner,
-    siteSubHeader,
-    sideDoorOptions,
-    damageLocationQuestion,
-    windshieldOptions,
-    replaceOptionsQuestion,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-    alert,
-  },
-  mixins: [BaseFormMixin, vehicleQuestionsMixin],
-  async beforeRouteEnter(to, from, next) {
-    const store = useMainStore();
-
-    // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-    const damageOptionsPromise = store.getDamageOptions(
-      store.order.vehicle.carId
-    );
-
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-      {
-        resultKey: "damageOptions",
-        promise: damageOptionsPromise,
-      },
-    ];
-
-    const resultMap = await settleAllPromises(promiseResultMap);
-
-    // Call the "next" function to complete the transition to this page.
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-      vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
-      vm.$refs.sideDoorOptions.initializeComponent(
-        resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
-        resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
-      );
-      vm.$refs.windshieldOptions.initializeComponent(
-        resultMap.damageOptions.windshieldOptions.availableReplacementOptions
-      );
-      vm.$refs.backGlassOptions.initializeComponent(
-        resultMap.damageOptions.backGlassOptions.availableReplacementOptions
-      );
-    });
-  },
-  setup() {
-    const mainStore = useMainStore();
-
-    return { mainStore };
-  },
-  data() {
-    return {
-      selectedDamageLocations: this.getDamageLocationsFromStore(),
-      sideDoorOptionsData: {
-        selectedDoorSides: this.getDoorSidesFromStore(),
-        selectedDriverSideReplaceOptions:
-          this.getDriverSideReplaceOptionsFromStore(),
-        selectedPassengerSideReplaceOptions:
-          this.getPassengerSideReplaceOptionsFromStore(),
-      },
-      selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
-      selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
-    };
-  },
-  computed: {
-    isWindshieldDamageLocation() {
-      return this.selectedDamageLocations.some(
-        (selectedDamages) =>
-          selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD
-      );
+    components: {
+        siteHeader,
+        siteFooter,
+        vehicleBanner,
+        siteSubHeader,
+        sideDoorOptions,
+        damageLocationQuestion,
+        windshieldOptions,
+        replaceOptionsQuestion,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form,
+        alert
     },
-    isSideDoorDamageLocation() {
-      return this.selectedDamageLocations.some(
-        (selectedDamages) =>
-          selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR
-      );
-    },
-    isRearWindowDamageLocation() {
-      return this.selectedDamageLocations.some(
-        (selectedDamages) =>
-          selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW
-      );
-    },
-    isWindshieldRepair() {
-      return (
-        this.isWindshieldDamageLocation &&
-        this.selectedWindshieldOptions.selectedWindshieldDamageType ===
-          damageLocationsSelected.REPAIR
-      );
-    },
-    isDriverSideReplace() {
-      if (!this.isSideDoorDamageLocation) return false;
+    mixins: [BaseFormMixin, vehicleQuestionsMixin],
+    async beforeRouteEnter(to, from, next) {
+        const store = useMainStore();
 
-      return this.sideDoorOptionsData.selectedDoorSides.some(
-        (selectedDriverSide) =>
-          selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE
-      );
-    },
-    isPassengerSideReplace() {
-      if (!this.isSideDoorDamageLocation) return false;
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId);
 
-      return this.sideDoorOptionsData.selectedDoorSides.some(
-        (selectedPassengerSide) =>
-          selectedPassengerSide.toUpperCase() ===
-          damageLocationsCms.PASSENGERSIDE
-      );
-    },
-    hasRepairReplaceConflict() {
-      return (
-        this.isWindshieldDamageLocation &&
-        this.selectedDamageLocations.length > 1 &&
-        this.isWindshieldRepair
-      );
-    },
-    hasSplitSingleConflict() {
-      if (
-        !this.selectedDamageLocations?.includes("Windshield") ||
-        this.selectedWindshieldOptions.selectedWindshieldDamageType ===
-          damageLocationsSelected.REPAIR ||
-        !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
-      )
-        return false;
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise
+            },
+            {
+                resultKey: 'damageOptions',
+                promise: damageOptionsPromise
+            }
+        ];
 
-      return (
-        this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-          (selectedSingleWindshield) =>
-            selectedSingleWindshield.toUpperCase() ===
-            damageLocationsSelected.SINGLE.toUpperCase()
-        ) &&
-        (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-          (selectedDriverWindshield) =>
-            selectedDriverWindshield.toUpperCase() ===
-            damageLocationsSelected.DRIVER.toUpperCase()
-        ) ||
-          this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
-            (selectedPassengerWindshield) =>
-              selectedPassengerWindshield.toUpperCase() ===
-              damageLocationsSelected.PASSENGER.toUpperCase()
-          ))
-      );
-    },
-    shouldDisplayVehicleChangeAlert() {
-      return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
-    },
-  },
-  methods: {
-    arePagePrerequisitesValid() {
-      if (useMainStore().order.vehicle.carId) {
-        return true;
-      }
-      return false;
-    },
-    getDamageLocationsFromStore() {
-      const glassSelections = [];
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-      if (
-        this.mainStore.order.damage.glassToReplace?.some(
-          (glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD
-        ) ||
-        this.mainStore.order.damage.isRepair
-      ) {
-        glassSelections.push(damageLocationsSelected.WINDSHIELD);
-      }
-      if (
-        this.mainStore.order.damage.glassToReplace?.some(
-          (glass) =>
-            glass.glassLocation === damageLocationsSelected.DRIVER ||
-            glass.glassLocation === damageLocationsSelected.PASSENGER
-        )
-      ) {
-        glassSelections.push(damageLocationsSelected.SIDEDOOR);
-      }
-
-      if (
-        this.mainStore.order.damage.glassToReplace?.some(
-          (glass) => glass.glassLocation === damageLocationsSelected.REAR
-        )
-      ) {
-        glassSelections.push(damageLocationsSelected.REARWINDOW);
-      }
-
-      return glassSelections;
-    },
-    getWindshieldOptionsFromStore() {
-      const windShieldOptions = {
-        selectedWindshieldDamageType: "",
-        selectedWindshieldChipCount: null,
-        selectedWindshieldReplaceOptions: [],
-      };
-
-      if (this.mainStore.order.damage.isRepair === undefined)
-        return windshieldOptions;
-
-      if (this.mainStore.order.damage.isRepair) {
-        windShieldOptions.selectedWindshieldDamageType =
-          damageLocationsSelected.REPAIR;
-        windShieldOptions.selectedWindshieldChipCount =
-          this.mainStore.order.damage.numberOfChips;
-      } else {
-        if (
-          this.mainStore.order.damage.glassToReplace?.some(
-            (glass) =>
-              glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
-              glass.glassName === damageLocationsSelected.SINGLE
-          )
-        ) {
-          windShieldOptions.selectedWindshieldDamageType =
-            damageLocationsSelected.REPLACE;
-          windShieldOptions.selectedWindshieldReplaceOptions.push(
-            damageLocationsSelected.SINGLE
-          );
-        }
-
-        if (
-          this.mainStore.order.damage.glassToReplace?.some(
-            (glass) =>
-              glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
-              glass.glassName === damageLocationsSelected.DRIVER
-          )
-        ) {
-          windShieldOptions.selectedWindshieldDamageType =
-            damageLocationsSelected.REPLACE;
-          windShieldOptions.selectedWindshieldReplaceOptions.push(
-            damageLocationsSelected.DRIVER
-          );
-        }
-
-        if (
-          this.mainStore.order.damage.glassToReplace?.some(
-            (glass) =>
-              glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
-              glass.glassName === damageLocationsSelected.PASSENGER
-          )
-        ) {
-          windShieldOptions.selectedWindshieldDamageType =
-            damageLocationsSelected.REPLACE;
-          windShieldOptions.selectedWindshieldReplaceOptions.push(
-            damageLocationsSelected.PASSENGER
-          );
-        }
-      }
-
-      return windShieldOptions;
-    },
-    getDoorSidesFromStore() {
-      const doorSides = [];
-      if (
-        this.mainStore.order.damage.glassToReplace?.some(
-          (glass) => glass.glassLocation === damageLocationsSelected.DRIVER
-        )
-      ) {
-        doorSides.push(damageLocationsSelected.DRIVERSIDE);
-      }
-
-      if (
-        this.mainStore.order.damage.glassToReplace?.some(
-          (glass) => glass.glassLocation === damageLocationsSelected.PASSENGER
-        )
-      ) {
-        doorSides.push(damageLocationsSelected.PASSENGERSIDE);
-      }
-
-      return doorSides;
-    },
-    getDriverSideReplaceOptionsFromStore() {
-      const driverSideReplaceOptions = [];
-
-      this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
-        if (glass.glassLocation === damageLocationsSelected.DRIVER) {
-          driverSideReplaceOptions.push(glass.glassName);
-        }
-      });
-
-      return driverSideReplaceOptions;
-    },
-    getPassengerSideReplaceOptionsFromStore() {
-      const passengerSideReplaceOptions = [];
-
-      this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
-        if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
-          passengerSideReplaceOptions.push(glass.glassName);
-        }
-      });
-
-      return passengerSideReplaceOptions;
-    },
-    getRearReplaceOptionsFromStore() {
-      const rearReplaceOptions =
-        this.mainStore.order.damage.glassToReplace?.filter(
-          (glass) => glass.glassLocation === damageLocationsSelected.REAR
-        )[0]?.glassName;
-
-      return rearReplaceOptions;
-    },
-    async forwardButtonAction() {
-      this.mainStore.saveVehicleDamage(
-        this.isWindshieldRepair,
-        this.selectedGlassToReplace(),
-        this.selectedWindshieldOptions.selectedWindshieldChipCount
-      );
-
-      if (this.isWindshieldRepair) {
-        const supportingItems = await useMainStore().getSupportingItems();
-        useMainStore().updateSupportingItems(supportingItems.data);
-      }
-
-      if (this.mainStore.damage.isRepair) {
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
-          this.$route
-        );
-      } else if (this.mainStore.order.vehicle.vin) {
-        // If vin already exists, navigate directly to vin-lookup
-
-        const partsOrQuestionsResponse = await this.getPartsOrQuestions();
-        if (partsOrQuestionsResponse.error) {
-          // To Do: Need requirement on what to do here
-          window.console.error("Error on retrieving PartsOrQuestions");
-          this.$refs.siteFooter.removeLoader();
-          return null;
-        }
-
-        // Comes from vehicleQuestionsMixin.navigateForward()
-        await this.navigateForward(
-          partsOrQuestionsResponse.data.partsOrQuestions,
-          this
-        );
-      } else {
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
-          this.$route
-        );
-      }
-
-      return null;
-    },
-    selectedGlassToReplace() {
-      const selectedGlassToReplace = [];
-      if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
-        this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
-          (wsItem) => {
-            selectedGlassToReplace.push({
-              glassLocation: damageLocationsSelected.WINDSHIELD,
-              glassName: wsItem,
-            });
-          }
-        );
-      }
-
-      if (this.isDriverSideReplace) {
-        this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(
-          (driverItem) => {
-            selectedGlassToReplace.push({
-              glassLocation: damageLocationsSelected.DRIVER,
-              glassName: driverItem,
-            });
-          }
-        );
-      }
-
-      if (this.isPassengerSideReplace) {
-        this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
-          (passengerItem) => {
-            selectedGlassToReplace.push({
-              glassLocation: damageLocationsSelected.PASSENGER,
-              glassName: passengerItem,
-            });
-          }
-        );
-      }
-
-      if (this.isRearWindowDamageLocation) {
-        selectedGlassToReplace.push({
-          glassLocation: damageLocationsSelected.REAR,
-          glassName: this.selectedRearReplaceOptions,
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
+            vm.$refs.sideDoorOptions.initializeComponent(
+                resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
+                resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+            );
+            vm.$refs.windshieldOptions.initializeComponent(resultMap.damageOptions.windshieldOptions.availableReplacementOptions);
+            vm.$refs.backGlassOptions.initializeComponent(resultMap.damageOptions.backGlassOptions.availableReplacementOptions);
         });
-      }
-
-      return selectedGlassToReplace;
     },
-  },
+    setup() {
+        const mainStore = useMainStore();
+
+        return { mainStore };
+    },
+    data() {
+        return {
+            selectedDamageLocations: this.getDamageLocationsFromStore(),
+            sideDoorOptionsData: {
+                selectedDoorSides: this.getDoorSidesFromStore(),
+                selectedDriverSideReplaceOptions:
+          this.getDriverSideReplaceOptionsFromStore(),
+                selectedPassengerSideReplaceOptions:
+          this.getPassengerSideReplaceOptionsFromStore()
+            },
+            selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
+            selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore()
+        };
+    },
+    computed: {
+        isWindshieldDamageLocation() {
+            return this.selectedDamageLocations.some((selectedDamages) =>
+                selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD);
+        },
+        isSideDoorDamageLocation() {
+            return this.selectedDamageLocations.some((selectedDamages) =>
+                selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR);
+        },
+        isRearWindowDamageLocation() {
+            return this.selectedDamageLocations.some((selectedDamages) =>
+                selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW);
+        },
+        isWindshieldRepair() {
+            return (
+                this.isWindshieldDamageLocation
+        && this.selectedWindshieldOptions.selectedWindshieldDamageType
+          === damageLocationsSelected.REPAIR
+            );
+        },
+        isDriverSideReplace() {
+            if (!this.isSideDoorDamageLocation) return false;
+
+            return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) =>
+                selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE);
+        },
+        isPassengerSideReplace() {
+            if (!this.isSideDoorDamageLocation) return false;
+
+            return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) =>
+                selectedPassengerSide.toUpperCase()
+          === damageLocationsCms.PASSENGERSIDE);
+        },
+        hasRepairReplaceConflict() {
+            return (
+                this.isWindshieldDamageLocation
+        && this.selectedDamageLocations.length > 1
+        && this.isWindshieldRepair
+            );
+        },
+        hasSplitSingleConflict() {
+            if (
+                !this.selectedDamageLocations?.includes('Windshield')
+        || this.selectedWindshieldOptions.selectedWindshieldDamageType
+          === damageLocationsSelected.REPAIR
+        || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
+            ) return false;
+
+            return (
+                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedSingleWindshield) =>
+                    selectedSingleWindshield.toUpperCase()
+            === damageLocationsSelected.SINGLE.toUpperCase())
+        && (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedDriverWindshield) =>
+            selectedDriverWindshield.toUpperCase()
+            === damageLocationsSelected.DRIVER.toUpperCase())
+          || this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedPassengerWindshield) =>
+              selectedPassengerWindshield.toUpperCase()
+              === damageLocationsSelected.PASSENGER.toUpperCase()))
+            );
+        },
+        shouldDisplayVehicleChangeAlert() {
+            return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
+        }
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            if (useMainStore().order.vehicle.carId) {
+                return true;
+            }
+            return false;
+        },
+        getDamageLocationsFromStore() {
+            const glassSelections = [];
+
+            if (
+                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD)
+        || this.mainStore.order.damage.isRepair
+            ) {
+                glassSelections.push(damageLocationsSelected.WINDSHIELD);
+            }
+            if (
+                this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                    glass.glassLocation === damageLocationsSelected.DRIVER
+            || glass.glassLocation === damageLocationsSelected.PASSENGER)
+            ) {
+                glassSelections.push(damageLocationsSelected.SIDEDOOR);
+            }
+
+            if (
+                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.REAR)
+            ) {
+                glassSelections.push(damageLocationsSelected.REARWINDOW);
+            }
+
+            return glassSelections;
+        },
+        getWindshieldOptionsFromStore() {
+            const windShieldOptions = {
+                selectedWindshieldDamageType: '',
+                selectedWindshieldChipCount: null,
+                selectedWindshieldReplaceOptions: []
+            };
+
+            if (this.mainStore.order.damage.isRepair === undefined) return windshieldOptions;
+
+            if (this.mainStore.order.damage.isRepair) {
+                windShieldOptions.selectedWindshieldDamageType =
+          damageLocationsSelected.REPAIR;
+                windShieldOptions.selectedWindshieldChipCount =
+          this.mainStore.order.damage.numberOfChips;
+            } else {
+                if (
+                    this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
+              && glass.glassName === damageLocationsSelected.SINGLE)
+                ) {
+                    windShieldOptions.selectedWindshieldDamageType =
+            damageLocationsSelected.REPLACE;
+                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
+                }
+
+                if (
+                    this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
+              && glass.glassName === damageLocationsSelected.DRIVER)
+                ) {
+                    windShieldOptions.selectedWindshieldDamageType =
+            damageLocationsSelected.REPLACE;
+                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
+                }
+
+                if (
+                    this.mainStore.order.damage.glassToReplace?.some((glass) =>
+                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
+              && glass.glassName === damageLocationsSelected.PASSENGER)
+                ) {
+                    windShieldOptions.selectedWindshieldDamageType =
+            damageLocationsSelected.REPLACE;
+                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
+                }
+            }
+
+            return windShieldOptions;
+        },
+        getDoorSidesFromStore() {
+            const doorSides = [];
+            if (
+                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.DRIVER)
+            ) {
+                doorSides.push(damageLocationsSelected.DRIVERSIDE);
+            }
+
+            if (
+                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.PASSENGER)
+            ) {
+                doorSides.push(damageLocationsSelected.PASSENGERSIDE);
+            }
+
+            return doorSides;
+        },
+        getDriverSideReplaceOptionsFromStore() {
+            const driverSideReplaceOptions = [];
+
+            this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
+                if (glass.glassLocation === damageLocationsSelected.DRIVER) {
+                    driverSideReplaceOptions.push(glass.glassName);
+                }
+            });
+
+            return driverSideReplaceOptions;
+        },
+        getPassengerSideReplaceOptionsFromStore() {
+            const passengerSideReplaceOptions = [];
+
+            this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
+                if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
+                    passengerSideReplaceOptions.push(glass.glassName);
+                }
+            });
+
+            return passengerSideReplaceOptions;
+        },
+        getRearReplaceOptionsFromStore() {
+            const rearReplaceOptions =
+        this.mainStore.order.damage.glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
+
+            return rearReplaceOptions;
+        },
+        async forwardButtonAction() {
+            this.mainStore.saveVehicleDamage(
+                this.isWindshieldRepair,
+                this.selectedGlassToReplace(),
+                this.selectedWindshieldOptions.selectedWindshieldChipCount
+            );
+
+            if (this.isWindshieldRepair) {
+                const supportingItems = await useMainStore().getSupportingItems();
+                useMainStore().updateSupportingItems(supportingItems.data);
+            }
+
+            if (this.mainStore.damage.isRepair) {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
+                    this.$route
+                );
+            } else if (this.mainStore.order.vehicle.vin) {
+                // If vin already exists, navigate directly to vin-lookup
+
+                const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+                if (partsOrQuestionsResponse.error) {
+                    // To Do: Need requirement on what to do here
+                    window.console.error('Error on retrieving PartsOrQuestions');
+                    this.$refs.siteFooter.removeLoader();
+                    return null;
+                }
+
+                // Comes from vehicleQuestionsMixin.navigateForward()
+                await this.navigateForward(
+                    partsOrQuestionsResponse.data.partsOrQuestions,
+                    this
+                );
+            } else {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
+                    this.$route
+                );
+            }
+
+            return null;
+        },
+        selectedGlassToReplace() {
+            const selectedGlassToReplace = [];
+            if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
+                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach((wsItem) => {
+                    selectedGlassToReplace.push({
+                        glassLocation: damageLocationsSelected.WINDSHIELD,
+                        glassName: wsItem
+                    });
+                });
+            }
+
+            if (this.isDriverSideReplace) {
+                this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
+                    selectedGlassToReplace.push({
+                        glassLocation: damageLocationsSelected.DRIVER,
+                        glassName: driverItem
+                    });
+                });
+            }
+
+            if (this.isPassengerSideReplace) {
+                this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach((passengerItem) => {
+                    selectedGlassToReplace.push({
+                        glassLocation: damageLocationsSelected.PASSENGER,
+                        glassName: passengerItem
+                    });
+                });
+            }
+
+            if (this.isRearWindowDamageLocation) {
+                selectedGlassToReplace.push({
+                    glassLocation: damageLocationsSelected.REAR,
+                    glassName: this.selectedRearReplaceOptions
+                });
+            }
+
+            return selectedGlassToReplace;
+        }
+    }
 };
 </script>
 
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index 3112f083..4dbcbbc3 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -1,5 +1,7 @@
 <template>
-  <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
+  <Form
+@submit="onSubmit"
+@invalidSubmit="onInvalidSubmit">
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
         <div class="col-md-6 px-0 px-md-2">
@@ -12,25 +14,21 @@
             <VehicleBanner
               class="mt-2 mb-4"
               cmsWidgetName="VehicleBannerWidget"
-              :displayGenericVehicleImage="false"
-            />
+              :displayGenericVehicleImage="false" />
             <SiteSubHeader
               cmsWidgetName="SiteSubHeaderWidget"
-              class="mt-5 mb-2"
-            />
+              class="mt-5 mb-2" />
             <VinLookupMethods
               ref="VinLookupMethods"
               v-model="selectedVinLookupMethod"
               cmsWidgetName="VINLookupMethod"
-              groupName="VinLookupMethods"
-            />
+              groupName="VinLookupMethods" />
             <SiteFooter
               cmsWidgetName="SiteFooterWidget"
               :isForwardActionDisabled="isForwardActionDisabled"
               class="mt-5"
               @backClicked="navigateBack"
-              @forwardClicked="forwardButtonAction"
-            />
+              @forwardClicked="forwardButtonAction" />
           </div>
         </div>
       </div>
@@ -39,88 +37,88 @@
 </template>
 <script>
 // Import Supporting Files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import settleAllPromises from "@/helpers/layout-helper";
-import { Form } from "vee-validate";
-import BaseFormMixin from "@/mixins/base-form-mixin";
-import vinLookupMethodSelections from "@/constants/vin-lookup-methods";
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import settleAllPromises from '@/helpers/layout-helper';
+import { Form } from 'vee-validate';
+import BaseFormMixin from '@/mixins/base-form-mixin';
+import vinLookupMethodSelections from '@/constants/vin-lookup-methods';
 
 // Import Component
-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 VehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
-import VinLookupMethods from "@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.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 VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue';
 
 export default {
-  name: "vehicle-lookup",
-  components: {
+    name: 'vehicle-lookup',
+    components: {
     // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-    SiteFooter,
-    SiteHeader,
-    SiteSubHeader,
-    VehicleBanner,
-    VinLookupMethods,
-  },
-  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.$refs.VinLookupMethods.initializeComponent();
-    });
-  },
-  data() {
-    return {
-      selectedVinLookupMethod: null,
-    };
-  },
-  computed: {
-    isForwardActionDisabled() {
-      return this.selectedVinLookupMethod === null;
+        Form,
+        SiteFooter,
+        SiteHeader,
+        SiteSubHeader,
+        VehicleBanner,
+        VinLookupMethods
     },
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
+    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.$refs.VinLookupMethods.initializeComponent();
+        });
     },
-    forwardButtonAction() {
-      switch (this.selectedVinLookupMethod) {
-        case vinLookupMethodSelections.MANUALVIN:
-          this.$router.navigate(
-            this.navigationScenarios.SELECTED_MANUAL_VIN,
-            this.$route
-          );
-          break;
-        case vinLookupMethodSelections.LICENSEPLATE:
-          this.$router.navigate(
-            this.navigationScenarios.SELECTED_LICENSE_PLATE,
-            this.$route
-          );
-          break;
-        case vinLookupMethodSelections.HOMEADDRESS:
-          this.$router.navigate(
-            this.navigationScenarios.SELECTED_HOME_ADDRESS,
-            this.$route
-          );
-          break;
-        default:
-          break;
-      }
+    data() {
+        return {
+            selectedVinLookupMethod: null
+        };
     },
-    resetDependentState() {},
-  },
+    computed: {
+        isForwardActionDisabled() {
+            return this.selectedVinLookupMethod === null;
+        }
+    },
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        forwardButtonAction() {
+            switch (this.selectedVinLookupMethod) {
+                case vinLookupMethodSelections.MANUALVIN:
+                    this.$router.navigate(
+                        this.navigationScenarios.SELECTED_MANUAL_VIN,
+                        this.$route
+                    );
+                    break;
+                case vinLookupMethodSelections.LICENSEPLATE:
+                    this.$router.navigate(
+                        this.navigationScenarios.SELECTED_LICENSE_PLATE,
+                        this.$route
+                    );
+                    break;
+                case vinLookupMethodSelections.HOMEADDRESS:
+                    this.$router.navigate(
+                        this.navigationScenarios.SELECTED_HOME_ADDRESS,
+                        this.$route
+                    );
+                    break;
+                default:
+                    break;
+            }
+        },
+        resetDependentState() {}
+    }
 };
 </script>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index f7437c1b..4b893086 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,5 +1,8 @@
 <template>
-  <Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
+  <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 px-0 px-md-2">
@@ -12,12 +15,10 @@
             ref="vehicleBanner"
             class="mt-2 mb-4"
             cmsWidgetName="VehicleBannerWidget"
-            :displayGenericVehicleImage="false"
-          />
+            :displayGenericVehicleImage="false" />
           <siteSubHeader
             ref="siteSubHeader"
-            cmsWidgetName="SiteSubHeaderWidget"
-          />
+            cmsWidgetName="SiteSubHeaderWidget" />
         </div>
       </div>
       <div class="row justify-content-center">
@@ -27,9 +28,10 @@
             class="mt-3 mb-3"
             alertClass="alert-warning"
             cmsWidgetName="AlertWidget"
-            :isDismissible="false"
-          />
-          <div v-for="(item, i) in PartsOrQuestions" :key="i">
+            :isDismissible="false" />
+          <div
+v-for="(item, i) in PartsOrQuestions"
+:key="i">
             <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
             <hr v-if="i > 0" />
             <glassPartQuestion
@@ -40,8 +42,7 @@
               :glassLocation="item.glassLocation"
               :glassName="item.glassName"
               :colorAnswers="item.colorAnswers"
-              :alreadyPopulatedPartsData="alreadyPopulatedPartsData"
-            />
+              :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
           </div>
           <siteFooter
             ref="siteFooter"
@@ -49,8 +50,7 @@
             cmsWidgetName="SiteFooterWidget"
             :isForwardActionDisabled="isForwardActionDisabled"
             @backClicked="navigateBackByVehicleQuestions"
-            @ForwardClicked="forwardButtonAction"
-          />
+            @ForwardClicked="forwardButtonAction" />
         </div>
       </div>
     </div>
@@ -59,187 +59,182 @@
 
 <script>
 // Components
-import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue";
-import siteHeader from "@/iss-components/site-header/site-header.vue";
-import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
-import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
-import siteFooter from "@/iss-components/site-footer/site-footer.vue";
-import alert from "@/ux-components/alert/alert.vue";
+import glassPartQuestion from '@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import alert from '@/ux-components/alert/alert.vue';
 
 // Supporting Files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import settleAllPromises from "@/helpers/layout-helper";
-import issPageValues from "@/router/router-constants/issPage-values";
-import { Form } from "vee-validate";
-import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
-import BaseFormMixin from "@/mixins/base-form-mixin.js";
-import { useMainStore } from "@/store";
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import settleAllPromises from '@/helpers/layout-helper';
+import issPageValues from '@/router/router-constants/issPage-values';
+import { Form } from 'vee-validate';
+import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
 
 export default {
-  name: "vehicle-parts",
-  components: {
+    name: 'vehicle-parts',
+    components: {
     // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-    glassPartQuestion,
-    siteHeader,
-    vehicleBanner,
-    siteSubHeader,
-    siteFooter,
-    alert,
-  },
-  mixins: [BaseFormMixin, vehicleQuestionsMixin],
-  async beforeRouteEnter(to, from, next) {
+        Form,
+        glassPartQuestion,
+        siteHeader,
+        vehicleBanner,
+        siteSubHeader,
+        siteFooter,
+        alert
+    },
+    mixins: [BaseFormMixin, vehicleQuestionsMixin],
+    async beforeRouteEnter(to, from, next) {
     // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-    ];
-    const resultMap = await settleAllPromises(promiseResultMap);
-    // Call the "next" function to complete the transition to this page.
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise
+            }
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
 
-      // Glass Part Question dynamic component
-      Object.keys(vm.$refs)
-        .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
-        .forEach((c) =>
-          vm.$refs[c][0].initializeComponent({
-            ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-            FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
-          })
-        );
-    });
-  },
-  data() {
-    return {
-      selectedGlassParts: {},
-      alertWidgetData: Object,
-      alreadyPopulatedPartsData: [],
-    };
-  },
-  computed: {
-    isForwardActionDisabled() {
-      return (
-        this.selectedGlassPartNumbers?.length !==
-        this.PartsFromApi.partsOrQuestions?.length
-      );
+            // Glass Part Question dynamic component
+            Object.keys(vm.$refs)
+                .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
+                .forEach((c) =>
+                    vm.$refs[c][0].initializeComponent({
+                        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
+                        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget
+                    }));
+        });
     },
-    selectedGlassPartNumbers() {
-      // Compile all selected parts from the page.
-      const numberArray = [];
-      // eslint-disable-next-line no-restricted-syntax
-      for (const glassPart of Object.values(this.selectedGlassParts)) {
-        if (glassPart?.partNumber) {
-          numberArray.push(glassPart.partNumber);
+    data() {
+        return {
+            selectedGlassParts: {},
+            alertWidgetData: Object,
+            alreadyPopulatedPartsData: []
+        };
+    },
+    computed: {
+        isForwardActionDisabled() {
+            return (
+                this.selectedGlassPartNumbers?.length
+        !== this.PartsFromApi.partsOrQuestions?.length
+            );
+        },
+        selectedGlassPartNumbers() {
+            // Compile all selected parts from the page.
+            const numberArray = [];
+            // eslint-disable-next-line no-restricted-syntax
+            for (const glassPart of Object.values(this.selectedGlassParts)) {
+                if (glassPart?.partNumber) {
+                    numberArray.push(glassPart.partNumber);
+                }
+            }
+            return numberArray;
+        },
+        PartsOrQuestions() {
+            const partsData = this.PartsFromApi;
+
+            // Map API result data, to vehicle-parts data structure
+            const mappedData = partsData.partsOrQuestions?.map((g) => ({
+                glassName: g.glassName,
+                glassLocation: g.glassLocation,
+                colorAnswers: g.parts?.reduce((arr, p) => {
+                    arr.push({
+                        ColorAnswerText: p.color,
+                        FeatureAnswers: [
+                            {
+                                FeatureAnswerText:
+                  p.description === '' ? p.color : p.description,
+                                PartNumber: p.partNumber
+                            }
+                        ]
+                    });
+                    return arr;
+                }, [])
+            }));
+
+            return mappedData;
+        },
+
+        PartsFromApi() {
+            return this.mainStore.pageData(issPageValues.VEHICLE_PARTS);
+        },
+
+        RefPrefix() {
+            return 'partQuestion';
         }
-      }
-      return numberArray;
     },
-    PartsOrQuestions() {
-      const partsData = this.PartsFromApi;
-
-      // Map API result data, to vehicle-parts data structure
-      const mappedData = partsData.partsOrQuestions?.map((g) => ({
-        glassName: g.glassName,
-        glassLocation: g.glassLocation,
-        colorAnswers: g.parts?.reduce((arr, p) => {
-          arr.push({
-            ColorAnswerText: p.color,
-            FeatureAnswers: [
-              {
-                FeatureAnswerText:
-                  p.description === "" ? p.color : p.description,
-                PartNumber: p.partNumber,
-              },
-            ],
-          });
-          return arr;
-        }, []),
-      }));
-
-      return mappedData;
+    mounted() {
+        this.LoadInitialPartsData();
     },
+    methods: {
+        arePagePrerequisitesValid() {
+            // Check if isRepair is populated and if the pageData we need is here (Parts data)
+            return (
+                useMainStore().damage.isRepair != null
+        && useMainStore().pageData(issPageValues.VEHICLE_PARTS)
+        && Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS))
+            .length !== 0
+            );
+        },
+        async forwardButtonAction() {
+            const matchedParts = [];
 
-    PartsFromApi() {
-      return this.mainStore.pageData(issPageValues.VEHICLE_PARTS);
-    },
-
-    RefPrefix() {
-      return "partQuestion";
-    },
-  },
-  mounted() {
-    this.LoadInitialPartsData();
-  },
-  methods: {
-    arePagePrerequisitesValid() {
-      // Check if isRepair is populated and if the pageData we need is here (Parts data)
-      return (
-        useMainStore().damage.isRepair != null &&
-        useMainStore().pageData(issPageValues.VEHICLE_PARTS) &&
-        Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS))
-          .length !== 0
-      );
-    },
-    async forwardButtonAction() {
-      const matchedParts = [];
-
-      // Match them to the parts from the API.
-      // eslint-disable-next-line no-restricted-syntax
-      for (const [key, value] of Object.entries(
-        this.PartsFromApi.partsOrQuestions
-      )) {
-        // eslint-disable-next-line no-restricted-syntax
-        for (const [partKey, partValue] of Object.entries(value.parts)) {
-          const currentPart =
+            // Match them to the parts from the API.
+            // eslint-disable-next-line no-restricted-syntax
+            for (const [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
+                // eslint-disable-next-line no-restricted-syntax
+                for (const [partKey, partValue] of Object.entries(value.parts)) {
+                    const currentPart =
             this.PartsFromApi.partsOrQuestions[key].parts[partKey];
 
-          const isMatched = this.selectedGlassPartNumbers.some(
-            (p) => p === currentPart.partNumber
-          );
+                    const isMatched = this.selectedGlassPartNumbers.some((p) => p === currentPart.partNumber);
 
-          if (isMatched) {
-            matchedParts.push({
-              glassLocation: value.glassLocation,
-              glassName: value.glassName,
-              parts: [currentPart],
-            });
-          }
-        }
-      }
-      // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
-      if (this.isForwardActionDisabled) {
-        this.$refs.siteFooter.removeLoader();
-        throw new Error("Could not match any parts to the selected parts");
-      }
-
-      this.navigateForward(matchedParts, null);
-    },
-
-    LoadInitialPartsData() {
-      const partsData = this.PartsFromApi;
-      this.alreadyPopulatedPartsData =
-        this.mainStore.lineItems.glassParts === null
-          ? []
-          : this.mainStore.lineItems.glassParts;
-
-      partsData.partsOrQuestions.map((g) => {
-        // If the part is already populated, use the value from the store and populate the v-model.
-        Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
-          const { partNumber } = this.alreadyPopulatedPartsData[key];
-          g.parts.forEach((p) => {
-            if (p.partNumber === partNumber) {
-              this.selectedGlassParts[`${g.glassLocation}-${g.glassName}`] = p;
+                    if (isMatched) {
+                        matchedParts.push({
+                            glassLocation: value.glassLocation,
+                            glassName: value.glassName,
+                            parts: [currentPart]
+                        });
+                    }
+                }
             }
-          });
-        });
-      });
-    },
-  },
+            // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
+            if (this.isForwardActionDisabled) {
+                this.$refs.siteFooter.removeLoader();
+                throw new Error('Could not match any parts to the selected parts');
+            }
+
+            this.navigateForward(matchedParts, null);
+        },
+
+        LoadInitialPartsData() {
+            const partsData = this.PartsFromApi;
+            this.alreadyPopulatedPartsData =
+        this.mainStore.lineItems.glassParts === null
+            ? []
+            : this.mainStore.lineItems.glassParts;
+
+            partsData.partsOrQuestions.map((g) => {
+                // If the part is already populated, use the value from the store and populate the v-model.
+                Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
+                    const { partNumber } = this.alreadyPopulatedPartsData[key];
+                    g.parts.forEach((p) => {
+                        if (p.partNumber === partNumber) {
+                            this.selectedGlassParts[`${g.glassLocation}-${g.glassName}`] = p;
+                        }
+                    });
+                });
+            });
+        }
+    }
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/layouts/vehicle-selection/vehicle-selection.vue b/src/layouts/vehicle-selection/vehicle-selection.vue
index 16c42dde..fd8c5b10 100644
--- a/src/layouts/vehicle-selection/vehicle-selection.vue
+++ b/src/layouts/vehicle-selection/vehicle-selection.vue
@@ -3,12 +3,13 @@
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-  >
+    @invalidSubmit="onInvalidSubmit">
     <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 class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
+          <siteHeader
+class="mb-2 header"
+cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
       <div class="row justify-content-center">
@@ -17,8 +18,7 @@
             cmsWidgetName="SiteSubHeaderWidget"
             class="siteSubHeader"
             justification="center"
-            darkGraySubText
-          />
+            darkGraySubText />
 
           <vehicleQuestion
             ref="vehicleYearQuestion"
@@ -27,8 +27,7 @@
             cmsWidgetName="VehicleYearQuestion"
             :updateValues="updateYearValues"
             validationRules="year-required"
-            inputId="yearQuestionField"
-          />
+            inputId="yearQuestionField" />
           <vehicleQuestion
             ref="vehicleMakeQuestion"
             v-model="selectedMake"
@@ -36,8 +35,7 @@
             cmsWidgetName="VehicleMakeQuestion"
             :updateValues="updateMakeValues"
             validationRules="make-required"
-            inputId="makeQuestionField"
-          />
+            inputId="makeQuestionField" />
           <vehicleQuestion
             ref="vehicleModelQuestion"
             v-model="selectedModel"
@@ -45,8 +43,7 @@
             cmsWidgetName="VehicleModelQuestion"
             :updateValues="updateModelValues"
             validationRules="model-required"
-            inputId="modelQuestionField"
-          />
+            inputId="modelQuestionField" />
           <vehicleQuestion
             ref="vehicleStyleQuestion"
             v-model="selectedStyle"
@@ -54,15 +51,13 @@
             cmsWidgetName="VehicleStyleQuestion"
             :updateValues="updateStyleValues"
             validationRules="style-required"
-            inputId="styleQuestionField"
-          />
+            inputId="styleQuestionField" />
 
           <vehicleBanner
             ref="banner"
             cmsWidgetName="VehicleBannerWidget"
             :displayGenericVehicleImage="displayGeneric"
-            class="mt-5 mb-3"
-          />
+            class="mt-5 mb-3" />
 
           <siteFooter
             ref="siteFooter"
@@ -70,8 +65,7 @@
             cmsWidgetName="SiteFooterWidget"
             :isForwardActionDisabled="!meta.valid"
             @ForwardClicked="forwardButtonAction"
-            @backClicked="navigateBack"
-          />
+            @backClicked="navigateBack" />
         </div>
       </div>
     </div>
@@ -80,154 +74,154 @@
 
 <script>
 // Components
-import siteHeader from "@/iss-components/site-header/site-header.vue";
-import siteFooter from "@/iss-components/site-footer/site-footer.vue";
-import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
-import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
-import vehicleQuestion from "@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue";
-import { useMainStore } from "@/store";
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import vehicleQuestion from '@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue';
+import { useMainStore } from '@/store';
 
 // Supporting files
-import baseFormMixin from "@/mixins/base-form-mixin.js";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import settleAllPromises from "@/helpers/layout-helper";
-import { Form, defineRule } from "vee-validate";
-import { required } from "@/helpers/validation-rules";
-import errorMessages from "@/constants/error-messages";
+import baseFormMixin from '@/mixins/base-form-mixin.js';
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import settleAllPromises from '@/helpers/layout-helper';
+import { Form, defineRule } from 'vee-validate';
+import { required } from '@/helpers/validation-rules';
+import errorMessages from '@/constants/error-messages';
 
 // define validation rules
-defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
-defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
-defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
-defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
+defineRule('year-required', required(errorMessages.YEAR_REQUIRED));
+defineRule('make-required', required(errorMessages.MAKE_REQUIRED));
+defineRule('model-required', required(errorMessages.MODEL_REQUIRED));
+defineRule('style-required', required(errorMessages.STYLE_REQUIRED));
 
 export default {
-  name: "vehicle-selection",
-  components: {
-    siteHeader,
-    siteSubHeader,
-    vehicleBanner,
-    siteFooter,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-    vehicleQuestion,
-  },
-  mixins: [baseFormMixin],
+    name: 'vehicle-selection',
+    components: {
+        siteHeader,
+        siteSubHeader,
+        vehicleBanner,
+        siteFooter,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form,
+        vehicleQuestion
+    },
+    mixins: [baseFormMixin],
 
-  async beforeRouteEnter(to, from, next) {
+    async beforeRouteEnter(to, from, next) {
     // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise
+            }
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-    // Call the "next" function to complete the transition to this page.
-    next((vm) => {
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  props: {
-    cmsWidgetName: String,
-    validationRules: String,
-  },
-  data() {
-    const { year, make, model, style } = useMainStore().order.vehicle;
-    return {
-      selectedYear: year,
-      selectedMake: make,
-      selectedModel: model,
-      selectedStyle: style,
-    };
-  },
-  computed: {
-    displayGeneric() {
-      return !this.selectedStyle;
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
     },
-  },
-
-  watch: {
-    selectedYear(value) {
-      this.mainStore.updateVehicleYear(value);
-      this.$refs.vehicleMakeQuestion.clearValues();
-      if (value) {
-        this.$refs.vehicleMakeQuestion.getNewValues();
-      }
+    props: {
+        cmsWidgetName: String,
+        validationRules: String
     },
-    selectedMake(value) {
-      this.mainStore.updateVehicleMake(value);
-      this.$refs.vehicleModelQuestion.clearValues();
-      if (value) {
-        this.$refs.vehicleModelQuestion.getNewValues();
-      }
+    data() {
+        const { year, make, model, style } = useMainStore().order.vehicle;
+        return {
+            selectedYear: year,
+            selectedMake: make,
+            selectedModel: model,
+            selectedStyle: style
+        };
     },
-    selectedModel(value) {
-      this.mainStore.updateVehicleModel(value);
-      this.$refs.vehicleStyleQuestion.clearValues();
-      if (value) {
-        this.$refs.vehicleStyleQuestion.getNewValues();
-      }
-    },
-    selectedStyle(value) {
-      this.mainStore.updateVehicleStyle(value);
-      this.mainStore.setVehicle();
-    },
-  },
-  mounted() {
-    this.$refs.vehicleYearQuestion.getNewValues();
-    if (this.selectedYear) {
-      this.$refs.vehicleMakeQuestion.getNewValues();
-    }
-    if (this.selectedMake) {
-      this.$refs.vehicleModelQuestion.getNewValues();
-    }
-    if (this.selectedModel) {
-      this.$refs.vehicleStyleQuestion.getNewValues();
-    }
-  },
-  methods: {
-    arePagePrerequisitesValid() {
-      return true;
-    },
-    async forwardButtonAction() {
-      return this.navigateForward();
-    },
-
-    navigateForward() {
-      this.mainStore.setVehicle().then(() => {
-        if (this.mainStore.isBailout) {
-          this.$router.navigate(
-            this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
-            this.$route
-          );
-          return;
+    computed: {
+        displayGeneric() {
+            return !this.selectedStyle;
         }
+    },
 
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD,
-          this.$route
-        );
-      });
+    watch: {
+        selectedYear(value) {
+            this.mainStore.updateVehicleYear(value);
+            this.$refs.vehicleMakeQuestion.clearValues();
+            if (value) {
+                this.$refs.vehicleMakeQuestion.getNewValues();
+            }
+        },
+        selectedMake(value) {
+            this.mainStore.updateVehicleMake(value);
+            this.$refs.vehicleModelQuestion.clearValues();
+            if (value) {
+                this.$refs.vehicleModelQuestion.getNewValues();
+            }
+        },
+        selectedModel(value) {
+            this.mainStore.updateVehicleModel(value);
+            this.$refs.vehicleStyleQuestion.clearValues();
+            if (value) {
+                this.$refs.vehicleStyleQuestion.getNewValues();
+            }
+        },
+        selectedStyle(value) {
+            this.mainStore.updateVehicleStyle(value);
+            this.mainStore.setVehicle();
+        }
     },
-    async updateYearValues() {
-      return useMainStore().getVehicleYears();
+    mounted() {
+        this.$refs.vehicleYearQuestion.getNewValues();
+        if (this.selectedYear) {
+            this.$refs.vehicleMakeQuestion.getNewValues();
+        }
+        if (this.selectedMake) {
+            this.$refs.vehicleModelQuestion.getNewValues();
+        }
+        if (this.selectedModel) {
+            this.$refs.vehicleStyleQuestion.getNewValues();
+        }
     },
-    async updateMakeValues() {
-      return this.mainStore.getVehicleMakes();
-    },
-    async updateModelValues() {
-      return this.mainStore.getVehicleModels();
-    },
-    async updateStyleValues() {
-      return this.mainStore.getVehicleStyles();
-    },
-  },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        async forwardButtonAction() {
+            return this.navigateForward();
+        },
+
+        navigateForward() {
+            this.mainStore.setVehicle().then(() => {
+                if (this.mainStore.isBailout) {
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
+                        this.$route
+                    );
+                    return;
+                }
+
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.$route
+                );
+            });
+        },
+        async updateYearValues() {
+            return useMainStore().getVehicleYears();
+        },
+        async updateMakeValues() {
+            return this.mainStore.getVehicleMakes();
+        },
+        async updateModelValues() {
+            return this.mainStore.getVehicleModels();
+        },
+        async updateStyleValues() {
+            return this.mainStore.getVehicleStyles();
+        }
+    }
 };
 </script>
 
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 2eb1f1de..5b11d39c 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -3,8 +3,7 @@
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-  >
+    @invalidSubmit="onInvalidSubmit">
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
         <div class="col-md-6 px-0 px-md-2">
@@ -17,19 +16,16 @@
             <vehicleBanner
               class="mt-2 mb-4"
               cmsWidgetName="VehicleBannerWidget"
-              :displayGenericVehicleImage="!carIdIsValid"
-            />
+              :displayGenericVehicleImage="!carIdIsValid" />
             <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
             <vinLookupAlerts
               class="mt-5"
-              :activeAlertType="activeVehicleLookupAlertType"
-            />
+              :activeAlertType="activeVehicleLookupAlertType" />
             <vinQuestion
               v-model="vin"
               :mask="vinMask"
               :isDisabled="vinPopulatedOnPageLoad"
-              textPosition="left"
-            />
+              textPosition="left" />
             <vinLocationInformation />
             <siteFooter
               ref="siteFooter"
@@ -37,8 +33,7 @@
               :isForwardActionDisabled="!meta.valid"
               class="mt-5"
               @backClicked="navigateBack"
-              @forwardClicked="forwardButtonAction"
-            />
+              @forwardClicked="forwardButtonAction" />
           </div>
         </div>
       </div>
@@ -47,262 +42,256 @@
 </template>
 <script>
 // Import Supporting Files
-import { computed } from "vue";
-import vehicleLookupAlertTypes from "@/constants/vehicle-lookup-alert-types";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
-import settleAllPromises from "@/helpers/layout-helper";
-import routerParams from "@/router/router-constants/router-params";
-import { useMainStore } from "@/store";
+import { computed } from 'vue';
+import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { isGlassAvailableForCarId } from '@/helpers/damage-helper';
+import settleAllPromises from '@/helpers/layout-helper';
+import routerParams from '@/router/router-constants/router-params';
+import { useMainStore } from '@/store';
 
 // Import Component
-import baseFormMixin from "@/mixins/base-form-mixin";
-import vehicleQuestionsMixin from "@/mixins/vehicle-questions-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 vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
-import vinLocationInformation from "@/layouts/vin-lookup/vin-location-information/vin-location-information.vue";
-import vinLookupAlerts from "@/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue";
-import vinQuestion from "@/layouts/vin-lookup/vin-question/vin-question.vue";
-import bailoutCode from "@/constants/bailoutCode";
-import bailoutMessage from "@/constants/bailoutMessage";
+import baseFormMixin from '@/mixins/base-form-mixin';
+import vehicleQuestionsMixin from '@/mixins/vehicle-questions-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 vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import vinLocationInformation from '@/layouts/vin-lookup/vin-location-information/vin-location-information.vue';
+import vinLookupAlerts from '@/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue';
+import vinQuestion from '@/layouts/vin-lookup/vin-question/vin-question.vue';
+import bailoutCode from '@/constants/bailoutCode';
+import bailoutMessage from '@/constants/bailoutMessage';
 
 export default {
-  name: "vin-lookup",
-  components: {
-    siteFooter,
-    siteHeader,
-    siteSubHeader,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-    vehicleBanner,
-    vinLocationInformation,
-    vinLookupAlerts,
-    vinQuestion,
-  },
-  mixins: [baseFormMixin, vehicleQuestionsMixin],
-  provide() {
-    return {
-      vehicleFromLookup: computed(() => this.vehicleFromLookup),
-    };
-  },
-  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);
-    });
-  },
-  setup() {
-    const mainStore = useMainStore();
-
-    return { mainStore };
-  },
-  data() {
-    const vin = this.getVinFromStore();
-    return {
-      activeVehicleLookupAlertType:
-        vin?.length > 0 && !this.hasValidCarId()
-          ? vehicleLookupAlertTypes.NOT_FOUND
-          : null,
-      needToLookupVehicle: true,
-      vehicleFromLookup: null,
-      vinWithNonMatchingCarId: vin?.length > 0 && !this.hasValidCarId(),
-      vin,
-      forwardButtonCarStyle: "",
-      vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId(),
-    };
-  },
-  computed: {
-    isCarIdDifferentFromTheStore() {
-      return (
-        this.vehicleFromLookup !== null &&
-        this.hasValidCarId() &&
-        this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
-      );
+    name: 'vin-lookup',
+    components: {
+        siteFooter,
+        siteHeader,
+        siteSubHeader,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form,
+        vehicleBanner,
+        vinLocationInformation,
+        vinLookupAlerts,
+        vinQuestion
     },
-    isTwoIdenticalYMMVehicleFound() {
-      if (this.vehicleFromLookup === null) {
-        return false;
-      }
-      const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
-      const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-      return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
+    mixins: [baseFormMixin, vehicleQuestionsMixin],
+    provide() {
+        return {
+            vehicleFromLookup: computed(() => this.vehicleFromLookup)
+        };
     },
-    vinMask() {
-      // TODO: Side effects in computed.
-      if (this.vinPopulatedOnPageLoad) {
-        // TODO: Modify to remove side effects in computed
-        this.activeVehicleLookupAlertType =
-          vehicleLookupAlertTypes.PERFECT_MATCH;
-        this.needToLookupVehicle = false;
-        const lastSixChars = this.vin.substring(11, this.vin.length);
-        return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
-      }
-      return "*****************";
-    },
-    carIdIsValid() {
-      return this.hasValidCarId();
-    },
-  },
-  watch: {
-    vin() {
-      this.resetActiveAlert();
-      this.$refs.siteFooter.enableForwardAction();
-      this.needToLookupVehicle = true;
-      this.$refs.siteFooter.updateButtonText(
-        this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
-      );
-    },
-  },
-  methods: {
-    arePagePrerequisiteValid() {
-      return true;
-    },
-    getVinFromStore() {
-      return this.mainStore.vehicle.vin;
-    },
-    hasValidCarId() {
-      return (
-        this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== "0"
-      );
-    },
-    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
-    async forwardButtonAction() {
-      this.resetActiveAlert();
-      // Temp solution to reset the 'disabled' style on the Continue button
-      this.$refs.siteFooter.enableForwardAction();
+    async beforeRouteEnter(to, from, next) {
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-      if (this.needToLookupVehicle) {
-        const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise
+            }
+        ];
 
-        if (vehicleLookupResponse.error) {
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
-          this.mainStore.setBailout(bailoutMessage.vehicleNotFound(this.vin));
-          this.resetVehicleFromLookup();
-          this.$refs.siteFooter.removeLoader();
-          // Temp solution to turn on 'disabled' style on the Continue button
-          //  because the form itself actually passes its client-side validation.
-          //  SSR-189 Scenario #4.
-          this.$refs.siteFooter.enableForwardAction();
-          return;
-        }
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-        this.mainStore.resetBailout();
-
-        // Add vin bcs the response from the service doesn't contain vin
-        this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
-          vin: this.vin,
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
         });
-      }
+    },
+    setup() {
+        const mainStore = useMainStore();
 
-      if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
-        if (this.isTwoIdenticalYMMVehicleFound) {
-          this.activeVehicleLookupAlertType =
-            vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
-          this.forwardButtonCarStyle = this.vehicleFromLookup.style;
-        } else {
-          this.activeVehicleLookupAlertType =
-            vehicleLookupAlertTypes.NOT_MATCHED;
+        return { mainStore };
+    },
+    data() {
+        const vin = this.getVinFromStore();
+        return {
+            activeVehicleLookupAlertType:
+        vin?.length > 0 && !this.hasValidCarId()
+            ? vehicleLookupAlertTypes.NOT_FOUND
+            : null,
+            needToLookupVehicle: true,
+            vehicleFromLookup: null,
+            vinWithNonMatchingCarId: vin?.length > 0 && !this.hasValidCarId(),
+            vin,
+            forwardButtonCarStyle: '',
+            vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId()
+        };
+    },
+    computed: {
+        isCarIdDifferentFromTheStore() {
+            return (
+                this.vehicleFromLookup !== null
+        && this.hasValidCarId()
+        && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
+            );
+        },
+        isTwoIdenticalYMMVehicleFound() {
+            if (this.vehicleFromLookup === null) {
+                return false;
+            }
+            const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
+        },
+        vinMask() {
+            // TODO: Side effects in computed.
+            if (this.vinPopulatedOnPageLoad) {
+                // TODO: Modify to remove side effects in computed
+                this.activeVehicleLookupAlertType =
+          vehicleLookupAlertTypes.PERFECT_MATCH;
+                this.needToLookupVehicle = false;
+                const lastSixChars = this.vin.substring(11, this.vin.length);
+                return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
+            }
+            return '*****************';
+        },
+        carIdIsValid() {
+            return this.hasValidCarId();
         }
+    },
+    watch: {
+        vin() {
+            this.resetActiveAlert();
+            this.$refs.siteFooter.enableForwardAction();
+            this.needToLookupVehicle = true;
+            this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
+        }
+    },
+    methods: {
+        arePagePrerequisiteValid() {
+            return true;
+        },
+        getVinFromStore() {
+            return this.mainStore.vehicle.vin;
+        },
+        hasValidCarId() {
+            return (
+                this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== '0'
+            );
+        },
+        // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
+        async forwardButtonAction() {
+            this.resetActiveAlert();
+            // Temp solution to reset the 'disabled' style on the Continue button
+            this.$refs.siteFooter.enableForwardAction();
 
-        const vehicleYearMakeModelStyle =
+            if (this.needToLookupVehicle) {
+                const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
+
+                if (vehicleLookupResponse.error) {
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
+                    this.mainStore.setBailout(bailoutMessage.vehicleNotFound(this.vin));
+                    this.resetVehicleFromLookup();
+                    this.$refs.siteFooter.removeLoader();
+                    // Temp solution to turn on 'disabled' style on the Continue button
+                    //  because the form itself actually passes its client-side validation.
+                    //  SSR-189 Scenario #4.
+                    this.$refs.siteFooter.enableForwardAction();
+                    return;
+                }
+
+                this.mainStore.resetBailout();
+
+                // Add vin bcs the response from the service doesn't contain vin
+                this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
+                    vin: this.vin
+                });
+            }
+
+            if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
+                if (this.isTwoIdenticalYMMVehicleFound) {
+                    this.activeVehicleLookupAlertType =
+            vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
+                    this.forwardButtonCarStyle = this.vehicleFromLookup.style;
+                } else {
+                    this.activeVehicleLookupAlertType =
+            vehicleLookupAlertTypes.NOT_MATCHED;
+                }
+
+                const vehicleYearMakeModelStyle =
           // eslint-disable-next-line max-len
           `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
-        this.$refs.siteFooter.updateButtonText(
-          `Continue with ${vehicleYearMakeModelStyle}`
-        );
-        this.$refs.siteFooter.removeLoader();
+                this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
+                this.$refs.siteFooter.removeLoader();
 
-        this.needToLookupVehicle = false;
+                this.needToLookupVehicle = false;
 
-        return null;
-      }
+                return null;
+            }
 
-      let isSelectedGlassAvailableForVehicle = true;
-      if (this.isCarIdDifferentFromTheStore) {
-        isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
-          this.vehicleFromLookup.carId
-        );
-      }
+            let isSelectedGlassAvailableForVehicle = true;
+            if (this.isCarIdDifferentFromTheStore) {
+                isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
+            }
 
-      // navigate back to vehicle-damage
-      if (
-        this.isCarIdDifferentFromTheStore &&
-        !isSelectedGlassAvailableForVehicle
-      ) {
-        this.mainStore.updateVehicle(this.vehicleFromLookup);
-        this.mainStore.resetDamageState();
-        this.$router.navigate(
-          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-          this.$route,
-          {},
-          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
-        );
+            // navigate back to vehicle-damage
+            if (
+                this.isCarIdDifferentFromTheStore
+        && !isSelectedGlassAvailableForVehicle
+            ) {
+                this.mainStore.updateVehicle(this.vehicleFromLookup);
+                this.mainStore.resetDamageState();
+                this.$router.navigate(
+                    this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                    this.$route,
+                    {},
+                    { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+                );
 
-        // navigate() doesn't stop the processing flow
-        return null;
-      }
+                // navigate() doesn't stop the processing flow
+                return null;
+            }
 
-      // save vehicle to store if it hasn't already been saved
-      if (!this.vinPopulatedOnPageLoad) {
-        this.mainStore.updateVehicle(this.vehicleFromLookup);
-      }
+            // save vehicle to store if it hasn't already been saved
+            if (!this.vinPopulatedOnPageLoad) {
+                this.mainStore.updateVehicle(this.vehicleFromLookup);
+            }
 
-      if (this.vinWithNonMatchingCarId) {
-        this.$router.navigate(
-          this.navigationScenarios.CORRECTED_VIN_FROM_POLICY_VEHICLE,
-          this.$route
-        );
-        return null;
-      }
+            if (this.vinWithNonMatchingCarId) {
+                this.$router.navigate(
+                    this.navigationScenarios.CORRECTED_VIN_FROM_POLICY_VEHICLE,
+                    this.$route
+                );
+                return null;
+            }
 
-      const partsOrQuestionsResponse = await this.getPartsOrQuestions();
-      if (partsOrQuestionsResponse.error) {
-        // To Do: Need requirement on what to do here
-        window.console.error("Error on retrieving PartsOrQuestions");
-        this.$refs.siteFooter.removeLoader();
-        return null;
-      }
+            const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+            if (partsOrQuestionsResponse.error) {
+                // To Do: Need requirement on what to do here
+                window.console.error('Error on retrieving PartsOrQuestions');
+                this.$refs.siteFooter.removeLoader();
+                return null;
+            }
 
-      // Comes from vehicleQuestionsMixin.navigateForward()
-      await this.navigateForward(
-        partsOrQuestionsResponse.data.partsOrQuestions,
-        this
-      );
+            // Comes from vehicleQuestionsMixin.navigateForward()
+            await this.navigateForward(
+                partsOrQuestionsResponse.data.partsOrQuestions,
+                this
+            );
 
-      return null;
-    },
-    async lookupVehicleByVin(vin) {
-      try {
-        return await this.mainStore.lookupVehicleByVin(vin);
-      } catch (responseError) {
-        return {
-          error: {
-            status: responseError.status,
-          },
-        };
-      }
-    },
-    resetActiveAlert() {
-      this.activeVehicleLookupAlertType = null;
-    },
-    resetVehicleFromLookup() {
-      this.vehicleFromLookup = null;
-    },
-    resetDependentState() {},
-  },
+            return null;
+        },
+        async lookupVehicleByVin(vin) {
+            try {
+                return await this.mainStore.lookupVehicleByVin(vin);
+            } catch (responseError) {
+                return {
+                    error: {
+                        status: responseError.status
+                    }
+                };
+            }
+        },
+        resetActiveAlert() {
+            this.activeVehicleLookupAlertType = null;
+        },
+        resetVehicleFromLookup() {
+            this.vehicleFromLookup = null;
+        },
+        resetDependentState() {}
+    }
 };
 </script>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index c8220560..b86dd5e7 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -3,8 +3,7 @@
     ref="theForm"
     v-slot="{ meta }"
     @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit"
-  >
+    @invalidSubmit="onInvalidSubmit">
     <div class="container-fluid fade-on-route-transition">
       <div class="row justify-content-center">
         <div class="col-md-6 px-0 px-md-2">
@@ -13,7 +12,9 @@
       </div>
       <div class="row justify-content-center">
         <div class="col-md-6 col-xl-4">
-          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4" />
+          <siteSubHeader
+cmsWidgetName="SiteSubHeaderWidget"
+class="mt-4" />
           <textboxQuestion
             ref="policyNumber"
             v-model="welcomePageModel.policyNumber"
@@ -22,8 +23,7 @@
             isRequired
             disableAutoFill
             :isDisabled="isPolicyHolderDisabled"
-            :validationRules="rules.policyNumber"
-          />
+            :validationRules="rules.policyNumber" />
           <textboxQuestion
             ref="policyZip"
             v-model="welcomePageModel.policyZipCode"
@@ -32,8 +32,7 @@
             isRequired
             mask="#####"
             :isDisabled="isPolicyZipDisabled"
-            :validationRules="rules.policyZip"
-          />
+            :validationRules="rules.policyZip" />
           <textboxQuestion
             ref="dateOfLoss"
             v-model="welcomePageModel.dateOfLoss"
@@ -45,13 +44,11 @@
             disableAutoFill
             :max="new Date().toJSON().slice(0, 10)"
             :min="'1972-12-01'"
-            :validationRules="rules.lossDate"
-          />
+            :validationRules="rules.lossDate" />
           <textBlock
             cmsWidgetName="DamageDateEstimateWidget"
             typeStyle="small"
-            class="mt-2"
-          />
+            class="mt-2" />
           <dropdownQuestion
             id="welcomeDropdown"
             ref="damageCause"
@@ -61,8 +58,7 @@
             :options="DamageCauseOptions"
             disableAutoFill
             :validationRules="rules.damageOption"
-            placeHolderText="Select an option"
-          />
+            placeHolderText="Select an option" />
           <textboxQuestion
             ref="phoneNumber"
             v-model="welcomePageModel.phoneNumber"
@@ -71,8 +67,7 @@
             :validationRules="rules.phoneNumber"
             isRequired
             :mask="phoneMask"
-            disableAutoFill
-          />
+            disableAutoFill />
           <textboxQuestion
             ref="email"
             v-model="welcomePageModel.email"
@@ -80,8 +75,7 @@
             cmsWidgetName="EmailAddressQuestion"
             :validationRules="rules.email"
             isRequired
-            disableAutoFill
-          />
+            disableAutoFill />
           <textboxQuestion
             v-if="displayDamageCityQuestion"
             ref="damageCity"
@@ -91,8 +85,7 @@
             cmsWidgetName="DamageCityQuestion"
             isRequired
             disableAutoFill
-            :validationRules="rules.lossCity"
-          />
+            :validationRules="rules.lossCity" />
           <dropdownQuestion
             v-if="displayDamageStateQuestion"
             id="welcomeDropdown"
@@ -105,8 +98,7 @@
             :validationRules="rules.lossState"
             isRequired
             disableAutoFill
-            placeHolderText="Select an option"
-          />
+            placeHolderText="Select an option" />
           <buttonQuestion
             v-if="displayGlassOnlyQuestion"
             ref="glassOnlyDamage"
@@ -121,289 +113,287 @@
             :validationRules="rules.damageOption"
             isRequired
             isSmallQuestionLabelText
-            disableAutoFill
-          />
-          <div id="welcomeFooter" class="row">
+            disableAutoFill />
+          <div
+id="welcomeFooter"
+class="row">
             <alert
               v-if="displayInvalidZipAlert"
               ref="alertInvalidZip"
               class="my-4"
               cmsWidgetName="AlertInvalidZipWidget"
               alertClass="alert-danger"
-              :isDismissible="false"
-            />
+              :isDismissible="false" />
             <siteFooter
               ref="siteFooter"
               class="mt-3"
               cmsWidgetName="SiteFooterWidget"
               :isForwardActionDisabled="!meta.valid"
-              @ForwardClicked="forwardButtonAction"
-            />
+              @ForwardClicked="forwardButtonAction" />
           </div>
         </div>
       </div>
       <!-- Footer image component must have parent (usually container-fluid)
         set to display: flex and height 100dvh or height 100% -->
-      <footerImage
-        cmsWidgetName="SiteFooterWidget" />
+      <footerImage cmsWidgetName="SiteFooterWidget" />
     </div>
   </Form>
 </template>
 
 <script>
 // Components
-import { Form, defineRule } from "vee-validate";
-import siteHeader from "@/iss-components/site-header/site-header.vue";
-import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
-import siteFooter from "@/iss-components/site-footer/site-footer.vue";
-import alert from "@/ux-components/alert/alert.vue";
-import textboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
-import buttonQuestion from "@/digital-components/button-question/button-question.vue";
-import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question.vue";
-import textBlock from "@/digital-components/text-block/text-block.vue";
-import footerImage from "@/iss-components/site-footer/footer-image/footer-image.vue";
+import { Form, defineRule } from 'vee-validate';
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import alert from '@/ux-components/alert/alert.vue';
+import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
+import footerImage from '@/iss-components/site-footer/footer-image/footer-image.vue';
 
 // Supporting files
 import {
-  fetchCmsContentForPage,
-  fetchGlobalCmsContent,
-  updateCmsSiteHeader,
-} from "@/helpers/cms-content-helper";
-import settleAllPromises from "@/helpers/layout-helper";
-import { required } from "@/helpers/validation-rules";
-import errorMessages from "@/constants/error-messages";
-import BaseFormMixin from "@/mixins/base-form-mixin.js";
-import { useMainStore } from "@/store";
-import states from "@/constants/states";
-import globalRules from "@/constants/global-rules";
-import routerParams from "@/router/router-constants/router-params";
-import MaskaFormattedMasks from "@/constants/maska-masks";
+    fetchCmsContentForPage,
+    fetchGlobalCmsContent,
+    updateCmsSiteHeader
+} from '@/helpers/cms-content-helper';
+import settleAllPromises from '@/helpers/layout-helper';
+import { required } from '@/helpers/validation-rules';
+import errorMessages from '@/constants/error-messages';
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store';
+import states from '@/constants/states';
+import globalRules from '@/constants/global-rules';
+import routerParams from '@/router/router-constants/router-params';
+import MaskaFormattedMasks from '@/constants/maska-masks';
 
 // define validation rules
 defineRule(
-  "damage-option-required",
-  required(errorMessages.DAMAGE_OPTION_REQUIRED)
+    'damage-option-required',
+    required(errorMessages.DAMAGE_OPTION_REQUIRED)
 );
 
 export default {
-  name: "welcome-page",
-  components: {
-    siteHeader,
-    siteSubHeader,
-    footerImage,
-    alert,
-    buttonQuestion,
-    textboxQuestion,
-    dropdownQuestion,
-    siteFooter,
-    textBlock,
-    // eslint-disable-next-line vue/no-reserved-component-names
-    Form,
-  },
-  mixins: [BaseFormMixin],
-  async beforeRouteEnter(to, from, next) {
+    name: 'welcome-page',
+    components: {
+        siteHeader,
+        siteSubHeader,
+        footerImage,
+        alert,
+        buttonQuestion,
+        textboxQuestion,
+        dropdownQuestion,
+        siteFooter,
+        textBlock,
+        // eslint-disable-next-line vue/no-reserved-component-names
+        Form
+    },
+    mixins: [BaseFormMixin],
+    async beforeRouteEnter(to, from, next) {
     // Call APIs
-    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-    const cmsGlobalSiteHeaderContentPromise =
-      fetchGlobalCmsContent("iss-siteheader");
+        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+        const cmsGlobalSiteHeaderContentPromise =
+      fetchGlobalCmsContent('iss-siteheader');
 
-    // Settle promises and get results
-    const promiseResultMap = [
-      {
-        resultKey: "cmsContent",
-        promise: cmsContentPromise,
-      },
-      {
-        resultKey: "globalSiteHeaderCmsContent",
-        promise: cmsGlobalSiteHeaderContentPromise,
-      },
-    ];
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise
+            },
+            {
+                resultKey: 'globalSiteHeaderCmsContent',
+                promise: cmsGlobalSiteHeaderContentPromise
+            }
+        ];
 
-    // use resultMap to populate layout content.
-    const resultMap = await settleAllPromises(promiseResultMap);
-    next((vm) => {
-      updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent);
-      vm.setCmsContent(resultMap.cmsContent);
-    });
-  },
-  setup() {
-    const mainStore = useMainStore();
-
-    // Set order account number from the issConfig.
-    mainStore.order.accountNumber = mainStore.issConfig.parentAccountNumber;
-
-    return { mainStore };
-  },
-  data() {
-    return {
-      welcomePageModel: this.getWelcomePageModelFromStore(),
-      displayInvalidZipAlert: false,
-      duplicates: [],
-      rules: {
-        damageOption: "damage-option-required",
-        email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
-        lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
-        // eslint-disable-next-line max-len
-        lossDate: `${globalRules.DATE_OF_LOSS_REQUIRED}|${globalRules.DATE_OF_LOSS_NOT_TEN_YEARS_PAST}|${globalRules.DATE_OF_LOSS_NOT_FUTURE}`,
-        lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
-        policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
-        policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
-        phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
-      },
-    };
-  },
-  computed: {
-    DamageCauseOptions() {
-      const damageCauseAnswers = this.getCmsContent(
-        "DamageCauseQuestion",
-        "Answers"
-      );
-      const damageCauseAnswersObj = {};
-      if (damageCauseAnswers) {
-        // eslint-disable-next-line no-restricted-syntax
-        for (const answer of Object.values(damageCauseAnswers)) {
-          if (answer?.Name) {
-            damageCauseAnswersObj[answer.Name] = answer.Name;
-          }
-        }
-      }
-      return damageCauseAnswersObj;
-    },
-    DamageGlassOnlyOptions() {
-      return this.getCmsContent("GlassOnlyQuestion", "Answers");
-    },
-    DamageGlassOnlyQuestion() {
-      return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
-    },
-    displayDamageCityQuestion() {
-      return !!this.getCmsContent("DamageCityQuestion", "QuestionText");
-    },
-    displayDamageStateQuestion() {
-      return !!this.getCmsContent("DamageStateQuestion", "QuestionText");
-    },
-    displayGlassOnlyQuestion() {
-      return !!this.getCmsContent("GlassOnlyQuestion", "QuestionText");
-    },
-    getStates() {
-      return states;
-    },
-    isPolicyHolderDisabled() {
-      return !!this.mainStore.issConfig.disabledFields.policyNumber;
-    },
-    isPolicyZipDisabled() {
-      return !!this.mainStore.issConfig.disabledFields.policyZipCode;
-    },
-    isDateOfLossDisabled() {
-      return !!this.mainStore.issConfig.disabledFields.dateOfLoss;
-    },
-    isCoverageEnabled() {
-      return this.mainStore.issConfig.isCoverageEnabled;
-    },
-    maxCoverageLookupAttemptsReached() {
-      return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
-    },
-    phoneMask() {
-      return MaskaFormattedMasks.PHONE_NUMBER;
-    },
-  },
-  methods: {
-    async forwardButtonAction() {
-      await this.mainStore
-        .validateZip({ zip: this.welcomePageModel.policyZipCode })
-        .then(async (zipInfo) => {
-          if (zipInfo?.data?.isValid === true) {
-            this.mainStore.updatePolicyData(this.welcomePageModel);
-            await this.mainStore
-              .getDuplicateReferrals()
-              .then(
-                () => {},
-                () => {}
-              )
-              .finally(async () => {
-                if (
-                  this.isCoverageEnabled &&
-                  !this.maxCoverageLookupAttemptsReached
-                ) {
-                  await this.mainStore.getCoveragePolicyInfo()?.then(
-                    () => {},
-                    () => {}
-                  );
-                } else {
-                  this.mainStore.order.policy.policyLookupSuccessful = false;
-                }
-                this.navigateForward();
-              });
-          } else {
-            this.displayInvalidZipAlert = true;
-            this.$refs.siteFooter.removeLoader();
-          }
+        // use resultMap to populate layout content.
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent);
+            vm.setCmsContent(resultMap.cmsContent);
         });
     },
-    navigateForward() {
-      if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
-          this.$route,
-          {},
-          { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-        );
-      } else if (this.mainStore.policy.policyLookupSuccessful) {
-        if (this.mainStore.order.policy.vehicles?.length > 0 ?? false) {
-          // navigate to policy-vehicles page
-          this.$router.navigate(
-            this.navigationScenarios
-              .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
-            this.$route,
-            {},
-            { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-          );
-        } else {
-          // navigate to vehicle-selection page (manual entry)
-          this.$router.navigate(
-            this.navigationScenarios
-              .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
-            this.$route,
-            {},
-            { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-          );
+    setup() {
+        const mainStore = useMainStore();
+
+        // Set order account number from the issConfig.
+        mainStore.order.accountNumber = mainStore.issConfig.parentAccountNumber;
+
+        return { mainStore };
+    },
+    data() {
+        return {
+            welcomePageModel: this.getWelcomePageModelFromStore(),
+            displayInvalidZipAlert: false,
+            duplicates: [],
+            rules: {
+                damageOption: 'damage-option-required',
+                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+                lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
+                // eslint-disable-next-line max-len
+                lossDate: `${globalRules.DATE_OF_LOSS_REQUIRED}|${globalRules.DATE_OF_LOSS_NOT_TEN_YEARS_PAST}|${globalRules.DATE_OF_LOSS_NOT_FUTURE}`,
+                lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
+                policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
+                policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
+                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
+            }
+        };
+    },
+    computed: {
+        DamageCauseOptions() {
+            const damageCauseAnswers = this.getCmsContent(
+                'DamageCauseQuestion',
+                'Answers'
+            );
+            const damageCauseAnswersObj = {};
+            if (damageCauseAnswers) {
+                // eslint-disable-next-line no-restricted-syntax
+                for (const answer of Object.values(damageCauseAnswers)) {
+                    if (answer?.Name) {
+                        damageCauseAnswersObj[answer.Name] = answer.Name;
+                    }
+                }
+            }
+            return damageCauseAnswersObj;
+        },
+        DamageGlassOnlyOptions() {
+            return this.getCmsContent('GlassOnlyQuestion', 'Answers');
+        },
+        DamageGlassOnlyQuestion() {
+            return this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
+        },
+        displayDamageCityQuestion() {
+            return !!this.getCmsContent('DamageCityQuestion', 'QuestionText');
+        },
+        displayDamageStateQuestion() {
+            return !!this.getCmsContent('DamageStateQuestion', 'QuestionText');
+        },
+        displayGlassOnlyQuestion() {
+            return !!this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
+        },
+        getStates() {
+            return states;
+        },
+        isPolicyHolderDisabled() {
+            return !!this.mainStore.issConfig.disabledFields.policyNumber;
+        },
+        isPolicyZipDisabled() {
+            return !!this.mainStore.issConfig.disabledFields.policyZipCode;
+        },
+        isDateOfLossDisabled() {
+            return !!this.mainStore.issConfig.disabledFields.dateOfLoss;
+        },
+        isCoverageEnabled() {
+            return this.mainStore.issConfig.isCoverageEnabled;
+        },
+        maxCoverageLookupAttemptsReached() {
+            return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
+        },
+        phoneMask() {
+            return MaskaFormattedMasks.PHONE_NUMBER;
         }
-      } else {
-        // if policy lookup is unsuccessful, navigate to policy-holder-details page
-        this.$router.navigate(
-          this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
-          this.$route,
-          {},
-          { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-        );
-      }
     },
-    getWelcomePageModelFromStore() {
-      return {
-        policyNumber: this.mainStore.order.policy.policyNumber,
-        policyZipCode: this.mainStore.order.policy.policyZipCode,
-        dateOfLoss: this.mainStore.order.policy.dateOfLoss,
-        damageCause: this.mainStore.order.policy.damageCause,
-        damageState: this.mainStore.order.policy.damageState,
-        damageCity: this.mainStore.order.policy.damageCity,
-        isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
-        phoneNumber: this.mainStore.order.customer.phoneNumber,
-        email: this.mainStore.order.customer.emailAddress,
-        isPolicyNumberDisabled:
-          this.mainStore.order.policy.isPolicyNumberDisabled,
-      };
-    },
-  },
+    methods: {
+        async forwardButtonAction() {
+            await this.mainStore
+                .validateZip({ zip: this.welcomePageModel.policyZipCode })
+                .then(async (zipInfo) => {
+                    if (zipInfo?.data?.isValid === true) {
+                        this.mainStore.updatePolicyData(this.welcomePageModel);
+                        await this.mainStore
+                            .getDuplicateReferrals()
+                            .then(
+                                () => {},
+                                () => {}
+                            )
+                            .finally(async () => {
+                                if (
+                                    this.isCoverageEnabled
+                  && !this.maxCoverageLookupAttemptsReached
+                                ) {
+                                    await this.mainStore.getCoveragePolicyInfo()?.then(
+                                        () => {},
+                                        () => {}
+                                    );
+                                } else {
+                                    this.mainStore.order.policy.policyLookupSuccessful = false;
+                                }
+                                this.navigateForward();
+                            });
+                    } else {
+                        this.displayInvalidZipAlert = true;
+                        this.$refs.siteFooter.removeLoader();
+                    }
+                });
+        },
+        navigateForward() {
+            if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
+                    this.$route,
+                    {},
+                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+                );
+            } else if (this.mainStore.policy.policyLookupSuccessful) {
+                if (this.mainStore.order.policy.vehicles?.length > 0 ?? false) {
+                    // navigate to policy-vehicles page
+                    this.$router.navigate(
+                        this.navigationScenarios
+                            .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+                        this.$route,
+                        {},
+                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+                    );
+                } else {
+                    // navigate to vehicle-selection page (manual entry)
+                    this.$router.navigate(
+                        this.navigationScenarios
+                            .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+                        this.$route,
+                        {},
+                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+                    );
+                }
+            } else {
+                // if policy lookup is unsuccessful, navigate to policy-holder-details page
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+                    this.$route,
+                    {},
+                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+                );
+            }
+        },
+        getWelcomePageModelFromStore() {
+            return {
+                policyNumber: this.mainStore.order.policy.policyNumber,
+                policyZipCode: this.mainStore.order.policy.policyZipCode,
+                dateOfLoss: this.mainStore.order.policy.dateOfLoss,
+                damageCause: this.mainStore.order.policy.damageCause,
+                damageState: this.mainStore.order.policy.damageState,
+                damageCity: this.mainStore.order.policy.damageCity,
+                isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
+                phoneNumber: this.mainStore.order.customer.phoneNumber,
+                email: this.mainStore.order.customer.emailAddress,
+                isPolicyNumberDisabled:
+          this.mainStore.order.policy.isPolicyNumberDisabled
+            };
+        }
+    }
 };
 </script>
 
 <style lang="scss" scoped>
 form {
-    height: 100dvh;
-    .container-fluid {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-    }
+  height: 100dvh;
+  .container-fluid {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
 }
 @-moz-document url-prefix() {
   // Temporary solution that prevents the Continue button from being hidden in Firefox

From 57c5442b149fe85f8612f76b2616b5fbf4442495 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 15 Apr 2024 10:45:43 -0400
Subject: [PATCH 06/26] WIP Update page markup.

---
 .../coverage-statement/coverage-statement.vue |  16 +-
 src/layouts/tpa-search/tpa-search.vue         | 283 ++++++++++--------
 src/layouts/welcome-page/welcome-page.vue     |  24 +-
 3 files changed, 176 insertions(+), 147 deletions(-)

diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 3e8b176a..c2aca83d 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -8,11 +8,11 @@
       <div class="row justify-content-center">
         <div class="col-md-6 px-0 px-md-2">
           <loadingModal
-ref="loadingModal"
-:textSlides="loadingText" />
+            ref="loadingModal"
+            :textSlides="loadingText" />
           <siteHeader
-ref="siteHeader"
-cmsWidgetName="SiteHeaderWidget" />
+            ref="siteHeader"
+            cmsWidgetName="SiteHeaderWidget" />
         </div>
       </div>
       <div class="row justify-content-center pt-5">
@@ -59,8 +59,8 @@ cmsWidgetName="SiteHeaderWidget" />
             class="fw-bold text-black mt-5 mb-2"
             v-html="nextStepsHeader"></div>
           <div
-class="body-text"
-v-html="nextStepsBody"></div>
+            class="body-text"
+            v-html="nextStepsBody"></div>
           <buttonQuestion
             v-if="isQuoteDisplayed"
             v-model="selectedProvider"
@@ -87,8 +87,8 @@ v-html="nextStepsBody"></div>
       </div>
     </div>
     <recalModal
-ref="RecalModal"
-cmsWidgetName="RecalModal" />
+        ref="RecalModal"
+        cmsWidgetName="RecalModal" />
     <contentGroupModal
       ref="DeductibleModal"
       cmsWidgetName="DeductibleModal"
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index 661d68d7..06291290 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -1,114 +1,120 @@
 <template>
-    <div class="page-container-grouped-styles">
-        <div class="fade-on-route-transition">
-            <siteHeader
-                ref="siteHeader"
-                :cmsWidgetName="widget.siteHeader" />
-            <Form
-                id="searchProvidersForm"
-                @submit="onSubmit"
-                @invalidSubmit="onInvalidSubmit">
-                <div class="container-fluid pb-2">
-                    <div class="mx-5">
-                        <label
-                            id="tpaSearchQuestionLabel"
-                            for="tpaSearchQuestionField"
-                            class="text-center fs-5 mt-5 mb-0 text-black w-100">
-                            {{ tpaSearchQuestionLabel }}
-                        </label>
-                        <label
-                            id="searchInstructions"
-                            for="tpaSearchQuestionField"
-                            class="text-center small darker-gray w-100 mb-4">
-                            {{ searchInstructionsText }}
-                        </label>
-                        <div class="mb-5">
-                            <textboxQuestion
-                                id="tpaSearchQuestionField"
-                                v-model="zipCode"
-                                inputId="tpaSearchQuestionFieldInput"
-                                :cmsWidgetName="widget.tpaSearchQuestion"
-                                :includeSearchIcon="true"
-                                :displayQuestionText="false"
-                                isRequired
-                                :isDisabled="reloadingProviders"
-                                :validationRules="rules.zipCode"
-                                @clickEvent="searchClick" />
-                        </div>
-                    </div>
-                </div>
-            </Form>
-            <googleMap
-                id="map"
-                class="mb-4"
-                :addresses="providerAddresses"
-                :zipCode="mapZipCode" />
-            <Form
-                id="providerSelectionForm"
-                v-slot="{ meta }"
-                @submit="onSubmit"
-                @invalidSubmit="onInvalidSubmit">
-                <div class="container-fluid pb-2">
-                    <div class="mx-5">
-                        <dropdownQuestion
-                            id="searchRadiusFilter"
-                            v-model="filter"
-                            :cmsWidgetName="widget.filterByQuestion"
-                            inputId="searchRadiusFilterInput"
-                            :options="filterOptions"
-                            disableAutoFill
-                            :isDisabled="reloadingProviders"
-                            :validationRules="rules.filter" />
-                        <loader
-                            v-if="reloadingProviders"
-                            id="providersLoader"
-                            loaderPosition="center"
-                            loaderColor="blue"
-                            :width="2"
-                            :height="2"
-                            class="my-4" />
-                        <div v-else>
-                            <div class="my-4">
-                                <buttonQuestion
-                                    id="selectProviderQuestion"
-                                    v-model="selectedProviderNumber"
-                                    buttonTypeString="shopListButton"
-                                    :buttonTypeObject="shopListButton"
-                                    class="radioQuestion"
-                                    :answers="providerButtonData"
-                                    groupName="chooseShop"
-                                    textPosition="text-start"
-                                    isRequired
-                                    :validationRules="rules.provider"
-                                    :additionalButtonData="additionalButtonData" />
-                                <alert
-                                    v-if="providers?.length === 0 ?? true"
-                                    id="alertNoNetworkProviders"
-                                    :cmsWidgetName="widget.noNetworkShopsAlert"
-                                    alertClass="alert-warning"
-                                    :isDismissible="false"
-                                    :manualHeadline="noNetworkShopsAlertHeaderText" />
-                            </div>
-                            <div class="text-center">
-                                <textLink
-                                    id="preferredShopNotListedLink"
-                                    linkType="navigation"
-                                    href="javascript:void(0)"
-                                    :text="shopNotListedModalLink"
-                                    @clickEvent="doNotSeeMyShopLinkClick" />
-                            </div>
-                        </div>
-                    </div>
-                    <siteFooter
-                        ref="siteFooter"
-                        :cmsWidgetName="widget.siteFooter"
-                        :isForwardActionDisabled="!meta.valid"
-                        @ForwardClicked="forwardButtonAction"
-                        @backClicked="navigateBack" />
-                </div>
-            </Form>
-        </div>
+  <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="widget.siteHeader" />
+</div>
     </div>
+  </div>
+  <div class="container-fluid fade-on-route-transition">
+    <div class="row justify-content-center">
+      <div class="col-md-6 col-xl-4">
+        <Form
+          id="searchProvidersForm"
+          @submit="onSubmit"
+          @invalidSubmit="onInvalidSubmit">
+          <label
+            id="tpaSearchQuestionLabel"
+            for="tpaSearchQuestionField"
+            class="text-center fs-5 mt-5 mb-0 text-black w-100">
+            {{ tpaSearchQuestionLabel }}
+          </label>
+          <label
+            id="searchInstructions"
+            for="tpaSearchQuestionField"
+            class="text-center small darker-gray w-100 mb-4">
+            {{ searchInstructionsText }}
+          </label>
+          <div class="mb-5">
+            <textboxQuestion
+              id="tpaSearchQuestionField"
+              v-model="zipCode"
+              inputId="tpaSearchQuestionFieldInput"
+              :cmsWidgetName="widget.tpaSearchQuestion"
+              :includeSearchIcon="true"
+              :displayQuestionText="false"
+              isRequired
+              :isDisabled="reloadingProviders"
+              :validationRules="rules.zipCode"
+              @clickEvent="searchClick" />
+          </div>
+        </Form>
+      </div>
+    </div>
+  </div>
+  <div class="container-fluid fade-on-route-transition">
+    <div class="row justify-content-center">
+      <div class="col-md-6 col-xl-4">
+        <googleMap
+          id="map"
+          class="mb-4"
+          :addresses="providerAddresses"
+          :zipCode="mapZipCode" />
+        <Form
+          id="providerSelectionForm"
+          v-slot="{ meta }"
+          @submit="onSubmit"
+          @invalidSubmit="onInvalidSubmit">
+          <dropdownQuestion
+            id="searchRadiusFilter"
+            v-model="filter"
+            :cmsWidgetName="widget.filterByQuestion"
+            inputId="searchRadiusFilterInput"
+            :options="filterOptions"
+            disableAutoFill
+            :isDisabled="reloadingProviders"
+            :validationRules="rules.filter" />
+          <loader
+            v-if="reloadingProviders"
+            id="providersLoader"
+            loaderPosition="center"
+            loaderColor="blue"
+            :width="2"
+            :height="2"
+            class="my-4" />
+          <div v-else>
+            <div class="my-4">
+              <buttonQuestion
+                id="selectProviderQuestion"
+                v-model="selectedProviderNumber"
+                buttonTypeString="shopListButton"
+                :buttonTypeObject="shopListButton"
+                class="radioQuestion"
+                :answers="providerButtonData"
+                groupName="chooseShop"
+                textPosition="text-start"
+                isRequired
+                :validationRules="rules.provider"
+                :additionalButtonData="additionalButtonData" />
+              <alert
+                v-if="providers?.length === 0 ?? true"
+                id="alertNoNetworkProviders"
+                :cmsWidgetName="widget.noNetworkShopsAlert"
+                alertClass="alert-warning"
+                :isDismissible="false"
+                :manualHeadline="noNetworkShopsAlertHeaderText" />
+            </div>
+            <div class="text-center">
+              <textLink
+                id="preferredShopNotListedLink"
+                linkType="navigation"
+                href="javascript:void(0)"
+                :text="shopNotListedModalLink"
+                @clickEvent="doNotSeeMyShopLinkClick" />
+            </div>
+            <siteFooter
+              ref="siteFooter"
+              :cmsWidgetName="widget.siteFooter"
+              :isForwardActionDisabled="!meta.valid"
+              @ForwardClicked="forwardButtonAction"
+              @backClicked="navigateBack" />
+          </div>
+        </Form>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 // Components
@@ -198,7 +204,8 @@ export default {
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-        const { zipCode, filter, providers, providerNumber } = await getInitialSearchData();
+        const { zipCode, filter, providers, providerNumber } =
+      await getInitialSearchData();
         const cmsContent = await fetchCmsContentForPage(to.query.issPage);
 
         next(async (vm) => {
@@ -237,10 +244,11 @@ export default {
     },
     computed: {
         filterOptions() {
-            const filterByAnswers = this.getCmsContent(
-                this.widget.filterByQuestion,
-                widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
-            ) ?? [];
+            const filterByAnswers =
+        this.getCmsContent(
+            this.widget.filterByQuestion,
+            widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
+        ) ?? [];
             const filterByAnswersObj = {};
             [...filterByAnswers].forEach((answer) => {
                 filterByAnswersObj[answer.Name] = answer.Name;
@@ -275,13 +283,21 @@ export default {
             )?.replaceAll('{custom:radiusInMiles}', this.radiusInMiles);
         },
         providerAddresses() {
-            return this.providers?.map((provider) => this.getProviderAddress(provider)) ?? [];
+            return (
+                this.providers?.map((provider) => this.getProviderAddress(provider))
+        ?? []
+            );
         },
         providerButtonData() {
-            return this.providers?.map((provider) => this.getShopButtonDataFromProvider(provider)) ?? [];
+            return (
+                this.providers?.map((provider) =>
+                    this.getShopButtonDataFromProvider(provider)) ?? []
+            );
         },
         selectedProviderIsSafeliteShop() {
-            return this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false;
+            return (
+                this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false
+            );
         }
     },
     watch: {
@@ -295,9 +311,10 @@ export default {
         },
         providers(newProviders) {
             if (this.dataLoaded) {
-                this.selectedProviderNumber = newProviders?.length === 1 ?? false
-                    ? newProviders[0]?.providerNumber ?? ''
-                    : '';
+                this.selectedProviderNumber =
+          newProviders?.length === 1 ?? false
+              ? newProviders[0]?.providerNumber ?? ''
+              : '';
             }
         },
         selectedProviderNumber(newNumber) {
@@ -355,12 +372,16 @@ export default {
             }
 
             const addressLine1 = toTitleCase(provider?.address?.streetAddress);
-            const joinString = addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
+            const joinString =
+        addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
             return [addressLine1, addressLine2].join(joinString);
         },
         async getProviderButtonData() {
             this.reloadingProviders = true;
-            const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);
+            const getTpaProvidersResult = await useMainStore().getTpaProviders(
+                this.zipCode,
+                this.radiusInMiles
+            );
             this.reloadingProviders = false;
             return getTpaProvidersResult?.data?.shopProviders ?? [];
         },
@@ -394,16 +415,18 @@ export default {
         },
         getShopButtonDataFromProvider(provider) {
             const cellNumber = toDisplayPhoneNumber(provider?.phoneNumber);
-            const distance = provider?.distanceInMiles !== null && !Number.isNaN(parseFloat(provider?.distanceInMiles))
-                ? +provider.distanceInMiles.toFixed(1)
-                : null;
+            const distance =
+        provider?.distanceInMiles !== null
+        && !Number.isNaN(parseFloat(provider?.distanceInMiles))
+            ? +provider.distanceInMiles.toFixed(1)
+            : null;
 
             return {
                 buttonLabel: provider?.companyName ?? '',
-                buttonLabelSubCopy: distance === null
-                    ? ''
-                    : `${distance} mi`,
-                buttonBodyCopy: `${this.getProviderAddress(provider)}<br>${cellNumber ?? ''}`,
+                buttonLabelSubCopy: distance === null ? '' : `${distance} mi`,
+                buttonBodyCopy: `${this.getProviderAddress(provider)}<br>${
+                    cellNumber ?? ''
+                }`,
                 value: provider?.providerNumber ?? ''
             };
         }
@@ -413,6 +436,6 @@ export default {
 
 <style lang="scss" scoped>
 .darker-gray {
-    color: map-get($colors, "darker-gray");
+  color: map-get($colors, 'darker-gray');
 }
 </style>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index b86dd5e7..64173a91 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -23,7 +23,8 @@ class="mt-4" />
             isRequired
             disableAutoFill
             :isDisabled="isPolicyHolderDisabled"
-            :validationRules="rules.policyNumber" />
+            :validationRules="rules.policyNumber"
+            class="mb-3" />
           <textboxQuestion
             ref="policyZip"
             v-model="welcomePageModel.policyZipCode"
@@ -32,7 +33,8 @@ class="mt-4" />
             isRequired
             mask="#####"
             :isDisabled="isPolicyZipDisabled"
-            :validationRules="rules.policyZip" />
+            :validationRules="rules.policyZip"
+            class="mb-3" />
           <textboxQuestion
             ref="dateOfLoss"
             v-model="welcomePageModel.dateOfLoss"
@@ -44,11 +46,12 @@ class="mt-4" />
             disableAutoFill
             :max="new Date().toJSON().slice(0, 10)"
             :min="'1972-12-01'"
-            :validationRules="rules.lossDate" />
+            :validationRules="rules.lossDate"
+            class="mb-3" />
           <textBlock
             cmsWidgetName="DamageDateEstimateWidget"
             typeStyle="small"
-            class="mt-2" />
+            class="mb-3" />
           <dropdownQuestion
             id="welcomeDropdown"
             ref="damageCause"
@@ -58,7 +61,8 @@ class="mt-4" />
             :options="DamageCauseOptions"
             disableAutoFill
             :validationRules="rules.damageOption"
-            placeHolderText="Select an option" />
+            placeHolderText="Select an option"
+            class="mb-3" />
           <textboxQuestion
             ref="phoneNumber"
             v-model="welcomePageModel.phoneNumber"
@@ -67,7 +71,8 @@ class="mt-4" />
             :validationRules="rules.phoneNumber"
             isRequired
             :mask="phoneMask"
-            disableAutoFill />
+            disableAutoFill
+            class="mb-3" />
           <textboxQuestion
             ref="email"
             v-model="welcomePageModel.email"
@@ -75,12 +80,13 @@ class="mt-4" />
             cmsWidgetName="EmailAddressQuestion"
             :validationRules="rules.email"
             isRequired
-            disableAutoFill />
+            disableAutoFill
+            class="mb-3" />
           <textboxQuestion
             v-if="displayDamageCityQuestion"
             ref="damageCity"
             v-model="welcomePageModel.damageCity"
-            class="mt-4"
+            class="mb-3"
             inputId="damageCityField"
             cmsWidgetName="DamageCityQuestion"
             isRequired
@@ -91,7 +97,7 @@ class="mt-4" />
             id="welcomeDropdown"
             ref="state"
             v-model="welcomePageModel.damageState"
-            class="mt-4"
+            class="mb-3"
             cmsWidgetName="DamageStateQuestion"
             inputId="8fdf9dc2e13e430eb57529499dceb3eb"
             :options="getStates"

From 9648964c27e9a010248cb131cc38f5a54f54321c Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 15 Apr 2024 12:17:29 -0400
Subject: [PATCH 07/26] WIP update footer modal width and header overflow
 properties.

---
 src/iss-components/site-header/menu-modal/menu-modal.vue | 3 +--
 src/styles/common-styles.scss                            | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index ddeee120..f6fc89fe 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@@ -155,7 +155,7 @@ export default {
 }
 .modal {
     &.menu-modal {
-        max-width: 576px;
+        max-width: 100%;
         left: auto;
         height: calc(100% - 56px);
         top: 56px;
@@ -173,7 +173,6 @@ export default {
         }
         .modal-fullscreen {
             width: 100vw;
-            max-width: 576px;
         }
         .navigation-link {
             margin-bottom: 1.5rem;
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index e8cd429d..e7691002 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -78,7 +78,7 @@ body {
 }
 .modal-open {
     .container-fluid {
-        &.page-container-grouped-styles {
+        &.fade-on-route-transition {
             overflow: hidden;
             height: auto;
         }

From 565bc57c9c6bcf093169704ee7f62d65a9b70cff Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 15 Apr 2024 13:33:58 -0400
Subject: [PATCH 08/26] WIP resolve conflict

Copied entire forwardButtonAction method from develop.
---
 src/layouts/welcome-page/welcome-page.vue | 58 ++++++++++++++++-------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 64173a91..b06949f5 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -304,26 +304,29 @@ export default {
     },
     methods: {
         async forwardButtonAction() {
-            await this.mainStore
-                .validateZip({ zip: this.welcomePageModel.policyZipCode })
+            await this.mainStore.validateZip({ zip: this.welcomePageModel.policyZipCode })
                 .then(async (zipInfo) => {
                     if (zipInfo?.data?.isValid === true) {
                         this.mainStore.updatePolicyData(this.welcomePageModel);
-                        await this.mainStore
-                            .getDuplicateReferrals()
-                            .then(
-                                () => {},
-                                () => {}
-                            )
+
+                        this.mainStore.order.serviceLocation.zipCodeCtu = zipInfo.data.zipCodeCtu?.toString();
+
+                        const billToInfo = await this.getBillToInfo(
+                            this.mainStore.issConfig.parentAccountNumber,
+                            this.mainStore.order.serviceLocation.zipCodeCtu
+                        );
+
+                        if (billToInfo !== null) {
+                            this.mainStore.issConfig.billToAccountNumber = billToInfo.billToAccountNumber;
+                            this.mainStore.issConfig.itacCashBillToNumber = billToInfo.itacCashBillToNumber;
+                            this.mainStore.issConfig.itacFnrBillToNumber = billToInfo.itacFnrBillToNumber;
+                        }
+
+                        await this.mainStore.getDuplicateReferrals()
+                            .then(() => {}, () => {})
                             .finally(async () => {
-                                if (
-                                    this.isCoverageEnabled
-                  && !this.maxCoverageLookupAttemptsReached
-                                ) {
-                                    await this.mainStore.getCoveragePolicyInfo()?.then(
-                                        () => {},
-                                        () => {}
-                                    );
+                                if (this.isCoverageEnabled && !this.maxCoverageLookupAttemptsReached) {
+                                    await this.mainStore.getCoveragePolicyInfo()?.then(() => {}, () => {});
                                 } else {
                                     this.mainStore.order.policy.policyLookupSuccessful = false;
                                 }
@@ -335,6 +338,29 @@ export default {
                     }
                 });
         },
+        async getBillToInfo(parentAccountNumber, providerNumber) {
+            try {
+                const payload = {
+                    parentAccountNumber: parentAccountNumber.toString(),
+                    providerNumber: providerNumber.toString(),
+                    billToSelectionCriteria: {
+                        typeOfClaim: 'GLASS ONLY',
+                        lineOfBusiness: 'PERSONAL'
+                    }
+                };
+
+                const response = await globalMethods.callHttpClient({
+                    method: endpoints.GetBillToInfo.method,
+                    endpoint: endpoints.GetBillToInfo.url,
+                    payload
+                });
+
+                return response.data;
+            } catch (err) {
+                console.error(`Error Status Code: ${err.data?.status}: ${err.data?.title}`);
+                return null;
+            }
+        },
         navigateForward() {
             if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
                 this.$router.navigate(

From 72b6217cef5561e6faf15b1ea5f0131357028912 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 15 Apr 2024 13:37:56 -0400
Subject: [PATCH 09/26] WIP Resolve code conflict.

Copied forwardButtonAction method from develop.
---
 .../contact-details/contact-details.vue       | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue
index 52e1db41..5931594e 100644
--- a/src/layouts/contact-details/contact-details.vue
+++ b/src/layouts/contact-details/contact-details.vue
@@ -193,23 +193,34 @@ export default {
         }
     },
     methods: {
-    /**
-     * @summary Steps to perform when forward button clicked.
-     */
+        /**
+         * @summary Steps to perform when forward button clicked.
+         */
         forwardButtonAction() {
             const contactInfo = {
                 firstName: this.firstName,
                 lastName: this.lastName,
                 emailAddress: this.emailAddress,
-                phoneNumber: this.phoneNumber,
                 requestTextUpdates: this.requestTextUpdates,
                 notesForTechnician: this.notesForTechnician
             };
             useMainStore().updateContactInfo(contactInfo);
-            const scenario =
-        useMainStore().order.serviceLocation.IsSafeliteProvider === false
-            ? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
-            : this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
+
+            if (this.requestTextUpdates) {
+                useMainStore().updatePhoneNumbers({
+                    service: this.phoneNumber,
+                    alternative: this.phoneNumber
+                });
+            } else {
+                useMainStore().updatePhoneNumbers({
+                    home: this.phoneNumber,
+                    service: this.phoneNumber
+                });
+            }
+
+            const scenario = useMainStore().order.serviceLocation.IsSafeliteProvider === false
+                ? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
+                : this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
             this.$router.navigate(scenario, this.$route);
         }
     }

From 3951dfcf86921d7a5bed35a3330a1a2e3248d223 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 15 Apr 2024 13:54:36 -0400
Subject: [PATCH 10/26] Remove unneeded code.

---
 src/iss-components/site-footer/site-footer.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index 57298762..d2b7edd1 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -83,9 +83,7 @@ export default {
                 : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
         },
         footerImageURL() {
-            // return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
             const output = this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
-            console.log('original image', output);
             return output;
         },
         includeFooterImage() {

From 8455534ef0cf01c40f49020f76b9b30abb5a7f35 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 15 Apr 2024 17:08:43 -0400
Subject: [PATCH 11/26] Update cms-widget-fields footer image reference.

---
 src/constants/cms-widget-fields.js            |  4 +--
 .../site-footer/footer-image/footer-image.vue | 30 +++++++++++--------
 src/layouts/welcome-page/welcome-page.vue     |  2 +-
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/constants/cms-widget-fields.js b/src/constants/cms-widget-fields.js
index f8fd23fe..763b7597 100644
--- a/src/constants/cms-widget-fields.js
+++ b/src/constants/cms-widget-fields.js
@@ -37,8 +37,8 @@ const widgetFields = Object.freeze({
         NAME: 'Name',
         BACK_BUTTON_TEXT: 'BackButtonText',
         FORWARD_BUTTON_TEXT: 'ForwardButtonText',
-        FOOTER_IMAGE: 'FooterImage',
-        ALT_TEXT: 'AltText'
+        ALT_TEXT: 'AltText',
+        FOOTER_IMAGE_URL: 'FooterImageURL'
     }
 });
 
diff --git a/src/iss-components/site-footer/footer-image/footer-image.vue b/src/iss-components/site-footer/footer-image/footer-image.vue
index 7be1128b..acb6aabb 100644
--- a/src/iss-components/site-footer/footer-image/footer-image.vue
+++ b/src/iss-components/site-footer/footer-image/footer-image.vue
@@ -4,26 +4,32 @@
     </div>
 </template>
 <script>
+import widgetFields from '@/constants/cms-widget-fields.js';
+
 export default {
     name: 'footer-image',
-    props: {
-        cmsWidgetName: String
+    data() {
+        return {
+            widget: {
+                footer: 'SiteFooterWidget'
+            }
+        };
     },
     computed: {
         footerImageURL() {
-            return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+            return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FOOTER_IMAGE_URL);
         }
     }
 };
 </script>
 
-  <style lang="scss" scoped>
-    .footerImage {
-        display: flex;
-        justify-content: center;
-        margin-top: auto;
-        img {
-            max-width: 375px;
-        }
+<style lang="scss" scoped>
+.footerImage {
+    display: flex;
+    justify-content: center;
+    margin-top: auto;
+    img {
+        max-width: 23.4375rem;
     }
-  </style>
+}
+</style>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 078eec6b..5de5d396 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -141,7 +141,7 @@ class="row">
       </div>
       <!-- Footer image component must have parent (usually container-fluid)
         set to display: flex and height 100dvh or height 100% -->
-      <footerImage cmsWidgetName="SiteFooterWidget" />
+      <footerImage />
     </div>
   </Form>
 </template>

From cebd5e7f81f46cc6bbfdf14f6e925475723673d9 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 16 Apr 2024 09:11:33 -0400
Subject: [PATCH 12/26] WIP add unique styles for two and three button options.

---
 .../button-question/button-question.vue               | 11 ++++++++++-
 src/layouts/vehicle-damage/vehicle-damage.vue         | 10 +++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index 93da3c9d..f8b8146e 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -191,7 +191,7 @@ export default {
                     classes = 'd-flex flex-row p-0';
                     break;
                 case 'listCard':
-                    classes = 'row g-2 justify-content-center';
+                    classes = 'row g-2 g-md-5 justify-content-center mb-1 flex-nowrap';
                     if (this.isWide) {
                         classes += ' flex-column';
                     }
@@ -226,6 +226,15 @@ export default {
                     break;
                 default:
             }
+            // Determine number of buttons and add class accordingly.
+            // This is to accommodate unique spacing per design specs.
+            if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length > 2) {
+                classes += ' two-list-card-width';
+            }
+
+            if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length === 1) {
+                classes += ' one-list-card-width';
+            }
 
             return classes;
         },
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 07e26a39..776fcc79 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,7 +4,7 @@
     v-slot="{ meta }"
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit">
-    <div class="container-fluid fade-on-route-transition">
+    <div class="container-fluid fade-on-route-transition replace-options-question">
       <div class="row justify-content-center">
         <div class="col-md-6 px-0 px-md-2">
           <siteHeader cmsWidgetName="SiteHeaderWidget" />
@@ -469,9 +469,9 @@ export default {
 
 <style lang="scss">
 .replace-options-question {
-  .two-list-card-width {
-    width: 100%;
-    flex: 0 auto;
-  }
+    .two-list-card-width {
+        width: 100%;
+        flex: 0 auto;
+    }
 }
 </style>

From bb1909a8c30bab60b58e63af79b36ab233cfe070 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 16 Apr 2024 10:00:54 -0400
Subject: [PATCH 13/26] WIP Test push.

---
 src/layouts/policy-vehicles/policy-vehicles.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index 959511e4..295d9064 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -280,3 +280,4 @@ export default {
   line-height: 1.5rem;
 }
 </style>
+<!-- †est comment -->

From c725c0472a3458a0b9c424a2ae5cd56185688d71 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 16 Apr 2024 10:32:19 -0400
Subject: [PATCH 14/26] WIP Resubmit pages with new formatting.

---
 .../button-question/button-question.vue       | 167 ++++---
 src/digital-components/modal/modal.vue        |  38 +-
 .../site-footer/footer-image/footer-image.vue |  15 +-
 .../site-footer/site-footer.vue               | 181 ++++---
 .../site-header/menu-modal/menu-modal.vue     | 118 ++---
 .../contact-details/contact-details.vue       | 244 ++++-----
 .../coverage-statement/coverage-statement.vue | 387 +++++++-------
 .../duplicate-check/duplicate-check.vue       | 163 +++---
 .../policy-vehicles/policy-vehicles.vue       | 195 ++++----
 .../provider-preference.vue                   | 198 ++++----
 src/layouts/schedule-page/schedule-page.vue   | 352 +++++++------
 .../service-location/service-location.vue     | 405 +++++++--------
 src/layouts/tpa-search/tpa-search.vue         | 305 ++++++------
 src/layouts/tpa-submit/tpa-submit.vue         | 241 ++++++---
 src/layouts/vehicle-damage/vehicle-damage.vue | 471 +++++++++++-------
 src/layouts/vehicle-lookup/vehicle-lookup.vue |  82 ++-
 src/layouts/vehicle-parts/vehicle-parts.vue   | 202 ++++----
 .../vehicle-selection/vehicle-selection.vue   | 170 +++----
 src/layouts/vin-lookup/vin-lookup.vue         | 162 +++---
 src/layouts/welcome-page/welcome-page.vue     | 395 ++++++++-------
 20 files changed, 2441 insertions(+), 2050 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index f8b8146e..066b06a2 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -1,13 +1,18 @@
 <!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
 <template>
     <div
-        :class="isOverflowScrollable
-            ? 'button-question button-question-overflow'
-            : 'button-question'">
+        :class="
+            isOverflowScrollable
+                ? 'button-question button-question-overflow'
+                : 'button-question'
+        ">
         <div
             v-if="questionText && answers && answers.length > 0"
             class="question-text d-flex"
-            :class="{'small-question-text': isSmallQuestionText,'small-question-label-text':isSmallQuestionLabelText}">
+            :class="{
+                'small-question-text': isSmallQuestionText,
+                'small-question-label-text': isSmallQuestionLabelText,
+            }">
             <span class="fw-bold w-100">{{ questionText }}</span>
         </div>
         <div class="w-100 d-flex justify-content-center">
@@ -22,9 +27,11 @@
                     :data-focus-target="formatString(groupName)"
                     tabindex="-1">
                     {{ questionText }}
-                    {{ isMultiSelect && answers && answers.length > 1
-                            ? "Select one or more options below."
-                            : "Select an option below." }}
+                    {{
+                        isMultiSelect && answers && answers.length > 1
+                            ? 'Select one or more options below.'
+                            : 'Select an option below.'
+                    }}
                 </legend>
                 <div :class="getComponentLoopWrapperClasses">
                     <div
@@ -54,12 +61,12 @@
                             :setLastValuePushedToGa="setLastValuePushedToGa"
                             :suppressError="suppressError" />
                         <!-- For nested questions -->
-                        <transition
-                            name="fade"
-                            mode="out-in">
+                        <transition name="fade" mode="out-in">
                             <div
-                                v-if="typeof selectedValues == 'string' &&
-                                    selectedValues == answer.value">
+                                v-if="
+                                    typeof selectedValues == 'string' &&
+                                    selectedValues == answer.value
+                                ">
                                 <slot></slot>
                             </div>
                         </transition>
@@ -67,11 +74,8 @@
                 </div>
             </fieldset>
         </div>
-        <div
-            v-if="!suppressError"
-            class="row form-test-error mt-1">
-            <error-message
-                :name="formatString(groupName)"></error-message>
+        <div v-if="!suppressError" class="row form-test-error mt-1">
+            <error-message :name="formatString(groupName)"></error-message>
         </div>
     </div>
 </template>
@@ -92,16 +96,16 @@ export default {
         listCard,
         ErrorMessage,
         radio,
-        providerPrefRadio
+        providerPrefRadio,
     },
     props: {
         buttonTypeString: {
             type: String,
-            default: 'listButton'
+            default: 'listButton',
         },
         buttonTypeObject: {
             type: Object,
-            default: null
+            default: null,
         },
         isMultiSelect: Boolean,
         groupName: String,
@@ -109,16 +113,16 @@ export default {
         answers: Array,
         textPosition: {
             type: String,
-            default: 'text-center'
+            default: 'text-center',
         },
         selectingInitiatesLoad: Boolean,
         loaderColor: {
             type: String,
-            default: 'blue'
+            default: 'blue',
         },
         loaderPosition: {
             type: String,
-            default: 'right'
+            default: 'right',
         },
         isRequired: Boolean,
         isOverflowScrollable: Boolean,
@@ -133,7 +137,7 @@ export default {
         additionalButtonData: Object,
         additionalButtonStyling: String,
         isSmallQuestionText: Boolean,
-        isSmallQuestionLabelText: Boolean
+        isSmallQuestionLabelText: Boolean,
     },
     emits: ['update:modelValue'],
     setup(props) {
@@ -142,11 +146,18 @@ export default {
 
         const fieldOptions = {
             value: modelValue,
-            initialValue: null
+            initialValue: null,
         };
 
-        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
-            useField(props.groupName, props.validationRules, fieldOptions);
+        const {
+            errorMessage,
+            handleBlur,
+            handleChange,
+            meta,
+            validate,
+            errors,
+            resetField,
+        } = useField(props.groupName, props.validationRules, fieldOptions);
 
         return {
             errorMessage,
@@ -155,12 +166,12 @@ export default {
             validate,
             meta,
             errors,
-            resetField
+            resetField,
         };
     },
     data() {
         return {
-            lastValuePushedToGa: null
+            lastValuePushedToGa: null,
         };
     },
     computed: {
@@ -169,8 +180,8 @@ export default {
             const baseClasses = this.isOverflowScrollable
                 ? 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0'
                 : this.buttonTypeString === 'listCard'
-                    ? 'w-100'
-                    : '';
+                ? 'w-100'
+                : '';
 
             const SmallQuestionTextClass = this.isSmallQuestionText
                 ? `${baseClasses}small-question-text`
@@ -191,7 +202,8 @@ export default {
                     classes = 'd-flex flex-row p-0';
                     break;
                 case 'listCard':
-                    classes = 'row g-2 g-md-5 justify-content-center mb-1 flex-nowrap';
+                    classes =
+                        'row g-2 g-md-5 justify-content-center mb-1 flex-nowrap';
                     if (this.isWide) {
                         classes += ' flex-column';
                     }
@@ -228,32 +240,48 @@ export default {
             }
             // Determine number of buttons and add class accordingly.
             // This is to accommodate unique spacing per design specs.
-            if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length > 2) {
+            if (
+                this.buttonTypeString === 'listCard' &&
+                this.buttonsInfo.length > 2
+            ) {
                 classes += ' two-list-card-width';
             }
 
-            if (this.buttonTypeString === 'listCard' && this.buttonsInfo.length === 1) {
+            if (
+                this.buttonTypeString === 'listCard' &&
+                this.buttonsInfo.length === 1
+            ) {
                 classes += ' one-list-card-width';
             }
 
             return classes;
         },
         buttonsInfo() {
-            return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
-                buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
-                altText: answer.altText ?? (answer.Name ? answer.Name : answer),
-                buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText,
-                buttonBodyCopy: answer.buttonBodyCopy ?? answer.buttonBodyCopy,
-                buttonAuxiliaryCopy: answer.buttonAuxiliaryCopy ?? answer.buttonAuxiliaryCopy,
-                buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
-                buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
-                buttonImageId: answer.buttonImageId ?? answer.ImageId,
-                groupName: this.formatString(this.groupName),
-                value:
-                    answer.value
-                    ?? (this.useTextForValue && answer.Text ? answer.Text : answer.Name)
-                    ?? (typeof answer !== 'object' ? answer : null)
-            }));
+            return (Array.isArray(this.answers) ? this.answers : [])?.map(
+                (answer) => ({
+                    buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
+                    altText:
+                        answer.altText ?? (answer.Name ? answer.Name : answer),
+                    buttonLabelSubCopy:
+                        answer.buttonLabelSubCopy ?? answer.SubText,
+                    buttonBodyCopy:
+                        answer.buttonBodyCopy ?? answer.buttonBodyCopy,
+                    buttonAuxiliaryCopy:
+                        answer.buttonAuxiliaryCopy ??
+                        answer.buttonAuxiliaryCopy,
+                    buttonFooterCopy:
+                        answer.buttonFooterCopy ?? answer.buttonFooterCopy,
+                    buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
+                    buttonImageId: answer.buttonImageId ?? answer.ImageId,
+                    groupName: this.formatString(this.groupName),
+                    value:
+                        answer.value ??
+                        (this.useTextForValue && answer.Text
+                            ? answer.Text
+                            : answer.Name) ??
+                        (typeof answer !== 'object' ? answer : null),
+                })
+            );
         },
         selectedValues: {
             get() {
@@ -261,24 +289,25 @@ export default {
             },
             set(selectedAnswers) {
                 this.$emit('update:modelValue', selectedAnswers);
-            }
-        }
+            },
+        },
     },
     watch: {
         modelValue(newValue) {
             this.resetField({
-                value: newValue
+                value: newValue,
             });
-        }
+        },
     },
     beforeMount() {
         if (this.buttonTypeObject) {
-            this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
+            this.$options.components[this.buttonTypeString] =
+                this.buttonTypeObject;
         }
     },
     beforeUnmount() {
         this.resetField({
-            value: ''
+            value: '',
         });
     },
     methods: {
@@ -287,8 +316,8 @@ export default {
         },
         setLastValuePushedToGa(lastValuePushedToGa) {
             this.lastValuePushedToGa = lastValuePushedToGa;
-        }
-    }
+        },
+    },
 };
 </script>
 
@@ -334,17 +363,17 @@ export default {
 .small-question-label-text {
     &.question-text {
         span {
-          text-align: left;
-          margin: 0 0 0.25rem 0;
-      }
-  }
-  &.question-text {
-      margin: 0;
-  }
-  &fieldset {
-      .ui-radio {
-          margin: 0;
-      }
-  }
+            text-align: left;
+            margin: 0 0 0.25rem 0;
+        }
+    }
+    &.question-text {
+        margin: 0;
+    }
+    &fieldset {
+        .ui-radio {
+            margin: 0;
+        }
+    }
 }
 </style>
diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index f2a7b8a9..fc42c9fc 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -6,7 +6,10 @@
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
         aria-hidden="true"
-        v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }">
+        v-on="{
+            'hidden.bs.modal': onModalClosed,
+            'shown.bs.modal': onModalOpened,
+        }">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header mb-2 mt-2">
@@ -33,7 +36,10 @@
                         class="w-100"
                         loaderColor="white"
                         :buttonText="footerButtonText"
-                        :class="(isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid'"
+                        :class="
+                            (isButtonDisabled || isFooterButtonDisabled) &&
+                            'form-test-invalid'
+                        "
                         @clickEvent="validateAndEmit" />
                 </div>
             </div>
@@ -50,23 +56,25 @@ export default {
     // eslint-disable-next-line vue/multi-word-component-names
     name: 'modal',
     components: {
-        modalButtonMain
+        modalButtonMain,
     },
     props: {
         modalId: String,
         headerText: String,
         footerButtonText: String,
         onModalOpenedCallback: {
-            type: Function
+            type: Function,
         },
         onModalClosedCallback: {
-            type: Function
+            type: Function,
         },
-        isButtonDisabled: Boolean
+        isButtonDisabled: Boolean,
     },
     emits: ['footer-button-event', 'isModalOpened'],
     setup(props) {
-        const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
+        const modalId = props.modalId
+            ? props.modalId
+            : `modal-${crypto.randomUUID()}`;
 
         const { meta, validate, resetForm } = useForm();
 
@@ -75,7 +83,7 @@ export default {
             modalId,
             meta,
             validate,
-            resetForm
+            resetForm,
         };
     },
     computed: {
@@ -84,7 +92,7 @@ export default {
                 return !this.meta.valid;
             }
             return !this.meta.dirty || !this.meta.valid;
-        }
+        },
     },
     methods: {
         async validateAndEmit() {
@@ -106,16 +114,20 @@ export default {
             this.onModalClosedCallback?.();
         },
         openModal() {
-            const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
+            const modal = Modal.getOrCreateInstance(
+                document.getElementById(this.modalId)
+            );
             modal?.show();
             this.$emit('isModalOpened', true);
         },
         closeModal() {
-            const modal = Modal.getInstance(document.getElementById(this.modalId));
+            const modal = Modal.getInstance(
+                document.getElementById(this.modalId)
+            );
             modal?.hide();
             this.$emit('isModalOpened', false);
-        }
-    }
+        },
+    },
 };
 </script>
 
diff --git a/src/iss-components/site-footer/footer-image/footer-image.vue b/src/iss-components/site-footer/footer-image/footer-image.vue
index acb6aabb..2d03370a 100644
--- a/src/iss-components/site-footer/footer-image/footer-image.vue
+++ b/src/iss-components/site-footer/footer-image/footer-image.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="footerImage">
-      <img :src="footerImageURL" />
+        <img :src="footerImageURL" />
     </div>
 </template>
 <script>
@@ -11,15 +11,18 @@ export default {
     data() {
         return {
             widget: {
-                footer: 'SiteFooterWidget'
-            }
+                footer: 'SiteFooterWidget',
+            },
         };
     },
     computed: {
         footerImageURL() {
-            return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FOOTER_IMAGE_URL);
-        }
-    }
+            return this.getCmsContent(
+                this.widget.footer,
+                widgetFields.FOOTER_WIDGET.FOOTER_IMAGE_URL
+            );
+        },
+    },
 };
 </script>
 
diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index d2b7edd1..9f5430be 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -1,50 +1,46 @@
 <template>
-  <div>
-    <footer
-id="infoBox"
-class="footer container-fluid g-5 my-5 px-0">
-      <div
-        class="row d-flex vw-100 mx-0"
-        :class="[
-          isStackedVertically
-            ? 'flex-column align-items-stretch'
-            : 'flex-row-reverse align-items-center',
-        ]">
-        <div
-id="stacked"
-class="col button-col d-flex px-0">
-          <buttonMain
-            v-if="!isForwardButtonHidden"
-            ref="buttonMain"
-            isPrimary
-            :buttonText="buttonText"
-            loaderColor="white"
-            :class="
-              (disableForwardAction || isForwardActionDisabled) &&
-              'form-test-invalid'
-            "
-            :aria-disabled="isForwardActionDisabled"
-            :isDisabled="isForwardActionDisabled"
-            data-bs-target="#footerModal"
-            data-bs-dismiss="modal"
-            data-test-id="site-footer-main-button"
-            @clickEvent="buttonClick" />
-        </div>
-        <div
-          v-if="!isBackButtonHidden"
-          class="col-auto link-col py-1 px-0 text-break">
-          <textLink
-            linkType="navigation"
-            :text="backLink"
-            href="javascript:void(0)"
-            data-bs-target="#footerModal"
-            data-bs-dismiss="modal"
-            data-test-id="site-footer-back-button"
-            @clickEvent="linkClick" />
-        </div>
-      </div>
-    </footer>
-  </div>
+    <div>
+        <footer id="infoBox" class="footer container-fluid g-5 my-5 px-0">
+            <div
+                class="row d-flex vw-100 mx-0"
+                :class="[
+                    isStackedVertically
+                        ? 'flex-column align-items-stretch'
+                        : 'flex-row-reverse align-items-center',
+                ]">
+                <div id="stacked" class="col button-col d-flex px-0">
+                    <buttonMain
+                        v-if="!isForwardButtonHidden"
+                        ref="buttonMain"
+                        isPrimary
+                        :buttonText="buttonText"
+                        loaderColor="white"
+                        :class="
+                            (disableForwardAction || isForwardActionDisabled) &&
+                            'form-test-invalid'
+                        "
+                        :aria-disabled="isForwardActionDisabled"
+                        :isDisabled="isForwardActionDisabled"
+                        data-bs-target="#footerModal"
+                        data-bs-dismiss="modal"
+                        data-test-id="site-footer-main-button"
+                        @clickEvent="buttonClick" />
+                </div>
+                <div
+                    v-if="!isBackButtonHidden"
+                    class="col-auto link-col py-1 px-0 text-break">
+                    <textLink
+                        linkType="navigation"
+                        :text="backLink"
+                        href="javascript:void(0)"
+                        data-bs-target="#footerModal"
+                        data-bs-dismiss="modal"
+                        data-test-id="site-footer-back-button"
+                        @clickEvent="linkClick" />
+                </div>
+            </div>
+        </footer>
+    </div>
 </template>
 
 <script>
@@ -56,21 +52,21 @@ export default {
     name: 'site-footer',
     components: {
         textLink,
-        buttonMain
+        buttonMain,
     },
     props: {
         isForwardActionDisabled: Boolean,
         isBackButtonHidden: { type: Boolean, default: false },
         isForwardButtonHidden: { type: Boolean, default: false },
         cmsWidgetName: String,
-        isStackedVertically: { type: Boolean, default: false }
+        isStackedVertically: { type: Boolean, default: false },
     },
     emits: ['backClicked', 'forwardClicked'],
     data() {
         return {
             paddingHeight: 0,
             customButtontext: '',
-            disableForwardAction: false
+            disableForwardAction: false,
         };
     },
     computed: {
@@ -83,13 +79,16 @@ export default {
                 : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
         },
         footerImageURL() {
-            const output = this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
+            const output = this.getCmsContent(
+                this.cmsWidgetName,
+                'FooterImageURL'
+            );
             return output;
         },
         includeFooterImage() {
             const currentPageName = this.getPageNameByQueryString();
             return currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE;
-        }
+        },
     },
     mounted() {
         this.paddingHeight = this.includeFooterImage
@@ -129,67 +128,67 @@ export default {
         },
         enableForwardAction() {
             this.disableForwardAction = false;
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
 .footer {
-  display: flex;
-  overflow: visible;
-  a {
     display: flex;
-    justify-content: center;
-  }
-  .col,
-  .col-auto,
-  .col button {
-    width: 100%;
-  }
-  @media only screen and (min-width: 340px) {
+    overflow: visible;
+    a {
+        display: flex;
+        justify-content: center;
+    }
     .col,
     .col-auto,
     .col button {
-      width: auto;
-      justify-content: flex-end;
+        width: 100%;
     }
-    .btn-primary {
-      width: auto;
+    @media only screen and (min-width: 340px) {
+        .col,
+        .col-auto,
+        .col button {
+            width: auto;
+            justify-content: flex-end;
+        }
+        .btn-primary {
+            width: auto;
+        }
+        a {
+            display: flex;
+            justify-content: flex-start;
+        }
     }
-    a {
-      display: flex;
-      justify-content: flex-start;
-    }
-  }
 
-  & > .container-fluid {
-    overflow-x: visible; // needed to fix hidden footer on some iphones
-  }
-  div.flex-column {
-    .btn-primary {
-      width: 100%;
-      justify-content: center;
+    & > .container-fluid {
+        overflow-x: visible; // needed to fix hidden footer on some iphones
     }
-    div.link-col {
-      display: flex;
-      justify-content: center;
-      margin-top: 1.25rem;
+    div.flex-column {
+        .btn-primary {
+            width: 100%;
+            justify-content: center;
+        }
+        div.link-col {
+            display: flex;
+            justify-content: center;
+            margin-top: 1.25rem;
+        }
     }
-  }
 }
 .footerImage {
-  text-align: center;
-  position: sticky;
+    text-align: center;
+    position: sticky;
 }
 
 @media only screen and (max-width: 340px) {
-  .footerImage {
-    bottom: 78px;
-  }
+    .footerImage {
+        bottom: 78px;
+    }
 }
 
 #siteFooterImage {
-  width: 100%;
+    width: 100%;
 }
 </style>
diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index f6fc89fe..3d6c6661 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@@ -31,51 +31,49 @@
                 <div class="bar3"></div>
             </button>
         </div>
-    <div class="modal-dialog modal-fullscreen">
-        <div class="modal-content">
-            <div class="modal-header visually-hidden">
-                <h5
-                    id="footerModalLabel"
-                    class="modal-title">
-                Footer Navigation
-                </h5>
+        <div class="modal-dialog modal-fullscreen">
+            <div class="modal-content">
+                <div class="modal-header visually-hidden">
+                    <h5 id="footerModalLabel" class="modal-title">
+                        Footer Navigation
+                    </h5>
+                </div>
+                <div class="modal-body d-flex flex-column">
+                    <textLink
+                        linkType="navigation"
+                        text="Terms of service"
+                        href="//www.safelite.com/terms-of-use"
+                        target="_blank" />
+                    <textLink
+                        linkType="navigation"
+                        text="Your privacy choices"
+                        href="//www.safelite.com/privacy-center"
+                        target="_blank">
+                        <template #after-text>
+                            <img
+                                class="ccpa-icon"
+                                data-id="ccpa-icon"
+                                src="~@/assets/img/icons/ccpa-icon.svg"
+                                alt="Your privacy choices" />
+                        </template>
+                    </textLink>
+                    <textLink
+                        linkType="navigation"
+                        text="Warranty"
+                        href="//www.safelite.com/national-lifetime-warranty"
+                        target="_blank" />
+                    <textLink
+                        linkType="navigation"
+                        text="Notice at collection"
+                        href="https://www.safelite.com/ccpa-privacy-policy"
+                        target="_blank" />
+                </div>
+                <div class="modal-footer d-flex justify-content-start">
+                    &copy; {{ new Date().getFullYear() }} Safelite Group
+                </div>
             </div>
-            <div class="modal-body d-flex flex-column">
-                <textLink
-                    linkType="navigation"
-                    text="Terms of service"
-                    href="//www.safelite.com/terms-of-use"
-                    target="_blank" />
-                <textLink
-                    linkType="navigation"
-                    text="Your privacy choices"
-                    href="//www.safelite.com/privacy-center"
-                    target="_blank">
-                <template #after-text>
-                    <img
-                        class="ccpa-icon"
-                        data-id="ccpa-icon"
-                        src="~@/assets/img/icons/ccpa-icon.svg"
-                        alt="Your privacy choices" />
-                </template>
-            </textLink>
-            <textLink
-                linkType="navigation"
-                text="Warranty"
-                href="//www.safelite.com/national-lifetime-warranty"
-                target="_blank" />
-            <textLink
-                linkType="navigation"
-                text="Notice at collection"
-                href="https://www.safelite.com/ccpa-privacy-policy"
-                target="_blank" />
-        </div>
-        <div class="modal-footer d-flex justify-content-start">
-            &copy; {{ new Date().getFullYear() }} Safelite Group
         </div>
     </div>
-</div>
-</div>
 </template>
 
 <script>
@@ -85,12 +83,12 @@ import { Modal } from 'bootstrap';
 export default {
     name: 'menu-modal',
     components: {
-        textLink
+        textLink,
     },
     data() {
         return {
             isActive: false,
-            currentFooterAndHeaderHeight: 0
+            currentFooterAndHeaderHeight: 0,
         };
     },
     methods: {
@@ -98,20 +96,26 @@ export default {
             if (this.isActive) {
                 // hide modal
                 this.isActive = false;
-                const modal = Modal.getInstance(document.getElementById('footerModal'));
+                const modal = Modal.getInstance(
+                    document.getElementById('footerModal')
+                );
                 modal?.hide();
             } else {
                 // show modal
-                this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 56;
+                this.currentFooterAndHeaderHeight =
+                    this.getFooterInfoBoxHeight() + 56;
                 this.isActive = true;
-                const modal = Modal.getOrCreateInstance(document.getElementById('footerModal'));
+                const modal = Modal.getOrCreateInstance(
+                    document.getElementById('footerModal')
+                );
                 modal?.show();
                 document.querySelector('.fade-on-route-transition').scrollTo({
-                    top: 0, behavior: 'instant'
+                    top: 0,
+                    behavior: 'instant',
                 });
             }
-        }
-    }
+        },
+    },
 };
 </script>
 
@@ -126,14 +130,14 @@ export default {
             width: 1.5rem;
             height: 1.5rem;
             border-radius: 50%;
-            box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
+            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
             background-color: $white;
             position: relative;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            padding: 0;//Required to prevent 'squish' on iPhone
+            padding: 0; //Required to prevent 'squish' on iPhone
             .bar1,
             .bar2,
             .bar3 {
@@ -146,7 +150,9 @@ export default {
             &.active .bar1 {
                 transform: rotate(-45deg) translate(-3px, 3px);
             }
-            &.active .bar2 {opacity: 0;}
+            &.active .bar2 {
+                opacity: 0;
+            }
             &.active .bar3 {
                 transform: rotate(45deg) translate(-3px, -3px);
             }
@@ -184,7 +190,7 @@ export default {
         .menu-modal-container {
             position: absolute;
             padding: 1.47rem 1rem 1.47rem 1.47rem;
-            right: .5rem;
+            right: 0.5rem;
             top: -4.5rem;
             button {
                 border: none;
@@ -195,8 +201,8 @@ export default {
                     box-shadow: none;
                     background-color: $white;
                     position: relative;
-                    right: -.5rem;
-                    top: .5rem;
+                    right: -0.5rem;
+                    top: 0.5rem;
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue
index a84958f3..c3daca4f 100644
--- a/src/layouts/contact-details/contact-details.vue
+++ b/src/layouts/contact-details/contact-details.vue
@@ -1,104 +1,103 @@
 <template>
-  <Form
-    ref="contact-details-form"
-    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 px-0 px-md-2">
-          <siteHeader
-ref="siteHeader"
-:cmsWidgetName="widget.siteHeader" />
+    <Form
+        ref="contact-details-form"
+        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 px-0 px-md-2">
+                    <siteHeader
+                        ref="siteHeader"
+                        :cmsWidgetName="widget.siteHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <siteSubHeader
+                        id="sub-header"
+                        ref="siteSubHeader"
+                        class="mt-5"
+                        :cmsWidgetName="widget.siteSubHeader" />
+                    <textboxQuestion
+                        ref="firstNameQuestion"
+                        v-model="firstName"
+                        class="mt-6"
+                        inputId="firstName"
+                        :cmsWidgetName="widget.firstNameQuestion"
+                        isRequired
+                        :validationRules="rules.firstName" />
+                    <textboxQuestion
+                        ref="lastNameQuestion"
+                        v-model="lastName"
+                        class="mt-5"
+                        inputId="lastName"
+                        :cmsWidgetName="widget.lastNameQuestion"
+                        isRequired
+                        :validationRules="rules.lastName" />
+                    <textboxQuestion
+                        ref="emailQuestion"
+                        v-model="emailAddress"
+                        class="mt-5"
+                        inputId="emailAddress"
+                        :cmsWidgetName="widget.emailQuestion"
+                        isRequired
+                        :validationRules="rules.emailAddress" />
+                    <textboxQuestion
+                        ref="phoneNumberQuestion"
+                        v-model="phoneNumber"
+                        class="mt-5"
+                        inputId="phoneNumber"
+                        :cmsWidgetName="widget.phoneNumberQuestion"
+                        isRequired
+                        :mask="phoneMask"
+                        :validationRules="rules.phoneNumber" />
+                    <checkbox
+                        ref="requestTextUpdatesCheckbox"
+                        v-model="requestTextUpdates"
+                        :isChecked="requestTextUpdates"
+                        class="mt-3"
+                        checkboxName="requestTextUpdates"
+                        buttonID="requestTextUpdates"
+                        :checkboxLabel="requestTextUpdatesCheckboxText" />
+                    <textareaQuestion
+                        ref="notesQuestion"
+                        v-model="notesForTechnician"
+                        class="mt-5"
+                        inputId="technicianNotes"
+                        :isDisabled="false"
+                        :isRequired="false"
+                        :cmsWidgetName="widget.notesQuestion"
+                        maxLength="250"
+                        :inputRows="4" />
+                    <p ref="disclaimerText" class="caption dark-gray mt-6">
+                        {{ textUpdateDisclaimerText }} I also agree to
+                        Safelite's
+                        <textLink
+                            ref="privacyPolicyLink"
+                            class="normal-line-height"
+                            linkType="text"
+                            text="Privacy Policy"
+                            href="//www.safelite.com/privacy-center" />
+                        and
+                        <textLink
+                            ref="termsOfUseLink"
+                            class="normal-line-height"
+                            linkType="text"
+                            text="Terms of Use"
+                            href="//www.safelite.com/terms-of-use" />.
+                    </p>
+                    <siteFooter
+                        ref="siteFooter"
+                        class="my-5"
+                        :cmsWidgetName="widget.siteFooter"
+                        :isForwardActionDisabled="!meta.valid"
+                        @forwardClicked="forwardButtonAction"
+                        @backClicked="navigateBack" />
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <siteSubHeader
-            id="sub-header"
-            ref="siteSubHeader"
-            class="mt-5"
-            :cmsWidgetName="widget.siteSubHeader" />
-          <textboxQuestion
-            ref="firstNameQuestion"
-            v-model="firstName"
-            class="mt-6"
-            inputId="firstName"
-            :cmsWidgetName="widget.firstNameQuestion"
-            isRequired
-            :validationRules="rules.firstName" />
-          <textboxQuestion
-            ref="lastNameQuestion"
-            v-model="lastName"
-            class="mt-5"
-            inputId="lastName"
-            :cmsWidgetName="widget.lastNameQuestion"
-            isRequired
-            :validationRules="rules.lastName" />
-          <textboxQuestion
-            ref="emailQuestion"
-            v-model="emailAddress"
-            class="mt-5"
-            inputId="emailAddress"
-            :cmsWidgetName="widget.emailQuestion"
-            isRequired
-            :validationRules="rules.emailAddress" />
-          <textboxQuestion
-            ref="phoneNumberQuestion"
-            v-model="phoneNumber"
-            class="mt-5"
-            inputId="phoneNumber"
-            :cmsWidgetName="widget.phoneNumberQuestion"
-            isRequired
-            :mask="phoneMask"
-            :validationRules="rules.phoneNumber" />
-          <checkbox
-            ref="requestTextUpdatesCheckbox"
-            v-model="requestTextUpdates"
-            :isChecked="requestTextUpdates"
-            class="mt-3"
-            checkboxName="requestTextUpdates"
-            buttonID="requestTextUpdates"
-            :checkboxLabel="requestTextUpdatesCheckboxText" />
-          <textareaQuestion
-            ref="notesQuestion"
-            v-model="notesForTechnician"
-            class="mt-5"
-            inputId="technicianNotes"
-            :isDisabled="false"
-            :isRequired="false"
-            :cmsWidgetName="widget.notesQuestion"
-            maxLength="250"
-            :inputRows="4" />
-          <p
-ref="disclaimerText"
-class="caption dark-gray mt-6">
-            {{ textUpdateDisclaimerText }} I also agree to Safelite's
-            <textLink
-              ref="privacyPolicyLink"
-              class="normal-line-height"
-              linkType="text"
-              text="Privacy Policy"
-              href="//www.safelite.com/privacy-center" />
-            and
-            <textLink
-              ref="termsOfUseLink"
-              class="normal-line-height"
-              linkType="text"
-              text="Terms of Use"
-              href="//www.safelite.com/terms-of-use" />.
-          </p>
-          <siteFooter
-            ref="siteFooter"
-            class="my-5"
-            :cmsWidgetName="widget.siteFooter"
-            :isForwardActionDisabled="!meta.valid"
-            @forwardClicked="forwardButtonAction"
-            @backClicked="navigateBack" />
-        </div>
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 <script>
 // Components
@@ -129,7 +128,7 @@ export default {
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        textLink
+        textLink,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -146,7 +145,7 @@ export default {
             emailAddress,
             servicePhone,
             requestTextUpdates,
-            notesForTechnician
+            notesForTechnician,
         } = useMainStore().contactInfo;
         return {
             firstName,
@@ -165,22 +164,25 @@ export default {
                 requestTextUpdates: 'TextContentWidget',
                 notesQuestion: 'NotesQuestionWidget',
                 disclaimer: 'TextUpdateDisclaimerWidget',
-                siteFooter: 'SiteFooterWidget'
+                siteFooter: 'SiteFooterWidget',
             },
             rules: {
                 firstName: globalRules.FIRST_NAME_REQUIRED,
                 lastName: globalRules.LAST_NAME_REQUIRED,
                 emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
-                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
-            }
+                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
+            },
         };
     },
     computed: {
-    /**
-     * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
-     */
+        /**
+         * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
+         */
         requestTextUpdatesCheckboxText() {
-            return `${this.getCmsContent(this.widget.requestTextUpdates, 'Text')}*`;
+            return `${this.getCmsContent(
+                this.widget.requestTextUpdates,
+                'Text'
+            )}*`;
         },
         /**
          * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
@@ -190,7 +192,7 @@ export default {
         },
         phoneMask() {
             return MaskaFormattedMasks.PHONE_NUMBER;
-        }
+        },
     },
     methods: {
         /**
@@ -202,37 +204,41 @@ export default {
                 lastName: this.lastName,
                 emailAddress: this.emailAddress,
                 requestTextUpdates: this.requestTextUpdates,
-                notesForTechnician: this.notesForTechnician
+                notesForTechnician: this.notesForTechnician,
             };
             useMainStore().updateContactInfo(contactInfo);
 
             if (this.requestTextUpdates) {
                 useMainStore().updatePhoneNumbers({
                     service: this.phoneNumber,
-                    alternative: this.phoneNumber
+                    alternative: this.phoneNumber,
                 });
             } else {
                 useMainStore().updatePhoneNumbers({
                     home: this.phoneNumber,
-                    service: this.phoneNumber
+                    service: this.phoneNumber,
                 });
             }
 
-            const scenario = useMainStore().order.serviceLocation.IsSafeliteProvider === false
-                ? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
-                : this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
+            const scenario =
+                useMainStore().order.serviceLocation.IsSafeliteProvider ===
+                false
+                    ? this.navigationScenarios
+                          .CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
+                    : this.navigationScenarios
+                          .CLICKED_FORWARD_WITH_SAFELITE_SHOP;
             this.$router.navigate(scenario, this.$route);
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
 .dark-gray {
-  color: $darker-gray;
+    color: $darker-gray;
 }
 
 .normal-line-height {
-  line-height: normal;
+    line-height: normal;
 }
 </style>
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index c2aca83d..368bb7b5 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -1,99 +1,97 @@
 <template>
-  <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 px-0 px-md-2">
-          <loadingModal
-            ref="loadingModal"
-            :textSlides="loadingText" />
-          <siteHeader
-            ref="siteHeader"
-            cmsWidgetName="SiteHeaderWidget" />
+    <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 px-0 px-md-2">
+                    <loadingModal
+                        ref="loadingModal"
+                        :textSlides="loadingText" />
+                    <siteHeader
+                        ref="siteHeader"
+                        cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center pt-5">
+                <div class="col-md-6 col-xl-4">
+                    <h5
+                        ref="siteSubHeader"
+                        class="text-center text-black"
+                        v-html="coverageStatementSubHeader"></h5>
+                    <div
+                        ref="explanatoryText"
+                        class="body-text text-center mt-2"
+                        v-html="explanatoryText"></div>
+                    <div
+                        ref="secondaryText"
+                        class="text-center mt-4 mb-1 fw-bold text-black"
+                        v-html="secondaryText"></div>
+                    <div
+                        v-if="verifiedDeductible"
+                        class="d-flex justify-content-center cost">
+                        {{ deductibleForDisplay }}
+                    </div>
+                    <div
+                        v-if="isQuoteDisplayed"
+                        class="d-flex justify-content-center cost mb-0">
+                        {{ servicePriceForDisplay }}
+                    </div>
+                    <div
+                        v-if="verifiedITAC"
+                        class="d-flex justify-content-center mb-4 deductible-text">
+                        {{ deductibleText }}&nbsp;
+                        <span class="text-success fw-bold">{{
+                            deductibleForDisplay
+                        }}</span>
+                    </div>
+                    <alert
+                        v-if="verifiedITAC"
+                        ref="verifiedITACAlert"
+                        class="mb-5"
+                        cmsWidgetName="VerifiedITACAlert"
+                        :manualHeadline="verifiedItacAlertHeader"
+                        :manualCopy="verifiedItacAlertBody"
+                        alertClass="alert-success"
+                        :isDismissible="false">
+                    </alert>
+                    <div
+                        class="fw-bold text-black mt-5 mb-2"
+                        v-html="nextStepsHeader"></div>
+                    <div class="body-text" v-html="nextStepsBody"></div>
+                    <buttonQuestion
+                        v-if="isQuoteDisplayed"
+                        v-model="selectedProvider"
+                        cmsWidgetName="ServiceProviderQuestion"
+                        :questionText="serviceProviderQuestionText"
+                        :answers="serviceProviderQuestionAnswers"
+                        groupName="ServiceProviderQuestionOption"
+                        buttonTypeString="listButton"
+                        isRequired
+                        :validationRules="rules.selectionRequired">
+                    </buttonQuestion>
+                    <text-block
+                        v-if="isQuoteDisplayed"
+                        cmsWidgetName="DisclaimerWidget"
+                        typeStyle="caption" />
+                    <siteFooter
+                        ref="siteFooter"
+                        class="mt-5"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @backClicked="navigateBackByVehicleQuestions"
+                        @forwardClicked="navigateForward" />
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center pt-5">
-        <div class="col-md-6 col-xl-4">
-          <h5
-            ref="siteSubHeader"
-            class="text-center text-black"
-            v-html="coverageStatementSubHeader"></h5>
-          <div
-            ref="explanatoryText"
-            class="body-text text-center mt-2"
-            v-html="explanatoryText"></div>
-          <div
-            ref="secondaryText"
-            class="text-center mt-4 mb-1 fw-bold text-black"
-            v-html="secondaryText"></div>
-          <div
-            v-if="verifiedDeductible"
-            class="d-flex justify-content-center cost">
-            {{ deductibleForDisplay }}
-          </div>
-          <div
-            v-if="isQuoteDisplayed"
-            class="d-flex justify-content-center cost mb-0">
-            {{ servicePriceForDisplay }}
-          </div>
-          <div
-            v-if="verifiedITAC"
-            class="d-flex justify-content-center mb-4 deductible-text">
-            {{ deductibleText }}&nbsp;
-            <span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
-          </div>
-          <alert
-            v-if="verifiedITAC"
-            ref="verifiedITACAlert"
-            class="mb-5"
-            cmsWidgetName="VerifiedITACAlert"
-            :manualHeadline="verifiedItacAlertHeader"
-            :manualCopy="verifiedItacAlertBody"
-            alertClass="alert-success"
-            :isDismissible="false">
-          </alert>
-          <div
-            class="fw-bold text-black mt-5 mb-2"
-            v-html="nextStepsHeader"></div>
-          <div
-            class="body-text"
-            v-html="nextStepsBody"></div>
-          <buttonQuestion
-            v-if="isQuoteDisplayed"
-            v-model="selectedProvider"
-            cmsWidgetName="ServiceProviderQuestion"
-            :questionText="serviceProviderQuestionText"
-            :answers="serviceProviderQuestionAnswers"
-            groupName="ServiceProviderQuestionOption"
-            buttonTypeString="listButton"
-            isRequired
-            :validationRules="rules.selectionRequired">
-          </buttonQuestion>
-          <text-block
-            v-if="isQuoteDisplayed"
-            cmsWidgetName="DisclaimerWidget"
-            typeStyle="caption" />
-          <siteFooter
-            ref="siteFooter"
-            class="mt-5"
-            cmsWidgetName="SiteFooterWidget"
-            :isForwardActionDisabled="!meta.valid"
-            @backClicked="navigateBackByVehicleQuestions"
-            @forwardClicked="navigateForward" />
-        </div>
-      </div>
-    </div>
-    <recalModal
-        ref="RecalModal"
-        cmsWidgetName="RecalModal" />
-    <contentGroupModal
-      ref="DeductibleModal"
-      cmsWidgetName="DeductibleModal"
-      class="deductible-modal" />
-  </Form>
+        <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
+        <contentGroupModal
+            ref="DeductibleModal"
+            cmsWidgetName="DeductibleModal"
+            class="deductible-modal" />
+    </Form>
 </template>
 <script>
 // Import Component
@@ -111,7 +109,7 @@ import textBlock from '@/digital-components/text-block/text-block.vue';
 import {
     fetchCmsContentForPage,
     setupModalLinks,
-    processIfStatements
+    processIfStatements,
 } from '@/helpers/cms-content-helper.js';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { getDamageString } from '@/helpers/damage-helper.js';
@@ -141,24 +139,25 @@ export default {
         contentGroupModal,
         buttonQuestion,
         loadingModal,
-        textBlock
+        textBlock,
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
-    // Call APIs
+        // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
-        const supportingItemsPromise = await useMainStore().getSupportingItems();
+        const supportingItemsPromise =
+            await useMainStore().getSupportingItems();
 
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
+                promise: cmsContentPromise,
             },
             {
                 resultKey: 'supportingItems',
-                promise: supportingItemsPromise
-            }
+                promise: supportingItemsPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -167,23 +166,29 @@ export default {
             : [];
         const availableLineItems = [
             ...(resultMap.supportingItems ?? []),
-            ...(clonedGlassParts ?? [])
+            ...(clonedGlassParts ?? []),
         ];
 
         let hasBailedOut = false;
         let pricingResults = [];
         if (
-            useMainStore().policy.policyLookupSuccessful
-      && useMainStore().vehicle.policyVehicleId >= 0
+            useMainStore().policy.policyLookupSuccessful &&
+            useMainStore().vehicle.policyVehicleId >= 0
         ) {
             await useMainStore().getFinalDeductible();
             pricingResults = await useMainStore()
                 .getPriceOrderItems(availableLineItems)
                 .catch((err) => {
-                    useMainStore().setBailout(bailoutMessage.pricingResponseError(
-                        availableLineItems.map((li) => li.partNumber),
-                        { code: err.code, message: err.message, data: err.data }
-                    ));
+                    useMainStore().setBailout(
+                        bailoutMessage.pricingResponseError(
+                            availableLineItems.map((li) => li.partNumber),
+                            {
+                                code: err.code,
+                                message: err.message,
+                                data: err.data,
+                            }
+                        )
+                    );
                     hasBailedOut = true;
                     next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
                 });
@@ -218,10 +223,10 @@ export default {
             loadingText: [
                 'Connecting to your insurance company',
                 'Nearly there',
-                'Finishing up'
+                'Finishing up',
             ],
             rules: {
-                selectionRequired: globalRules.OPTION_REQUIRED
+                selectionRequired: globalRules.OPTION_REQUIRED,
             },
             supportingItems: null,
             widget: {
@@ -229,8 +234,8 @@ export default {
                 verifiedItacAlert: 'VerifiedITACAlert',
                 explanatoryText: 'ExplanatoryTextWidget',
                 nextStep: 'NextStepsWidget',
-                serviceProviderQuestion: 'ServiceProviderQuestion'
-            }
+                serviceProviderQuestion: 'ServiceProviderQuestion',
+            },
         };
     },
     computed: {
@@ -250,7 +255,10 @@ export default {
             return this.getCmsContent(
                 this.widget.verifiedItacAlert,
                 widgetFields.ALERT_WIDGET.BODY_TEXT
-            )?.replaceAll('{custom:costSavings}', this.itacCostSavingsForDisplay);
+            )?.replaceAll(
+                '{custom:costSavings}',
+                this.itacCostSavingsForDisplay
+            );
         },
         secondaryText() {
             return this.getTextFromCmsWithCustomIfStatements(
@@ -294,33 +302,37 @@ export default {
         },
         verifiedITAC() {
             return (
-                this.policyLookupSuccessful
-        && !this.isNoComp
-        && this.deductibleValue > this.totalServicePrice
+                this.policyLookupSuccessful &&
+                !this.isNoComp &&
+                this.deductibleValue > this.totalServicePrice
             );
         },
         coveredAndServicePriceAboveOrEqualDeductible() {
             return (
-                !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue
+                !this.verifiedNoComp &&
+                this.totalServicePrice >= this.deductibleValue
             );
         },
         verifiedDeductible() {
             return useMainStore().isClaimRegistrationRequired
-                ? this.registerClaimSuccessful
-            && this.coveredAndServicePriceAboveOrEqualDeductible
-            && this.deductibleValue !== null
-                : this.policyLookupSuccessful
-            && this.coveredAndServicePriceAboveOrEqualDeductible;
+                ? this.registerClaimSuccessful &&
+                      this.coveredAndServicePriceAboveOrEqualDeductible &&
+                      this.deductibleValue !== null
+                : this.policyLookupSuccessful &&
+                      this.coveredAndServicePriceAboveOrEqualDeductible;
         },
         unverified() {
             return (
-                !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp
+                !this.verifiedDeductible &&
+                !this.verifiedITAC &&
+                !this.verifiedNoComp
             );
         },
         isADAS() {
             const parts = useMainStore().order.lineItems.glassParts;
             return (
-                parts !== null && !!parts.find((part) => part.requiresRecalibration)
+                parts !== null &&
+                !!parts.find((part) => part.requiresRecalibration)
             );
         },
         totalServicePrice() {
@@ -352,21 +364,22 @@ export default {
         },
         shouldRegisterClaim() {
             return (
-                this.policyLookupSuccessful
-        && useMainStore().vehicle.policyVehicleId != null
-        && useMainStore().vehicle.policyVehicleId >= 0
-        && useMainStore().isClaimRegistrationRequired
-        && !useMainStore().isClaimAlreadyRegistered
-        && (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)
+                this.policyLookupSuccessful &&
+                useMainStore().vehicle.policyVehicleId != null &&
+                useMainStore().vehicle.policyVehicleId >= 0 &&
+                useMainStore().isClaimRegistrationRequired &&
+                !useMainStore().isClaimAlreadyRegistered &&
+                (this.coveredAndServicePriceAboveOrEqualDeductible ||
+                    this.verifiedITAC)
             );
-        }
+        },
     },
     watch: {
         selectedProvider() {
             const buttonText =
-        this.selectedProvider === SAFELITE_PROVIDER
-            ? 'Continue with Safelite'
-            : 'Safelite';
+                this.selectedProvider === SAFELITE_PROVIDER
+                    ? 'Continue with Safelite'
+                    : 'Safelite';
             this.$refs.siteFooter.updateButtonText(buttonText);
         },
         nextStepsBody(newValue, oldValue) {
@@ -374,7 +387,7 @@ export default {
                 setupModalLinks(this, 'RecalModal');
                 setupModalLinks(this, 'DeductibleModal');
             }
-        }
+        },
     },
     mounted() {
         setupModalLinks(this);
@@ -386,9 +399,9 @@ export default {
         async initializeComponent() {
             useMainStore().updatePolicyITACFlag(this.verifiedITAC);
             const coverageStatus =
-        this.verifiedITAC || this.verifiedNoComp
-            ? coverageStatuses.VERIFIED
-            : coverageStatuses.PENDING;
+                this.verifiedITAC || this.verifiedNoComp
+                    ? coverageStatuses.VERIFIED
+                    : coverageStatuses.PENDING;
             useMainStore().updateCoverageStatus(coverageStatus);
             if (this.shouldRegisterClaim) {
                 await useMainStore()
@@ -402,17 +415,27 @@ export default {
                 useMainStore().updateSupportingItems(this.supportingItems);
                 this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
             } else if (this.verifiedITAC || this.verifiedNoComp) {
-                useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
+                useMainStore().updateIsSafeliteProvider(
+                    this.selectedProvider === SAFELITE_PROVIDER
+                );
                 if (this.selectedProvider === SAFELITE_PROVIDER) {
                     useMainStore().updateSupportingItems(this.supportingItems);
-                    this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
+                    this.navigateWithScenario(
+                        navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE
+                    );
                 } else {
                     useMainStore().setBailout(bailoutMessage.RequestCallback());
-                    this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
+                    this.navigateWithScenario(
+                        navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
+                    );
                 }
             } else {
-                useMainStore().setBailout(bailoutMessage.coverageStatementInvalidState());
-                this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
+                useMainStore().setBailout(
+                    bailoutMessage.coverageStatementInvalidState()
+                );
+                this.navigateWithScenario(
+                    navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE
+                );
             }
         },
         navigateWithScenario(scenario) {
@@ -443,9 +466,13 @@ export default {
                 case 'nonADASRepair':
                     return this.isRepair;
                 case 'deductibleOverZero':
-                    return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
+                    return (
+                        this.verifiedDeductible && this.deductibleValue !== 0
+                    ); // TODO what if deductible is negative?
                 case 'isDeductibleZero':
-                    return this.verifiedDeductible && this.deductibleValue === 0;
+                    return (
+                        this.verifiedDeductible && this.deductibleValue === 0
+                    );
                 default:
                     return null;
             }
@@ -455,59 +482,59 @@ export default {
         },
         setBaseServiceLineItems(lineItems) {
             this.baseServiceLineItems = lineItems;
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
 .cost {
-  color: $green;
-  font-size: 2rem;
-  font-weight: $font-weight-light;
-  line-height: 2.75rem;
+    color: $green;
+    font-size: 2rem;
+    font-weight: $font-weight-light;
+    line-height: 2.75rem;
 }
 
 .deductible-text {
-  line-height: 1.5rem;
+    line-height: 1.5rem;
 }
 
 :deep p {
-  line-height: 1.5rem;
-  font-size: 0.875rem;
-  margin-bottom: 0.5rem;
-  strong {
-    color: $black;
-  }
+    line-height: 1.5rem;
+    font-size: 0.875rem;
+    margin-bottom: 0.5rem;
+    strong {
+        color: $black;
+    }
 }
 
 :deep .question-text {
-  margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  & > span {
-    text-align: left;
-  }
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    & > span {
+        text-align: left;
+    }
 }
 
 :deep .deductible-modal {
-  p {
-    margin-bottom: 0 !important;
-    font-size: 1rem;
-    line-height: 1.625rem;
-  }
-  img.mb-4 {
-    margin: 0 !important;
-  }
-  h5 {
-    color: black;
-  }
-  p:last-child {
-    margin-top: 0.5rem;
-  }
+    p {
+        margin-bottom: 0 !important;
+        font-size: 1rem;
+        line-height: 1.625rem;
+    }
+    img.mb-4 {
+        margin: 0 !important;
+    }
+    h5 {
+        color: black;
+    }
+    p:last-child {
+        margin-top: 0.5rem;
+    }
 }
 .modal {
-  overflow: hidden;
+    overflow: hidden;
 }
 </style>
diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue
index 0a6a8c69..7a13dee5 100644
--- a/src/layouts/duplicate-check/duplicate-check.vue
+++ b/src/layouts/duplicate-check/duplicate-check.vue
@@ -1,46 +1,46 @@
 <template>
-  <Form
-    ref="duplicate-check-form"
-    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 px-0 px-md-2">
-          <siteHeader
-ref="siteHeader"
-:cmsWidgetName="widget.siteHeader" />
+    <Form
+        ref="duplicate-check-form"
+        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 px-0 px-md-2">
+                    <siteHeader
+                        ref="siteHeader"
+                        :cmsWidgetName="widget.siteHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <siteSubHeader
+                        id="sub-header"
+                        ref="siteSubHeader"
+                        class="mt-5 duplicate-check-subheader"
+                        :cmsWidgetName="widget.siteSubHeader" />
+                    <buttonQuestion
+                        ref="buttonQuestion"
+                        v-model="selectedAnswer"
+                        class="duplicate-check-question"
+                        :cmsWidgetName="widget.existingOrNewQuestion"
+                        :questionText="questionText"
+                        :answers="answers"
+                        groupName="existingOrNewQuestionOption"
+                        buttonTypeString="listButton"
+                        isRequired
+                        :validationRules="rules.selectionRequired" />
+                    <siteFooter
+                        ref="siteFooter"
+                        class="my-5"
+                        :cmsWidgetName="widget.siteFooter"
+                        :isForwardActionDisabled="!meta.valid"
+                        @forwardClicked="forwardButtonAction"
+                        @backClicked="navigateBack" />
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <siteSubHeader
-            id="sub-header"
-            ref="siteSubHeader"
-            class="mt-5 duplicate-check-subheader"
-            :cmsWidgetName="widget.siteSubHeader" />
-          <buttonQuestion
-            ref="buttonQuestion"
-            v-model="selectedAnswer"
-            class="duplicate-check-question"
-            :cmsWidgetName="widget.existingOrNewQuestion"
-            :questionText="questionText"
-            :answers="answers"
-            groupName="existingOrNewQuestionOption"
-            buttonTypeString="listButton"
-            isRequired
-            :validationRules="rules.selectionRequired" />
-          <siteFooter
-            ref="siteFooter"
-            class="my-5"
-            :cmsWidgetName="widget.siteFooter"
-            :isForwardActionDisabled="!meta.valid"
-            @forwardClicked="forwardButtonAction"
-            @backClicked="navigateBack" />
-        </div>
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 
 <script>
@@ -66,7 +66,7 @@ export default {
         buttonQuestion,
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -83,11 +83,11 @@ export default {
                 siteHeader: 'SiteHeaderWidget',
                 siteSubHeader: 'SiteSubHeaderWidget',
                 existingOrNewQuestion: 'ExistingOrNewQuestion',
-                siteFooter: 'SiteFooterWidget'
+                siteFooter: 'SiteFooterWidget',
             },
             rules: {
-                selectionRequired: globalRules.OPTION_REQUIRED
-            }
+                selectionRequired: globalRules.OPTION_REQUIRED,
+            },
         };
     },
     computed: {
@@ -99,7 +99,10 @@ export default {
         },
         answersFromCms() {
             return (
-                this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers') ?? []
+                this.getCmsContent(
+                    this.widget.existingOrNewQuestion,
+                    'Answers'
+                ) ?? []
             );
         },
         getNewOrderSelectionName() {
@@ -111,40 +114,40 @@ export default {
             return (
                 orders?.map((o) => {
                     const vehicle =
-            !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
-                ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
-                : null;
+                        !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
+                            ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
+                            : null;
 
                     const dateOfLoss =
-            o.responseDate == null
-                ? ''
-                : new Date(o.responseDate).toLocaleDateString();
+                        o.responseDate == null
+                            ? ''
+                            : new Date(o.responseDate).toLocaleDateString();
                     const subtext =
-            vehicle && o.responseDate
-                ? `${vehicle}, ${dateOfLoss}`
-                : (vehicle ?? '').concat(dateOfLoss);
+                        vehicle && o.responseDate
+                            ? `${vehicle}, ${dateOfLoss}`
+                            : (vehicle ?? '').concat(dateOfLoss);
 
                     return {
                         Text: duplicateOrderText,
                         Name: o.referralNumber,
                         SubText: toTitleCase(subtext),
-                        value: o
+                        value: o,
                     };
                 }) ?? []
             );
         },
         answers() {
             return [...this.duplicateOrders, ...this.answersFromCms];
-        }
+        },
     },
     methods: {
-    /**
-     * @summary Steps to perform when forward button clicked.
-     */
+        /**
+         * @summary Steps to perform when forward button clicked.
+         */
         async forwardButtonAction() {
             if (
-                this.selectedAnswer !== null
-        && typeof this.selectedAnswer === 'object'
+                this.selectedAnswer !== null &&
+                typeof this.selectedAnswer === 'object'
             ) {
                 await useMainStore()
                     .loadSession(this.selectedAnswer)
@@ -203,31 +206,31 @@ export default {
                     this.$route
                 );
             }
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss">
 .duplicate-check-subheader {
-  .subheader-secondary {
-    margin-top: map-get($spacers, 2);
-  }
-  p {
-    span {
-      font-size: $h6-font-size;
+    .subheader-secondary {
+        margin-top: map-get($spacers, 2);
+    }
+    p {
+        span {
+            font-size: $h6-font-size;
+        }
     }
-  }
 }
 .duplicate-check-question {
-  .question-text {
-    justify-content: left;
-    display: inline-flex !important;
-    margin-top: map-get($spacers, 4);
-    margin-bottom: map-get($spacers, 2);
-  }
-  .form-test-error {
-    margin-top: 0 !important;
-  }
+    .question-text {
+        justify-content: left;
+        display: inline-flex !important;
+        margin-top: map-get($spacers, 4);
+        margin-bottom: map-get($spacers, 2);
+    }
+    .form-test-error {
+        margin-top: 0 !important;
+    }
 }
 </style>
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index 295d9064..b23ee186 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/src/layouts/policy-vehicles/policy-vehicles.vue
@@ -1,40 +1,40 @@
 <template>
-  <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 px-0 px-md-2">
-          <siteHeader
-class="mb-2 header"
-cmsWidgetName="SiteHeaderWidget" />
+    <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 px-0 px-md-2">
+                    <siteHeader
+                        class="mb-2 header"
+                        cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <div class="select-car-form rounded text-center">
+                        <vehicleBanner
+                            cmsWidgetName="VehicleBannerWidget"
+                            :displayGenericVehicleImage="displayGeneric"
+                            class="mt-2 mb-4" />
+                        <policyVehiclesQuestion
+                            v-model="selectedVehicleVin"
+                            cmsWidgetName="PolicyVehiclesQuestion"
+                            :vehicles="VehiclesForQuestions"
+                            :validationRules="rules.optionRequired" />
+                        <siteFooter
+                            ref="siteFooter"
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            @ForwardClicked="forwardButtonAction"
+                            @backClicked="backButtonAction" />
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <div class="select-car-form rounded text-center">
-            <vehicleBanner
-              cmsWidgetName="VehicleBannerWidget"
-              :displayGenericVehicleImage="displayGeneric"
-              class="mt-2 mb-4" />
-            <policyVehiclesQuestion
-              v-model="selectedVehicleVin"
-              cmsWidgetName="PolicyVehiclesQuestion"
-              :vehicles="VehiclesForQuestions"
-              :validationRules="rules.optionRequired" />
-            <siteFooter
-              ref="siteFooter"
-              cmsWidgetName="SiteFooterWidget"
-              :isForwardActionDisabled="!meta.valid"
-              @ForwardClicked="forwardButtonAction"
-              @backClicked="backButtonAction" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 <script>
 // Components
@@ -55,7 +55,7 @@ import {
     deductibleForSelectedVehicle,
     endorsementsForSelectedVehicle,
     noCoverageForSelectedVehicle,
-    repairWaivedForSelectedVehicle
+    repairWaivedForSelectedVehicle,
 } from '@/helpers/policy-vehicle-helper';
 
 export default {
@@ -66,11 +66,13 @@ export default {
         vehicleBanner,
         policyVehiclesQuestion,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-        const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
+        const cmsContentPromise = await fetchCmsContentForPage(
+            to.query.issPage
+        );
         next((vm) => {
             vm.setCmsContent(cmsContentPromise);
         });
@@ -88,8 +90,8 @@ export default {
             displayGeneric: true,
             policyVinFound: true,
             rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            }
+                optionRequired: globalRules.OPTION_REQUIRED,
+            },
         };
     },
     computed: {
@@ -97,18 +99,18 @@ export default {
             // Map API result data, to address-vehicles data structure
             const vehicles = this.policyVehicles;
             const mappedData =
-        vehicles?.map((v) => {
-            const maskSymbol = 'X';
-            const vinStart = maskSymbol.repeat(v.vin.length - 6);
-            const vinEnd = v.vin.substring(v.vin.length - 6);
-            return {
-                vin: v.vin,
-                vehicle: v,
-                Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
-                Name: v.vin,
-                SubText: `VIN ${vinStart}${vinEnd}`
-            };
-        }) ?? [];
+                vehicles?.map((v) => {
+                    const maskSymbol = 'X';
+                    const vinStart = maskSymbol.repeat(v.vin.length - 6);
+                    const vinEnd = v.vin.substring(v.vin.length - 6);
+                    return {
+                        vin: v.vin,
+                        vehicle: v,
+                        Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
+                        Name: v.vin,
+                        SubText: `VIN ${vinStart}${vinEnd}`,
+                    };
+                }) ?? [];
             return mappedData;
         },
         noCoverageForSelectedVehicle() {
@@ -124,9 +126,11 @@ export default {
             return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
         },
         selectedVehicle() {
-            const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
+            const vehicle = this.mainStore.lookupVehicleByVin(
+                this.selectedVehicleVin
+            );
             return vehicle;
-        }
+        },
     },
     watch: {
         async selectedVehicleVin(value) {
@@ -150,10 +154,12 @@ export default {
                     // save selected vehicle to the store
                     this.mainStore.updateVehicle(vehicle.data);
                     this.displayGeneric = false;
-                    this.selectedPolicyVehicle = this.policyVehicles.find((p) => p.vin === value);
+                    this.selectedPolicyVehicle = this.policyVehicles.find(
+                        (p) => p.vin === value
+                    );
                 }
             }
-        }
+        },
     },
     beforeMount() {
         if (this.mainStore.order.vehicle.vin) {
@@ -165,14 +171,22 @@ export default {
     methods: {
         backButtonAction() {
             useMainStore().issConfig.disabledFields.policyNumber = true;
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_BACK,
+                this.$route
+            );
         },
         async forwardButtonAction() {
             if (
-                this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED
+                this.selectedVehicleVin !==
+                vehicleSelectionOptions.VEHICLE_NOT_LISTED
             ) {
-                const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin);
-                const vehicle = this.policyVehicles.find((pv) => pv.vin === this.selectedVehicleVin);
+                const vehicleLookupResponse = await this.lookupVehicleByVin(
+                    this.selectedVehicleVin
+                );
+                const vehicle = this.policyVehicles.find(
+                    (pv) => pv.vin === this.selectedVehicleVin
+                );
 
                 if (vehicleLookupResponse.error) {
                     if (vehicleLookupResponse.status === 404) {
@@ -188,27 +202,32 @@ export default {
                             vin: vehicle.vin,
                             noCoverage: this.noCoverageForSelectedVehicle,
                             deductible: this.deductibleForSelectedVehicle,
-                            repairWaived: this.repairWaivedForSelectedVehicle
+                            repairWaived: this.repairWaivedForSelectedVehicle,
                         });
                         this.policyVinFound = false;
                         return this.navigateForward();
                     }
 
-                    this.mainStore.setBailout(bailoutMessage.vehicleLookupError(
-                        vehicle.vin,
-                        vehicleLookupResponse.data
-                    ));
+                    this.mainStore.setBailout(
+                        bailoutMessage.vehicleLookupError(
+                            vehicle.vin,
+                            vehicleLookupResponse.data
+                        )
+                    );
                     return this.navigateForward();
                 }
 
-                this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
-                    policyVehicleId: vehicle.id,
-                    vin: this.selectedVehicleVin,
-                    noCoverage: this.noCoverageForSelectedVehicle,
-                    deductible: this.deductibleForSelectedVehicle,
-                    repairWaived: this.repairWaivedForSelectedVehicle,
-                    endorsements: this.endorsementsForSelectedVehicle
-                });
+                this.vehicleFromLookup = Object.assign(
+                    vehicleLookupResponse.data,
+                    {
+                        policyVehicleId: vehicle.id,
+                        vin: this.selectedVehicleVin,
+                        noCoverage: this.noCoverageForSelectedVehicle,
+                        deductible: this.deductibleForSelectedVehicle,
+                        repairWaived: this.repairWaivedForSelectedVehicle,
+                        endorsements: this.endorsementsForSelectedVehicle,
+                    }
+                );
 
                 useMainStore().updateVehicle(this.vehicleFromLookup);
             }
@@ -223,7 +242,8 @@ export default {
                     {}
                 );
             } else if (
-                this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED
+                this.selectedVehicleVin ===
+                vehicleSelectionOptions.VEHICLE_NOT_LISTED
             ) {
                 this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
@@ -232,9 +252,13 @@ export default {
                     {}
                 );
             } else if (
-                this.endorsementsForSelectedVehicle?.length > 0
-        && (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD)
-          || this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))
+                this.endorsementsForSelectedVehicle?.length > 0 &&
+                (this.endorsementsForSelectedVehicle?.includes(
+                    endorsementOptions.PARKING_GUARD
+                ) ||
+                    this.endorsementsForSelectedVehicle?.includes(
+                        endorsementOptions.EDUCATOR
+                    ))
             ) {
                 this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
@@ -242,7 +266,8 @@ export default {
                 );
             } else if (!this.policyVinFound) {
                 this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
+                    this.navigationScenarios
+                        .CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
                     this.$route,
                     {},
                     {}
@@ -263,21 +288,21 @@ export default {
                 return {
                     error: true,
                     status: responseError.status,
-                    data: responseError.data
+                    data: responseError.data,
                 };
             }
-        }
-    }
+        },
+    },
 };
 </script>
 <style lang="scss" scoped>
 .header {
-  margin-bottom: 0rem !important;
+    margin-bottom: 0rem !important;
 }
 :deep(.form-test-error) {
-  text-align: left;
-  margin-top: 0rem !important;
-  line-height: 1.5rem;
+    text-align: left;
+    margin-top: 0rem !important;
+    line-height: 1.5rem;
 }
 </style>
 <!-- †est comment -->
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index b8b34c72..36fe6f46 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -1,68 +1,63 @@
 <template>
-  <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 px-0 px-md-2">
-          <siteHeader
-class="mb-2 header"
-cmsWidgetName="SiteHeaderWidget" />
+    <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 px-0 px-md-2">
+                    <siteHeader
+                        class="mb-2 header"
+                        cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </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>
-      </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>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
 import {
     fetchCmsContentForPage,
-    setupModalLinks
+    setupModalLinks,
 } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import errorMessages from '@/constants/error-messages';
@@ -98,7 +93,7 @@ export default {
         recalModal,
         steeringModal,
         shopPreferenceModal,
-        tpaRecalModal
+        tpaRecalModal,
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -107,8 +102,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
@@ -126,8 +121,8 @@ export default {
             showSteeringLink: false,
             tpaAcknowledgement: false,
             rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            }
+                optionRequired: globalRules.OPTION_REQUIRED,
+            },
         };
     },
     computed: {
@@ -137,35 +132,44 @@ export default {
         prefAnswers() {
             const cmsAnswersContent = [
                 {
-                    cmsWidgetName: options.SAFELITE
+                    cmsWidgetName: options.SAFELITE,
                 },
                 {
-                    cmsWidgetName: options.TPA
-                }
+                    cmsWidgetName: options.TPA,
+                },
             ];
             // if cms content has not yet loaded, skip
             if (
-                !this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
-        || this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
-          === ''
+                !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)
+                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);
+        const pageData = this.mainStore.pageData(
+            issPageValues.PROVIDER_PREFERENCE
+        );
         this.selectedProvider = pageData?.selectedProvider
             ? pageData.selectedProvider
             : null;
@@ -196,9 +200,11 @@ export default {
         navigateWithTPAAck() {
             this.mainStore.saveProviderPreferenceData({
                 selectedProvider: this.selectedProvider,
-                tpaAcknowledgement: this.tpaAcknowledgement
+                tpaAcknowledgement: this.tpaAcknowledgement,
             });
-            this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
+            this.navigateForward(
+                this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED
+            );
         },
         forwardButtonAction() {
             if (this.selectedProvider) {
@@ -206,7 +212,9 @@ export default {
                 switch (this.selectedProvider) {
                     case options.SAFELITE:
                         this.mainStore.updateIsSafeliteProvider(true);
-                        scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
+                        scenario =
+                            this.navigationScenarios
+                                .CLICKED_FORWARD_WITH_SAFELITE;
                         break;
                     case options.TPA:
                         this.mainStore.updateIsSafeliteProvider(false);
@@ -217,11 +225,15 @@ export default {
                                 return;
                             }
                             scenario =
-                this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
+                                this.navigationScenarios
+                                    .CLICKED_FORWARD_WITH_TPA_ENABLED;
                         } else {
-                            this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
+                            this.mainStore.setBailout(
+                                bailoutMessage.TPANotEnabled()
+                            );
                             scenario =
-                this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
+                                this.navigationScenarios
+                                    .CLICKED_FORWARD_WITH_TPA_DISABLED;
                         }
                         break;
                     default:
@@ -229,34 +241,34 @@ export default {
                 this.navigateForward(scenario);
                 this.mainStore.saveProviderPreferenceData({
                     selectedProvider: this.selectedProvider,
-                    tpaAcknowledgement: this.tpaAcknowledgement
+                    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/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index 0483c177..3ed05a33 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -1,77 +1,79 @@
 <template>
-  <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 px-0 px-md-2">
-          <siteHeader
-class="mb-2 header"
-cmsWidgetName="SiteHeaderWidget" />
+    <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 px-0 px-md-2">
+                    <siteHeader
+                        class="mb-2 header"
+                        cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <siteSubHeader
+                        cmsWidgetName="ScheduleSubHeaderWidget"
+                        subTextClasses="text-center small sub-text"
+                        class="mt-4" />
+                    <template v-if="ChangeShopLink.length">
+                        <textBlock
+                            cmsWidgetName="ChangeShopLink"
+                            justifyText="center"
+                            class="mb-3 text-link-small"
+                            :marginTopSizeOverride="1" />
+                    </template>
+                    <div class="main-content-container">
+                        <locationAlerts
+                            ref="locationAlerts"
+                            cmsWidgetPrefix="LocationAlert-" />
+                        <datePicker
+                            ref="datePicker"
+                            v-model="selectedDate"
+                            customComponentId="dateQuestion"
+                            selectableDatesSetting="custom"
+                            class="text-link-small"
+                            :customSelectableDatesCallback="
+                                getAvailableDatesMethod
+                            "
+                            validationRules="date-required"
+                            @dateClicked="openInshopTimeSlotsModal" />
+                        <timeSlotModalQuestion
+                            ref="timeSlotModalQuestion"
+                            v-model="selectedTimeSlotInfo"
+                            customComponentId="timeSlotModalQuestion"
+                            cmsWidgetName="TimeSlotModalQuestion"
+                            mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
+                            mobileCmsWidgetName="MobileTimeSlotModal"
+                            dropoffCmsWidgetName="DropOffTimeSlotModal"
+                            sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
+                            overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
+                            :selectedDate="selectedDate"
+                            :appointmentType="appointmentType"
+                            :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                            :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                            :estimatedServiceMinutesMinimum="
+                                selectableDatesData.estimatedServiceMinutesMinimum
+                            "
+                            :estimatedServiceMinutesMaximum="
+                                selectableDatesData.estimatedServiceMinutesMaximum
+                            "
+                            validationRules="time-slot-selection-required"
+                            @timeSlotModalClosed="timeSlotModalClosed" />
+                        <siteFooter
+                            ref="navbar"
+                            class="mt-5"
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            @backClicked="navigateBack"
+                            @forwardClicked="forwardButtonAction" />
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <siteSubHeader
-            cmsWidgetName="ScheduleSubHeaderWidget"
-            subTextClasses="text-center small sub-text"
-            class="mt-4" />
-          <template v-if="ChangeShopLink.length">
-            <textBlock
-              cmsWidgetName="ChangeShopLink"
-              justifyText="center"
-              class="mb-3 text-link-small"
-              :marginTopSizeOverride="1" />
-          </template>
-          <div class="main-content-container">
-            <locationAlerts
-              ref="locationAlerts"
-              cmsWidgetPrefix="LocationAlert-" />
-            <datePicker
-              ref="datePicker"
-              v-model="selectedDate"
-              customComponentId="dateQuestion"
-              selectableDatesSetting="custom"
-              class="text-link-small"
-              :customSelectableDatesCallback="getAvailableDatesMethod"
-              validationRules="date-required"
-              @dateClicked="openInshopTimeSlotsModal" />
-            <timeSlotModalQuestion
-              ref="timeSlotModalQuestion"
-              v-model="selectedTimeSlotInfo"
-              customComponentId="timeSlotModalQuestion"
-              cmsWidgetName="TimeSlotModalQuestion"
-              mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
-              mobileCmsWidgetName="MobileTimeSlotModal"
-              dropoffCmsWidgetName="DropOffTimeSlotModal"
-              sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
-              overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
-              :selectedDate="selectedDate"
-              :appointmentType="appointmentType"
-              :premiumAppointmentFee="mobilePremiumAppointmentFee"
-              :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-              :estimatedServiceMinutesMinimum="
-                selectableDatesData.estimatedServiceMinutesMinimum
-              "
-              :estimatedServiceMinutesMaximum="
-                selectableDatesData.estimatedServiceMinutesMaximum
-              "
-              validationRules="time-slot-selection-required"
-              @timeSlotModalClosed="timeSlotModalClosed" />
-            <siteFooter
-              ref="navbar"
-              class="mt-5"
-              cmsWidgetName="SiteFooterWidget"
-              :isForwardActionDisabled="!meta.valid"
-              @backClicked="navigateBack"
-              @forwardClicked="forwardButtonAction" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 <script>
 // Components
@@ -88,16 +90,16 @@ import {
     AppointmentTypeStrings,
     GET_MOBILE_TIME_SLOTS,
     GET_SHOP_TIME_SLOTS,
-    PREMIUM_FEE_PART_TYPE
+    PREMIUM_FEE_PART_TYPE,
 } from '@/constants/schedule-constants.js';
 import {
     fetchCmsContentForPage,
-    splitCopyOnCMSPlaceHolder
+    splitCopyOnCMSPlaceHolder,
 } from '@/helpers/cms-content-helper';
 import {
     calcDaysBetweenDates,
     convertDateStringToDate,
-    sumDateString
+    sumDateString,
 } from '@/helpers/date-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form, defineRule } from 'vee-validate';
@@ -141,7 +143,10 @@ const getAvailableDates = async (
 
         if (i > 1) {
             apiStartDate = sumDateString(apiEndDate, 1);
-            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
+            apiEndDate = sumDateString(
+                apiStartDate,
+                TIME_SLOTS_CALL_DAYS_LIMIT
+            );
 
             if (i === apiCallsCount) {
                 apiEndDate = endDateString;
@@ -151,15 +156,16 @@ const getAvailableDates = async (
         }
 
         if (
-            appointmentType === AppointmentTypeStrings.MOBILE
-      || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
+            appointmentType === AppointmentTypeStrings.MOBILE ||
+            appointmentType ===
+                AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
         ) {
             storeActionConfig = {
                 storeAction: GET_MOBILE_TIME_SLOTS,
                 payload: {
                     startDate: apiStartDate,
-                    endDate: apiEndDate
-                }
+                    endDate: apiEndDate,
+                },
             };
         } else {
             storeActionConfig = {
@@ -168,15 +174,16 @@ const getAvailableDates = async (
                     startDate: apiStartDate,
                     endDate: apiEndDate,
                     shopAppointmentType: appointmentType,
-                    providerNumber
-                }
+                    providerNumber,
+                },
             };
         }
-        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
+        if (apiStartDate < apiEndDate)
+            storeActionConfigs.push(storeActionConfig);
     }
 
     const timeSlotsResponsesData = {
-        days: []
+        days: [],
     };
 
     function compareDayStrings(a, b) {
@@ -186,35 +193,37 @@ const getAvailableDates = async (
     }
 
     const makeParallelCalls = async () => {
-        await Promise.all(storeActionConfigs.map(async (storeAction) => {
-            let timeSlotsResponse = null;
-            if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
-                timeSlotsResponse = await useMainStore().getShopTimeSlots(
-                    storeAction.payload.startDate,
-                    storeAction.payload.endDate,
-                    storeAction.payload.shopAppointmentType,
-                    storeAction.payload.providerNumber
-                );
-            } else {
-                timeSlotsResponse = await useMainStore().getMobileTimeSlots(
-                    storeAction.payload.startDate,
-                    storeAction.payload.endDate
-                );
-            }
+        await Promise.all(
+            storeActionConfigs.map(async (storeAction) => {
+                let timeSlotsResponse = null;
+                if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
+                    timeSlotsResponse = await useMainStore().getShopTimeSlots(
+                        storeAction.payload.startDate,
+                        storeAction.payload.endDate,
+                        storeAction.payload.shopAppointmentType,
+                        storeAction.payload.providerNumber
+                    );
+                } else {
+                    timeSlotsResponse = await useMainStore().getMobileTimeSlots(
+                        storeAction.payload.startDate,
+                        storeAction.payload.endDate
+                    );
+                }
 
-            timeSlotsResponsesData.estimatedServiceMinutesMinimum =
-          timeSlotsResponse.data.estimatedServiceMinutesMinimum;
-            timeSlotsResponsesData.estimatedServiceMinutesMaximum =
-          timeSlotsResponse.data.estimatedServiceMinutesMaximum;
-            timeSlotsResponsesData.days = [
-                ...timeSlotsResponsesData.days,
-                ...timeSlotsResponse.data.days
-            ];
-        }));
+                timeSlotsResponsesData.estimatedServiceMinutesMinimum =
+                    timeSlotsResponse.data.estimatedServiceMinutesMinimum;
+                timeSlotsResponsesData.estimatedServiceMinutesMaximum =
+                    timeSlotsResponse.data.estimatedServiceMinutesMaximum;
+                timeSlotsResponsesData.days = [
+                    ...timeSlotsResponsesData.days,
+                    ...timeSlotsResponse.data.days,
+                ];
+            })
+        );
     };
 
     return makeParallelCalls().then(() => {
-    // sort days chronologically
+        // sort days chronologically
         timeSlotsResponsesData.days.sort(compareDayStrings);
         return timeSlotsResponsesData;
     });
@@ -231,11 +240,11 @@ export default {
         siteFooter,
         textBlock,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-    // Call APIs
+        // Call APIs
         let preSelectedDate = await useMainStore().order.schedule.date;
         if (!preSelectedDate || preSelectedDate.startTime === null) {
             preSelectedDate = null;
@@ -244,18 +253,20 @@ export default {
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
         const datePickerInitialDataPromise =
-      await datePicker.methods.loadInitialData({
-          selectableDatesSetting: 'custom',
-          initialViewRowsToShow: 5,
-          customSelectableDatesCallback: getAvailableDates,
-          preSelectedDate
-      });
+            await datePicker.methods.loadInitialData({
+                selectableDatesSetting: 'custom',
+                initialViewRowsToShow: 5,
+                customSelectableDatesCallback: getAvailableDates,
+                preSelectedDate,
+            });
 
         const premiumFeePromise = useMainStore().getMobilePremiumFee();
 
         const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
             if (result.data) {
-                return useMainStore().priceOrderItemsAndSaveServerData(result.data);
+                return useMainStore().priceOrderItemsAndSaveServerData(
+                    result.data
+                );
             }
             return result.data;
         });
@@ -269,27 +280,29 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
+                promise: cmsContentPromise,
             },
             {
                 resultKey: 'alertReasons',
-                promise: alertReasonsPromise
+                promise: alertReasonsPromise,
             },
             {
                 resultKey: 'datePickerInitialData',
-                promise: datePickerInitialDataPromise
+                promise: datePickerInitialDataPromise,
             },
             {
                 resultKey: 'premiumFeeWithPrice',
-                promise: premiumFeeWithPricePromise
-            }
+                promise: premiumFeeWithPricePromise,
+            },
         ];
 
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
+            vm.$refs.datePicker.initializeComponent(
+                resultMap.datePickerInitialData
+            );
             vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
             vm.setData(
                 resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
@@ -307,7 +320,7 @@ export default {
             selectedDate: this.getSelectedDate(),
             selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
             selectableDatesData: [],
-            mobilePremiumAppointmentFee: null
+            mobilePremiumAppointmentFee: null,
         };
     },
     computed: {
@@ -325,11 +338,13 @@ export default {
                 return null;
             }
 
-            return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
+            return this.selectableDatesData.days?.find(
+                (selectableDate) => selectableDate.date === this.selectedDate
+            );
         },
         supportingItems() {
             return useMainStore().lineItems.supportingItems;
-        }
+        },
     },
     watch: {
         selectedDate(newValue, oldValue) {
@@ -342,33 +357,34 @@ export default {
                         startTime: null,
                         endTime: null,
                         jobMaxMinutes: null,
-                        jobMinMinutes: null
+                        jobMinMinutes: null,
                     },
-                    isPremiumAppointment: null
+                    isPremiumAppointment: null,
                 };
             }
         },
         selectedTimeSlotInfo(newValue) {
             this.updateFooterButtonText(newValue);
-        }
+        },
     },
     methods: {
         splitCopyOnCMSPlaceHolder,
         arePagePrerequisitesValid() {
             const { serviceLocation } = useMainStore().order;
             const serviceLocationPreReqs =
-        serviceLocation.zipCode
-        && serviceLocation.zipCodeCtu
-        && serviceLocation.appointmentType
-        && (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
-          || serviceLocation.appointmentType
-            === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
-          || serviceLocation.provider.providerNumber);
+                serviceLocation.zipCode &&
+                serviceLocation.zipCodeCtu &&
+                serviceLocation.appointmentType &&
+                (serviceLocation.appointmentType ===
+                    AppointmentTypeStrings.MOBILE ||
+                    serviceLocation.appointmentType ===
+                        AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP ||
+                    serviceLocation.provider.providerNumber);
             const supportingItems = this.supportingItems !== null;
             const damageInfo =
-        useMainStore().order.damage.isRepair
-        || (useMainStore().order.lineItems?.glassParts != null
-          && useMainStore().order.lineItems.glassParts.length > 0);
+                useMainStore().order.damage.isRepair ||
+                (useMainStore().order.lineItems?.glassParts != null &&
+                    useMainStore().order.lineItems.glassParts.length > 0);
 
             return serviceLocationPreReqs && supportingItems && damageInfo;
         },
@@ -386,7 +402,8 @@ export default {
                 this.mainStore.order.serviceLocation.provider.providerNumber
             );
             // ADD API CALL RESULTS TO EXISTING DATE DATA
-            this.selectableDatesData.days = this.selectableDatesData.days.concat(newShopTimeSlots.days);
+            this.selectableDatesData.days =
+                this.selectableDatesData.days.concat(newShopTimeSlots.days);
             return newShopTimeSlots;
         },
         getAvailableDates,
@@ -401,13 +418,16 @@ export default {
         },
         getSelectedTimeSlotInfo() {
             const isPremiumAppointment =
-        !!(
-            this.supportingItems?.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE) ?? []
-        ).length > 0;
+                !!(
+                    this.supportingItems?.filter(
+                        (lineItem) =>
+                            lineItem.partType === PREMIUM_FEE_PART_TYPE
+                    ) ?? []
+                ).length > 0;
 
             const selectedTimeSlotInfo = {
                 timeSlot: this.mainStore.order.schedule,
-                isPremiumAppointment
+                isPremiumAppointment,
             };
 
             return selectedTimeSlotInfo;
@@ -423,12 +443,16 @@ export default {
             if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
                 navbarButtonText = 'Continue';
             } else {
-                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(timeSlotInfo.timeSlot.date)}`;
+                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
+                    timeSlotInfo.timeSlot.date
+                )}`;
                 if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(timeSlotInfo.timeSlot.startTime)}`;
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.startTime
+                    )}`;
                 } else if (
-                    this.appointmentType === AppointmentTypeStrings.MOBILE
-          && !timeSlotInfo.isPremiumAppointment
+                    this.appointmentType === AppointmentTypeStrings.MOBILE &&
+                    !timeSlotInfo.isPremiumAppointment
                 ) {
                     navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
                         timeSlotInfo.timeSlot.startTime,
@@ -446,7 +470,7 @@ export default {
             const dateObject = convertDateStringToDate(selectedDate);
             return dateObject.toLocaleDateString('en-us', {
                 month: 'short',
-                day: 'numeric'
+                day: 'numeric',
             });
         },
         getDisplayTextForMilitaryTime(
@@ -474,8 +498,8 @@ export default {
                 this.navigationScenarios.CLICKED_FORWARD,
                 this.$route
             );
-        }
-    }
+        },
+    },
 };
 </script>
 
@@ -483,24 +507,24 @@ 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;
+    }
 }
 
 :deep(.text-link-small) {
-  a,
-  .btn-link {
-    font-size: 0.875rem;
-    line-height: 1.5;
-  }
+    a,
+    .btn-link {
+        font-size: 0.875rem;
+        line-height: 1.5;
+    }
 }
 
 :deep(.subheader-primary) {
-  h5.dark-header {
-    margin-bottom: 0.25rem !important;
-  }
+    h5.dark-header {
+        margin-bottom: 0.25rem !important;
+    }
 }
 </style>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index dc6406ff..5eca4a11 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -1,114 +1,122 @@
 <template>
-  <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 px-0 px-md-2">
-          <siteHeader
-class="mb-2 header"
-cmsWidgetName="SiteHeaderWidget" />
+    <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 px-0 px-md-2">
+                    <siteHeader
+                        class="mb-2 header"
+                        cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </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" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <siteFooter
+                        ref="siteFooter"
+                        class="mt-5"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="
+                            !meta.valid || displayNoShopsAlert
+                        "
+                        @backClicked="navigateBack"
+                        @forwardClicked="forwardButtonAction" />
+                </div>
+            </div>
         </div>
-      </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" />
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <siteFooter
-            ref="siteFooter"
-            class="mt-5"
-            cmsWidgetName="SiteFooterWidget"
-            :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
-            @backClicked="navigateBack"
-            @forwardClicked="forwardButtonAction" />
-        </div>
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -121,7 +129,7 @@ import { useMainStore } from '@/store';
 import {
     getPricedMobileFeePart,
     getServiceabilityDetails,
-    getZipCodeData
+    getZipCodeData,
 } from '@/helpers/service-location-helper';
 
 // Import Component
@@ -140,11 +148,11 @@ import serviceZipModalQuestion from '@/layouts/service-location/service-zip-moda
 // DEFINE VALIDATION RULES
 defineRule('mobile-location-required', (value) => {
     if (
-        value.addressQuestions.streetAddress === ''
-    || value.addressQuestions.city === ''
-    || value.addressQuestions.state === ''
-    || value.addressQuestions.zipCode === ''
-    || value.isVehicleProtected == null
+        value.addressQuestions.streetAddress === '' ||
+        value.addressQuestions.city === '' ||
+        value.addressQuestions.state === '' ||
+        value.addressQuestions.zipCode === '' ||
+        value.isVehicleProtected == null
     ) {
         return errorMessages.MOBILE_LOCATION_REQUIRED;
     }
@@ -164,46 +172,46 @@ export default {
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
         serviceZipModalQuestion,
-        shopQuestion
+        shopQuestion,
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
-    // Call APIs
+        // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
         const serviceZipCode =
-      useMainStore().order.serviceLocation.zipCode
-      || useMainStore().order.customer.address.zipCode;
+            useMainStore().order.serviceLocation.zipCode ||
+            useMainStore().order.customer.address.zipCode;
         const zipCodeData = getZipCodeData(serviceZipCode);
 
         const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
         const serviceabilityDetailsPromise =
-      getServiceabilityDetails(serviceZipCode);
+            getServiceabilityDetails(serviceZipCode);
         const shopQuestionInitialDataPromise =
-      shopQuestion.methods.loadInitialData(serviceZipCode);
+            shopQuestion.methods.loadInitialData(serviceZipCode);
 
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
+                promise: cmsContentPromise,
             },
             {
                 resultKey: 'mobileFeePart',
-                promise: mobileFeePartPromise
+                promise: mobileFeePartPromise,
             },
             {
                 resultKey: 'serviceabilityDetails',
-                promise: serviceabilityDetailsPromise
+                promise: serviceabilityDetailsPromise,
             },
             {
                 resultKey: 'shopQuestionInitialData',
-                promise: shopQuestionInitialDataPromise
+                promise: shopQuestionInitialDataPromise,
             },
             {
                 resultKey: 'zipCodeData',
-                promise: zipCodeData
-            }
+                promise: zipCodeData,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -215,7 +223,9 @@ export default {
                 resultMap.mobileFeePart,
                 resultMap.shopQuestionInitialData?.mobileProviderNumber
             );
-            vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
+            vm.$refs.shopQuestion.initializeComponent(
+                resultMap.shopQuestionInitialData
+            );
         });
     },
     setup() {
@@ -239,12 +249,15 @@ export default {
             mobileFeePart: null,
             mobileProviderNumber: null,
             zipContainsMilitaryBase: false,
-            zipCodeCtu: null
+            zipCodeCtu: null,
         };
     },
     computed: {
         questionText() {
-            return this.getCmsContent('ServiceTypeQuestionWidget', 'QuestionText');
+            return this.getCmsContent(
+                'ServiceTypeQuestionWidget',
+                'QuestionText'
+            );
         },
         answersFromCms() {
             return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers');
@@ -253,7 +266,7 @@ export default {
             get() {
                 return {
                     state: this.state,
-                    zipCode: this.zipCode
+                    zipCode: this.zipCode,
                 };
             },
             set(newValue) {
@@ -268,7 +281,7 @@ export default {
 
                 // eslint-disable-next-line vue/valid-next-tick
                 this.$nextTick();
-            }
+            },
         },
         mobileLocationQuestions: {
             get() {
@@ -278,9 +291,9 @@ export default {
                         streetAddress2: this.streetAddress2,
                         city: this.city,
                         state: this.state,
-                        zipCode: this.zipCode
+                        zipCode: this.zipCode,
                     },
-                    isVehicleProtected: this.isVehicleProtected
+                    isVehicleProtected: this.isVehicleProtected,
                 };
             },
             set(newValue) {
@@ -294,21 +307,23 @@ export default {
                 if (newValue.zipCode !== this.zipCode) {
                     if (
                         !(
-                            this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
-              || this.selectedAppointmentType
-                === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
+                            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
+                    this.isGlassServiceableMobile &&
+                    this.isRecalibrationServiceableMobile
                 );
             }
             return this.isGlassServiceableMobile;
@@ -316,7 +331,8 @@ export default {
         isServiceableInshop() {
             if (this.isRecalibrationServiceableInshop !== null) {
                 return (
-                    this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop
+                    this.isGlassServiceableInshop &&
+                    this.isRecalibrationServiceableInshop
                 );
             }
 
@@ -324,8 +340,8 @@ export default {
         },
         isShopQuestionDisplayed() {
             return (
-                this.selectedAppointmentType === 'Inshop'
-        || this.selectedAppointmentType === 'Dropoff'
+                this.selectedAppointmentType === 'Inshop' ||
+                this.selectedAppointmentType === 'Dropoff'
             );
         },
         isAppointmentTypeDisplayed() {
@@ -333,17 +349,18 @@ export default {
         },
         isMobileLocationDisplayed() {
             return (
-                this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
-        || this.selectedAppointmentType
-          === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
+                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
+                this.isServiceableInshop &&
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile === false
             );
         },
         displayMilitaryZipAlert() {
@@ -357,20 +374,20 @@ export default {
         },
         displayServiceableInshopOnly() {
             return (
-                !this.displayRecalibrationWarning
-        && this.isServiceableInshop
-        && !this.isServiceableMobile
+                !this.displayRecalibrationWarning &&
+                this.isServiceableInshop &&
+                !this.isServiceableMobile
             );
         },
         displayServiceableMobileOnly() {
             return this.isServiceableMobile && !this.isServiceableInshop;
-        }
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
             return (
-                useMainStore().lineItems.supportingItems !== null
-        && useMainStore().order.serviceLocation.zipCode !== null
+                useMainStore().lineItems.supportingItems !== null &&
+                useMainStore().order.serviceLocation.zipCode !== null
             );
         },
         async reloadShopData(zipCode) {
@@ -391,8 +408,8 @@ export default {
                         city: null,
                         state: null,
                         zipCode: null,
-                        zipCodeCtu: null
-                    }
+                        zipCodeCtu: null,
+                    },
                 };
             }
 
@@ -405,7 +422,7 @@ export default {
                 zipCodeCtu: this.zipCodeCtu,
                 appointmentType: this.selectedAppointmentType,
                 isVehicleProtected: this.isVehicleProtected,
-                provider
+                provider,
             });
 
             this.$router.navigate(
@@ -428,14 +445,14 @@ export default {
         },
         getServiceStateFromStore() {
             return (
-                useMainStore().order.serviceLocation.state
-        || useMainStore().order.customer.address.state
+                useMainStore().order.serviceLocation.state ||
+                useMainStore().order.customer.address.state
             );
         },
         getServiceZipCodeFromStore() {
             return (
-                useMainStore().order.serviceLocation.zipCode
-        || useMainStore().order.customer.address.zipCode
+                useMainStore().order.serviceLocation.zipCode ||
+                useMainStore().order.customer.address.zipCode
             );
         },
         getIsVehicleProtectedFromStore() {
@@ -490,15 +507,15 @@ export default {
         },
         setServiceabilityDetails(serviceabilityDetails) {
             this.isGlassServiceableInshop =
-        serviceabilityDetails.isGlassServiceableInshop;
+                serviceabilityDetails.isGlassServiceableInshop;
             this.isRecalibrationServiceableInshop =
-        serviceabilityDetails.isRecalibrationServiceableInshop;
+                serviceabilityDetails.isRecalibrationServiceableInshop;
             this.isGlassServiceableMobile =
-        serviceabilityDetails.isGlassServiceableMobile;
+                serviceabilityDetails.isGlassServiceableMobile;
             this.isRecalibrationServiceableMobile =
-        serviceabilityDetails.isRecalibrationServiceableMobile;
-        }
-    }
+                serviceabilityDetails.isRecalibrationServiceableMobile;
+        },
+    },
 };
 </script>
 
@@ -506,47 +523,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;
-  }
+    &:first-of-type {
+        line-height: 1.5rem;
+    }
+    &:not(:nth-of-type(1)) {
+        line-height: 1.25rem;
+    }
 }
 .choose-option {
-  .button-question > div {
-    &:first-of-type {
-      margin-bottom: 0.95rem;
-      line-height: 1.5rem;
+    .button-question > div {
+        &:first-of-type {
+            margin-bottom: 0.95rem;
+            line-height: 1.5rem;
+        }
     }
-  }
 }
 .button-question {
-  .row.form-test-error {
-    line-height: 1.5rem;
-    padding-left: 0rem !important;
-  }
+    .row.form-test-error {
+        line-height: 1.5rem;
+        padding-left: 0rem !important;
+    }
 }
 .service-location-button-question {
-  .question-text {
-    margin-top: 1.5rem;
+    .question-text {
+        margin-top: 1.5rem;
 
-    span {
-      text-align: center;
+        span {
+            text-align: center;
+        }
     }
-  }
 }
 </style>
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index 06291290..efba00b9 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -1,120 +1,122 @@
 <template>
-  <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="widget.siteHeader" />
-</div>
-    </div>
-  </div>
-  <div class="container-fluid fade-on-route-transition">
-    <div class="row justify-content-center">
-      <div class="col-md-6 col-xl-4">
-        <Form
-          id="searchProvidersForm"
-          @submit="onSubmit"
-          @invalidSubmit="onInvalidSubmit">
-          <label
-            id="tpaSearchQuestionLabel"
-            for="tpaSearchQuestionField"
-            class="text-center fs-5 mt-5 mb-0 text-black w-100">
-            {{ tpaSearchQuestionLabel }}
-          </label>
-          <label
-            id="searchInstructions"
-            for="tpaSearchQuestionField"
-            class="text-center small darker-gray w-100 mb-4">
-            {{ searchInstructionsText }}
-          </label>
-          <div class="mb-5">
-            <textboxQuestion
-              id="tpaSearchQuestionField"
-              v-model="zipCode"
-              inputId="tpaSearchQuestionFieldInput"
-              :cmsWidgetName="widget.tpaSearchQuestion"
-              :includeSearchIcon="true"
-              :displayQuestionText="false"
-              isRequired
-              :isDisabled="reloadingProviders"
-              :validationRules="rules.zipCode"
-              @clickEvent="searchClick" />
-          </div>
-        </Form>
-      </div>
-    </div>
-  </div>
-  <div class="container-fluid fade-on-route-transition">
-    <div class="row justify-content-center">
-      <div class="col-md-6 col-xl-4">
-        <googleMap
-          id="map"
-          class="mb-4"
-          :addresses="providerAddresses"
-          :zipCode="mapZipCode" />
-        <Form
-          id="providerSelectionForm"
-          v-slot="{ meta }"
-          @submit="onSubmit"
-          @invalidSubmit="onInvalidSubmit">
-          <dropdownQuestion
-            id="searchRadiusFilter"
-            v-model="filter"
-            :cmsWidgetName="widget.filterByQuestion"
-            inputId="searchRadiusFilterInput"
-            :options="filterOptions"
-            disableAutoFill
-            :isDisabled="reloadingProviders"
-            :validationRules="rules.filter" />
-          <loader
-            v-if="reloadingProviders"
-            id="providersLoader"
-            loaderPosition="center"
-            loaderColor="blue"
-            :width="2"
-            :height="2"
-            class="my-4" />
-          <div v-else>
-            <div class="my-4">
-              <buttonQuestion
-                id="selectProviderQuestion"
-                v-model="selectedProviderNumber"
-                buttonTypeString="shopListButton"
-                :buttonTypeObject="shopListButton"
-                class="radioQuestion"
-                :answers="providerButtonData"
-                groupName="chooseShop"
-                textPosition="text-start"
-                isRequired
-                :validationRules="rules.provider"
-                :additionalButtonData="additionalButtonData" />
-              <alert
-                v-if="providers?.length === 0 ?? true"
-                id="alertNoNetworkProviders"
-                :cmsWidgetName="widget.noNetworkShopsAlert"
-                alertClass="alert-warning"
-                :isDismissible="false"
-                :manualHeadline="noNetworkShopsAlertHeaderText" />
+    <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="widget.siteHeader" />
             </div>
-            <div class="text-center">
-              <textLink
-                id="preferredShopNotListedLink"
-                linkType="navigation"
-                href="javascript:void(0)"
-                :text="shopNotListedModalLink"
-                @clickEvent="doNotSeeMyShopLinkClick" />
-            </div>
-            <siteFooter
-              ref="siteFooter"
-              :cmsWidgetName="widget.siteFooter"
-              :isForwardActionDisabled="!meta.valid"
-              @ForwardClicked="forwardButtonAction"
-              @backClicked="navigateBack" />
-          </div>
-        </Form>
-      </div>
+        </div>
+    </div>
+    <div class="container-fluid fade-on-route-transition">
+        <div class="row justify-content-center">
+            <div class="col-md-6 col-xl-4">
+                <Form
+                    id="searchProvidersForm"
+                    @submit="onSubmit"
+                    @invalidSubmit="onInvalidSubmit">
+                    <label
+                        id="tpaSearchQuestionLabel"
+                        for="tpaSearchQuestionField"
+                        class="text-center fs-5 mt-5 mb-0 text-black w-100">
+                        {{ tpaSearchQuestionLabel }}
+                    </label>
+                    <label
+                        id="searchInstructions"
+                        for="tpaSearchQuestionField"
+                        class="text-center small darker-gray w-100 mb-4">
+                        {{ searchInstructionsText }}
+                    </label>
+                    <div class="mb-5">
+                        <textboxQuestion
+                            id="tpaSearchQuestionField"
+                            v-model="zipCode"
+                            inputId="tpaSearchQuestionFieldInput"
+                            :cmsWidgetName="widget.tpaSearchQuestion"
+                            :includeSearchIcon="true"
+                            :displayQuestionText="false"
+                            isRequired
+                            :isDisabled="reloadingProviders"
+                            :validationRules="rules.zipCode"
+                            @clickEvent="searchClick" />
+                    </div>
+                </Form>
+            </div>
+        </div>
+    </div>
+    <div class="container-fluid fade-on-route-transition">
+        <div class="row justify-content-center">
+            <div class="col-md-6 col-xl-4">
+                <googleMap
+                    id="map"
+                    class="mb-4"
+                    :addresses="providerAddresses"
+                    :zipCode="mapZipCode" />
+                <Form
+                    id="providerSelectionForm"
+                    v-slot="{ meta }"
+                    @submit="onSubmit"
+                    @invalidSubmit="onInvalidSubmit">
+                    <dropdownQuestion
+                        id="searchRadiusFilter"
+                        v-model="filter"
+                        :cmsWidgetName="widget.filterByQuestion"
+                        inputId="searchRadiusFilterInput"
+                        :options="filterOptions"
+                        disableAutoFill
+                        :isDisabled="reloadingProviders"
+                        :validationRules="rules.filter" />
+                    <loader
+                        v-if="reloadingProviders"
+                        id="providersLoader"
+                        loaderPosition="center"
+                        loaderColor="blue"
+                        :width="2"
+                        :height="2"
+                        class="my-4" />
+                    <div v-else>
+                        <div class="my-4">
+                            <buttonQuestion
+                                id="selectProviderQuestion"
+                                v-model="selectedProviderNumber"
+                                buttonTypeString="shopListButton"
+                                :buttonTypeObject="shopListButton"
+                                class="radioQuestion"
+                                :answers="providerButtonData"
+                                groupName="chooseShop"
+                                textPosition="text-start"
+                                isRequired
+                                :validationRules="rules.provider"
+                                :additionalButtonData="additionalButtonData" />
+                            <alert
+                                v-if="providers?.length === 0 ?? true"
+                                id="alertNoNetworkProviders"
+                                :cmsWidgetName="widget.noNetworkShopsAlert"
+                                alertClass="alert-warning"
+                                :isDismissible="false"
+                                :manualHeadline="
+                                    noNetworkShopsAlertHeaderText
+                                " />
+                        </div>
+                        <div class="text-center">
+                            <textLink
+                                id="preferredShopNotListedLink"
+                                linkType="navigation"
+                                href="javascript:void(0)"
+                                :text="shopNotListedModalLink"
+                                @clickEvent="doNotSeeMyShopLinkClick" />
+                        </div>
+                        <siteFooter
+                            ref="siteFooter"
+                            :cmsWidgetName="widget.siteFooter"
+                            :isForwardActionDisabled="!meta.valid"
+                            @ForwardClicked="forwardButtonAction"
+                            @backClicked="navigateBack" />
+                    </div>
+                </Form>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 <script>
 // Components
@@ -144,7 +146,7 @@ const radiusFilterPairs = [
     { radius: 15, filter: '15 miles' },
     { radius: 25, filter: '25 miles' },
     { radius: 50, filter: '50 miles' },
-    { radius: 100, filter: '100 miles' }
+    { radius: 100, filter: '100 miles' },
 ];
 
 function convertRadiusFilterToInteger(filter) {
@@ -200,12 +202,12 @@ export default {
         googleMap,
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
         const { zipCode, filter, providers, providerNumber } =
-      await getInitialSearchData();
+            await getInitialSearchData();
         const cmsContent = await fetchCmsContentForPage(to.query.issPage);
 
         next(async (vm) => {
@@ -223,7 +225,7 @@ export default {
             selectedProviderNumber: '',
             reloadingProviders: false,
             additionalButtonData: {
-                displayAvailabilityIndicators: false
+                displayAvailabilityIndicators: false,
             },
             widget: {
                 siteHeader: 'SiteHeaderWidget',
@@ -232,23 +234,23 @@ export default {
                 filterByQuestion: 'FilterByQuestion',
                 noNetworkShopsAlert: 'NoNetworkShopsAlertWidget',
                 shopNotListedLink: 'ShopNotListedLink',
-                siteFooter: 'SiteFooterWidget'
+                siteFooter: 'SiteFooterWidget',
             },
             rules: {
                 zipCode: `${globalRules.ZIP_CODE_REQUIRED}|${globalRules.ZIP_CODE_SEARCH_FORMAT}`,
                 filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
-                provider: globalRules.OPTION_REQUIRED
+                provider: globalRules.OPTION_REQUIRED,
             },
-            shopListButton: shallowRef(shopListButton)
+            shopListButton: shallowRef(shopListButton),
         };
     },
     computed: {
         filterOptions() {
             const filterByAnswers =
-        this.getCmsContent(
-            this.widget.filterByQuestion,
-            widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
-        ) ?? [];
+                this.getCmsContent(
+                    this.widget.filterByQuestion,
+                    widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
+                ) ?? [];
             const filterByAnswersObj = {};
             [...filterByAnswers].forEach((answer) => {
                 filterByAnswersObj[answer.Name] = answer.Name;
@@ -284,21 +286,25 @@ export default {
         },
         providerAddresses() {
             return (
-                this.providers?.map((provider) => this.getProviderAddress(provider))
-        ?? []
+                this.providers?.map((provider) =>
+                    this.getProviderAddress(provider)
+                ) ?? []
             );
         },
         providerButtonData() {
             return (
                 this.providers?.map((provider) =>
-                    this.getShopButtonDataFromProvider(provider)) ?? []
+                    this.getShopButtonDataFromProvider(provider)
+                ) ?? []
             );
         },
         selectedProviderIsSafeliteShop() {
             return (
-                this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false
+                this.providers?.find(
+                    (p) => p.providerNumber === this.selectedProviderNumber
+                )?.isSafeliteShop ?? false
             );
-        }
+        },
     },
     watch: {
         async filter() {
@@ -312,13 +318,15 @@ export default {
         providers(newProviders) {
             if (this.dataLoaded) {
                 this.selectedProviderNumber =
-          newProviders?.length === 1 ?? false
-              ? newProviders[0]?.providerNumber ?? ''
-              : '';
+                    newProviders?.length === 1 ?? false
+                        ? newProviders[0]?.providerNumber ?? ''
+                        : '';
             }
         },
         selectedProviderNumber(newNumber) {
-            const provider = this.providers?.find((p) => p.providerNumber === newNumber);
+            const provider = this.providers?.find(
+                (p) => p.providerNumber === newNumber
+            );
             if (provider && this.dataLoaded) {
                 useMainStore().updateServiceLocation({
                     searchFilter: this.filter,
@@ -330,14 +338,14 @@ export default {
                             city: provider.address?.city,
                             state: provider.address?.state,
                             zipCode: provider.address?.zipCode,
-                            zipCodeCtu: provider.address?.zipCodeCtu
+                            zipCodeCtu: provider.address?.zipCodeCtu,
                         },
                         companyName: provider?.companyName,
-                        phoneNumber: provider?.phoneNumber
-                    }
+                        phoneNumber: provider?.phoneNumber,
+                    },
                 });
             }
-        }
+        },
     },
     beforeUpdate() {
         if (!this.dataLoaded) {
@@ -373,7 +381,7 @@ export default {
 
             const addressLine1 = toTitleCase(provider?.address?.streetAddress);
             const joinString =
-        addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
+                addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : '';
             return [addressLine1, addressLine2].join(joinString);
         },
         async getProviderButtonData() {
@@ -402,7 +410,8 @@ export default {
             }
             const scenario = this.selectedProviderIsSafeliteShop
                 ? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP
-                : this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP;
+                : this.navigationScenarios
+                      .CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP;
             this.$router.navigate(scenario, this.$route);
         },
         getCustomValueFromString(str) {
@@ -416,10 +425,10 @@ export default {
         getShopButtonDataFromProvider(provider) {
             const cellNumber = toDisplayPhoneNumber(provider?.phoneNumber);
             const distance =
-        provider?.distanceInMiles !== null
-        && !Number.isNaN(parseFloat(provider?.distanceInMiles))
-            ? +provider.distanceInMiles.toFixed(1)
-            : null;
+                provider?.distanceInMiles !== null &&
+                !Number.isNaN(parseFloat(provider?.distanceInMiles))
+                    ? +provider.distanceInMiles.toFixed(1)
+                    : null;
 
             return {
                 buttonLabel: provider?.companyName ?? '',
@@ -427,15 +436,15 @@ export default {
                 buttonBodyCopy: `${this.getProviderAddress(provider)}<br>${
                     cellNumber ?? ''
                 }`,
-                value: provider?.providerNumber ?? ''
+                value: provider?.providerNumber ?? '',
             };
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
 .darker-gray {
-  color: map-get($colors, 'darker-gray');
+    color: map-get($colors, 'darker-gray');
 }
 </style>
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index fda79826..1fdcd386 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -15,7 +15,8 @@
                         ref="vehicleBanner"
                         :cmsWidgetName="widget.vehicleBanner"
                         :displayGenericVehicleImage="false"
-                        class="mt-5" /> <!-- TODO fix styling -->
+                        class="mt-5" />
+                    <!-- TODO fix styling -->
                     <textBlock
                         ref="subHeaderTitle"
                         :customText="subHeaderTitle"
@@ -51,9 +52,7 @@
                             <div
                                 v-for="(section, index) in sections"
                                 :key="section.title">
-                                <hr
-                                    v-if="index !== 0"
-                                    class="my-3" />
+                                <hr v-if="index !== 0" class="my-3" />
                                 <reviewBlock
                                     :id="'review-block-' + index"
                                     :customHeaderText="section.title"
@@ -109,13 +108,25 @@ import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/co
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 
 // Supporting files
-import { fetchCmsContentForPage, processIfStatements, getStringWithCustomValues } from '@/helpers/cms-content-helper.js';
+import {
+    fetchCmsContentForPage,
+    processIfStatements,
+    getStringWithCustomValues,
+} from '@/helpers/cms-content-helper.js';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import { useMainStore } from '@/store';
-import { toTitleCase, toDisplayPhoneNumber, formatAddress, formatAmountInDollars } from '@/helpers/text-helper.js';
-import { getDamageDisplayContent, getLocationAnswer } from '@/helpers/damage-review-content-generator.js';
+import {
+    toTitleCase,
+    toDisplayPhoneNumber,
+    formatAddress,
+    formatAmountInDollars,
+} from '@/helpers/text-helper.js';
+import {
+    getDamageDisplayContent,
+    getLocationAnswer,
+} from '@/helpers/damage-review-content-generator.js';
 import damageLocationsSelected from '@/constants/damage-locations-selected.js';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
@@ -132,7 +143,7 @@ export default {
         siteFooter,
         contactDetailsDrawer,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -155,41 +166,66 @@ export default {
                     vehicle: 'VehicleSubTitle',
                     damage: 'DamageSubTitle',
                     shop: 'PreferredShopSubTitle',
-                    contactInfo: 'ContactDetailsSubTitle'
+                    contactInfo: 'ContactDetailsSubTitle',
                 },
                 damageLocations: 'DamageLocationsWidget',
                 orderDetails: 'OrderDetailsContent',
-                footer: 'SiteFooterWidget'
+                footer: 'SiteFooterWidget',
             },
             companyName,
             customValueMap: {
-                glassShop: companyName
-            }
+                glassShop: companyName,
+            },
         };
     },
     computed: {
         subHeaderTitle() {
-            return this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+            return this.getCmsContent(
+                this.widget.siteSubHeader,
+                widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
+            );
         },
         subHeaderBodyOne() {
-            return this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+            return this.getCmsContent(
+                this.widget.siteSubHeader,
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+            );
         },
         subHeaderBodyTwo() {
-            const cmsContent = this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
+            const cmsContent = this.getCmsContent(
+                this.widget.siteSubHeader,
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
+            );
             return getStringWithCustomValues(cmsContent, this.customValueMap);
         },
         serviceSummaryText() {
-            return this.getCmsContent(this.widget.serviceSummary, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+            return this.getCmsContent(
+                this.widget.serviceSummary,
+                widgetFields.TEXT_BLOCK_WIDGET.TEXT
+            );
         },
         orderDetailsTitle() {
-            return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+            return this.getCmsContent(
+                this.widget.orderDetails,
+                widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
+            );
         },
         orderDetailsBody() {
-            const orderDetailsBodyText = this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
-            return processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString);
+            const orderDetailsBodyText = this.getCmsContent(
+                this.widget.orderDetails,
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+            );
+            return processIfStatements(
+                orderDetailsBodyText,
+                'custom',
+                this.getCustomValueFromString
+            );
         },
         forwardButtonText() {
-            return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
+            return this.getCmsContent(
+                this.widget.footer,
+                widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT
+            );
         },
         isVerified() {
             return useMainStore().order.payment.insuranceCoverage.isVerified;
@@ -198,7 +234,9 @@ export default {
             return useMainStore().order.currentDeductible;
         },
         deductibleBoxValue() {
-            return this.isVerified ? formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
+            return this.isVerified
+                ? formatAmountInDollars(this.currentDeductible)
+                : VERIFYING_COVERAGE;
         },
         getVehicleLines() {
             const { year, make, model } = useMainStore().order.vehicle;
@@ -208,15 +246,27 @@ export default {
             return [line];
         },
         locationAnswers() {
-            return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations);
+            return this.getInputQuestionWidgetAnswersNullSafe(
+                this.widget.damageLocations
+            );
         },
         driverSideDamageAnswers() {
-            const answerContent = getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers);
-            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
+            const answerContent = getLocationAnswer(
+                damageLocationsSelected.DRIVER,
+                this.locationAnswers
+            );
+            return this.getInputQuestionWidgetAnswersNullSafe(
+                answerContent?.SubWidgetName
+            );
         },
         passengerSideDamageAnswers() {
-            const answerContent = getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers);
-            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
+            const answerContent = getLocationAnswer(
+                damageLocationsSelected.PASSENGER,
+                this.locationAnswers
+            );
+            return this.getInputQuestionWidgetAnswersNullSafe(
+                answerContent?.SubWidgetName
+            );
         },
         getDamageLines() {
             const { glassToReplace, isRepair } = useMainStore().order.damage;
@@ -229,76 +279,108 @@ export default {
             );
         },
         getPreferredShopLines() {
-            const { phoneNumber, address } = useMainStore().order.serviceLocation.provider;
+            const { phoneNumber, address } =
+                useMainStore().order.serviceLocation.provider;
             const { streetAddress, city, state, zipCode } = address;
-            const displayAddress = formatAddress(streetAddress, null, city, state, zipCode);
+            const displayAddress = formatAddress(
+                streetAddress,
+                null,
+                city,
+                state,
+                zipCode
+            );
             const displayPhoneNumber = toDisplayPhoneNumber(phoneNumber);
-            return [toTitleCase(this.companyName ?? ''), displayAddress, displayPhoneNumber];
+            return [
+                toTitleCase(this.companyName ?? ''),
+                displayAddress,
+                displayPhoneNumber,
+            ];
         },
         getContactInfoLines() {
-            const { firstName, lastName, emailAddress, servicePhone } = useMainStore().contactInfo;
+            const { firstName, lastName, emailAddress, servicePhone } =
+                useMainStore().contactInfo;
             return [
                 `${firstName} ${lastName}`,
                 emailAddress ?? '',
-                toDisplayPhoneNumber(servicePhone)
+                toDisplayPhoneNumber(servicePhone),
             ];
-        }
+        },
     },
-    methods:
-        {
-            setSections() {
-                const vehicleScenario = useMainStore().isPolicyVehicle
-                    ? this.navigationScenarios.EDIT_POLICY_VEHICLE
-                    : this.navigationScenarios.EDIT_VEHICLE;
-                this.sections = [
-                    this.getSection(this.widget.subheader.vehicle, this.getVehicleLines, () => this.navigate(vehicleScenario)),
-                    // eslint-disable-next-line max-len
-                    this.getSection(this.widget.subheader.damage, this.getDamageLines, () => this.navigate(this.navigationScenarios.EDIT_DAMAGE)),
-                    // eslint-disable-next-line max-len
-                    this.getSection(this.widget.subheader.shop, this.getPreferredShopLines, () => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)),
-                    // eslint-disable-next-line max-len
-                    this.getSection(this.widget.subheader.contactInfo, this.getContactInfoLines, this.openContactDetailsModal)
-                ];
-            },
-            getSection(widgetName, lines, onClick) {
-                return {
-                    title: this.getCmsContent(widgetName, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
-                    lines,
-                    onClickEdit: onClick
-                };
-            },
-            forwardButtonAction() {
-                this.navigate(this.navigationScenarios.CLICKED_FORWARD);
-            },
-            navigate(scenario) {
-                this.$router.navigate(scenario, this.$route);
-            },
-            getCustomValueFromString(str) {
-                switch (str) {
-                    case 'deductibleAboveZero':
-                        return this.isVerified && this.currentDeductible !== 0;
-                    case 'zeroDeductible':
-                        return this.isVerified && this.currentDeductible === 0;
-                    case 'verifyingCoverage':
-                        return !this.isVerified;
-                    default:
-                        return null;
-                }
-            },
-            openContactDetailsModal() {
-                this.$refs.contactDetailsDrawer.openModal();
+    methods: {
+        setSections() {
+            const vehicleScenario = useMainStore().isPolicyVehicle
+                ? this.navigationScenarios.EDIT_POLICY_VEHICLE
+                : this.navigationScenarios.EDIT_VEHICLE;
+            this.sections = [
+                this.getSection(
+                    this.widget.subheader.vehicle,
+                    this.getVehicleLines,
+                    () => this.navigate(vehicleScenario)
+                ),
+                // eslint-disable-next-line max-len
+                this.getSection(
+                    this.widget.subheader.damage,
+                    this.getDamageLines,
+                    () => this.navigate(this.navigationScenarios.EDIT_DAMAGE)
+                ),
+                // eslint-disable-next-line max-len
+                this.getSection(
+                    this.widget.subheader.shop,
+                    this.getPreferredShopLines,
+                    () =>
+                        this.navigate(
+                            this.navigationScenarios.EDIT_PREFERRED_SHOP
+                        )
+                ),
+                // eslint-disable-next-line max-len
+                this.getSection(
+                    this.widget.subheader.contactInfo,
+                    this.getContactInfoLines,
+                    this.openContactDetailsModal
+                ),
+            ];
+        },
+        getSection(widgetName, lines, onClick) {
+            return {
+                title: this.getCmsContent(
+                    widgetName,
+                    widgetFields.TEXT_BLOCK_WIDGET.TEXT
+                ),
+                lines,
+                onClickEdit: onClick,
+            };
+        },
+        forwardButtonAction() {
+            this.navigate(this.navigationScenarios.CLICKED_FORWARD);
+        },
+        navigate(scenario) {
+            this.$router.navigate(scenario, this.$route);
+        },
+        getCustomValueFromString(str) {
+            switch (str) {
+                case 'deductibleAboveZero':
+                    return this.isVerified && this.currentDeductible !== 0;
+                case 'zeroDeductible':
+                    return this.isVerified && this.currentDeductible === 0;
+                case 'verifyingCoverage':
+                    return !this.isVerified;
+                default:
+                    return null;
             }
-        }
+        },
+        openContactDetailsModal() {
+            this.$refs.contactDetailsDrawer.openModal();
+        },
+    },
 };
 </script>
 <style lang="scss" scoped>
-
 .tpa-submit__title--line-height {
     line-height: map-get($spacers, 6);
 }
 
 .text-color--darker-gray {
-    color: $darker-gray
+    color: $darker-gray;
 }
 
 .text-color--black {
@@ -307,7 +389,6 @@ export default {
 
 hr {
     opacity: 1;
-    color: $gray-350
+    color: $gray-350;
 }
-
 </style>
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 776fcc79..e2e541ae 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,99 +1,101 @@
 <template>
-  <Form
-    ref="theForm"
-    v-slot="{ meta }"
-    @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit">
-    <div class="container-fluid fade-on-route-transition replace-options-question">
-      <div class="row justify-content-center">
-        <div class="col-md-6 px-0 px-md-2">
-          <siteHeader cmsWidgetName="SiteHeaderWidget" />
+    <Form
+        ref="theForm"
+        v-slot="{ meta }"
+        @submit="onSubmit"
+        @invalidSubmit="onInvalidSubmit">
+        <div
+            class="container-fluid fade-on-route-transition replace-options-question">
+            <div class="row justify-content-center">
+                <div class="col-md-6 px-0 px-md-2">
+                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <alert
+                        v-if="shouldDisplayVehicleChangeAlert"
+                        ref="vehicleChangeAlert"
+                        class="mt-5 mb-0"
+                        cmsWidgetName="VehicleChangeAlert"
+                        alertClass="alert-warning"
+                        :isDismissible="false" />
+                    <vehicleBanner
+                        class="mb-4"
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                    <damageLocationQuestion
+                        ref="damageLocation"
+                        v-model="selectedDamageLocations"
+                        cmsWidgetName="DamageLocationQuestion"
+                        groupName="DamageLocationQuestion" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <windshieldOptions
+                        ref="windshieldOptions"
+                        v-model="selectedWindshieldOptions"
+                        :hasRepairReplaceConflict="hasRepairReplaceConflict"
+                        :hasSplitSingleConflict="hasSplitSingleConflict"
+                        :selectedDamageLocations="selectedDamageLocations"
+                        class="mb-3" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <alert
+                        v-if="hasRepairReplaceConflict"
+                        class="my-5"
+                        cmsWidgetName="HasReplacementConflict"
+                        alertClass="alert-danger"
+                        :isDismissible="false" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <sideDoorOptions
+                        v-show="!hasRepairReplaceConflict"
+                        ref="sideDoorOptions"
+                        v-model="sideDoorOptionsData"
+                        cmsWidgetName="SideDoorSideQuestion"
+                        groupName="SideDoorSideQuestion"
+                        :selectedDamageLocations="selectedDamageLocations"
+                        class="mb-1" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <replaceOptionsQuestion
+                        ref="backGlassOptions"
+                        v-model="selectedRearReplaceOptions"
+                        cmsWidgetName="RearReplaceOptionsQuestion"
+                        :isAvailable="
+                            isRearWindowDamageLocation &&
+                            !hasRepairReplaceConflict
+                        "
+                        groupName="BackGlassReplaceOptionsQuestion"
+                        validationRules="replace-options-required" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <site-footer
+                        ref="siteFooter"
+                        class="mt-5"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @backClicked="navigateBack"
+                        @forwardClicked="forwardButtonAction" />
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <alert
-            v-if="shouldDisplayVehicleChangeAlert"
-            ref="vehicleChangeAlert"
-            class="mt-5 mb-0"
-            cmsWidgetName="VehicleChangeAlert"
-            alertClass="alert-warning"
-            :isDismissible="false" />
-          <vehicleBanner
-            class="mb-4"
-            cmsWidgetName="VehicleBannerWidget"
-            :displayGenericVehicleImage="false" />
-          <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6">
-          <damageLocationQuestion
-            ref="damageLocation"
-            v-model="selectedDamageLocations"
-            cmsWidgetName="DamageLocationQuestion"
-            groupName="DamageLocationQuestion" />
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <windshieldOptions
-            ref="windshieldOptions"
-            v-model="selectedWindshieldOptions"
-            :hasRepairReplaceConflict="hasRepairReplaceConflict"
-            :hasSplitSingleConflict="hasSplitSingleConflict"
-            :selectedDamageLocations="selectedDamageLocations"
-            class="mb-3" />
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <alert
-            v-if="hasRepairReplaceConflict"
-            class="my-5"
-            cmsWidgetName="HasReplacementConflict"
-            alertClass="alert-danger"
-            :isDismissible="false" />
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <sideDoorOptions
-            v-show="!hasRepairReplaceConflict"
-            ref="sideDoorOptions"
-            v-model="sideDoorOptionsData"
-            cmsWidgetName="SideDoorSideQuestion"
-            groupName="SideDoorSideQuestion"
-            :selectedDamageLocations="selectedDamageLocations"
-            class="mb-1" />
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <replaceOptionsQuestion
-            ref="backGlassOptions"
-            v-model="selectedRearReplaceOptions"
-            cmsWidgetName="RearReplaceOptionsQuestion"
-            :isAvailable="
-              isRearWindowDamageLocation && !hasRepairReplaceConflict
-            "
-            groupName="BackGlassReplaceOptionsQuestion"
-            validationRules="replace-options-required" />
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <site-footer
-            ref="siteFooter"
-            class="mt-5"
-            cmsWidgetName="SiteFooterWidget"
-            :isForwardActionDisabled="!meta.valid"
-            @backClicked="navigateBack"
-            @forwardClicked="forwardButtonAction" />
-        </div>
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 
 <script>
@@ -140,7 +142,7 @@ export default {
         replaceOptionsQuestion,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        alert
+        alert,
     },
     mixins: [BaseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
@@ -148,18 +150,20 @@ export default {
 
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId);
+        const damageOptionsPromise = store.getDamageOptions(
+            store.order.vehicle.carId
+        );
 
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
+                promise: cmsContentPromise,
             },
             {
                 resultKey: 'damageOptions',
-                promise: damageOptionsPromise
-            }
+                promise: damageOptionsPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -167,13 +171,23 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
-            vm.$refs.sideDoorOptions.initializeComponent(
-                resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
-                resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+            vm.$refs.damageLocation.initializeComponent(
+                resultMap.damageOptions
+            );
+            vm.$refs.sideDoorOptions.initializeComponent(
+                resultMap.damageOptions.driverSideOptions
+                    .availableReplacementOptions,
+                resultMap.damageOptions.passengerSideOptions
+                    .availableReplacementOptions
+            );
+            vm.$refs.windshieldOptions.initializeComponent(
+                resultMap.damageOptions.windshieldOptions
+                    .availableReplacementOptions
+            );
+            vm.$refs.backGlassOptions.initializeComponent(
+                resultMap.damageOptions.backGlassOptions
+                    .availableReplacementOptions
             );
-            vm.$refs.windshieldOptions.initializeComponent(resultMap.damageOptions.windshieldOptions.availableReplacementOptions);
-            vm.$refs.backGlassOptions.initializeComponent(resultMap.damageOptions.backGlassOptions.availableReplacementOptions);
         });
     },
     setup() {
@@ -187,77 +201,100 @@ export default {
             sideDoorOptionsData: {
                 selectedDoorSides: this.getDoorSidesFromStore(),
                 selectedDriverSideReplaceOptions:
-          this.getDriverSideReplaceOptionsFromStore(),
+                    this.getDriverSideReplaceOptionsFromStore(),
                 selectedPassengerSideReplaceOptions:
-          this.getPassengerSideReplaceOptionsFromStore()
+                    this.getPassengerSideReplaceOptionsFromStore(),
             },
             selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
-            selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore()
+            selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
         };
     },
     computed: {
         isWindshieldDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) =>
-                selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD);
+            return this.selectedDamageLocations.some(
+                (selectedDamages) =>
+                    selectedDamages.toUpperCase() ===
+                    damageLocationsCms.WINDSHIELD
+            );
         },
         isSideDoorDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) =>
-                selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR);
+            return this.selectedDamageLocations.some(
+                (selectedDamages) =>
+                    selectedDamages.toUpperCase() ===
+                    damageLocationsCms.SIDEDOOR
+            );
         },
         isRearWindowDamageLocation() {
-            return this.selectedDamageLocations.some((selectedDamages) =>
-                selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW);
+            return this.selectedDamageLocations.some(
+                (selectedDamages) =>
+                    selectedDamages.toUpperCase() ===
+                    damageLocationsCms.REARWINDOW
+            );
         },
         isWindshieldRepair() {
             return (
-                this.isWindshieldDamageLocation
-        && this.selectedWindshieldOptions.selectedWindshieldDamageType
-          === damageLocationsSelected.REPAIR
+                this.isWindshieldDamageLocation &&
+                this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+                    damageLocationsSelected.REPAIR
             );
         },
         isDriverSideReplace() {
             if (!this.isSideDoorDamageLocation) return false;
 
-            return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) =>
-                selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE);
+            return this.sideDoorOptionsData.selectedDoorSides.some(
+                (selectedDriverSide) =>
+                    selectedDriverSide.toUpperCase() ===
+                    damageLocationsCms.DRIVERSIDE
+            );
         },
         isPassengerSideReplace() {
             if (!this.isSideDoorDamageLocation) return false;
 
-            return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) =>
-                selectedPassengerSide.toUpperCase()
-          === damageLocationsCms.PASSENGERSIDE);
+            return this.sideDoorOptionsData.selectedDoorSides.some(
+                (selectedPassengerSide) =>
+                    selectedPassengerSide.toUpperCase() ===
+                    damageLocationsCms.PASSENGERSIDE
+            );
         },
         hasRepairReplaceConflict() {
             return (
-                this.isWindshieldDamageLocation
-        && this.selectedDamageLocations.length > 1
-        && this.isWindshieldRepair
+                this.isWindshieldDamageLocation &&
+                this.selectedDamageLocations.length > 1 &&
+                this.isWindshieldRepair
             );
         },
         hasSplitSingleConflict() {
             if (
-                !this.selectedDamageLocations?.includes('Windshield')
-        || this.selectedWindshieldOptions.selectedWindshieldDamageType
-          === damageLocationsSelected.REPAIR
-        || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
-            ) return false;
+                !this.selectedDamageLocations?.includes('Windshield') ||
+                this.selectedWindshieldOptions.selectedWindshieldDamageType ===
+                    damageLocationsSelected.REPAIR ||
+                !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
+            )
+                return false;
 
             return (
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedSingleWindshield) =>
-                    selectedSingleWindshield.toUpperCase()
-            === damageLocationsSelected.SINGLE.toUpperCase())
-        && (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedDriverWindshield) =>
-            selectedDriverWindshield.toUpperCase()
-            === damageLocationsSelected.DRIVER.toUpperCase())
-          || this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedPassengerWindshield) =>
-              selectedPassengerWindshield.toUpperCase()
-              === damageLocationsSelected.PASSENGER.toUpperCase()))
+                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                    (selectedSingleWindshield) =>
+                        selectedSingleWindshield.toUpperCase() ===
+                        damageLocationsSelected.SINGLE.toUpperCase()
+                ) &&
+                (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                    (selectedDriverWindshield) =>
+                        selectedDriverWindshield.toUpperCase() ===
+                        damageLocationsSelected.DRIVER.toUpperCase()
+                ) ||
+                    this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
+                        (selectedPassengerWindshield) =>
+                            selectedPassengerWindshield.toUpperCase() ===
+                            damageLocationsSelected.PASSENGER.toUpperCase()
+                    ))
             );
         },
         shouldDisplayVehicleChangeAlert() {
-            return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
-        }
+            return this.$route.params[
+                this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT
+            ];
+        },
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -270,21 +307,32 @@ export default {
             const glassSelections = [];
 
             if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD)
-        || this.mainStore.order.damage.isRepair
+                this.mainStore.order.damage.glassToReplace?.some(
+                    (glass) =>
+                        glass.glassLocation ===
+                        damageLocationsSelected.WINDSHIELD
+                ) ||
+                this.mainStore.order.damage.isRepair
             ) {
                 glassSelections.push(damageLocationsSelected.WINDSHIELD);
             }
             if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) =>
-                    glass.glassLocation === damageLocationsSelected.DRIVER
-            || glass.glassLocation === damageLocationsSelected.PASSENGER)
+                this.mainStore.order.damage.glassToReplace?.some(
+                    (glass) =>
+                        glass.glassLocation ===
+                            damageLocationsSelected.DRIVER ||
+                        glass.glassLocation ===
+                            damageLocationsSelected.PASSENGER
+                )
             ) {
                 glassSelections.push(damageLocationsSelected.SIDEDOOR);
             }
 
             if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.REAR)
+                this.mainStore.order.damage.glassToReplace?.some(
+                    (glass) =>
+                        glass.glassLocation === damageLocationsSelected.REAR
+                )
             ) {
                 glassSelections.push(damageLocationsSelected.REARWINDOW);
             }
@@ -295,45 +343,62 @@ export default {
             const windShieldOptions = {
                 selectedWindshieldDamageType: '',
                 selectedWindshieldChipCount: null,
-                selectedWindshieldReplaceOptions: []
+                selectedWindshieldReplaceOptions: [],
             };
 
-            if (this.mainStore.order.damage.isRepair === undefined) return windshieldOptions;
+            if (this.mainStore.order.damage.isRepair === undefined)
+                return windshieldOptions;
 
             if (this.mainStore.order.damage.isRepair) {
                 windShieldOptions.selectedWindshieldDamageType =
-          damageLocationsSelected.REPAIR;
+                    damageLocationsSelected.REPAIR;
                 windShieldOptions.selectedWindshieldChipCount =
-          this.mainStore.order.damage.numberOfChips;
+                    this.mainStore.order.damage.numberOfChips;
             } else {
                 if (
-                    this.mainStore.order.damage.glassToReplace?.some((glass) =>
-                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
-              && glass.glassName === damageLocationsSelected.SINGLE)
+                    this.mainStore.order.damage.glassToReplace?.some(
+                        (glass) =>
+                            glass.glassLocation ===
+                                damageLocationsSelected.WINDSHIELD &&
+                            glass.glassName === damageLocationsSelected.SINGLE
+                    )
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-            damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
+                        damageLocationsSelected.REPLACE;
+                    windShieldOptions.selectedWindshieldReplaceOptions.push(
+                        damageLocationsSelected.SINGLE
+                    );
                 }
 
                 if (
-                    this.mainStore.order.damage.glassToReplace?.some((glass) =>
-                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
-              && glass.glassName === damageLocationsSelected.DRIVER)
+                    this.mainStore.order.damage.glassToReplace?.some(
+                        (glass) =>
+                            glass.glassLocation ===
+                                damageLocationsSelected.WINDSHIELD &&
+                            glass.glassName === damageLocationsSelected.DRIVER
+                    )
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-            damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
+                        damageLocationsSelected.REPLACE;
+                    windShieldOptions.selectedWindshieldReplaceOptions.push(
+                        damageLocationsSelected.DRIVER
+                    );
                 }
 
                 if (
-                    this.mainStore.order.damage.glassToReplace?.some((glass) =>
-                        glass.glassLocation === damageLocationsSelected.WINDSHIELD
-              && glass.glassName === damageLocationsSelected.PASSENGER)
+                    this.mainStore.order.damage.glassToReplace?.some(
+                        (glass) =>
+                            glass.glassLocation ===
+                                damageLocationsSelected.WINDSHIELD &&
+                            glass.glassName ===
+                                damageLocationsSelected.PASSENGER
+                    )
                 ) {
                     windShieldOptions.selectedWindshieldDamageType =
-            damageLocationsSelected.REPLACE;
-                    windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
+                        damageLocationsSelected.REPLACE;
+                    windShieldOptions.selectedWindshieldReplaceOptions.push(
+                        damageLocationsSelected.PASSENGER
+                    );
                 }
             }
 
@@ -342,13 +407,20 @@ export default {
         getDoorSidesFromStore() {
             const doorSides = [];
             if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.DRIVER)
+                this.mainStore.order.damage.glassToReplace?.some(
+                    (glass) =>
+                        glass.glassLocation === damageLocationsSelected.DRIVER
+                )
             ) {
                 doorSides.push(damageLocationsSelected.DRIVERSIDE);
             }
 
             if (
-                this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.PASSENGER)
+                this.mainStore.order.damage.glassToReplace?.some(
+                    (glass) =>
+                        glass.glassLocation ===
+                        damageLocationsSelected.PASSENGER
+                )
             ) {
                 doorSides.push(damageLocationsSelected.PASSENGERSIDE);
             }
@@ -379,7 +451,10 @@ export default {
         },
         getRearReplaceOptionsFromStore() {
             const rearReplaceOptions =
-        this.mainStore.order.damage.glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
+                this.mainStore.order.damage.glassToReplace?.filter(
+                    (glass) =>
+                        glass.glassLocation === damageLocationsSelected.REAR
+                )[0]?.glassName;
 
             return rearReplaceOptions;
         },
@@ -391,7 +466,8 @@ export default {
             );
 
             if (this.isWindshieldRepair) {
-                const supportingItems = await useMainStore().getSupportingItems();
+                const supportingItems =
+                    await useMainStore().getSupportingItems();
                 useMainStore().updateSupportingItems(supportingItems.data);
             }
 
@@ -403,10 +479,13 @@ export default {
             } else if (this.mainStore.order.vehicle.vin) {
                 // If vin already exists, navigate directly to vin-lookup
 
-                const partsOrQuestionsResponse = await this.getPartsOrQuestions();
+                const partsOrQuestionsResponse =
+                    await this.getPartsOrQuestions();
                 if (partsOrQuestionsResponse.error) {
                     // To Do: Need requirement on what to do here
-                    window.console.error('Error on retrieving PartsOrQuestions');
+                    window.console.error(
+                        'Error on retrieving PartsOrQuestions'
+                    );
                     this.$refs.siteFooter.removeLoader();
                     return null;
                 }
@@ -428,42 +507,48 @@ export default {
         selectedGlassToReplace() {
             const selectedGlassToReplace = [];
             if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
-                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach((wsItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.WINDSHIELD,
-                        glassName: wsItem
-                    });
-                });
+                this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
+                    (wsItem) => {
+                        selectedGlassToReplace.push({
+                            glassLocation: damageLocationsSelected.WINDSHIELD,
+                            glassName: wsItem,
+                        });
+                    }
+                );
             }
 
             if (this.isDriverSideReplace) {
-                this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.DRIVER,
-                        glassName: driverItem
-                    });
-                });
+                this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(
+                    (driverItem) => {
+                        selectedGlassToReplace.push({
+                            glassLocation: damageLocationsSelected.DRIVER,
+                            glassName: driverItem,
+                        });
+                    }
+                );
             }
 
             if (this.isPassengerSideReplace) {
-                this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach((passengerItem) => {
-                    selectedGlassToReplace.push({
-                        glassLocation: damageLocationsSelected.PASSENGER,
-                        glassName: passengerItem
-                    });
-                });
+                this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
+                    (passengerItem) => {
+                        selectedGlassToReplace.push({
+                            glassLocation: damageLocationsSelected.PASSENGER,
+                            glassName: passengerItem,
+                        });
+                    }
+                );
             }
 
             if (this.isRearWindowDamageLocation) {
                 selectedGlassToReplace.push({
                     glassLocation: damageLocationsSelected.REAR,
-                    glassName: this.selectedRearReplaceOptions
+                    glassName: this.selectedRearReplaceOptions,
                 });
             }
 
             return selectedGlassToReplace;
-        }
-    }
+        },
+    },
 };
 </script>
 
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index 4dbcbbc3..df4004c7 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -1,39 +1,37 @@
 <template>
-  <Form
-@submit="onSubmit"
-@invalidSubmit="onInvalidSubmit">
-    <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 cmsWidgetName="SiteHeaderWidget" />
+    <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
+        <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 cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <div class="select-car-form rounded">
+                        <VehicleBanner
+                            class="mt-2 mb-4"
+                            cmsWidgetName="VehicleBannerWidget"
+                            :displayGenericVehicleImage="false" />
+                        <SiteSubHeader
+                            cmsWidgetName="SiteSubHeaderWidget"
+                            class="mt-5 mb-2" />
+                        <VinLookupMethods
+                            ref="VinLookupMethods"
+                            v-model="selectedVinLookupMethod"
+                            cmsWidgetName="VINLookupMethod"
+                            groupName="VinLookupMethods" />
+                        <SiteFooter
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="isForwardActionDisabled"
+                            class="mt-5"
+                            @backClicked="navigateBack"
+                            @forwardClicked="forwardButtonAction" />
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <div class="select-car-form rounded">
-            <VehicleBanner
-              class="mt-2 mb-4"
-              cmsWidgetName="VehicleBannerWidget"
-              :displayGenericVehicleImage="false" />
-            <SiteSubHeader
-              cmsWidgetName="SiteSubHeaderWidget"
-              class="mt-5 mb-2" />
-            <VinLookupMethods
-              ref="VinLookupMethods"
-              v-model="selectedVinLookupMethod"
-              cmsWidgetName="VINLookupMethod"
-              groupName="VinLookupMethods" />
-            <SiteFooter
-              cmsWidgetName="SiteFooterWidget"
-              :isForwardActionDisabled="isForwardActionDisabled"
-              class="mt-5"
-              @backClicked="navigateBack"
-              @forwardClicked="forwardButtonAction" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -53,13 +51,13 @@ import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lo
 export default {
     name: 'vehicle-lookup',
     components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
+        // eslint-disable-next-line vue/no-reserved-component-names
         Form,
         SiteFooter,
         SiteHeader,
         SiteSubHeader,
         VehicleBanner,
-        VinLookupMethods
+        VinLookupMethods,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -69,8 +67,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -82,13 +80,13 @@ export default {
     },
     data() {
         return {
-            selectedVinLookupMethod: null
+            selectedVinLookupMethod: null,
         };
     },
     computed: {
         isForwardActionDisabled() {
             return this.selectedVinLookupMethod === null;
-        }
+        },
     },
     methods: {
         arePagePrerequisiteValid() {
@@ -118,7 +116,7 @@ export default {
                     break;
             }
         },
-        resetDependentState() {}
-    }
+        resetDependentState() {},
+    },
 };
 </script>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 4b893086..bfd45d5c 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,60 +1,59 @@
 <template>
-  <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 px-0 px-md-2">
-          <siteHeader cmsWidgetName="SiteHeaderWidget" />
+    <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 px-0 px-md-2">
+                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                        ref="vehicleBanner"
+                        class="mt-2 mb-4"
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+                    <siteSubHeader
+                        ref="siteSubHeader"
+                        cmsWidgetName="SiteSubHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <alert
+                        id="vehicle-parts-alert"
+                        class="mt-3 mb-3"
+                        alertClass="alert-warning"
+                        cmsWidgetName="AlertWidget"
+                        :isDismissible="false" />
+                    <div v-for="(item, i) in PartsOrQuestions" :key="i">
+                        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+                        <hr v-if="i > 0" />
+                        <glassPartQuestion
+                            :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
+                            v-model="
+                                selectedGlassParts[
+                                    item.glassLocation + '-' + item.glassName
+                                ]
+                            "
+                            :glassLocation="item.glassLocation"
+                            :glassName="item.glassName"
+                            :colorAnswers="item.colorAnswers"
+                            :alreadyPopulatedPartsData="
+                                alreadyPopulatedPartsData
+                            " />
+                    </div>
+                    <siteFooter
+                        ref="siteFooter"
+                        class="mt-5"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="isForwardActionDisabled"
+                        @backClicked="navigateBackByVehicleQuestions"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <vehicleBanner
-            ref="vehicleBanner"
-            class="mt-2 mb-4"
-            cmsWidgetName="VehicleBannerWidget"
-            :displayGenericVehicleImage="false" />
-          <siteSubHeader
-            ref="siteSubHeader"
-            cmsWidgetName="SiteSubHeaderWidget" />
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <alert
-            id="vehicle-parts-alert"
-            class="mt-3 mb-3"
-            alertClass="alert-warning"
-            cmsWidgetName="AlertWidget"
-            :isDismissible="false" />
-          <div
-v-for="(item, i) in PartsOrQuestions"
-:key="i">
-            <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
-            <hr v-if="i > 0" />
-            <glassPartQuestion
-              :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
-              v-model="
-                selectedGlassParts[item.glassLocation + '-' + item.glassName]
-              "
-              :glassLocation="item.glassLocation"
-              :glassName="item.glassName"
-              :colorAnswers="item.colorAnswers"
-              :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
-          </div>
-          <siteFooter
-            ref="siteFooter"
-            class="mt-5"
-            cmsWidgetName="SiteFooterWidget"
-            :isForwardActionDisabled="isForwardActionDisabled"
-            @backClicked="navigateBackByVehicleQuestions"
-            @ForwardClicked="forwardButtonAction" />
-        </div>
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 
 <script>
@@ -78,25 +77,25 @@ import { useMainStore } from '@/store';
 export default {
     name: 'vehicle-parts',
     components: {
-    // eslint-disable-next-line vue/no-reserved-component-names
+        // eslint-disable-next-line vue/no-reserved-component-names
         Form,
         glassPartQuestion,
         siteHeader,
         vehicleBanner,
         siteSubHeader,
         siteFooter,
-        alert
+        alert,
     },
     mixins: [BaseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
-    // Call APIs
+        // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
         // Call the "next" function to complete the transition to this page.
@@ -105,26 +104,32 @@ export default {
 
             // Glass Part Question dynamic component
             Object.keys(vm.$refs)
-                .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
+                .filter(
+                    (r) =>
+                        r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined
+                )
                 .forEach((c) =>
                     vm.$refs[c][0].initializeComponent({
-                        ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
-                        FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget
-                    }));
+                        ColorQuestionWidget:
+                            resultMap.cmsContent.ColorQuestionWidget,
+                        FeatureQuestionWidget:
+                            resultMap.cmsContent.FeatureQuestionWidget,
+                    })
+                );
         });
     },
     data() {
         return {
             selectedGlassParts: {},
             alertWidgetData: Object,
-            alreadyPopulatedPartsData: []
+            alreadyPopulatedPartsData: [],
         };
     },
     computed: {
         isForwardActionDisabled() {
             return (
-                this.selectedGlassPartNumbers?.length
-        !== this.PartsFromApi.partsOrQuestions?.length
+                this.selectedGlassPartNumbers?.length !==
+                this.PartsFromApi.partsOrQuestions?.length
             );
         },
         selectedGlassPartNumbers() {
@@ -151,13 +156,15 @@ export default {
                         FeatureAnswers: [
                             {
                                 FeatureAnswerText:
-                  p.description === '' ? p.color : p.description,
-                                PartNumber: p.partNumber
-                            }
-                        ]
+                                    p.description === ''
+                                        ? p.color
+                                        : p.description,
+                                PartNumber: p.partNumber,
+                            },
+                        ],
                     });
                     return arr;
-                }, [])
+                }, []),
             }));
 
             return mappedData;
@@ -169,7 +176,7 @@ export default {
 
         RefPrefix() {
             return 'partQuestion';
-        }
+        },
     },
     mounted() {
         this.LoadInitialPartsData();
@@ -178,10 +185,11 @@ export default {
         arePagePrerequisitesValid() {
             // Check if isRepair is populated and if the pageData we need is here (Parts data)
             return (
-                useMainStore().damage.isRepair != null
-        && useMainStore().pageData(issPageValues.VEHICLE_PARTS)
-        && Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS))
-            .length !== 0
+                useMainStore().damage.isRepair != null &&
+                useMainStore().pageData(issPageValues.VEHICLE_PARTS) &&
+                Object.keys(
+                    useMainStore().pageData(issPageValues.VEHICLE_PARTS)
+                ).length !== 0
             );
         },
         async forwardButtonAction() {
@@ -189,19 +197,25 @@ export default {
 
             // Match them to the parts from the API.
             // eslint-disable-next-line no-restricted-syntax
-            for (const [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
+            for (const [key, value] of Object.entries(
+                this.PartsFromApi.partsOrQuestions
+            )) {
                 // eslint-disable-next-line no-restricted-syntax
-                for (const [partKey, partValue] of Object.entries(value.parts)) {
+                for (const [partKey, partValue] of Object.entries(
+                    value.parts
+                )) {
                     const currentPart =
-            this.PartsFromApi.partsOrQuestions[key].parts[partKey];
+                        this.PartsFromApi.partsOrQuestions[key].parts[partKey];
 
-                    const isMatched = this.selectedGlassPartNumbers.some((p) => p === currentPart.partNumber);
+                    const isMatched = this.selectedGlassPartNumbers.some(
+                        (p) => p === currentPart.partNumber
+                    );
 
                     if (isMatched) {
                         matchedParts.push({
                             glassLocation: value.glassLocation,
                             glassName: value.glassName,
-                            parts: [currentPart]
+                            parts: [currentPart],
                         });
                     }
                 }
@@ -209,7 +223,9 @@ export default {
             // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
             if (this.isForwardActionDisabled) {
                 this.$refs.siteFooter.removeLoader();
-                throw new Error('Could not match any parts to the selected parts');
+                throw new Error(
+                    'Could not match any parts to the selected parts'
+                );
             }
 
             this.navigateForward(matchedParts, null);
@@ -218,9 +234,9 @@ export default {
         LoadInitialPartsData() {
             const partsData = this.PartsFromApi;
             this.alreadyPopulatedPartsData =
-        this.mainStore.lineItems.glassParts === null
-            ? []
-            : this.mainStore.lineItems.glassParts;
+                this.mainStore.lineItems.glassParts === null
+                    ? []
+                    : this.mainStore.lineItems.glassParts;
 
             partsData.partsOrQuestions.map((g) => {
                 // If the part is already populated, use the value from the store and populate the v-model.
@@ -228,19 +244,21 @@ export default {
                     const { partNumber } = this.alreadyPopulatedPartsData[key];
                     g.parts.forEach((p) => {
                         if (p.partNumber === partNumber) {
-                            this.selectedGlassParts[`${g.glassLocation}-${g.glassName}`] = p;
+                            this.selectedGlassParts[
+                                `${g.glassLocation}-${g.glassName}`
+                            ] = p;
                         }
                     });
                 });
             });
-        }
-    }
+        },
+    },
 };
 </script>
 <style lang="scss" scoped>
 #vehicle-parts-alert {
-  .alert-heading {
-    margin-top: 0.25rem !important;
-  }
+    .alert-heading {
+        margin-top: 0.25rem !important;
+    }
 }
 </style>
diff --git a/src/layouts/vehicle-selection/vehicle-selection.vue b/src/layouts/vehicle-selection/vehicle-selection.vue
index fd8c5b10..5d0f1c58 100644
--- a/src/layouts/vehicle-selection/vehicle-selection.vue
+++ b/src/layouts/vehicle-selection/vehicle-selection.vue
@@ -1,75 +1,75 @@
 <template>
-  <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 px-0 px-md-2">
-          <siteHeader
-class="mb-2 header"
-cmsWidgetName="SiteHeaderWidget" />
+    <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 px-0 px-md-2">
+                    <siteHeader
+                        class="mb-2 header"
+                        cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <siteSubHeader
+                        cmsWidgetName="SiteSubHeaderWidget"
+                        class="siteSubHeader"
+                        justification="center"
+                        darkGraySubText />
+
+                    <vehicleQuestion
+                        ref="vehicleYearQuestion"
+                        v-model="selectedYear"
+                        class="mb-2 mt-4"
+                        cmsWidgetName="VehicleYearQuestion"
+                        :updateValues="updateYearValues"
+                        validationRules="year-required"
+                        inputId="yearQuestionField" />
+                    <vehicleQuestion
+                        ref="vehicleMakeQuestion"
+                        v-model="selectedMake"
+                        class="mb-2 mt-4"
+                        cmsWidgetName="VehicleMakeQuestion"
+                        :updateValues="updateMakeValues"
+                        validationRules="make-required"
+                        inputId="makeQuestionField" />
+                    <vehicleQuestion
+                        ref="vehicleModelQuestion"
+                        v-model="selectedModel"
+                        class="mb-2 mt-4"
+                        cmsWidgetName="VehicleModelQuestion"
+                        :updateValues="updateModelValues"
+                        validationRules="model-required"
+                        inputId="modelQuestionField" />
+                    <vehicleQuestion
+                        ref="vehicleStyleQuestion"
+                        v-model="selectedStyle"
+                        class="mb-2 mt-4"
+                        cmsWidgetName="VehicleStyleQuestion"
+                        :updateValues="updateStyleValues"
+                        validationRules="style-required"
+                        inputId="styleQuestionField" />
+
+                    <vehicleBanner
+                        ref="banner"
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="displayGeneric"
+                        class="mt-5 mb-3" />
+
+                    <siteFooter
+                        ref="siteFooter"
+                        class="mt-5"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @ForwardClicked="forwardButtonAction"
+                        @backClicked="navigateBack" />
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <siteSubHeader
-            cmsWidgetName="SiteSubHeaderWidget"
-            class="siteSubHeader"
-            justification="center"
-            darkGraySubText />
-
-          <vehicleQuestion
-            ref="vehicleYearQuestion"
-            v-model="selectedYear"
-            class="mb-2 mt-4"
-            cmsWidgetName="VehicleYearQuestion"
-            :updateValues="updateYearValues"
-            validationRules="year-required"
-            inputId="yearQuestionField" />
-          <vehicleQuestion
-            ref="vehicleMakeQuestion"
-            v-model="selectedMake"
-            class="mb-2 mt-4"
-            cmsWidgetName="VehicleMakeQuestion"
-            :updateValues="updateMakeValues"
-            validationRules="make-required"
-            inputId="makeQuestionField" />
-          <vehicleQuestion
-            ref="vehicleModelQuestion"
-            v-model="selectedModel"
-            class="mb-2 mt-4"
-            cmsWidgetName="VehicleModelQuestion"
-            :updateValues="updateModelValues"
-            validationRules="model-required"
-            inputId="modelQuestionField" />
-          <vehicleQuestion
-            ref="vehicleStyleQuestion"
-            v-model="selectedStyle"
-            class="mb-2 mt-4"
-            cmsWidgetName="VehicleStyleQuestion"
-            :updateValues="updateStyleValues"
-            validationRules="style-required"
-            inputId="styleQuestionField" />
-
-          <vehicleBanner
-            ref="banner"
-            cmsWidgetName="VehicleBannerWidget"
-            :displayGenericVehicleImage="displayGeneric"
-            class="mt-5 mb-3" />
-
-          <siteFooter
-            ref="siteFooter"
-            class="mt-5"
-            cmsWidgetName="SiteFooterWidget"
-            :isForwardActionDisabled="!meta.valid"
-            @ForwardClicked="forwardButtonAction"
-            @backClicked="navigateBack" />
-        </div>
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 
 <script>
@@ -104,20 +104,20 @@ export default {
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        vehicleQuestion
+        vehicleQuestion,
     },
     mixins: [baseFormMixin],
 
     async beforeRouteEnter(to, from, next) {
-    // Call APIs
+        // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -129,7 +129,7 @@ export default {
     },
     props: {
         cmsWidgetName: String,
-        validationRules: String
+        validationRules: String,
     },
     data() {
         const { year, make, model, style } = useMainStore().order.vehicle;
@@ -137,13 +137,13 @@ export default {
             selectedYear: year,
             selectedMake: make,
             selectedModel: model,
-            selectedStyle: style
+            selectedStyle: style,
         };
     },
     computed: {
         displayGeneric() {
             return !this.selectedStyle;
-        }
+        },
     },
 
     watch: {
@@ -171,7 +171,7 @@ export default {
         selectedStyle(value) {
             this.mainStore.updateVehicleStyle(value);
             this.mainStore.setVehicle();
-        }
+        },
     },
     mounted() {
         this.$refs.vehicleYearQuestion.getNewValues();
@@ -220,22 +220,22 @@ export default {
         },
         async updateStyleValues() {
             return this.mainStore.getVehicleStyles();
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
 .select-car-form {
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
 }
 .siteSubHeader {
-  margin-top: 1.5rem;
+    margin-top: 1.5rem;
 }
 
 .subheader-secondary {
-  margin-top: 0.5rem;
-  padding: 0px;
+    margin-top: 0.5rem;
+    padding: 0px;
 }
 </style>
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 5b11d39c..6984341d 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -1,44 +1,44 @@
 <template>
-  <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 px-0 px-md-2">
-          <siteHeader cmsWidgetName="SiteHeaderWidget" />
+    <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 px-0 px-md-2">
+                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <div class="select-car-form rounded">
+                        <vehicleBanner
+                            class="mt-2 mb-4"
+                            cmsWidgetName="VehicleBannerWidget"
+                            :displayGenericVehicleImage="!carIdIsValid" />
+                        <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                        <vinLookupAlerts
+                            class="mt-5"
+                            :activeAlertType="activeVehicleLookupAlertType" />
+                        <vinQuestion
+                            v-model="vin"
+                            :mask="vinMask"
+                            :isDisabled="vinPopulatedOnPageLoad"
+                            textPosition="left" />
+                        <vinLocationInformation />
+                        <siteFooter
+                            ref="siteFooter"
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            class="mt-5"
+                            @backClicked="navigateBack"
+                            @forwardClicked="forwardButtonAction" />
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <div class="select-car-form rounded">
-            <vehicleBanner
-              class="mt-2 mb-4"
-              cmsWidgetName="VehicleBannerWidget"
-              :displayGenericVehicleImage="!carIdIsValid" />
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-            <vinLookupAlerts
-              class="mt-5"
-              :activeAlertType="activeVehicleLookupAlertType" />
-            <vinQuestion
-              v-model="vin"
-              :mask="vinMask"
-              :isDisabled="vinPopulatedOnPageLoad"
-              textPosition="left" />
-            <vinLocationInformation />
-            <siteFooter
-              ref="siteFooter"
-              cmsWidgetName="SiteFooterWidget"
-              :isForwardActionDisabled="!meta.valid"
-              class="mt-5"
-              @backClicked="navigateBack"
-              @forwardClicked="forwardButtonAction" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </Form>
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -75,12 +75,12 @@ export default {
         vehicleBanner,
         vinLocationInformation,
         vinLookupAlerts,
-        vinQuestion
+        vinQuestion,
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     provide() {
         return {
-            vehicleFromLookup: computed(() => this.vehicleFromLookup)
+            vehicleFromLookup: computed(() => this.vehicleFromLookup),
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -90,8 +90,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -109,23 +109,23 @@ export default {
         const vin = this.getVinFromStore();
         return {
             activeVehicleLookupAlertType:
-        vin?.length > 0 && !this.hasValidCarId()
-            ? vehicleLookupAlertTypes.NOT_FOUND
-            : null,
+                vin?.length > 0 && !this.hasValidCarId()
+                    ? vehicleLookupAlertTypes.NOT_FOUND
+                    : null,
             needToLookupVehicle: true,
             vehicleFromLookup: null,
             vinWithNonMatchingCarId: vin?.length > 0 && !this.hasValidCarId(),
             vin,
             forwardButtonCarStyle: '',
-            vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId()
+            vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId(),
         };
     },
     computed: {
         isCarIdDifferentFromTheStore() {
             return (
-                this.vehicleFromLookup !== null
-        && this.hasValidCarId()
-        && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
+                this.vehicleFromLookup !== null &&
+                this.hasValidCarId() &&
+                this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
             );
         },
         isTwoIdenticalYMMVehicleFound() {
@@ -141,7 +141,7 @@ export default {
             if (this.vinPopulatedOnPageLoad) {
                 // TODO: Modify to remove side effects in computed
                 this.activeVehicleLookupAlertType =
-          vehicleLookupAlertTypes.PERFECT_MATCH;
+                    vehicleLookupAlertTypes.PERFECT_MATCH;
                 this.needToLookupVehicle = false;
                 const lastSixChars = this.vin.substring(11, this.vin.length);
                 return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
@@ -150,15 +150,17 @@ export default {
         },
         carIdIsValid() {
             return this.hasValidCarId();
-        }
+        },
     },
     watch: {
         vin() {
             this.resetActiveAlert();
             this.$refs.siteFooter.enableForwardAction();
             this.needToLookupVehicle = true;
-            this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
-        }
+            this.$refs.siteFooter.updateButtonText(
+                this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
+            );
+        },
     },
     methods: {
         arePagePrerequisiteValid() {
@@ -169,7 +171,8 @@ export default {
         },
         hasValidCarId() {
             return (
-                this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== '0'
+                this.mainStore.vehicle.carId &&
+                this.mainStore.vehicle.carId !== '0'
             );
         },
         // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
@@ -179,11 +182,16 @@ export default {
             this.$refs.siteFooter.enableForwardAction();
 
             if (this.needToLookupVehicle) {
-                const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
+                const vehicleLookupResponse = await this.lookupVehicleByVin(
+                    this.vin
+                );
 
                 if (vehicleLookupResponse.error) {
-                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
-                    this.mainStore.setBailout(bailoutMessage.vehicleNotFound(this.vin));
+                    this.activeVehicleLookupAlertType =
+                        vehicleLookupAlertTypes.NOT_FOUND;
+                    this.mainStore.setBailout(
+                        bailoutMessage.vehicleNotFound(this.vin)
+                    );
                     this.resetVehicleFromLookup();
                     this.$refs.siteFooter.removeLoader();
                     // Temp solution to turn on 'disabled' style on the Continue button
@@ -196,25 +204,30 @@ export default {
                 this.mainStore.resetBailout();
 
                 // Add vin bcs the response from the service doesn't contain vin
-                this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
-                    vin: this.vin
-                });
+                this.vehicleFromLookup = Object.assign(
+                    vehicleLookupResponse.data,
+                    {
+                        vin: this.vin,
+                    }
+                );
             }
 
             if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
                 if (this.isTwoIdenticalYMMVehicleFound) {
                     this.activeVehicleLookupAlertType =
-            vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
+                        vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
                     this.forwardButtonCarStyle = this.vehicleFromLookup.style;
                 } else {
                     this.activeVehicleLookupAlertType =
-            vehicleLookupAlertTypes.NOT_MATCHED;
+                        vehicleLookupAlertTypes.NOT_MATCHED;
                 }
 
                 const vehicleYearMakeModelStyle =
-          // eslint-disable-next-line max-len
-          `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
-                this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
+                    // eslint-disable-next-line max-len
+                    `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
+                this.$refs.siteFooter.updateButtonText(
+                    `Continue with ${vehicleYearMakeModelStyle}`
+                );
                 this.$refs.siteFooter.removeLoader();
 
                 this.needToLookupVehicle = false;
@@ -224,13 +237,16 @@ export default {
 
             let isSelectedGlassAvailableForVehicle = true;
             if (this.isCarIdDifferentFromTheStore) {
-                isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
+                isSelectedGlassAvailableForVehicle =
+                    await isGlassAvailableForCarId(
+                        this.vehicleFromLookup.carId
+                    );
             }
 
             // navigate back to vehicle-damage
             if (
-                this.isCarIdDifferentFromTheStore
-        && !isSelectedGlassAvailableForVehicle
+                this.isCarIdDifferentFromTheStore &&
+                !isSelectedGlassAvailableForVehicle
             ) {
                 this.mainStore.updateVehicle(this.vehicleFromLookup);
                 this.mainStore.resetDamageState();
@@ -280,8 +296,8 @@ export default {
             } catch (responseError) {
                 return {
                     error: {
-                        status: responseError.status
-                    }
+                        status: responseError.status,
+                    },
                 };
             }
         },
@@ -291,7 +307,7 @@ export default {
         resetVehicleFromLookup() {
             this.vehicleFromLookup = null;
         },
-        resetDependentState() {}
-    }
+        resetDependentState() {},
+    },
 };
 </script>
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 5de5d396..9bd041b7 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -1,149 +1,147 @@
 <template>
-  <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 px-0 px-md-2">
-          <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        </div>
-      </div>
-      <div class="row justify-content-center">
-        <div class="col-md-6 col-xl-4">
-          <siteSubHeader
-cmsWidgetName="SiteSubHeaderWidget"
-class="mt-4" />
-          <textboxQuestion
-            ref="policyNumber"
-            v-model="welcomePageModel.policyNumber"
-            inputId="policyNumberField"
-            cmsWidgetName="PolicyNumberQuestion"
-            isRequired
-            disableAutoFill
-            :isDisabled="isPolicyHolderDisabled"
-            :validationRules="rules.policyNumber"
-            class="mb-3" />
-          <textboxQuestion
-            ref="policyZip"
-            v-model="welcomePageModel.policyZipCode"
-            inputId="policyZipCode"
-            cmsWidgetName="PolicyZipQuestion"
-            isRequired
-            mask="#####"
-            :isDisabled="isPolicyZipDisabled"
-            :validationRules="rules.policyZip"
-            class="mb-3" />
-          <textboxQuestion
-            ref="dateOfLoss"
-            v-model="welcomePageModel.dateOfLoss"
-            type="date"
-            cmsWidgetName="DateOfLossQuestion"
-            inputId="dateOfLossField"
-            isRequired
-            :isDisabled="isDateOfLossDisabled"
-            disableAutoFill
-            :max="new Date().toJSON().slice(0, 10)"
-            :min="'1972-12-01'"
-            :validationRules="rules.lossDate"
-            class="mb-3" />
-          <textBlock
-            cmsWidgetName="DamageDateEstimateWidget"
-            typeStyle="small"
-            class="mb-3" />
-          <dropdownQuestion
-            id="welcomeDropdown"
-            ref="damageCause"
-            v-model="welcomePageModel.damageCause"
-            cmsWidgetName="DamageCauseQuestion"
-            inputId="damageCauseQuestionField"
-            :options="DamageCauseOptions"
-            disableAutoFill
-            :validationRules="rules.damageOption"
-            placeHolderText="Select an option"
-            class="mb-3" />
-          <textboxQuestion
-            ref="phoneNumber"
-            v-model="welcomePageModel.phoneNumber"
-            inputId="phoneNumberField"
-            cmsWidgetName="PhoneNumberQuestion"
-            :validationRules="rules.phoneNumber"
-            isRequired
-            :mask="phoneMask"
-            disableAutoFill
-            class="mb-3" />
-          <textboxQuestion
-            ref="email"
-            v-model="welcomePageModel.email"
-            inputId="emailField"
-            cmsWidgetName="EmailAddressQuestion"
-            :validationRules="rules.email"
-            isRequired
-            disableAutoFill
-            class="mb-3" />
-          <textboxQuestion
-            v-if="displayDamageCityQuestion"
-            ref="damageCity"
-            v-model="welcomePageModel.damageCity"
-            class="mb-3"
-            inputId="damageCityField"
-            cmsWidgetName="DamageCityQuestion"
-            isRequired
-            disableAutoFill
-            :validationRules="rules.lossCity" />
-          <dropdownQuestion
-            v-if="displayDamageStateQuestion"
-            id="welcomeDropdown"
-            ref="state"
-            v-model="welcomePageModel.damageState"
-            class="mb-3"
-            cmsWidgetName="DamageStateQuestion"
-            inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-            :options="getStates"
-            :validationRules="rules.lossState"
-            isRequired
-            disableAutoFill
-            placeHolderText="Select an option" />
-          <buttonQuestion
-            v-if="displayGlassOnlyQuestion"
-            ref="glassOnlyDamage"
-            v-model="welcomePageModel.isDamageGlassOnly"
-            class="px-0 mt-4"
-            cmsWidgetName="GlassOnlyQuestion"
-            inputId="isDamageGlassOnly"
-            :answers="DamageGlassOnlyOptions"
-            :questionText="DamageGlassOnlyQuestion"
-            groupName="glassOnlyDamageOption"
-            buttonTypeString="listButtonHorizontal"
-            :validationRules="rules.damageOption"
-            isRequired
-            isSmallQuestionLabelText
-            disableAutoFill />
-          <div
-id="welcomeFooter"
-class="row">
-            <alert
-              v-if="displayInvalidZipAlert"
-              ref="alertInvalidZip"
-              class="my-4"
-              cmsWidgetName="AlertInvalidZipWidget"
-              alertClass="alert-danger"
-              :isDismissible="false" />
-            <siteFooter
-              ref="siteFooter"
-              class="mt-3"
-              cmsWidgetName="SiteFooterWidget"
-              :isForwardActionDisabled="!meta.valid"
-              @ForwardClicked="forwardButtonAction" />
-          </div>
-        </div>
-      </div>
-      <!-- Footer image component must have parent (usually container-fluid)
+    <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 px-0 px-md-2">
+                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <siteSubHeader
+                        cmsWidgetName="SiteSubHeaderWidget"
+                        class="mt-4" />
+                    <textboxQuestion
+                        ref="policyNumber"
+                        v-model="welcomePageModel.policyNumber"
+                        inputId="policyNumberField"
+                        cmsWidgetName="PolicyNumberQuestion"
+                        isRequired
+                        disableAutoFill
+                        :isDisabled="isPolicyHolderDisabled"
+                        :validationRules="rules.policyNumber"
+                        class="mb-3" />
+                    <textboxQuestion
+                        ref="policyZip"
+                        v-model="welcomePageModel.policyZipCode"
+                        inputId="policyZipCode"
+                        cmsWidgetName="PolicyZipQuestion"
+                        isRequired
+                        mask="#####"
+                        :isDisabled="isPolicyZipDisabled"
+                        :validationRules="rules.policyZip"
+                        class="mb-3" />
+                    <textboxQuestion
+                        ref="dateOfLoss"
+                        v-model="welcomePageModel.dateOfLoss"
+                        type="date"
+                        cmsWidgetName="DateOfLossQuestion"
+                        inputId="dateOfLossField"
+                        isRequired
+                        :isDisabled="isDateOfLossDisabled"
+                        disableAutoFill
+                        :max="new Date().toJSON().slice(0, 10)"
+                        :min="'1972-12-01'"
+                        :validationRules="rules.lossDate"
+                        class="mb-3" />
+                    <textBlock
+                        cmsWidgetName="DamageDateEstimateWidget"
+                        typeStyle="small"
+                        class="mb-3" />
+                    <dropdownQuestion
+                        id="welcomeDropdown"
+                        ref="damageCause"
+                        v-model="welcomePageModel.damageCause"
+                        cmsWidgetName="DamageCauseQuestion"
+                        inputId="damageCauseQuestionField"
+                        :options="DamageCauseOptions"
+                        disableAutoFill
+                        :validationRules="rules.damageOption"
+                        placeHolderText="Select an option"
+                        class="mb-3" />
+                    <textboxQuestion
+                        ref="phoneNumber"
+                        v-model="welcomePageModel.phoneNumber"
+                        inputId="phoneNumberField"
+                        cmsWidgetName="PhoneNumberQuestion"
+                        :validationRules="rules.phoneNumber"
+                        isRequired
+                        :mask="phoneMask"
+                        disableAutoFill
+                        class="mb-3" />
+                    <textboxQuestion
+                        ref="email"
+                        v-model="welcomePageModel.email"
+                        inputId="emailField"
+                        cmsWidgetName="EmailAddressQuestion"
+                        :validationRules="rules.email"
+                        isRequired
+                        disableAutoFill
+                        class="mb-3" />
+                    <textboxQuestion
+                        v-if="displayDamageCityQuestion"
+                        ref="damageCity"
+                        v-model="welcomePageModel.damageCity"
+                        class="mb-3"
+                        inputId="damageCityField"
+                        cmsWidgetName="DamageCityQuestion"
+                        isRequired
+                        disableAutoFill
+                        :validationRules="rules.lossCity" />
+                    <dropdownQuestion
+                        v-if="displayDamageStateQuestion"
+                        id="welcomeDropdown"
+                        ref="state"
+                        v-model="welcomePageModel.damageState"
+                        class="mb-3"
+                        cmsWidgetName="DamageStateQuestion"
+                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                        :options="getStates"
+                        :validationRules="rules.lossState"
+                        isRequired
+                        disableAutoFill
+                        placeHolderText="Select an option" />
+                    <buttonQuestion
+                        v-if="displayGlassOnlyQuestion"
+                        ref="glassOnlyDamage"
+                        v-model="welcomePageModel.isDamageGlassOnly"
+                        class="px-0 mt-4"
+                        cmsWidgetName="GlassOnlyQuestion"
+                        inputId="isDamageGlassOnly"
+                        :answers="DamageGlassOnlyOptions"
+                        :questionText="DamageGlassOnlyQuestion"
+                        groupName="glassOnlyDamageOption"
+                        buttonTypeString="listButtonHorizontal"
+                        :validationRules="rules.damageOption"
+                        isRequired
+                        isSmallQuestionLabelText
+                        disableAutoFill />
+                    <div id="welcomeFooter" class="row">
+                        <alert
+                            v-if="displayInvalidZipAlert"
+                            ref="alertInvalidZip"
+                            class="my-4"
+                            cmsWidgetName="AlertInvalidZipWidget"
+                            alertClass="alert-danger"
+                            :isDismissible="false" />
+                        <siteFooter
+                            ref="siteFooter"
+                            class="mt-3"
+                            cmsWidgetName="SiteFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            @ForwardClicked="forwardButtonAction" />
+                    </div>
+                </div>
+            </div>
+            <!-- Footer image component must have parent (usually container-fluid)
         set to display: flex and height 100dvh or height 100% -->
-      <footerImage />
-    </div>
-  </Form>
+            <footerImage />
+        </div>
+    </Form>
 </template>
 
 <script>
@@ -163,7 +161,7 @@ import footerImage from '@/iss-components/site-footer/footer-image/footer-image.
 import {
     fetchCmsContentForPage,
     fetchGlobalCmsContent,
-    updateCmsSiteHeader
+    updateCmsSiteHeader,
 } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { required } from '@/helpers/validation-rules';
@@ -196,25 +194,25 @@ export default {
         siteFooter,
         textBlock,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-    // Call APIs
+        // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
         const cmsGlobalSiteHeaderContentPromise =
-      fetchGlobalCmsContent('iss-siteheader');
+            fetchGlobalCmsContent('iss-siteheader');
 
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
+                promise: cmsContentPromise,
             },
             {
                 resultKey: 'globalSiteHeaderCmsContent',
-                promise: cmsGlobalSiteHeaderContentPromise
-            }
+                promise: cmsGlobalSiteHeaderContentPromise,
+            },
         ];
 
         // use resultMap to populate layout content.
@@ -246,8 +244,8 @@ export default {
                 lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
                 policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
                 policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
-                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
-            }
+                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
+            },
         };
     },
     computed: {
@@ -302,16 +300,18 @@ export default {
         },
         phoneMask() {
             return MaskaFormattedMasks.PHONE_NUMBER;
-        }
+        },
     },
     methods: {
         async forwardButtonAction() {
-            await this.mainStore.validateZip({ zip: this.welcomePageModel.policyZipCode })
+            await this.mainStore
+                .validateZip({ zip: this.welcomePageModel.policyZipCode })
                 .then(async (zipInfo) => {
                     if (zipInfo?.data?.isValid === true) {
                         this.mainStore.updatePolicyData(this.welcomePageModel);
 
-                        this.mainStore.order.serviceLocation.zipCodeCtu = zipInfo.data.zipCodeCtu?.toString();
+                        this.mainStore.order.serviceLocation.zipCodeCtu =
+                            zipInfo.data.zipCodeCtu?.toString();
 
                         const billToInfo = await this.getBillToInfo(
                             this.mainStore.issConfig.parentAccountNumber,
@@ -319,16 +319,31 @@ export default {
                         );
 
                         if (billToInfo !== null) {
-                            this.mainStore.issConfig.billToAccountNumber = billToInfo.billToAccountNumber;
-                            this.mainStore.issConfig.itacCashBillToNumber = billToInfo.itacCashBillToNumber;
-                            this.mainStore.issConfig.itacFnrBillToNumber = billToInfo.itacFnrBillToNumber;
+                            this.mainStore.issConfig.billToAccountNumber =
+                                billToInfo.billToAccountNumber;
+                            this.mainStore.issConfig.itacCashBillToNumber =
+                                billToInfo.itacCashBillToNumber;
+                            this.mainStore.issConfig.itacFnrBillToNumber =
+                                billToInfo.itacFnrBillToNumber;
                         }
 
-                        await this.mainStore.getDuplicateReferrals()
-                            .then(() => {}, () => {})
+                        await this.mainStore
+                            .getDuplicateReferrals()
+                            .then(
+                                () => {},
+                                () => {}
+                            )
                             .finally(async () => {
-                                if (this.isCoverageEnabled && !this.maxCoverageLookupAttemptsReached) {
-                                    await this.mainStore.getCoveragePolicyInfo()?.then(() => {}, () => {});
+                                if (
+                                    this.isCoverageEnabled &&
+                                    !this.maxCoverageLookupAttemptsReached
+                                ) {
+                                    await this.mainStore
+                                        .getCoveragePolicyInfo()
+                                        ?.then(
+                                            () => {},
+                                            () => {}
+                                        );
                                 } else {
                                     this.mainStore.order.policy.policyLookupSuccessful = false;
                                 }
@@ -347,24 +362,29 @@ export default {
                     providerNumber: providerNumber.toString(),
                     billToSelectionCriteria: {
                         typeOfClaim: 'GLASS ONLY',
-                        lineOfBusiness: 'PERSONAL'
-                    }
+                        lineOfBusiness: 'PERSONAL',
+                    },
                 };
 
                 const response = await globalMethods.callHttpClient({
                     method: endpoints.GetBillToInfo.method,
                     endpoint: endpoints.GetBillToInfo.url,
-                    payload
+                    payload,
                 });
 
                 return response.data;
             } catch (err) {
-                console.error(`Error Status Code: ${err.data?.status}: ${err.data?.title}`);
+                console.error(
+                    `Error Status Code: ${err.data?.status}: ${err.data?.title}`
+                );
                 return null;
             }
         },
         navigateForward() {
-            if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
+            if (
+                this.mainStore.applicationUser.duplicateOrders?.length > 0 ??
+                false
+            ) {
                 this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
                     this.$route,
@@ -409,36 +429,37 @@ export default {
                 damageCause: this.mainStore.order.policy.damageCause,
                 damageState: this.mainStore.order.policy.damageState,
                 damageCity: this.mainStore.order.policy.damageCity,
-                isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
+                isDamageGlassOnly:
+                    this.mainStore.order.policy.isDamageGlassOnly,
                 phoneNumber: this.mainStore.order.customer.phoneNumber,
                 email: this.mainStore.order.customer.emailAddress,
                 isPolicyNumberDisabled:
-          this.mainStore.order.policy.isPolicyNumberDisabled
+                    this.mainStore.order.policy.isPolicyNumberDisabled,
             };
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
 form {
-  height: 100dvh;
-  .container-fluid {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
+    height: 100dvh;
+    .container-fluid {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
 }
 @-moz-document url-prefix() {
-  // Temporary solution that prevents the Continue button from being hidden in Firefox
-  #welcomeFooter {
-    position: static !important;
-  }
-  // Fixes Firefox styling defect for placeholder text in dropdown fields
-  #welcomeDropdown {
-    .form-select {
-      padding: 0.75rem 1rem;
+    // Temporary solution that prevents the Continue button from being hidden in Firefox
+    #welcomeFooter {
+        position: static !important;
+    }
+    // Fixes Firefox styling defect for placeholder text in dropdown fields
+    #welcomeDropdown {
+        .form-select {
+            padding: 0.75rem 1rem;
+        }
     }
-  }
 }
 </style>

From 3ab6d5d4efbb48e35c9d883f2c6854bdc3fa6085 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 16 Apr 2024 10:53:26 -0400
Subject: [PATCH 15/26] WIP Change color value back to variable.

---
 src/digital-components/modal/modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index fc42c9fc..6a01ca00 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -156,7 +156,7 @@ export default {
             font-weight: 500;
             font-size: 1.25rem;
             line-height: 32px;
-            color: rgb(0, 0, 0);
+            color: $black;
         }
     }
     .modal-footer {

From 4bcffb29b9b0b90cf03ee5c366a25f8d4e73d33f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 16 Apr 2024 16:48:39 -0400
Subject: [PATCH 16/26] WIP update markup for ancillary pages found by Katie.

---
 src/layouts/address-lookup/address-lookup.vue | 265 ++++++++++--------
 .../address-vehicles/address-vehicles.vue     | 235 +++++++++-------
 .../capability-questions.vue                  | 105 ++++---
 .../license-plate-lookup.vue                  | 223 ++++++++-------
 .../molding-questions/molding-questions.vue   |  98 ++++---
 .../order-confirmation/order-confirmation.vue | 176 ++++++++----
 src/layouts/part-questions/part-questions.vue |  39 ++-
 src/layouts/payment-method/payment-method.vue | 242 +++++++++-------
 .../policy-endorsements.vue                   | 130 +++++----
 .../policy-holder-details.vue                 | 116 ++++----
 .../service-packages/service-packages.vue     | 100 +++----
 .../tpa-confirmation/tpa-confirmation.vue     | 154 ++++++----
 src/layouts/tpa-submit/tpa-submit.vue         |  16 +-
 13 files changed, 1094 insertions(+), 805 deletions(-)

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index f040fc93..58079a03 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -4,69 +4,67 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="select-car">
-                    <div class="container-fluid pb-2">
-                        <div class="row px-3">
-                            <div class="col">
-                                <div class="select-car-form rounded">
-                                    <vehicleBanner
-                                        ref="vehicleBanner"
-                                        class="mt-2 mb-4"
-                                        cmsWidgetName="VehicleBannerWidget"
-                                        :displayGenericVehicleImage="false" />
-                                    <siteSubHeader
-                                        ref="siteSubHeader"
-                                        cmsWidgetName="SiteSubHeaderWidget"
-                                        class="mb-5" />
-                                    <alert
-                                        v-if="displayVinNotFoundAlert"
-                                        ref="alertVinNotFound"
-                                        class="mb-4 mt-4"
-                                        cmsWidgetName="AlertVinNotFoundWidget"
-                                        alertClass="alert-danger"
-                                        :isDismissible="false" />
-                                    <alert
-                                        v-if="displayMatchedDifferentVehicleAlert"
-                                        ref="alertMatchedDifferentVehicle"
-                                        class="mb-4 mt-4"
-                                        :manualHeadline="AlertMatchedDifferentVehicleHeader"
-                                        :manualCopy="AlertMatchedDifferentVehicleBody"
-                                        alertClass="alert-warning"
-                                        :isDismissible="false" />
-                                    <alert
-                                        v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
-                                        ref="alertMatchedTwoIdenticalYMMVehicle"
-                                        class="mb-4 mt-4"
-                                        cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
-                                        :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
-                                        :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
-                                        alertClass="alert-warning"
-                                        :isDismissible="false" />
-                                    <alert
-                                        v-if="displayVinLookupByHomeAddressNotAllowedAlert"
-                                        ref="alertVinLookupsByHomeAddressNotAllowed"
-                                        class="mt-4"
-                                        cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
-                                        alertClass="alert-danger"
-                                        :isDismissible="false" />
-                                    <customerQuestions
-                                        ref="customerQuestions"
-                                        v-model="customerQuestions" />
-                                    <siteFooter
-                                        ref="siteFooter"
-                                        class="mt-5"
-                                        cmsWidgetName="SiteFooterWidget"
-                                        :isDisabled="!meta.valid"
-                                        :isForwardActionDisabled="!meta.valid"
-                                        @ForwardClicked="forwardButtonAction"
-                                        @backClicked="navigateBack" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+        <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 cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                        ref="vehicleBanner"
+                        class="mt-2 mb-4"
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+                    <siteSubHeader
+                        ref="siteSubHeader"
+                        cmsWidgetName="SiteSubHeaderWidget"
+                        class="mb-5" />
+                    <alert
+                        v-if="displayVinNotFoundAlert"
+                        ref="alertVinNotFound"
+                        class="mb-4 mt-4"
+                        cmsWidgetName="AlertVinNotFoundWidget"
+                        alertClass="alert-danger"
+                        :isDismissible="false" />
+                    <alert
+                        v-if="displayMatchedDifferentVehicleAlert"
+                        ref="alertMatchedDifferentVehicle"
+                        class="mb-4 mt-4"
+                        :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                        :manualCopy="AlertMatchedDifferentVehicleBody"
+                        alertClass="alert-warning"
+                        :isDismissible="false" />
+                    <alert
+                        v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+                        ref="alertMatchedTwoIdenticalYMMVehicle"
+                        class="mb-4 mt-4"
+                        cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+                        :manualHeadline="
+                            AlertMatchedTwoIdenticalYMMVehicleHeader
+                        "
+                        :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+                        alertClass="alert-warning"
+                        :isDismissible="false" />
+                    <alert
+                        v-if="displayVinLookupByHomeAddressNotAllowedAlert"
+                        ref="alertVinLookupsByHomeAddressNotAllowed"
+                        class="mt-4"
+                        cmsWidgetName="AlertVinLookupsByHomeAddressNotAllowedWidget"
+                        alertClass="alert-danger"
+                        :isDismissible="false" />
+                    <customerQuestions
+                        ref="customerQuestions"
+                        v-model="customerQuestions" />
+                    <siteFooter
+                        ref="siteFooter"
+                        class="mt-5"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isDisabled="!meta.valid"
+                        :isForwardActionDisabled="!meta.valid"
+                        @ForwardClicked="forwardButtonAction"
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -89,7 +87,10 @@ import { Form } from 'vee-validate';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import routerParams from '@/router/router-constants/router-params';
-import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper';
+import {
+    getDamageString,
+    isGlassAvailableForCarId,
+} from '@/helpers/damage-helper';
 
 import vinPagesMixin from '@/mixins/vin-pages-mixin';
 import { useMainStore } from '@/store/index.js';
@@ -104,7 +105,7 @@ export default {
         customerQuestions,
         alert,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [baseFormMixin, vinPagesMixin],
     async beforeRouteEnter(to, from, next) {
@@ -115,8 +116,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -137,7 +138,7 @@ export default {
             isCarIdDifferent: false,
             isSelectedGlassAvailableForVehicle: true,
             customAlertData: {},
-            forwardButtonCarStyle: ''
+            forwardButtonCarStyle: '',
         };
     },
     computed: {
@@ -151,10 +152,14 @@ export default {
             const vinYmmFound =
                 // eslint-disable-next-line max-len
                 `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected =
-                `${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model}`;
+            const vinYmmExpected = `${useMainStore().order.vehicle.year} ${
+                useMainStore().order.vehicle.make
+            } ${useMainStore().order.vehicle.model}`;
 
-            return this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
+            return this.getCmsContent(
+                'AlertMatchedDifferentVehicleWidget',
+                'BodyText'
+            )
                 .replaceAll('{custom:damage}', getDamageString())
                 .replaceAll('{custom:vinYmmFound}', vinYmmFound)
                 .replaceAll('{custom:vinYmmExpected}', vinYmmExpected);
@@ -171,9 +176,16 @@ export default {
                 `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model} ${this.customAlertData?.vehicleInfo?.style}`;
             const vinYmmsExpected =
                 // eslint-disable-next-line max-len
-                `${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model} ${useMainStore().order.vehicle.style}`;
+                `${useMainStore().order.vehicle.year} ${
+                    useMainStore().order.vehicle.make
+                } ${useMainStore().order.vehicle.model} ${
+                    useMainStore().order.vehicle.style
+                }`;
 
-            return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText')
+            return this.getCmsContent(
+                'AlertMatchedTwoIdenticalYMMVehicleWidget',
+                'BodyText'
+            )
                 .replaceAll('{custom:damage}', getDamageString())
                 .replaceAll('{custom:vinYmmsFound}', vinYmmsFound)
                 .replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected);
@@ -182,21 +194,24 @@ export default {
             const vinYmmFound =
                 // eslint-disable-next-line max-len
                 `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected =
-                `${useMainStore().order.vehicle.year} ${useMainStore().order.vehicle.make} ${useMainStore().order.vehicle.model}`;
-            return (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase());
-        }
+            const vinYmmExpected = `${useMainStore().order.vehicle.year} ${
+                useMainStore().order.vehicle.make
+            } ${useMainStore().order.vehicle.model}`;
+            return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
+        },
     },
     watch: {
         customerQuestions: {
             handler() {
-            // if they modify one of the lookup fields (address, city, state, zipCode, or lastName),
-            // then modify the button text back to "Get my personalized quote"
-                this.$refs.siteFooter.updateButtonText(this.getCmsContent('siteFooterWidget', 'ForwardButtonText'));
+                // if they modify one of the lookup fields (address, city, state, zipCode, or lastName),
+                // then modify the button text back to "Get my personalized quote"
+                this.$refs.siteFooter.updateButtonText(
+                    this.getCmsContent('siteFooterWidget', 'ForwardButtonText')
+                );
                 this.resetWarningsAndErrors();
             },
-            deep: true
-        }
+            deep: true,
+        },
     },
     mounted() {
         this.attachCustomEvents();
@@ -224,23 +239,24 @@ export default {
 
             const vinLookupResponse = useMainStore().lookupVinByAddress({
                 licenseLastName: this.customerQuestions.lastName,
-                licenseStreetAddress: this.customerQuestions.addressQuestions.streetAddress,
+                licenseStreetAddress:
+                    this.customerQuestions.addressQuestions.streetAddress,
                 licenseZip: this.customerQuestions.addressQuestions.zipCode,
-                licenseState: this.customerQuestions.addressQuestions.state
+                licenseState: this.customerQuestions.addressQuestions.state,
             });
 
             // Settle promises and get results
             const promiseResultMap = [
                 {
                     resultKey: 'vinLookupResponse',
-                    promise: vinLookupResponse
-                }
+                    promise: vinLookupResponse,
+                },
             ];
 
             const resultMap = await settleAllPromises(promiseResultMap);
             // If VIN Lookup by address is forbidden by State Restrictions then show an alert
             if (!resultMap.vinLookupResponse.isStatePermissible) {
-            // State Restrictions forbid lookup by address
+                // State Restrictions forbid lookup by address
                 this.displayVinLookupByHomeAddressNotAllowedAlert = true;
                 this.$refs.siteFooter.disableForwardButton();
                 return this.$refs.siteFooter.removeLoader();
@@ -250,12 +266,16 @@ export default {
 
             // Handle cases for different amounts of VINS found for the address.
             if (carsFound.length === 1) {
-            // Single VIN found
+                // Single VIN found
                 const carFound = carsFound[0].vehicle;
 
-                this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
-                if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
-                // Display Alert
+                this.isCarIdDifferent =
+                    carFound.carId !== useMainStore().order.vehicle.carId;
+                if (
+                    this.isCarIdDifferent &&
+                    carFound.carId !== this.previouslyEnteredCarId
+                ) {
+                    // Display Alert
                     this.previouslyEnteredCarId = carFound.carId;
                     this.customAlertData.vehicleInfo = carFound;
                     if (this.isTwoIdenticalYMMVehicleFound) {
@@ -265,28 +285,39 @@ export default {
                         this.displayMatchedDifferentVehicleAlert = true;
                     }
 
-                    this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(carFound.carId);
+                    this.isSelectedGlassAvailableForVehicle =
+                        await isGlassAvailableForCarId(carFound.carId);
 
                     // Update button "Continue with..."
                     this.$refs.siteFooter
                         // eslint-disable-next-line max-len
-                        .updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`);
+                        .updateButtonText(
+                            `Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`
+                        );
                     return this.$refs.siteFooter.removeLoader();
                 }
 
                 // update data
-                vehicleInfoToCommit = Object.assign(carFound, { vin: carsFound[0].vin });
+                vehicleInfoToCommit = Object.assign(carFound, {
+                    vin: carsFound[0].vin,
+                });
             } else if (carsFound.length > 1) {
                 // If multiple cars were found and one and only one of them matches the carId entered, save the vehicle info
-                const matchingCars = carsFound.filter((vin) => vin.vehicle.carId === useMainStore().order.vehicle.carId);
+                const matchingCars = carsFound.filter(
+                    (vin) =>
+                        vin.vehicle.carId === useMainStore().order.vehicle.carId
+                );
 
                 if (matchingCars.length === 1) {
-                    vehicleInfoToCommit = Object.assign(matchingCars[0].vehicle, {
-                        vin: matchingCars[0].vin
-                    });
+                    vehicleInfoToCommit = Object.assign(
+                        matchingCars[0].vehicle,
+                        {
+                            vin: matchingCars[0].vin,
+                        }
+                    );
                 }
             } else {
-            // No VINS found.
+                // No VINS found.
                 this.displayVinNotFoundAlert = true;
                 this.$refs.siteFooter.disableForwardButton();
                 return this.$refs.siteFooter.removeLoader();
@@ -295,19 +326,23 @@ export default {
             // Save vehicle, customer, service and registration information
             await useMainStore().saveRegistrationAddressLookup(
                 {
-                    isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
+                    isSelectedGlassAvailableForVehicle:
+                        this.isSelectedGlassAvailableForVehicle,
                     vehicleInfo:
-                    Object.keys(vehicleInfoToCommit).length === 0
-                        ? null
-                        : vehicleInfoToCommit,
+                        Object.keys(vehicleInfoToCommit).length === 0
+                            ? null
+                            : vehicleInfoToCommit,
                     registrationInfo: {
                         firstName: this.customerQuestions.firstName,
                         lastName: this.customerQuestions.lastName,
-                        address: this.customerQuestions.addressQuestions.streetAddress,
+                        address:
+                            this.customerQuestions.addressQuestions
+                                .streetAddress,
                         city: this.customerQuestions.addressQuestions.city,
                         state: this.customerQuestions.addressQuestions.state,
-                        zipCode: this.customerQuestions.addressQuestions.zipCode
-                    }
+                        zipCode:
+                            this.customerQuestions.addressQuestions.zipCode,
+                    },
                 },
                 false
             );
@@ -315,15 +350,18 @@ export default {
             return this.navigateForward(carsFound);
         },
         async navigateForward(carsFound) {
-        // Match vehicles found to vehicles in state.
-            const matchingCars = carsFound.filter((car) => car.vehicle.carId === useMainStore().order.vehicle.carId);
+            // Match vehicles found to vehicles in state.
+            const matchingCars = carsFound.filter(
+                (car) =>
+                    car.vehicle.carId === useMainStore().order.vehicle.carId
+            );
 
             // If a different vehicle is found than the one entered and the selected glass
             // is not available for that vehicle then navigate back to "vehicle-damage"
             // display vehicle changed alert on that page.
             if (
-                this.isCarIdDifferent
-            && !this.isSelectedGlassAvailableForVehicle
+                this.isCarIdDifferent &&
+                !this.isSelectedGlassAvailableForVehicle
             ) {
                 this.$router.navigate(
                     this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
@@ -335,7 +373,8 @@ export default {
                 await this.navigateForwardWithSingleCarMatch();
             } else {
                 this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
+                    this.navigationScenarios
+                        .CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES,
                     this.$route,
                     {},
                     {},
@@ -348,7 +387,7 @@ export default {
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayVinLookupByHomeAddressNotAllowedAlert = false;
             this.$refs.siteFooter.enableForwardAction();
-        }
-    }
+        },
+    },
 };
 </script>
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 142eee57..397b0f69 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -1,66 +1,84 @@
 <template>
-  <Form
-    ref="theForm"
-    v-slot="{ meta }"
-    @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit">
-    <div class="page-container-grouped-styles">
-      <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <div class="fade-on-route-transition sub-container overflow-scroll px-5">
-        <vehicleBanner
-          class="mt-2 mb-4"
-          cmsWidgetName="VehicleBannerWidget"
-          :displayGenericVehicleImage="false" />
-        <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-        <alert
-          id="multiple-vehicles-alert"
-          ref="alertFoundMultipleVehicles"
-          cmsWidgetName="FoundMultipleVehicles"
-          class="my-5"
-          alertClass="alert-warning"
-          :manualHeadline="AlertFoundMultipleVehiclesHeader"
-          manualCopy=""
-          :isDismissible="false" />
-        <addressVehiclesQuestion
-          ref="addressVehiclesQuestion"
-          v-model="selectedVehicleVin"
-          cmsWidgetName="VehicleConfirmationQuestion"
-          :vehicles="VehiclesForQuestions"
-          :vehicleSelected="VehicleSelected"
-          validationRules="vehicle-required"
-          :isCarIdDifferent="isCarIdDifferent"
-          :displayMatchedDifferentVehicleAlert="displayMatchedDifferentVehicleAlert"
-          :displayMatchedTwoIdenticalYMMVehicleAlert="displayMatchedTwoIdenticalYMMVehicleAlert" />
-      <div
-        v-if="splitAlertProvideVinBodyForLink.length"
-        class="alert-provide-vin my-3">
-        <span
-            v-for="copy in splitAlertProvideVinBodyForLink"
-            :key="copy">
-          <span
-            v-if="doesCopyContainRouterLink(copy)"
-            class="text-body">
-            <router-link
-              :to="{
-                query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
-                name: 'root',
-              }">{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link>
-          </span>
-          <span
-            v-else
-            class="m-0 text-body"
-            v-html="copy"></span>
-        </span>
-      </div>
-      <siteFooter
-        ref="siteFooter"
-        cmsWidgetName="SiteFooterWidget"
-        :isForwardActionDisabled="!meta.valid"
-        @backClicked="navigateBack"
-        @forwardClicked="forwardButtonAction" />
-      </div>
-    </div>
-  </Form>
+    <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 px-0 px-md-2">
+                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                        class="mt-2 mb-4"
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                    <alert
+                        id="multiple-vehicles-alert"
+                        ref="alertFoundMultipleVehicles"
+                        cmsWidgetName="FoundMultipleVehicles"
+                        class="my-5"
+                        alertClass="alert-warning"
+                        :manualHeadline="AlertFoundMultipleVehiclesHeader"
+                        manualCopy=""
+                        :isDismissible="false" />
+                    <addressVehiclesQuestion
+                        ref="addressVehiclesQuestion"
+                        v-model="selectedVehicleVin"
+                        cmsWidgetName="VehicleConfirmationQuestion"
+                        :vehicles="VehiclesForQuestions"
+                        :vehicleSelected="VehicleSelected"
+                        validationRules="vehicle-required"
+                        :isCarIdDifferent="isCarIdDifferent"
+                        :displayMatchedDifferentVehicleAlert="
+                            displayMatchedDifferentVehicleAlert
+                        "
+                        :displayMatchedTwoIdenticalYMMVehicleAlert="
+                            displayMatchedTwoIdenticalYMMVehicleAlert
+                        " />
+                    <div
+                        v-if="splitAlertProvideVinBodyForLink.length"
+                        class="alert-provide-vin my-3">
+                        <span
+                            v-for="copy in splitAlertProvideVinBodyForLink"
+                            :key="copy">
+                            <span
+                                v-if="doesCopyContainRouterLink(copy)"
+                                class="text-body">
+                                <router-link
+                                    :to="{
+                                        query: {
+                                            issPage: `${getRouterLinkRouteFromCopy(
+                                                copy
+                                            )}`,
+                                        },
+                                        name: 'root',
+                                    }"
+                                    >{{
+                                        getRouterLinkDisplayTextFromCopy(copy)
+                                    }}</router-link
+                                >
+                            </span>
+                            <span
+                                v-else
+                                class="m-0 text-body"
+                                v-html="copy"></span>
+                        </span>
+                    </div>
+                    <siteFooter
+                        ref="siteFooter"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @backClicked="navigateBack"
+                        @forwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
 </template>
 
 <script>
@@ -77,7 +95,7 @@ import {
     doesCopyContainRouterLink,
     splitCopyOnCMSPlaceHolder,
     getRouterLinkRouteFromCopy,
-    getRouterLinkDisplayTextFromCopy
+    getRouterLinkDisplayTextFromCopy,
 } from '@/helpers/cms-content-helper.js';
 import routerParams from '@/router/router-constants/router-params';
 import vinPagesMixin from '@/mixins/vin-pages-mixin';
@@ -104,7 +122,7 @@ export default {
         Form,
         vehicleBanner,
         alert,
-        addressVehiclesQuestion
+        addressVehiclesQuestion,
     },
     mixins: [baseFormMixin, vinPagesMixin],
     async beforeRouteEnter(to, from, next) {
@@ -114,8 +132,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -125,7 +143,7 @@ export default {
         });
     },
     props: {
-        validationRules: String
+        validationRules: String,
     },
     setup() {
         const mainStore = useMainStore();
@@ -140,7 +158,7 @@ export default {
             displayMatchedDifferentVehicleAlert: false,
             displayMatchedTwoIdenticalYMMVehicleAlert: false,
             previouslyEnteredCarId: '',
-            forwardButtonCarStyle: ''
+            forwardButtonCarStyle: '',
         };
     },
     computed: {
@@ -154,11 +172,9 @@ export default {
             ).replaceAll('{custom:vehicleCount}', this.vehicleCount);
         },
         isTwoIdenticalYMMVehicleFound() {
-            const vinYmmFound =
-                `${this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model}`;
-            const vinYmmExpected =
-                `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-            return (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase());
+            const vinYmmFound = `${this.selectedVehicle?.vehicle.year} ${this.selectedVehicle?.vehicle.make} ${this.selectedVehicle?.vehicle.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
         },
         AlertProvideVinBody() {
             return this.getCmsContent('ProvideVinAlert', 'BodyText');
@@ -178,7 +194,7 @@ export default {
                     vehicle: v.vehicle,
                     Text: `${v.vehicle.year} ${v.vehicle.make} ${v.vehicle.model}`,
                     Name: v.vin,
-                    SubText: `VIN ${vinStart}${vinEnd}`
+                    SubText: `VIN ${vinStart}${vinEnd}`,
                 };
             });
             return mappedData;
@@ -187,11 +203,13 @@ export default {
             return useMainStore().pageData(issPageValues.ADDRESS_VEHICLES);
         },
         selectedVehicle() {
-            return this.VehiclesForQuestions.find(({ vin }) => vin === this.selectedVehicleVin);
+            return this.VehiclesForQuestions.find(
+                ({ vin }) => vin === this.selectedVehicleVin
+            );
         },
         VehicleSelected() {
             return this.mainStore.order.vehicle;
-        }
+        },
     },
     watch: {
         selectedVehicleVin: {
@@ -199,10 +217,15 @@ export default {
                 this.resetWarningsAndErrors();
                 // does this vehicle match the previously selected carId?
                 this.isCarIdDifferent =
-                    this.selectedVehicle?.vehicle.carId !== useMainStore().vehicle.carId;
-                if (this.isCarIdDifferent
-                    && this.selectedVehicle?.vehicle.carId !== this.previouslyEnteredCarId) {
-                    this.previouslyEnteredCarId = this.selectedVehicle?.vehicle.carId;
+                    this.selectedVehicle?.vehicle.carId !==
+                    useMainStore().vehicle.carId;
+                if (
+                    this.isCarIdDifferent &&
+                    this.selectedVehicle?.vehicle.carId !==
+                        this.previouslyEnteredCarId
+                ) {
+                    this.previouslyEnteredCarId =
+                        this.selectedVehicle?.vehicle.carId;
                     if (this.isTwoIdenticalYMMVehicleFound) {
                         const carStyle = this.selectedVehicle?.vehicle.style;
                         this.displayMatchedTwoIdenticalYMMVehicleAlert = true;
@@ -210,15 +233,21 @@ export default {
                     } else {
                         this.displayMatchedDifferentVehicleAlert = true;
                     }
-                    this.$refs.siteFooter
-                        .updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} `
-                            + `${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model} ${this.forwardButtonCarStyle}`);
+                    this.$refs.siteFooter.updateButtonText(
+                        `Continue with ${this.selectedVehicle.vehicle.year} ` +
+                            `${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model} ${this.forwardButtonCarStyle}`
+                    );
                 } else {
-                    this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
+                    this.$refs.siteFooter.updateButtonText(
+                        this.getCmsContent(
+                            'SiteFooterWidget',
+                            'ForwardButtonText'
+                        )
+                    );
                 }
             },
-            deep: true
-        }
+            deep: true,
+        },
     },
     methods: {
         doesCopyContainRouterLink,
@@ -240,14 +269,15 @@ export default {
             if (!vinLookup) {
                 return;
             }
-            this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.carId);
+            this.isSelectedGlassAvailableForVehicle =
+                await isGlassAvailableForCarId(vinLookup.data.carId);
             await useMainStore().saveVin(
                 {
                     vehicleInfo: Object.assign(this.selectedVehicle.vehicle, {
-                        vin: this.selectedVehicle.vin
+                        vin: this.selectedVehicle.vin,
                     }),
                     isSelectedGlassAvailableForVehicle:
-                    this.isSelectedGlassAvailableForVehicle
+                        this.isSelectedGlassAvailableForVehicle,
                 },
                 false
             );
@@ -257,7 +287,10 @@ export default {
         async navigateForward() {
             // If the vehicle selected on this page is different from the one originally entered and the selected glass is not available
             // for that vehicle, then navigate back to "vehicle-damage" and display vehicle changed alert on that page.
-            if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
+            if (
+                this.isCarIdDifferent &&
+                !this.isSelectedGlassAvailableForVehicle
+            ) {
                 this.$router.navigate(
                     this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
                     this.$route,
@@ -272,28 +305,28 @@ export default {
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayMatchedTwoIdenticalYMMVehicleAlert = false;
             this.forwardButtonCarStyle = '';
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
 .alert-provide-vin {
-  font-size: 0.875rem;
-  line-height: 1.4;
-  a {
-     //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
-    text-underline-offset: 4px;
-    line-height: inherit;
-  }
+    font-size: 0.875rem;
+    line-height: 1.4;
+    a {
+        //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
+        text-underline-offset: 4px;
+        line-height: inherit;
+    }
 }
 
 #multiple-vehicles-alert p {
-  margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
+    margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
 }
 
 .overflow-scroll {
     height: calc(100% - 180px);
-    overflow-X: hidden !important;
+    overflow-x: hidden !important;
 }
 </style>
diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue
index bfa557f0..c47b4e35 100644
--- a/src/layouts/capability-questions/capability-questions.vue
+++ b/src/layouts/capability-questions/capability-questions.vue
@@ -1,22 +1,22 @@
 <template>
-  <Form
-    ref="theForm"
-    v-slot="{ meta }"
-    @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit">
-    <questionsPageLayout
-        ref="questionsPageLayout"
-        v-model="selectedAnswers"
-        isRequired
-        :isMetaValid="meta.valid"
-        :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
-        :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
-        :questionsData="questionsData"
-        :validationRules="rules.optionRequired"
-        :index="currentGlassIndex"
-        @forwardButtonAction="forwardButtonAction"
-        @backClick="navigateBackByVehicleQuestions" />
-  </Form>
+    <Form
+        ref="theForm"
+        v-slot="{ meta }"
+        @submit="onSubmit"
+        @invalidSubmit="onInvalidSubmit">
+        <questionsPageLayout
+            ref="questionsPageLayout"
+            v-model="selectedAnswers"
+            isRequired
+            :isMetaValid="meta.valid"
+            :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
+            :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
+            :questionsData="questionsData"
+            :validationRules="rules.optionRequired"
+            :index="currentGlassIndex"
+            @forwardButtonAction="forwardButtonAction"
+            @backClick="navigateBackByVehicleQuestions" />
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -37,7 +37,7 @@ export default {
     components: {
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        questionsPageLayout
+        questionsPageLayout,
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
@@ -47,8 +47,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -63,36 +63,49 @@ export default {
             selectedAnswers: {},
             currentGlassIndex: 0,
             rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            }
+                optionRequired: globalRules.OPTION_REQUIRED,
+            },
         };
     },
     computed: {
         AlertFewMoreQuestionsHeader() {
-            return this.getCmsContent('AdditionalPartsQuestionsAlert', 'HeadlineText');
+            return this.getCmsContent(
+                'AdditionalPartsQuestionsAlert',
+                'HeadlineText'
+            );
         },
         AlertFewMoreQuestionsCopy() {
-            return this.getCmsContent('AdditionalPartsQuestionsAlert', 'BodyText');
+            return this.getCmsContent(
+                'AdditionalPartsQuestionsAlert',
+                'BodyText'
+            );
         },
         partsOrQuestionsData() {
             return useMainStore().pageData(issPageValues.CAPABILITY_QUESTIONS)
                 .partsOrQuestions;
-        }
+        },
     },
     mounted() {
         this.getInitialQuestionData();
     },
     methods: {
         arePagePrerequisitesValid() {
-            const capabilityQuestionsFromPageData = useMainStore().pageData(issPageValues.CAPABILITY_QUESTIONS);
+            const capabilityQuestionsFromPageData = useMainStore().pageData(
+                issPageValues.CAPABILITY_QUESTIONS
+            );
             return (
-                capabilityQuestionsFromPageData?.partsOrQuestions?.some((part) => part?.glassName)
-                && capabilityQuestionsFromPageData?.partsOrQuestions?.some((part) => part?.capabilityQuestions?.length > 0)
+                capabilityQuestionsFromPageData?.partsOrQuestions?.some(
+                    (part) => part?.glassName
+                ) &&
+                capabilityQuestionsFromPageData?.partsOrQuestions?.some(
+                    (part) => part?.capabilityQuestions?.length > 0
+                )
             );
         },
         getInitialQuestionData() {
             // get any questions that were already answered
-            const alreadyAnsweredQuestions = useMainStore().damage.capabilityQuestionAnswers;
+            const alreadyAnsweredQuestions =
+                useMainStore().damage.capabilityQuestionAnswers;
             this.questionsData = this.partsOrQuestionsData
                 .filter((x) => x.capabilityQuestions)
                 .map((glass, index) => {
@@ -111,7 +124,10 @@ export default {
                         `selectedAnswers.${glass.answerKey}`,
                         (newValue) => {
                             if (newValue && Object.keys(newValue).length > 0) {
-                                this.handleAnswerUpdates(newValue, glass.answerKey);
+                                this.handleAnswerUpdates(
+                                    newValue,
+                                    glass.answerKey
+                                );
                             }
                         },
                         { deep: true }
@@ -124,7 +140,9 @@ export default {
                 // get answerResult2 of returned answer
                 let selectedAnswerResult2;
                 glass.questions.forEach((q) => {
-                    const idx = q.answers.findIndex((a) => a.answerResult === glass.answerData.answerResult);
+                    const idx = q.answers.findIndex(
+                        (a) => a.answerResult === glass.answerData.answerResult
+                    );
                     if (idx !== -1) {
                         selectedAnswerResult2 = q.answers[idx].answerResult2;
                     }
@@ -136,7 +154,7 @@ export default {
                     result1: glass.answerData.answerResult,
                     result2: selectedAnswerResult2,
                     answeredQuestions: glass.answerData.answeredQuestions,
-                    isSuppressedPart: glass.isSuppressedPart
+                    isSuppressedPart: glass.isSuppressedPart,
                 };
             });
             // clear out answerData for future page loads; must occur prior to store save
@@ -144,22 +162,25 @@ export default {
                 glass.answerData = {};
             });
             // save to store as order.damage.moldingQuestionArrays (array)
-            await this.mainStore.saveCapabilityQuestionAnswers(questionAnswersArray);
+            await this.mainStore.saveCapabilityQuestionAnswers(
+                questionAnswersArray
+            );
             // get parts from the capabilityQuestionAnswers
             const partsOrQuestions = this.partsOrQuestionsData;
             // eslint-disable-next-line no-restricted-syntax
             for (const answer of questionAnswersArray) {
-                partsOrQuestions.find((partOrQuestion) => (
-                    partOrQuestion.glassLocation === answer.glassLocation
-                        && partOrQuestion.glassName === answer.glassName
-                )).parts[0].childParts = [
+                partsOrQuestions.find(
+                    (partOrQuestion) =>
+                        partOrQuestion.glassLocation === answer.glassLocation &&
+                        partOrQuestion.glassName === answer.glassName
+                ).parts[0].childParts = [
                     {
-                        partNumber: answer.partNum
-                    }
+                        partNumber: answer.partNum,
+                    },
                 ];
             }
             this.navigateForward(partsOrQuestions, null);
-        }
-    }
+        },
+    },
 };
 </script>
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 3128d9e9..a58830d5 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -4,72 +4,70 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="select-car">
-                    <div class="container-fluid pb-2">
-                        <div class="row px-3">
-                            <div class="col">
-                                <div class="select-car-form rounded">
-                                    <vehicleBanner
-                                        class="mt-2 mb-4"
-                                        cmsWidgetName="VehicleBannerWidget"
-                                        :displayGenericVehicleImage="false" />
-                                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-                                    <alert
-                                        v-if="displayVinNotFoundAlert"
-                                        ref="alertVinNotFound"
-                                        class="mb-4"
-                                        cmsWidgetName="AlertVinNotFoundWidget"
-                                        alertClass="alert-danger"
-                                        :isDismissible="false" />
-                                    <alert
-                                        v-if="displayMatchedDifferentVehicleAlert"
-                                        ref="alertMatchedDifferentVehicle"
-                                        class="mb-4"
-                                        cmsWidgetName="AlertMatchedDifferentVehicleWidget"
-                                        :manualHeadline="AlertMatchedDifferentVehicleHeader"
-                                        :manualCopy="AlertMatchedDifferentVehicleBody"
-                                        alertClass="alert-warning"
-                                        :isDismissible="false" />
-                                    <alert
-                                        v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
-                                        ref="alertMatchedTwoIdenticalYMMVehicle"
-                                        class="mb-4"
-                                        cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
-                                        :manualHeadline="AlertMatchedTwoIdenticalYMMVehicleHeader"
-                                        :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
-                                        alertClass="alert-warning"
-                                        :isDismissible="false" />
-                                    <textboxQuestion
-                                        id="license-plate-question-wrapper"
-                                        v-model="licensePlate"
-                                        cmsWidgetName="LicensePlateNumberQuestionWidget"
-                                        isRequired
-                                        disableAutoFill
-                                        inputId="license-plate-question"
-                                        validationRules="license-plate-required" />
-                                    <dropdownQuestion
-                                        ref="state"
-                                        v-model="licenseState"
-                                        cmsWidgetName="StateQuestionWidget"
-                                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-                                        :options="stateOptions"
-                                        disableAutoFill
-                                        validationRules="state-required"
-                                        class="mt-4 mb-2" />
-                                    <siteFooter
-                                        ref="siteFooter"
-                                        class="mt-5"
-                                        :isForwardActionDisabled="!meta.valid"
-                                        cmsWidgetName="SiteFooterWidget"
-                                        @backClicked="navigateBack"
-                                        @forwardClicked="forwardButtonAction" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+        <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 cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                        class="mt-2 mb-4"
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                    <alert
+                        v-if="displayVinNotFoundAlert"
+                        ref="alertVinNotFound"
+                        class="mb-4"
+                        cmsWidgetName="AlertVinNotFoundWidget"
+                        alertClass="alert-danger"
+                        :isDismissible="false" />
+                    <alert
+                        v-if="displayMatchedDifferentVehicleAlert"
+                        ref="alertMatchedDifferentVehicle"
+                        class="mb-4"
+                        cmsWidgetName="AlertMatchedDifferentVehicleWidget"
+                        :manualHeadline="AlertMatchedDifferentVehicleHeader"
+                        :manualCopy="AlertMatchedDifferentVehicleBody"
+                        alertClass="alert-warning"
+                        :isDismissible="false" />
+                    <alert
+                        v-if="displayMatchedTwoIdenticalYMMVehicleAlert"
+                        ref="alertMatchedTwoIdenticalYMMVehicle"
+                        class="mb-4"
+                        cmsWidgetName="AlertMatchedTwoIdenticalYMMVehicleWidget"
+                        :manualHeadline="
+                            AlertMatchedTwoIdenticalYMMVehicleHeader
+                        "
+                        :manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
+                        alertClass="alert-warning"
+                        :isDismissible="false" />
+                    <textboxQuestion
+                        id="license-plate-question-wrapper"
+                        v-model="licensePlate"
+                        cmsWidgetName="LicensePlateNumberQuestionWidget"
+                        isRequired
+                        disableAutoFill
+                        inputId="license-plate-question"
+                        validationRules="license-plate-required" />
+                    <dropdownQuestion
+                        ref="state"
+                        v-model="licenseState"
+                        cmsWidgetName="StateQuestionWidget"
+                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                        :options="stateOptions"
+                        disableAutoFill
+                        validationRules="state-required"
+                        class="mt-4 mb-2" />
+                    <siteFooter
+                        ref="siteFooter"
+                        class="mt-5"
+                        :isForwardActionDisabled="!meta.valid"
+                        cmsWidgetName="SiteFooterWidget"
+                        @backClicked="navigateBack"
+                        @forwardClicked="forwardButtonAction" />
                 </div>
             </div>
         </div>
@@ -83,7 +81,10 @@ import { useMainStore } from '@/store';
 import errorMessages from '@/constants/error-messages';
 import { required } from '@/helpers/validation-rules';
 import { defineRule, Form } from 'vee-validate';
-import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper.js';
+import {
+    getDamageString,
+    isGlassAvailableForCarId,
+} from '@/helpers/damage-helper.js';
 import routerParams from '@/router/router-constants/router-params.js';
 import states from '@/constants/states';
 
@@ -100,7 +101,10 @@ import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-qu
 import alert from '@/ux-components/alert/alert.vue';
 
 // Define Validation Rules
-defineRule('license-plate-required', required(errorMessages.LICENSE_PLATE_REQUIRED));
+defineRule(
+    'license-plate-required',
+    required(errorMessages.LICENSE_PLATE_REQUIRED)
+);
 defineRule('state-required', required(errorMessages.STATE_REQUIRED));
 
 export default {
@@ -114,7 +118,7 @@ export default {
         vehicleBanner,
         textboxQuestion,
         dropdownQuestion,
-        alert
+        alert,
     },
     mixins: [baseFormMixin, vinPagesMixin],
     async beforeRouteEnter(to, from, next) {
@@ -125,8 +129,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -149,7 +153,7 @@ export default {
             isCarIdDifferent: false,
             customAlertData: {},
             isSelectedGlassAvailableForVehicle: true,
-            forwardButtonCarStyle: ''
+            forwardButtonCarStyle: '',
         };
     },
     computed: {
@@ -163,10 +167,12 @@ export default {
             const vinYmmFound =
                 // eslint-disable-next-line max-len
                 `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected =
-                `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
 
-            return this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
+            return this.getCmsContent(
+                'AlertMatchedDifferentVehicleWidget',
+                'BodyText'
+            )
                 .replaceAll('{custom:damage}', getDamageString())
                 .replaceAll('{custom:vinYmmFound}', vinYmmFound)
                 .replaceAll('{custom:vinYmmExpected}', vinYmmExpected);
@@ -185,7 +191,10 @@ export default {
                 // eslint-disable-next-line max-len
                 `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`;
 
-            return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText')
+            return this.getCmsContent(
+                'AlertMatchedTwoIdenticalYMMVehicleWidget',
+                'BodyText'
+            )
                 .replaceAll('{custom:damage}', getDamageString())
                 .replaceAll('{custom:vinYmmsFound}', vinYmmsFound)
                 .replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected);
@@ -194,23 +203,26 @@ export default {
             const vinYmmFound =
                 // eslint-disable-next-line max-len
                 `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-            const vinYmmExpected =
-                `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
-            return (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase());
+            const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
+            return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
         },
         stateOptions: {
             get() {
                 return states;
-            }
-        }
+            },
+        },
     },
     watch: {
         licensePlate() {
-            this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
+            this.$refs.siteFooter.updateButtonText(
+                this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
+            );
         },
         registrationZipCode() {
-            this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
-        }
+            this.$refs.siteFooter.updateButtonText(
+                this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
+            );
+        },
     },
     mounted() {
         this.attachCustomEvents();
@@ -221,7 +233,8 @@ export default {
             return useMainStore().order.vehicle.carId !== null;
         },
         loadDefaultsFromStore() {
-            this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
+            this.customerQuestions =
+                this.mainStore.customerData.addressQuestions.state;
         },
         attachCustomEvents() {
             this.prependActionToMethod(this, this.forwardButtonAction, () => {
@@ -238,14 +251,17 @@ export default {
             this.resetWarningsAndErrors();
 
             // Lookup VIN
-            const vinLookupResponse = await useMainStore().lookupVinByPlate(this.licensePlate, this.licenseState);
+            const vinLookupResponse = await useMainStore().lookupVinByPlate(
+                this.licensePlate,
+                this.licenseState
+            );
 
             // Settle promises and get results
             const promiseResultMap = [
                 {
                     resultKey: 'vinLookupResponse',
-                    promise: vinLookupResponse
-                }
+                    promise: vinLookupResponse,
+                },
             ];
 
             const resultMap = await settleAllPromises(promiseResultMap);
@@ -265,8 +281,8 @@ export default {
                 vehicleFromLookup.carId !== useMainStore().order.vehicle.carId;
             // Handle changing car
             if (
-                this.isCarIdDifferent
-                    && vehicleFromLookup.carId !== this.previouslyEnteredCarId
+                this.isCarIdDifferent &&
+                vehicleFromLookup.carId !== this.previouslyEnteredCarId
             ) {
                 // Display Alert
                 this.previouslyEnteredCarId = vehicleFromLookup.carId;
@@ -279,24 +295,30 @@ export default {
                     this.displayMatchedDifferentVehicleAlert = true;
                 }
 
-                this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleFromLookup.carId);
+                this.isSelectedGlassAvailableForVehicle =
+                    await isGlassAvailableForCarId(vehicleFromLookup.carId);
 
                 // Update button "Continue with..."
                 this.$refs.siteFooter
                     // eslint-disable-next-line max-len
-                    .updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
+                    .updateButtonText(
+                        `Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`
+                    );
                 return this.$refs.siteFooter.removeLoader();
             }
 
             // Save vehicle, license plate, and registration information
             await useMainStore().saveRegistrationLicensePlateLookup(
                 {
-                    isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle,
-                    vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }),
+                    isSelectedGlassAvailableForVehicle:
+                        this.isSelectedGlassAvailableForVehicle,
+                    vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, {
+                        vin: vinLookupResponse.data.vin,
+                    }),
                     registrationInfo: {
                         licensePlate: this.licensePlate,
-                        state: this.licenseState
-                    }
+                        state: this.licenseState,
+                    },
                 },
                 false
             );
@@ -307,7 +329,10 @@ export default {
             // If a different vehicle is found than the one entered and the selected glass is
             // not available for that vehicle then navigate back to "vehicle-damage"
             // display vehicle changed alert on that page.
-            if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
+            if (
+                this.isCarIdDifferent &&
+                !this.isSelectedGlassAvailableForVehicle
+            ) {
                 this.$router.navigate(
                     this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
                     this.$route,
@@ -321,8 +346,8 @@ export default {
         resetWarningsAndErrors() {
             this.displayVinNotFoundAlert = false;
             this.displayMatchedDifferentVehicleAlert = false;
-        }
-    }
+        },
+    },
 };
 </script>
 
diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue
index db7a7243..4926db11 100644
--- a/src/layouts/molding-questions/molding-questions.vue
+++ b/src/layouts/molding-questions/molding-questions.vue
@@ -1,23 +1,23 @@
 <template>
-  <Form
-    ref="theForm"
-    v-slot="{ meta }"
-    @submit="onSubmit"
-    @invalidSubmit="onInvalidSubmit">
-    <questionsPageLayout
-      id="molding-question-wrapper"
-      ref="questionsPageLayout"
-      v-model="selectedAnswers"
-      isRequired
-      :isMetaValid="meta.valid"
-      :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
-      :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
-      :questionsData="questionsData"
-      :validationRules="rules.optionRequired"
-      :index="currentGlassIndex"
-      @forwardButtonAction="forwardButtonAction"
-      @backClick="navigateBackByVehicleQuestions" />
-  </Form>
+    <Form
+        ref="theForm"
+        v-slot="{ meta }"
+        @submit="onSubmit"
+        @invalidSubmit="onInvalidSubmit">
+        <questionsPageLayout
+            id="molding-question-wrapper"
+            ref="questionsPageLayout"
+            v-model="selectedAnswers"
+            isRequired
+            :isMetaValid="meta.valid"
+            :alertFewMoreQuestionsHeader="AlertFewMoreQuestionsHeader"
+            :alertFewMoreQuestionsCopy="AlertFewMoreQuestionsCopy"
+            :questionsData="questionsData"
+            :validationRules="rules.optionRequired"
+            :index="currentGlassIndex"
+            @forwardButtonAction="forwardButtonAction"
+            @backClick="navigateBackByVehicleQuestions" />
+    </Form>
 </template>
 <script>
 // Import Supporting Files
@@ -38,7 +38,7 @@ export default {
     components: {
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        questionsPageLayout
+        questionsPageLayout,
     },
     mixins: [BaseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
@@ -48,8 +48,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -64,8 +64,8 @@ export default {
             selectedAnswers: {},
             currentGlassIndex: 0,
             rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            }
+                optionRequired: globalRules.OPTION_REQUIRED,
+            },
         };
     },
     computed: {
@@ -76,23 +76,34 @@ export default {
             );
         },
         AlertFewMoreQuestionsCopy() {
-            return this.getCmsContent('AdditionalPartsQuestionsAlert', 'BodyText');
+            return this.getCmsContent(
+                'AdditionalPartsQuestionsAlert',
+                'BodyText'
+            );
         },
         partsOrQuestionsData() {
             return useMainStore().pageData(issPageValues.MOLDING_QUESTIONS)
                 .partsOrQuestions;
-        }
+        },
     },
     mounted() {
         this.getInitialQuestionData();
     },
     methods: {
         arePagePrerequisitesValid() {
-            const moldingQuestionsFromPageData = useMainStore().pageData(issPageValues.MOLDING_QUESTIONS);
+            const moldingQuestionsFromPageData = useMainStore().pageData(
+                issPageValues.MOLDING_QUESTIONS
+            );
             return (
-            // has childPartQuestions array and has glassName not null
-                moldingQuestionsFromPageData?.partsOrQuestions?.some((part) => part?.glassName)
-        && moldingQuestionsFromPageData.partsOrQuestions.some((glass) => glass.parts?.some((part) => part?.childPartQuestions?.length > 0))
+                // has childPartQuestions array and has glassName not null
+                moldingQuestionsFromPageData?.partsOrQuestions?.some(
+                    (part) => part?.glassName
+                ) &&
+                moldingQuestionsFromPageData.partsOrQuestions.some((glass) =>
+                    glass.parts?.some(
+                        (part) => part?.childPartQuestions?.length > 0
+                    )
+                )
             );
         },
         getInitialQuestionData() {
@@ -134,41 +145,44 @@ export default {
                 glassName: glass.glassName,
                 partNum: glass.answerData.answerResult,
                 answeredQuestions: glass.answerData.answeredQuestions,
-                isSuppressedPart: glass.isSuppressedPart
+                isSuppressedPart: glass.isSuppressedPart,
             }));
             // clear out answerData for future page loads; must occur prior to store save
             this.questionsData.forEach((glass) => {
                 glass.answerData = {};
             });
             // save to store as order.damage.moldingQuestionArrays (array)
-            await this.mainStore.saveMoldingQuestionAnswers(questionAnswersArray);
+            await this.mainStore.saveMoldingQuestionAnswers(
+                questionAnswersArray
+            );
 
             // get parts from the questionAnswers
             const partsOrQuestions = this.partsOrQuestionsData;
             // eslint-disable-next-line no-restricted-syntax
             for (const answer of questionAnswersArray) {
-                partsOrQuestions.find((partOrQuestion) => (
-                    partOrQuestion.glassLocation === answer.glassLocation
-                        && partOrQuestion.glassName === answer.glassName
-                )).parts[0].childParts = [
+                partsOrQuestions.find(
+                    (partOrQuestion) =>
+                        partOrQuestion.glassLocation === answer.glassLocation &&
+                        partOrQuestion.glassName === answer.glassName
+                ).parts[0].childParts = [
                     {
-                        partNumber: answer.partNum
-                    }
+                        partNumber: answer.partNum,
+                    },
                 ];
             }
 
             this.navigateForward(partsOrQuestions, null);
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
 #molding-question-wrapper p.text-body.small {
-  margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
+    margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
 }
 
 #molding-question-wrapper .form-test-error {
-  margin-top: 0 !important; // Overrides extra margin-top on error message text
+    margin-top: 0 !important; // Overrides extra margin-top on error message text
 }
 </style>
diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue
index b7e1af75..40aef06a 100644
--- a/src/layouts/order-confirmation/order-confirmation.vue
+++ b/src/layouts/order-confirmation/order-confirmation.vue
@@ -32,7 +32,9 @@
                             overnightDropOffWidgetName="AddToCalendar_OvernightDropOff"
                             allDayDropOffWidgetName="AddToCalendar_AllDayDropOff"
                             sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff"
-                            :serviceLocationFullAddress="serviceLocationFullAddress"
+                            :serviceLocationFullAddress="
+                                serviceLocationFullAddress
+                            "
                             :providerFullAddress="providerFullAddress"
                             :appointmentType="appointmentType"
                             :scheduleDate="appointmentDate"
@@ -40,12 +42,10 @@
                             :scheduleEndTime="appointmentEndTime" />
                         <div
                             class="appointment-text text-center lh-base"
-                            v-html="appointmentWordingText">
-                        </div>
+                            v-html="appointmentWordingText"></div>
                         <div
                             class="appointment-text text-center lh-base mt-2"
-                            v-html="appointmentWordingText2">
-                        </div>
+                            v-html="appointmentWordingText2"></div>
                     </div>
                     <div
                         class="email-confirmation-text"
@@ -70,15 +70,20 @@ import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue';
 // Supporting files
-import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
+import {
+    fetchCmsContentForPage,
+    processIfStatements,
+} from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
-import { get12HourTimeFormat,
+import {
+    get12HourTimeFormat,
     get12HourTimeMobileFormat,
     convertDateStringToDate,
-    getDisplayTextForDurationLength } from '@/helpers/date-helper.js';
+    getDisplayTextForDurationLength,
+} from '@/helpers/date-helper.js';
 import { toTitleCase } from '@/helpers/text-helper.js';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
 import applicationConfig from '@/constants/application-config';
@@ -91,7 +96,7 @@ export default {
         siteHeader,
         vehicleBanner,
         siteFooter,
-        addToCalendar
+        addToCalendar,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -103,9 +108,10 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }];
-            // use resultMap to populate layout content.
+                promise: cmsContentPromise,
+            },
+        ];
+        // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
@@ -124,9 +130,18 @@ export default {
             return this.mainStore.issConfig.successReturnURL;
         },
         confirmationEmailText() {
-            return this.getCmsContent('EmailConfirmationWordingWidget', 'BodyText')
-                ?.replaceAll('{custom:CUSTOMER_PORTAL_URL}', applicationConfig.CUSTOMER_PORTAL_URL)
-                ?.replaceAll('{custom:CUSTOMER_PORTAL_LOGIN_TOKEN}', this.submittedOrder.customerPortalLoginToken)
+            return this.getCmsContent(
+                'EmailConfirmationWordingWidget',
+                'BodyText'
+            )
+                ?.replaceAll(
+                    '{custom:CUSTOMER_PORTAL_URL}',
+                    applicationConfig.CUSTOMER_PORTAL_URL
+                )
+                ?.replaceAll(
+                    '{custom:CUSTOMER_PORTAL_LOGIN_TOKEN}',
+                    this.submittedOrder.customerPortalLoginToken
+                )
                 ?.replaceAll('&lt;', '<')
                 ?.replaceAll('&gt;', '>');
         },
@@ -155,11 +170,13 @@ export default {
             return dateObject.toLocaleDateString('en-us', {
                 weekday: 'long',
                 month: 'long',
-                day: 'numeric'
+                day: 'numeric',
             });
         },
         appointmentTimeFormatted() {
-            const formattedTime = this.formatAppointmentTime(this.appointmentType);
+            const formattedTime = this.formatAppointmentTime(
+                this.appointmentType
+            );
             return formattedTime;
         },
         mobileWordingText() {
@@ -169,7 +186,10 @@ export default {
             return this.getCmsContent('MobileWordingWidget', 'BodyText2');
         },
         dropOffAndInShopWordingText() {
-            return this.getCmsContent('DropOffAndInShopWordingWidget', 'BodyText');
+            return this.getCmsContent(
+                'DropOffAndInShopWordingWidget',
+                'BodyText'
+            );
         },
         dropOffAndInShopWordingText2() {
             return this.getBodyText2FromCms('DropOffAndInShopWordingWidget');
@@ -191,13 +211,24 @@ export default {
         },
         serviceLocationFullAddress() {
             // eslint-disable-next-line max-len
-            return `${this.serviceLocationAddress}, ${this.serviceLocationAddress2 ? `${this.serviceLocationAddress2},` : ''}<br/> ${this.serviceLocationCity}, ${this.serviceLocationState} ${this.serviceLocationZipCode}`;
+            return `${this.serviceLocationAddress}, ${
+                this.serviceLocationAddress2
+                    ? `${this.serviceLocationAddress2},`
+                    : ''
+            }<br/> ${this.serviceLocationCity}, ${this.serviceLocationState} ${
+                this.serviceLocationZipCode
+            }`;
         },
         providerAddress() {
-            return toTitleCase(this.submittedOrder.serviceLocation.provider.address.streetAddress);
+            return toTitleCase(
+                this.submittedOrder.serviceLocation.provider.address
+                    .streetAddress
+            );
         },
         providerCity() {
-            return toTitleCase(this.submittedOrder.serviceLocation.provider.address.city);
+            return toTitleCase(
+                this.submittedOrder.serviceLocation.provider.address.city
+            );
         },
         providerState() {
             return this.submittedOrder.serviceLocation.provider.address.state;
@@ -207,7 +238,9 @@ export default {
         },
         providerFullAddress() {
             // eslint-disable-next-line max-len
-            return this.submittedOrder.serviceLocation?.provider?.address ? `${this.providerAddress},<br/> ${this.providerCity}, ${this.providerState} ${this.providerZipCode}` : '';
+            return this.submittedOrder.serviceLocation?.provider?.address
+                ? `${this.providerAddress},<br/> ${this.providerCity}, ${this.providerState} ${this.providerZipCode}`
+                : '';
         },
         appointmentWordingText() {
             switch (this.appointmentType) {
@@ -248,14 +281,24 @@ export default {
             }
         },
         mobileAppointment() {
-            return this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
-                || this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
+            return (
+                this.submittedOrder.serviceLocation.appointmentType ===
+                    AppointmentTypeStrings.MOBILE ||
+                this.submittedOrder.serviceLocation.appointmentType ===
+                    AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
+            );
         },
         inShopAppointment() {
-            return this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.IN_SHOP;
+            return (
+                this.submittedOrder.serviceLocation.appointmentType ===
+                AppointmentTypeStrings.IN_SHOP
+            );
         },
         dropOffAppointment() {
-            return this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.DROP_OFF;
+            return (
+                this.submittedOrder.serviceLocation.appointmentType ===
+                AppointmentTypeStrings.DROP_OFF
+            );
         },
         inShopAppointmentDuration() {
             const inshopDurationTime = getDisplayTextForDurationLength(
@@ -263,11 +306,13 @@ export default {
                 this.submittedOrder.schedule.jobMaxMinutes
             );
             return inshopDurationTime;
-        }
+        },
     },
     mounted() {
         if (this.carrierUrl) {
-            this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`);
+            this.$refs.siteFooter.updateButtonText(
+                `Go back to ${this.carrierName}`
+            );
         }
     },
     methods: {
@@ -280,57 +325,62 @@ export default {
             // 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;
+            const isMobile =
+                serviceLocation.appointmentType ===
+                    AppointmentTypeStrings.MOBILE ||
+                serviceLocation.appointmentType ===
+                    AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
 
             const serviceLocationReqs =
                 (isMobile && mobileReqs) || (!isMobile && dropOffInShopReqs);
 
             // Insurance
-            const isInsuranceSet = useMainStore().order.payment.isInsurance !== null;
+            const isInsuranceSet =
+                useMainStore().order.payment.isInsurance !== null;
 
             // Schedule
             const { schedule } = useMainStore().order;
             const scheduleReqs = !!(
-                schedule.date
-                && schedule.startTime
-                && schedule.endTime
-                && schedule.jobMaxMinutes
-                && schedule.jobMinMinutes
+                schedule.date &&
+                schedule.startTime &&
+                schedule.endTime &&
+                schedule.jobMaxMinutes &&
+                schedule.jobMinMinutes
             );
 
             // Contact Info
             const { contactInfo } = useMainStore().order;
             const contactInfoReqs = !!(
-                contactInfo.firstName
-                && contactInfo.lastName
-                && contactInfo.servicePhone
-                && contactInfo.emailAddress
+                contactInfo.firstName &&
+                contactInfo.lastName &&
+                contactInfo.servicePhone &&
+                contactInfo.emailAddress
             );
 
             // Payment
-            const paymentMethodReqs = useMainStore().order.payment.isPayInAdvance === false;
+            const paymentMethodReqs =
+                useMainStore().order.payment.isPayInAdvance === false;
 
             return (
-                serviceLocationReqs
-                && isInsuranceSet
-                && scheduleReqs
-                && contactInfoReqs
-                && paymentMethodReqs
+                serviceLocationReqs &&
+                isInsuranceSet &&
+                scheduleReqs &&
+                contactInfoReqs &&
+                paymentMethodReqs
             );
         },
         forwardButtonAction() {
@@ -341,11 +391,15 @@ export default {
                 case AppointmentTypeStrings.MOBILE:
                 case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP:
                     // eslint-disable-next-line max-len
-                    return `Between ${get12HourTimeMobileFormat(this.appointmentStartTime)} - ${get12HourTimeMobileFormat(this.appointmentEndTime)}`;
+                    return `Between ${get12HourTimeMobileFormat(
+                        this.appointmentStartTime
+                    )} - ${get12HourTimeMobileFormat(this.appointmentEndTime)}`;
                 case AppointmentTypeStrings.DROP_OFF:
                     return 'Drop off before 9:30 AM';
                 case AppointmentTypeStrings.IN_SHOP:
-                    return `at ${get12HourTimeFormat(this.appointmentStartTime)}`;
+                    return `at ${get12HourTimeFormat(
+                        this.appointmentStartTime
+                    )}`;
                 default:
                     return null;
             }
@@ -353,7 +407,11 @@ export default {
         processIfStatements,
         getBodyText2FromCms(cmsWidgetName) {
             const body2Text = this.getCmsContent(cmsWidgetName, 'BodyText2');
-            return this.processIfStatements(body2Text, 'custom', this.getCustomValueFromString);
+            return this.processIfStatements(
+                body2Text,
+                'custom',
+                this.getCustomValueFromString
+            );
         },
         getCustomValueFromString(str) {
             switch (str) {
@@ -364,8 +422,8 @@ export default {
                 default:
                     return null;
             }
-        }
-    }
+        },
+    },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index 6992d559..286008c8 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -37,7 +37,7 @@ export default {
     components: {
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        questionsPageLayout
+        questionsPageLayout,
     },
     mixins: [BaseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
@@ -48,8 +48,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -65,8 +65,8 @@ export default {
             selectedAnswers: {},
             currentGlassIndex: 0,
             rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            }
+                optionRequired: globalRules.OPTION_REQUIRED,
+            },
         };
     },
     computed: {
@@ -78,11 +78,12 @@ export default {
         },
         pageData() {
             return useMainStore().pageData(issPageValues.PART_QUESTIONS);
-        }
+        },
     },
     mounted() {
         // are there alreadyAnsweredQuestions?
-        const alreadyAnsweredQuestions = useMainStore().damage.partQuestionAnswers;
+        const alreadyAnsweredQuestions =
+            useMainStore().damage.partQuestionAnswers;
 
         this.questionsData = this.pageData.partsOrQuestions
             .filter((x) => x.partQuestions)
@@ -93,7 +94,11 @@ export default {
                 // reset selectedAnswers for this glass
                 this.selectedAnswers[glass.answerKey] = [];
 
-                const updatedGlass = this.setupInitialData(glass, index, alreadyAnsweredQuestions);
+                const updatedGlass = this.setupInitialData(
+                    glass,
+                    index,
+                    alreadyAnsweredQuestions
+                );
 
                 // Set up watch for each set of glass questions
                 this.$watch(
@@ -111,19 +116,23 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
-            const partQuestionsFromPageData = useMainStore().pageData(issPageValues.PART_QUESTIONS);
+            const partQuestionsFromPageData = useMainStore().pageData(
+                issPageValues.PART_QUESTIONS
+            );
             return (
-                partQuestionsFromPageData
-                && Object.keys(partQuestionsFromPageData.partsOrQuestions).length > 0
+                partQuestionsFromPageData &&
+                Object.keys(partQuestionsFromPageData.partsOrQuestions).length >
+                    0
             );
         },
         async forwardButtonAction() {
             const questionAnswersArray = this.questionsData.map((glass) => ({
                 glassLocation: glass.glassLocation,
                 glassName: glass.glassName,
-                result: (glass.answerData && glass.answerData.answerResult) || '',
+                result:
+                    (glass.answerData && glass.answerData.answerResult) || '',
                 answeredQuestions: glass.answerData?.answeredQuestions,
-                isSuppressedPart: glass.isSuppressedPart
+                isSuppressedPart: glass.isSuppressedPart,
             }));
 
             // clear out answerData for future page loads; must occur prior to store save
@@ -143,7 +152,7 @@ export default {
 
             // TODO KO delete for quote mvp
             this.navigateForward(glassPartsForStore, null);
-        }
-    }
+        },
+    },
 };
 </script>
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index f6ca964f..f04aa173 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -4,53 +4,61 @@
         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"
-                    recyclingModalCmsWidgetName="RecycleModal"
-                    servicePackageTitleWidgetName="ServicePackageTitle"
-                    :availableVaps="availableVaps" />
-                <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"
+                            recyclingModalCmsWidgetName="RecycleModal"
+                            servicePackageTitleWidgetName="ServicePackageTitle"
+                            :availableVaps="availableVaps" />
+                        <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>
@@ -91,7 +99,7 @@ export default {
         reviewDropdown,
         cartDropdown,
         paymentMethodQuestion,
-        alert
+        alert,
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -104,20 +112,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);
@@ -127,7 +135,8 @@ export default {
         const unpricedVaps = [...resultMap.wipers, resultMap.rainDefense];
 
         let hasBailedOut = false;
-        const pricedVaps = await useMainStore().getPriceOrderItems(unpricedVaps)
+        const pricedVaps = await useMainStore()
+            .getPriceOrderItems(unpricedVaps)
             .catch((err) => {
                 useMainStore().setBailout(
                     bailoutMessage.pricingResponseError(
@@ -143,7 +152,9 @@ 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.setAvailableVaps(pricedVaps ?? []);
             });
         }
@@ -153,8 +164,8 @@ export default {
             availableVaps: [],
             paymentMethodInternalModel: this.getPaymentMethodFromStore(),
             rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            }
+                optionRequired: globalRules.OPTION_REQUIRED,
+            },
         };
     },
     computed: {
@@ -171,113 +182,128 @@ export default {
             }
         },
         displayPayInAdvanceAlert() {
-            return (
-                this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]
-            );
+            return this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT];
         },
         isPayInAdvanceDisabled() {
-            const piaExperience = this.getSettingValue(experimentSettings.ISS_DISPLAY_PAY_IN_ADVANCE);
+            const piaExperience = this.getSettingValue(
+                experimentSettings.ISS_DISPLAY_PAY_IN_ADVANCE
+            );
             const isEnabled = piaExperience === 'true';
 
             return !isEnabled || this.isUnverified;
         },
         isUnverified() {
-            return !useMainStore().isNoComp && !useMainStore().isITAC
-                && (useMainStore().order.currentDeductible == null || !useMainStore().isVerifiedCoverageStatus);
+            return (
+                !useMainStore().isNoComp &&
+                !useMainStore().isITAC &&
+                (useMainStore().order.currentDeductible == null ||
+                    !useMainStore().isVerifiedCoverageStatus)
+            );
         },
         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);
+            const vehicleReqs = !!(
+                vehicle.year &&
+                vehicle.make &&
+                vehicle.model &&
+                vehicle.style
+            );
 
             // Damage
-            const { isRepair, numberOfChips, glassToReplace } = useMainStore().order.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;
+            const isMobile =
+                serviceLocation.appointmentType ===
+                    AppointmentTypeStrings.MOBILE ||
+                serviceLocation.appointmentType ===
+                    AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
             const serviceLocationReqs =
                 (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
 
             // Schedule
-            const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } = useMainStore().order.schedule;
+            const { date, startTime, endTime, jobMaxMinutes, jobMinMinutes } =
+                useMainStore().order.schedule;
             const scheduleReqs = !!(
-                date
-                && startTime
-                && endTime
-                && jobMaxMinutes
-                && jobMinMinutes
+                date &&
+                startTime &&
+                endTime &&
+                jobMaxMinutes &&
+                jobMinMinutes
             );
 
             // Customer
-            const { firstName, lastName, emailAddress } = useMainStore().order.customer;
-            const customerReqs = !!(
-                firstName
-                && lastName
-                && emailAddress
-            );
+            const { firstName, lastName, emailAddress } =
+                useMainStore().order.customer;
+            const customerReqs = !!(firstName && lastName && emailAddress);
 
             // 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;
+            const isPayInAdvance =
+                useMainStore().order.payment.isPayInAdvance &&
+                !!payInAdvanceType;
 
-            return isPayInAdvance ? payInAdvanceType : paymentMethods.PAY_AT_TIME_OF_SERVICE;
+            return isPayInAdvance
+                ? payInAdvanceType
+                : paymentMethods.PAY_AT_TIME_OF_SERVICE;
         },
         updateFooterButtonText(newValue) {
             this.$refs.siteFooter.updateButtonText(newValue);
@@ -299,8 +325,8 @@ export default {
         },
         setAvailableVaps(vaps) {
             this.availableVaps = vaps;
-        }
-    }
+        },
+    },
 };
 </script>
 
diff --git a/src/layouts/policy-endorsements/policy-endorsements.vue b/src/layouts/policy-endorsements/policy-endorsements.vue
index 06a2c76f..31be0d7c 100644
--- a/src/layouts/policy-endorsements/policy-endorsements.vue
+++ b/src/layouts/policy-endorsements/policy-endorsements.vue
@@ -4,13 +4,16 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div
-            class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader
-                    ref="siteHeader"
-                    cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid mt-0 px-5">
+        <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">
                     <siteSubHeader
                         ref="siteSubHeader"
                         cmsWidgetName="SiteSubHeaderWidget"
@@ -79,7 +82,7 @@ export default {
         siteFooter,
         buttonQuestion,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -89,9 +92,10 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }];
-            // use resultMap to populate layout content.
+                promise: cmsContentPromise,
+            },
+        ];
+        // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
@@ -108,10 +112,12 @@ export default {
             questionAnswersArray: [],
             schoolPropertyAnswer: '',
             parkingLotAnswer: '',
-            hasValidCarId: this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== '0',
+            hasValidCarId:
+                this.mainStore.vehicle.carId &&
+                this.mainStore.vehicle.carId !== '0',
             rules: {
-                selectionRequired: globalRules.OPTION_REQUIRED
-            }
+                selectionRequired: globalRules.OPTION_REQUIRED,
+            },
         };
     },
     computed: {
@@ -128,57 +134,66 @@ export default {
             return this.getCmsContent('ParkingLotQuestion', 'Answers');
         },
         educatorEndorsement() {
-            return useMainStore().order.policy.endorsements?.includes(endorsementOptions.EDUCATOR) ?? false;
+            return (
+                useMainStore().order.policy.endorsements?.includes(
+                    endorsementOptions.EDUCATOR
+                ) ?? false
+            );
         },
         parkingGuardEndorsement() {
-            return useMainStore().order.policy.endorsements?.includes(endorsementOptions.PARKING_GUARD) ?? false;
-        }
+            return (
+                useMainStore().order.policy.endorsements?.includes(
+                    endorsementOptions.PARKING_GUARD
+                ) ?? false
+            );
+        },
     },
-    methods:
-        {
-            async forwardButtonAction() {
-                // TO DO: remove hard coding and update data format once service returns endorsement questions
-                if (this.educatorEndorsement) {
-                    this.questionAnswersArray.push({
-                        questionNum: 1,
-                        endorsementName: endorsementOptions.EDUCATOR,
-                        questionText: this.schoolPropertyQuestionText,
-                        selectedAnswer: this.schoolPropertyAnswer
-                    });
-                }
-                if (this.parkingGuardEndorsement) {
-                    this.questionAnswersArray.push({
-                        questionNum: 2,
-                        endorsementName: endorsementOptions.PARKING_GUARD,
-                        questionText: this.parkingLotQuestionText,
-                        selectedAnswer: this.parkingLotAnswer
-                    });
-                }
-
-                // save answers to store as order.policy.endorsementQuestionAnswers
-                useMainStore().saveEndorsementQuestionAnswers(this.questionAnswersArray);
-
-                return this.navigateForward();
-            },
-            navigateForward() {
-                if (!this.hasValidCarId) {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
-                        this.$route
-                    );
-                } else {
-                    this.$router.navigate(
-                        this.navigationScenarios.CLICKED_FORWARD,
-                        this.$route
-                    );
-                }
+    methods: {
+        async forwardButtonAction() {
+            // TO DO: remove hard coding and update data format once service returns endorsement questions
+            if (this.educatorEndorsement) {
+                this.questionAnswersArray.push({
+                    questionNum: 1,
+                    endorsementName: endorsementOptions.EDUCATOR,
+                    questionText: this.schoolPropertyQuestionText,
+                    selectedAnswer: this.schoolPropertyAnswer,
+                });
             }
-        }
+            if (this.parkingGuardEndorsement) {
+                this.questionAnswersArray.push({
+                    questionNum: 2,
+                    endorsementName: endorsementOptions.PARKING_GUARD,
+                    questionText: this.parkingLotQuestionText,
+                    selectedAnswer: this.parkingLotAnswer,
+                });
+            }
+
+            // save answers to store as order.policy.endorsementQuestionAnswers
+            useMainStore().saveEndorsementQuestionAnswers(
+                this.questionAnswersArray
+            );
+
+            return this.navigateForward();
+        },
+        navigateForward() {
+            if (!this.hasValidCarId) {
+                this.$router.navigate(
+                    this.navigationScenarios
+                        .CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
+                    this.$route
+                );
+            } else {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.$route
+                );
+            }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
-
 :deep .subheader-primary {
     margin-bottom: map-get($spacers, 2);
 }
@@ -211,5 +226,4 @@ export default {
 :deep div.question-text.d-flex {
     margin-top: map-get($spacers, 4);
 }
-
 </style>
diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index b1418757..cf39a493 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -4,48 +4,48 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid pb-2 px-5">
-                    <div class="row mt-4 mb-3">
-                        <div class="col">
-                            <siteSubHeader
-                                id="sub-header"
-                                cmsWidgetName="SiteSubHeaderWidget" />
-                            <addressQuestions
-                                id="address-questions-wrapper"
-                                ref="addressQuestions"
-                                v-model="customerQuestions.addressQuestions"
-                                includeStreetAddress2="true" />
-                            <textboxQuestion
-                                ref="policyHolderFirstName"
-                                v-model="customerQuestions.firstName"
-                                inputId="firstNameField"
-                                cmsWidgetName="PolicyholderFirstNameQuestion"
-                                isRequired
-                                disableAutoFill
-                                :validationRules="rules.firstName" />
-                            <textboxQuestion
-                                ref="policyHolderLastName"
-                                v-model="customerQuestions.lastName"
-                                class="mt-4"
-                                inputId="lastNameField"
-                                cmsWidgetName="PolicyholderLastNameQuestion"
-                                isRequired
-                                disableAutoFill
-                                :validationRules="rules.lastName" />
-                        </div>
-                    </div>
-                    <siteFooter
-                        ref="siteFooter"
-                        class="mt-5"
-                        cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
-                        @ForwardClicked="forwardButtonAction"
-                        @backClicked="navigateBack" />
+        <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 cmsWidgetName="SiteHeaderWidget" />
                 </div>
             </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <siteSubHeader
+                        id="sub-header"
+                        cmsWidgetName="SiteSubHeaderWidget" />
+                    <addressQuestions
+                        id="address-questions-wrapper"
+                        ref="addressQuestions"
+                        v-model="customerQuestions.addressQuestions"
+                        includeStreetAddress2="true" />
+                    <textboxQuestion
+                        ref="policyHolderFirstName"
+                        v-model="customerQuestions.firstName"
+                        inputId="firstNameField"
+                        cmsWidgetName="PolicyholderFirstNameQuestion"
+                        isRequired
+                        disableAutoFill
+                        :validationRules="rules.firstName" />
+                    <textboxQuestion
+                        ref="policyHolderLastName"
+                        v-model="customerQuestions.lastName"
+                        class="mt-4"
+                        inputId="lastNameField"
+                        cmsWidgetName="PolicyholderLastNameQuestion"
+                        isRequired
+                        disableAutoFill
+                        :validationRules="rules.lastName" />
+                </div>
+            </div>
+            <siteFooter
+                ref="siteFooter"
+                class="mt-5"
+                cmsWidgetName="SiteFooterWidget"
+                :isForwardActionDisabled="!meta.valid"
+                @ForwardClicked="forwardButtonAction"
+                @backClicked="navigateBack" />
         </div>
     </Form>
 </template>
@@ -74,7 +74,7 @@ export default {
         addressQuestions,
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -85,8 +85,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
 
         // use resultMap to populate layout content.
@@ -106,8 +106,8 @@ export default {
             vehiclesFound: [],
             rules: {
                 firstName: globalRules.POLICYHOLDER_FIRST_NAME_REQUIRED,
-                lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED
-            }
+                lastName: globalRules.POLICYHOLDER_LAST_NAME_REQUIRED,
+            },
         };
     },
     computed: {
@@ -116,10 +116,9 @@ export default {
         },
         vehiclesCount() {
             return this.vehiclesFound.length;
-        }
+        },
     },
-    methods:
-    {
+    methods: {
         async forwardButtonAction() {
             this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
             return this.navigateForward();
@@ -144,19 +143,20 @@ export default {
 
         getPolicyHolderDetailsFromStore() {
             return {
-                addressQuestions:
-                {
-                    streetAddress: this.mainStore.order.customer.address.streetAddress,
-                    streetAddress2: this.mainStore.order.customer.address.streetAddress2,
+                addressQuestions: {
+                    streetAddress:
+                        this.mainStore.order.customer.address.streetAddress,
+                    streetAddress2:
+                        this.mainStore.order.customer.address.streetAddress2,
                     city: this.mainStore.order.customer.address.city,
                     state: this.mainStore.order.customer.address.state,
-                    zipCode: this.mainStore.order.customer.address.zipCode
+                    zipCode: this.mainStore.order.customer.address.zipCode,
                 },
                 firstName: this.mainStore.order.customer.firstName,
-                lastName: this.mainStore.order.customer.lastName
+                lastName: this.mainStore.order.customer.lastName,
             };
-        }
-    }
+        },
+    },
 };
 </script>
 
@@ -164,14 +164,14 @@ export default {
 #sub-header p {
     font-size: 16px;
     line-height: 26px;
-    color: #4D5151;
+    color: #4d5151;
 }
 
 #address-questions-wrapper {
     margin-top: 24px;
 }
 
-#address-questions-wrapper .alert.heading  {
+#address-questions-wrapper .alert.heading {
     line-height: 24px;
 }
 
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index 35dab39e..ea181224 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -4,14 +4,18 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalid-submit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition sub-container make-tall">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <siteSubHeader
-                    cmsWidgetName="SiteSubHeaderWidget"
-                    justification="left"
-                    issContainingPage="service-packages" />
-                <div class="mx-5">
+        <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 cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <siteSubHeader
+                        cmsWidgetName="SiteSubHeaderWidget"
+                        justification="left"
+                        issContainingPage="service-packages" />
                     <servicePackageQuestion
                         ref="servicePackage"
                         cmsWidgetName="ServicePackage"
@@ -31,22 +35,18 @@
                         @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
+            <loadingModal ref="loadingModal" :textSlides="loadingText" />
+            <contentGroupModal
+                ref="RainDefenseModal"
+                cmsWidgetName="RainDefenseModal" />
+            <contentGroupModal
+                ref="FrontWiperModal"
+                cmsWidgetName="FrontWiperModal" />
+            <contentGroupModal
+                ref="RearWiperModal"
+                cmsWidgetName="RearWiperModal" />
+            <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
         </div>
-        <loadingModal
-            ref="loadingModal"
-            :textSlides="loadingText" />
-        <contentGroupModal
-            ref="RainDefenseModal"
-            cmsWidgetName="RainDefenseModal" />
-        <contentGroupModal
-            ref="FrontWiperModal"
-            cmsWidgetName="FrontWiperModal" />
-        <contentGroupModal
-            ref="RearWiperModal"
-            cmsWidgetName="RearWiperModal" />
-        <contentGroupModal
-            ref="RecalModal"
-            cmsWidgetName="RecalModal" />
     </Form>
 </template>
 
@@ -81,7 +81,7 @@ export default {
         Form,
         servicePackageQuestion,
         loadingModal,
-        contentGroupModal
+        contentGroupModal,
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -94,20 +94,20 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
+                promise: cmsContentPromise,
             },
             {
                 resultKey: 'wipers',
-                promise: wipersPromise
+                promise: wipersPromise,
             },
             {
                 resultKey: 'rainDefense',
-                promise: rainDefensePromise
+                promise: rainDefensePromise,
             },
             {
                 resultKey: 'supportingItems',
-                promise: supportingItemsPromise
-            }
+                promise: supportingItemsPromise,
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
 
@@ -118,11 +118,12 @@ export default {
             resultMap.rainDefense,
             ...resultMap.supportingItems,
             ...resultMap.wipers,
-            ...clonedGlassParts
+            ...clonedGlassParts,
         ];
 
         let hasBailedOut = false;
-        const pricingResults = await store.getPriceOrderItems(availableLineItems)
+        const pricingResults = await store
+            .getPriceOrderItems(availableLineItems)
             .catch((err) => {
                 useMainStore().setBailout(
                     bailoutMessage.pricingResponseError(
@@ -155,17 +156,17 @@ export default {
                 'Looking for dates',
                 'Searching for times',
                 'Nearly there',
-                'Finishing up'
+                'Finishing up',
             ],
             rules: {
-                optionRequired: globalRules.OPTION_REQUIRED
-            }
+                optionRequired: globalRules.OPTION_REQUIRED,
+            },
         };
     },
     computed: {
         PriceDisclaimerText() {
             return this.getCmsContent('PriceDisclaimerWidget', 'Text');
-        }
+        },
     },
     methods: {
         openModalAction(modalName) {
@@ -173,11 +174,11 @@ export default {
         },
         arePagePrerequisitesValid() {
             return (
-                store.order.serviceLocation.zipCode
-                && store.order.serviceLocation.zipCodeCtu
-                && (store.order.damage.isRepair
-                    || (store.order.lineItems?.glassParts != null
-                        && store.order.lineItems.glassParts.length > 0))
+                store.order.serviceLocation.zipCode &&
+                store.order.serviceLocation.zipCodeCtu &&
+                (store.order.damage.isRepair ||
+                    (store.order.lineItems?.glassParts != null &&
+                        store.order.lineItems.glassParts.length > 0))
             );
         },
         vapsItemsSelectedAction(vapsItemsSelected) {
@@ -187,10 +188,12 @@ export default {
             const parts = {
                 glassParts: this.pricedGlassParts,
                 supportingItems: this.supportingItems,
-                vaps: this.selectedVaps
+                vaps: this.selectedVaps,
             };
             if (!allGlassPartsAndItemsHavePrices(parts)) {
-                window.console.error('One or more items have no price assigned!');
+                window.console.error(
+                    'One or more items have no price assigned!'
+                );
             }
             if (this.pricedGlassParts.length > 0) {
                 store.updateGlassParts(this.pricedGlassParts);
@@ -198,15 +201,18 @@ export default {
             store.updateSupportingItems(this.supportingItems);
             store.updateVaps(this.selectedVaps);
 
-            this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
-        }
-    }
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.$route
+            );
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
 .subheader-secondary {
-    margin-top: .5rem;
+    margin-top: 0.5rem;
     padding: 0px;
 }
 
@@ -214,7 +220,7 @@ export default {
     margin: 1.3rem 0 1.5rem 0;
 
     a {
-        color: #4D5151;
+        color: #4d5151;
         font-weight: 400;
     }
 }
diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index ef0b5a5d..b619b83f 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -4,12 +4,16 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader
-                    ref="siteHeader"
-                    cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid px-5 pb-2 confirmation">
+        <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
                         ref="vehicleBanner"
                         class="mb-4"
@@ -17,7 +21,9 @@
                         :displayGenericVehicleImage="false" />
                     <div class="text-center text-color--black pb-2 fs-5">
                         <img :src="tpaConfirmationImage" />
-                        <span class="ms-2" v-html="tpaConfirmationHeaderText"></span>
+                        <span
+                            class="ms-2"
+                            v-html="tpaConfirmationHeaderText"></span>
                     </div>
                     <div class="text-center text-color--black mb-3 fw-bold">
                         <span v-html="tpaConfirmationSubheaderText"></span>
@@ -36,8 +42,7 @@
                         :customText="contactCarrierText"
                         class="contact-carrier-text small"
                         @click="setBailoutInfo()" />
-                    <div
-                        ref="confirmationOrderDetailsSection">
+                    <div ref="confirmationOrderDetailsSection">
                         <textBlock
                             ref="tpaConfirmationOrderDetailsTitle"
                             :customText="orderDetailsTitle"
@@ -75,12 +80,19 @@ import textBlock from '@/digital-components/text-block/text-block.vue';
 import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
 
 // Supporting files
-import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
+import {
+    fetchCmsContentForPage,
+    processIfStatements,
+} from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
-import { toTitleCase, toDisplayPhoneNumber, formatAmountInDollars } from '@/helpers/text-helper.js';
+import {
+    toTitleCase,
+    toDisplayPhoneNumber,
+    formatAmountInDollars,
+} from '@/helpers/text-helper.js';
 import bailoutMessage from '@/constants/bailoutMessage';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
@@ -94,7 +106,7 @@ export default {
         textBlock,
         deductibleBox,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -105,12 +117,12 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
+                promise: cmsContentPromise,
             },
             {
                 resultKey: 'accountInfo',
-                promise: accountInfoPromise
-            }
+                promise: accountInfoPromise,
+            },
         ];
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -130,40 +142,67 @@ export default {
             return this.getCmsContent('TPAConfirmationContent', 'Image');
         },
         tpaConfirmationSubheaderText() {
-            return this.getCmsContent('TPAConfirmationContent', 'SubheaderText')
-                ?.replaceAll('{custom:glassShop}', this.preferredShopName);
+            return this.getCmsContent(
+                'TPAConfirmationContent',
+                'SubheaderText'
+            )?.replaceAll('{custom:glassShop}', this.preferredShopName);
         },
         tpaConfirmationBodyOne() {
             return this.getCmsContent('TPAConfirmationContent', 'BodyText')
-                ?.replaceAll('{custom:phoneNumber}', this.preferredShopPhoneNumber)
+                ?.replaceAll(
+                    '{custom:phoneNumber}',
+                    this.preferredShopPhoneNumber
+                )
                 ?.replaceAll('{custom:glassShop}', this.preferredShopName);
         },
         tpaConfirmationBodyTwo() {
             return this.getCmsContent('TPAConfirmationContent', 'BodyText2');
         },
         contactCarrierText() {
-            const contactCarrierText = this.getCmsContent('ContactCarrierContent', 'Text')
-                ?.replaceAll('{custom:carrierPhoneNumber}', this.carrierPhoneNumber);
-            return this.processIfStatements(contactCarrierText, 'custom', this.getCustomValueFromString);
+            const contactCarrierText = this.getCmsContent(
+                'ContactCarrierContent',
+                'Text'
+            )?.replaceAll(
+                '{custom:carrierPhoneNumber}',
+                this.carrierPhoneNumber
+            );
+            return this.processIfStatements(
+                contactCarrierText,
+                'custom',
+                this.getCustomValueFromString
+            );
         },
         orderDetailsTitle() {
             return this.getCmsContent('OrderDetailsContent', 'HeaderText');
         },
         orderDetailsBody() {
-            const orderDetailsBodyText = this.getCmsContent('OrderDetailsContent', 'BodyText');
-            return this.processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString);
+            const orderDetailsBodyText = this.getCmsContent(
+                'OrderDetailsContent',
+                'BodyText'
+            );
+            return this.processIfStatements(
+                orderDetailsBodyText,
+                'custom',
+                this.getCustomValueFromString
+            );
         },
         deductibleBoxValue() {
-            return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
+            return this.isVerified
+                ? this.formatAmountInDollars(this.currentDeductible)
+                : VERIFYING_COVERAGE;
         },
         currentDeductible() {
             return useMainStore().order.currentDeductible;
         },
         preferredShopName() {
-            return toTitleCase(useMainStore().order.serviceLocation.provider.companyName);
+            return toTitleCase(
+                useMainStore().order.serviceLocation.provider.companyName
+            );
         },
         preferredShopPhoneNumber() {
-            return this.toDisplayPhoneNumber(useMainStore().order.serviceLocation.provider.phoneNumber);
+            return this.toDisplayPhoneNumber(
+                useMainStore().order.serviceLocation.provider.phoneNumber
+            );
         },
         isVerified() {
             return useMainStore().order.payment.insuranceCoverage.isVerified;
@@ -175,44 +214,46 @@ export default {
             return this.mainStore.issConfig.successReturnURL;
         },
         carrierPhoneNumber() {
-            return this.toDisplayPhoneNumber(useMainStore().order.carrierPhoneNumber);
-        }
+            return this.toDisplayPhoneNumber(
+                useMainStore().order.carrierPhoneNumber
+            );
+        },
     },
     mounted() {
         if (this.carrierUrl) {
-            this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`);
+            this.$refs.siteFooter.updateButtonText(
+                `Go back to ${this.carrierName}`
+            );
         }
     },
-    methods:
-        {
-            async forwardButtonAction() {
-                this.$router.navigateToExternalUrl(this.carrierUrl);
-            },
-            getCustomValueFromString(str) {
-                switch (str) {
-                    case 'deductibleAboveZero':
-                        return this.isVerified && this.currentDeductible !== 0;
-                    case 'zeroDeductible':
-                        return this.isVerified && this.currentDeductible === 0;
-                    case 'verifyingCoverage':
-                        return !this.isVerified;
-                    case 'coverageVerified':
-                        return this.isVerified;
-                    default:
-                        return null;
-                }
-            },
-            setBailoutInfo() {
-                this.mainStore.setBailout(bailoutMessage.RequestCallback);
-            },
-            toDisplayPhoneNumber,
-            formatAmountInDollars,
-            processIfStatements
-        }
+    methods: {
+        async forwardButtonAction() {
+            this.$router.navigateToExternalUrl(this.carrierUrl);
+        },
+        getCustomValueFromString(str) {
+            switch (str) {
+                case 'deductibleAboveZero':
+                    return this.isVerified && this.currentDeductible !== 0;
+                case 'zeroDeductible':
+                    return this.isVerified && this.currentDeductible === 0;
+                case 'verifyingCoverage':
+                    return !this.isVerified;
+                case 'coverageVerified':
+                    return this.isVerified;
+                default:
+                    return null;
+            }
+        },
+        setBailoutInfo() {
+            this.mainStore.setBailout(bailoutMessage.RequestCallback);
+        },
+        toDisplayPhoneNumber,
+        formatAmountInDollars,
+        processIfStatements,
+    },
 };
 </script>
 <style lang="scss" scoped>
-
 .text-color--black {
     color: $black;
 }
@@ -233,5 +274,4 @@ export default {
         font-weight: $font-weight-bold;
     }
 }
-
 </style>
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 1fdcd386..373dfe07 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -5,12 +5,16 @@
         class="tpa-submit"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader
-                    ref="siteHeader"
-                    :cmsWidgetName="widget.siteHeader" />
-                <div class="px-5">
+        <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="widget.siteHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         ref="vehicleBanner"
                         :cmsWidgetName="widget.vehicleBanner"

From bbeec835851269a8cfd8655f56ab3b7df94064e4 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 17 Apr 2024 09:52:51 -0400
Subject: [PATCH 17/26] WIP update markup for two pages.

---
 src/layouts/bailout-page/bailout-page.vue     | 139 ++++++++++--------
 .../contact-confirmation.vue                  |  34 +++--
 2 files changed, 95 insertions(+), 78 deletions(-)

diff --git a/src/layouts/bailout-page/bailout-page.vue b/src/layouts/bailout-page/bailout-page.vue
index 131665fe..5708df4a 100644
--- a/src/layouts/bailout-page/bailout-page.vue
+++ b/src/layouts/bailout-page/bailout-page.vue
@@ -4,60 +4,66 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="page-container-grouped-styles">
-            <siteHeader
-                ref="siteHeader"
-                cmsWidgetName="SiteHeaderWidget" />
-            <div class="main-content-container">
-                <siteSubHeader
-                    ref="siteSubHeader"
-                    :cmsWidgetName="subHeaderCmsWidgetName"
-                    :contentProperty="subHeaderContentProperty"
-                    :stripRteStyle="stripRteStyle"
-                    :subContentProperty="subContentProperty"
-                    class="sub-header-content"
-                    justification="left" />
-                <textboxQuestion
-                    ref="firstName"
-                    v-model="bailoutPageModel.firstName"
-                    inputId="firstNameField"
-                    cmsWidgetName="FirstNameQuestion"
-                    isRequired
-                    disableAutoFill
-                    :validationRules="rules.firstName" />
-                <textboxQuestion
-                    ref="lastName"
-                    v-model="bailoutPageModel.lastName"
-                    inputId="lastNameField"
-                    cmsWidgetName="LastNameQuestion"
-                    isRequired
-                    disableAutoFill
-                    :validationRules="rules.lastName" />
-                <textboxQuestion
-                    ref="phoneNumber"
-                    v-model="bailoutPageModel.phoneNumber"
-                    inputId="phoneNumberField"
-                    cmsWidgetName="PhoneNumberQuestion"
-                    isRequired
-                    :mask="phoneMask"
-                    disableAutoFill
-                    :validationRules="rules.phoneNumber" />
-                <textboxQuestion
-                    ref="emailAddress"
-                    v-model="bailoutPageModel.email"
-                    inputId="emailAddressField"
-                    cmsWidgetName="EmailAddressQuestion"
-                    isRequired
-                    disableAutoFill
-                    :validationRules="rules.email" />
-                <siteFooter
-                    ref="siteFooter"
-                    class="footer-content-container"
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    :isBackButtonHidden="!canNavigateBack"
-                    @backClicked="backButtonAction"
-                    @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">
+                    <siteSubHeader
+                        ref="siteSubHeader"
+                        :cmsWidgetName="subHeaderCmsWidgetName"
+                        :contentProperty="subHeaderContentProperty"
+                        :stripRteStyle="stripRteStyle"
+                        :subContentProperty="subContentProperty"
+                        class="sub-header-content"
+                        justification="left" />
+                    <textboxQuestion
+                        ref="firstName"
+                        v-model="bailoutPageModel.firstName"
+                        inputId="firstNameField"
+                        cmsWidgetName="FirstNameQuestion"
+                        isRequired
+                        disableAutoFill
+                        :validationRules="rules.firstName" />
+                    <textboxQuestion
+                        ref="lastName"
+                        v-model="bailoutPageModel.lastName"
+                        inputId="lastNameField"
+                        cmsWidgetName="LastNameQuestion"
+                        isRequired
+                        disableAutoFill
+                        :validationRules="rules.lastName" />
+                    <textboxQuestion
+                        ref="phoneNumber"
+                        v-model="bailoutPageModel.phoneNumber"
+                        inputId="phoneNumberField"
+                        cmsWidgetName="PhoneNumberQuestion"
+                        isRequired
+                        :mask="phoneMask"
+                        disableAutoFill
+                        :validationRules="rules.phoneNumber" />
+                    <textboxQuestion
+                        ref="emailAddress"
+                        v-model="bailoutPageModel.email"
+                        inputId="emailAddressField"
+                        cmsWidgetName="EmailAddressQuestion"
+                        isRequired
+                        disableAutoFill
+                        :validationRules="rules.email" />
+                    <siteFooter
+                        ref="siteFooter"
+                        class="footer-content-container"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        :isBackButtonHidden="!canNavigateBack"
+                        @backClicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
             </div>
         </div>
     </Form>
@@ -90,7 +96,7 @@ export default {
         siteFooter,
         textboxQuestion,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -100,8 +106,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -121,14 +127,14 @@ export default {
             widget: {
                 defaultSiteHeader: 'SiteSubHeaderWidget',
                 noTpa: 'ContentGroupNoTPAWidget',
-                notSeeingPreferredShop: 'ContentGroupNotSeeingPreferredShop'
+                notSeeingPreferredShop: 'ContentGroupNotSeeingPreferredShop',
             },
             rules: {
                 firstName: globalRules.FIRST_NAME_REQUIRED,
                 lastName: globalRules.LAST_NAME_REQUIRED,
                 phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
-                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`
-            }
+                email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
+            },
         };
     },
     computed: {
@@ -179,13 +185,16 @@ export default {
         },
         phoneMask() {
             return MaskaFormattedMasks.PHONE_NUMBER;
-        }
+        },
     },
     methods: {
         backButtonAction() {
             // route to move backwards
             this.mainStore.resetBailout();
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK_PREVIOUS, this.$route);
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_BACK_PREVIOUS,
+                this.$route
+            );
         },
         forwardButtonAction() {
             this.mainStore.setBailoutContactInfo(this.bailoutPageModel);
@@ -201,10 +210,10 @@ export default {
                 firstName: useMainStore().order.customer.firstName,
                 lastName: useMainStore().order.customer.lastName,
                 phoneNumber: useMainStore().order.customer.phoneNumber,
-                email: useMainStore().order.customer.emailAddress
+                email: useMainStore().order.customer.emailAddress,
             };
-        }
-    }
+        },
+    },
 };
 </script>
 
diff --git a/src/layouts/contact-confirmation/contact-confirmation.vue b/src/layouts/contact-confirmation/contact-confirmation.vue
index a95f172f..95d3ada2 100644
--- a/src/layouts/contact-confirmation/contact-confirmation.vue
+++ b/src/layouts/contact-confirmation/contact-confirmation.vue
@@ -1,11 +1,17 @@
 <template>
-    <div class="page-container-grouped-styles">
-        <siteHeader cmsWidgetName="SiteHeaderWidget" />
-        <div class="main-content-container">
-            <siteSubHeader
-                cmsWidgetName="SiteSubHeaderWidget"
-                class="sub-header-content"
-                justification="left" />
+    <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 cmsWidgetName="SiteHeaderWidget" />
+            </div>
+        </div>
+        <div class="row justify-content-center">
+            <div class="col-md-6 col-xl-4">
+                <siteSubHeader
+                    cmsWidgetName="SiteSubHeaderWidget"
+                    class="sub-header-content"
+                    justification="left" />
+            </div>
         </div>
     </div>
 </template>
@@ -23,7 +29,7 @@ export default {
     name: 'contact-confirmation',
     components: {
         siteHeader,
-        siteSubHeader
+        siteSubHeader,
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
@@ -32,8 +38,8 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
+                promise: cmsContentPromise,
+            },
         ];
         // use resultMap to populate layout content.
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -47,13 +53,15 @@ export default {
         return { mainStore };
     },
     data() {
-        const contactConfirmationData = useMainStore().pageData(issPageValues.CONTACT_CONFIRMATION);
+        const contactConfirmationData = useMainStore().pageData(
+            issPageValues.CONTACT_CONFIRMATION
+        );
         return {
-            contactConfirmationModel: contactConfirmationData
+            contactConfirmationModel: contactConfirmationData,
         };
     },
     computed: {},
-    methods: {}
+    methods: {},
 };
 </script>
 

From f5ee91920908c1455e49813f1bd57e353f2587e8 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 17 Apr 2024 09:54:44 -0400
Subject: [PATCH 18/26] WIP Update markup for payment-page.

---
 src/layouts/payment-page/payment-page.vue | 522 ++++++++++------------
 1 file changed, 224 insertions(+), 298 deletions(-)

diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index 2642ccca..4d130730 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -1,9 +1,13 @@
 <template>
     <Form>
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid pb-2 payment">
+        <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 cmsWidgetName="SiteHeaderWidget" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <alert
                         v-if="displayPayInAdvanceCreditCardAlert"
                         name="payInAdvanceCreditCardErrorAlert"
@@ -42,7 +46,6 @@
                         @backClicked="backButtonAction" />
                 </div>
             </div>
-
             <div
                 v-if="shouldBlockInteraction"
                 class="ui-block"
@@ -56,22 +59,10 @@
         :target="isPaypal ? '_top' : 'card-frame'"
         method="POST"
         :action="checkoutUrl">
-        <input
-            type="hidden"
-            name="paymentType"
-            :value="paymentType" />
-        <input
-            type="hidden"
-            name="sgSessionId"
-            :value="authToken" />
-        <input
-            type="hidden"
-            name="sgAuthToken"
-            :value="authToken" />
-        <input
-            type="hidden"
-            name="sgSignaturePublic"
-            :value="authSignature" />
+        <input type="hidden" name="paymentType" :value="paymentType" />
+        <input type="hidden" name="sgSessionId" :value="authToken" />
+        <input type="hidden" name="sgAuthToken" :value="authToken" />
+        <input type="hidden" name="sgSignaturePublic" :value="authSignature" />
         <input
             type="hidden"
             name="sgSignatureStartDate"
@@ -84,34 +75,13 @@
             type="hidden"
             name="sge_commerce_indicator_isinternet"
             value="true" />
-        <input
-            type="hidden"
-            name="sghopsource"
-            value="Safelite.com" />
-        <input
-            type="hidden"
-            name="sgHtmlStyle"
-            value="ResourceSafeliteHtml" />
-        <input
-            type="hidden"
-            name="sgErrorMessagesEmbedded"
-            value="true" />
-        <input
-            type="hidden"
-            name="sgNoKeystrokeProcessing"
-            value="false" />
-        <input
-            type="hidden"
-            name="maskCharacter"
-            value="*" />
-        <input
-            type="hidden"
-            name="styleSheetCode"
-            :value="dynamicCSSUrl" />
-        <input
-            type="hidden"
-            name="styleSheetCode2"
-            :value="dynamicHopCSSUrl" />
+        <input type="hidden" name="sghopsource" value="Safelite.com" />
+        <input type="hidden" name="sgHtmlStyle" value="ResourceSafeliteHtml" />
+        <input type="hidden" name="sgErrorMessagesEmbedded" value="true" />
+        <input type="hidden" name="sgNoKeystrokeProcessing" value="false" />
+        <input type="hidden" name="maskCharacter" value="*" />
+        <input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
+        <input type="hidden" name="styleSheetCode2" :value="dynamicHopCSSUrl" />
         <input
             type="hidden"
             name="sgReceiptResponseURL"
@@ -124,102 +94,33 @@
             type="hidden"
             name="sgErrorResponseURL"
             :value="payInAdvanceResponseUrl" />
-        <input
-            type="hidden"
-            name="sgheaderline1"
-            :value="getHeaderLine1" />
-        <input
-            type="hidden"
-            name="sgHeader1subtitle"
-            value="" />
-        <input
-            type="hidden"
-            name="sgheaderline2"
-            :value="getHeaderLine2" />
-        <input
-            type="hidden"
-            name="sgheaderline3"
-            value="" />
-        <input
-            type="hidden"
-            name="sgheaderline4"
-            value="" />
+        <input type="hidden" name="sgheaderline1" :value="getHeaderLine1" />
+        <input type="hidden" name="sgHeader1subtitle" value="" />
+        <input type="hidden" name="sgheaderline2" :value="getHeaderLine2" />
+        <input type="hidden" name="sgheaderline3" value="" />
+        <input type="hidden" name="sgheaderline4" value="" />
         <input
             type="hidden"
             name="sgheaderline5"
             value="*Required information" />
-        <input
-            type="hidden"
-            name="billTo_firstName"
-            :value="firstName" />
-        <input
-            type="hidden"
-            name="billTo_firstNameShow"
-            value="true" />
-        <input
-            type="hidden"
-            name="sghopmiddleInitialShow"
-            value="false" />
-        <input
-            type="hidden"
-            name="billTo_lastName"
-            :value="lastName" />
-        <input
-            type="hidden"
-            name="billTo_lastNameShow"
-            value="true" />
-        <input
-            type="hidden"
-            name="billTo_street1"
-            value="" />
-        <input
-            type="hidden"
-            name="billTo_street2"
-            value="" />
-        <input
-            type="hidden"
-            name="billTo_city"
-            value="" />
-        <input
-            type="hidden"
-            name="billTo_state"
-            value="" />
-        <input
-            type="hidden"
-            name="billTo_postalCode"
-            value="" />
-        <input
-            type="hidden"
-            name="billTo_postalCodeShow"
-            value="true" />
-        <input
-            type="hidden"
-            name="billTo_postalCodeEnable"
-            value="true" />
-        <input
-            type="hidden"
-            name="sgLabelPostalCode"
-            value="Billing ZIP" />
-        <input
-            type="hidden"
-            name="sgtotalamount"
-            :value="displayAmount" />
-        <input
-            type="hidden"
-            name="totalAmountDecimal"
-            :value="totalAmount" />
-        <input
-            type="hidden"
-            name="lineItems"
-            :value="payInAdvanceLineItems" />
-        <input
-            type="hidden"
-            name="sgdiscountstrikethruamount"
-            value="" />
-        <input
-            type="hidden"
-            name="callerDisplayText"
-            value="" />
+        <input type="hidden" name="billTo_firstName" :value="firstName" />
+        <input type="hidden" name="billTo_firstNameShow" value="true" />
+        <input type="hidden" name="sghopmiddleInitialShow" value="false" />
+        <input type="hidden" name="billTo_lastName" :value="lastName" />
+        <input type="hidden" name="billTo_lastNameShow" value="true" />
+        <input type="hidden" name="billTo_street1" value="" />
+        <input type="hidden" name="billTo_street2" value="" />
+        <input type="hidden" name="billTo_city" value="" />
+        <input type="hidden" name="billTo_state" value="" />
+        <input type="hidden" name="billTo_postalCode" value="" />
+        <input type="hidden" name="billTo_postalCodeShow" value="true" />
+        <input type="hidden" name="billTo_postalCodeEnable" value="true" />
+        <input type="hidden" name="sgLabelPostalCode" value="Billing ZIP" />
+        <input type="hidden" name="sgtotalamount" :value="displayAmount" />
+        <input type="hidden" name="totalAmountDecimal" :value="totalAmount" />
+        <input type="hidden" name="lineItems" :value="payInAdvanceLineItems" />
+        <input type="hidden" name="sgdiscountstrikethruamount" value="" />
+        <input type="hidden" name="callerDisplayText" value="" />
         <input
             type="hidden"
             name="sgtermsofusedisplaytext"
@@ -252,38 +153,14 @@
             type="hidden"
             name="sgErrorMessageTimeOut"
             value="For your security, this transaction has been timed out." />
-        <input
-            type="hidden"
-            name="sgLabelCardNumber"
-            value="" />
-        <input
-            type="hidden"
-            name="sgLabelAddressLine1"
-            :value="address1" />
-        <input
-            type="hidden"
-            name="sgLabelAddressLine2"
-            :value="address2" />
-        <input
-            type="hidden"
-            name="sgLabelCity"
-            :value="city" />
-        <input
-            type="hidden"
-            name="sgLabelState"
-            :value="state" />
-        <input
-            type="hidden"
-            name="sgCtu"
-            :value="ctu" />
-        <input
-            type="hidden"
-            name="sgWorkOrder"
-            :value="workOrderNumber" />
-        <input
-            type="hidden"
-            name="sgEmailAddress"
-            :value="emailAddress" />
+        <input type="hidden" name="sgLabelCardNumber" value="" />
+        <input type="hidden" name="sgLabelAddressLine1" :value="address1" />
+        <input type="hidden" name="sgLabelAddressLine2" :value="address2" />
+        <input type="hidden" name="sgLabelCity" :value="city" />
+        <input type="hidden" name="sgLabelState" :value="state" />
+        <input type="hidden" name="sgCtu" :value="ctu" />
+        <input type="hidden" name="sgWorkOrder" :value="workOrderNumber" />
+        <input type="hidden" name="sgEmailAddress" :value="emailAddress" />
         <input
             type="hidden"
             name="paypalInvoiceNumber"
@@ -304,30 +181,12 @@
             type="hidden"
             name="sgCCTimeoutURL"
             :value="payInAdvanceCancelUrl" />
-        <input
-            type="hidden"
-            name="sgTransactionType"
-            value="authorization" />
-        <input
-            type="hidden"
-            name="amount"
-            :value="totalAmount" />
-        <input
-            type="hidden"
-            name="ctu"
-            :value="ctu" />
-        <input
-            type="hidden"
-            name="orderNumber"
-            :value="workOrderNumber" />
-        <input
-            type="hidden"
-            name="billTo_email"
-            :value="emailAddress" />
-        <input
-            type="hidden"
-            name="useDecisionManager"
-            value="True" />
+        <input type="hidden" name="sgTransactionType" value="authorization" />
+        <input type="hidden" name="amount" :value="totalAmount" />
+        <input type="hidden" name="ctu" :value="ctu" />
+        <input type="hidden" name="orderNumber" :value="workOrderNumber" />
+        <input type="hidden" name="billTo_email" :value="emailAddress" />
+        <input type="hidden" name="useDecisionManager" value="True" />
         <input
             type="hidden"
             name="correlationId"
@@ -336,38 +195,17 @@
             type="hidden"
             name="sgErrorMessageCard_CVN"
             value="Please enter a valid CVV" />
-        <input
-            type="hidden"
-            name="ship_to_address_line1"
-            :value="address1" />
-        <input
-            type="hidden"
-            name="ship_to_address_line2"
-            :value="address2" />
-        <input
-            type="hidden"
-            name="ship_to_address_city"
-            :value="city" />
-        <input
-            type="hidden"
-            name="ship_to_address_state"
-            :value="state" />
-        <input
-            type="hidden"
-            name="ship_to_address_country"
-            value="US" />
+        <input type="hidden" name="ship_to_address_line1" :value="address1" />
+        <input type="hidden" name="ship_to_address_line2" :value="address2" />
+        <input type="hidden" name="ship_to_address_city" :value="city" />
+        <input type="hidden" name="ship_to_address_state" :value="state" />
+        <input type="hidden" name="ship_to_address_country" value="US" />
         <input
             type="hidden"
             name="ship_to_address_postal_code"
             :value="zipCode" />
-        <input
-            type="hidden"
-            name="ship_to_phone"
-            :value="phoneNumber" />
-        <input
-            type="hidden"
-            name="calling_application"
-            value="ISSNextGen" />
+        <input type="hidden" name="ship_to_phone" :value="phoneNumber" />
+        <input type="hidden" name="calling_application" value="ISSNextGen" />
     </form>
 </template>
 <script>
@@ -386,7 +224,10 @@ import { useMainStore } from '@/store';
 import iframeResize from 'iframe-resizer/js/iframeResizer.js';
 import externalUrls from '@/router/router-constants/externalUrl-values.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
-import { hopPaymentMethods, paymentMethods } from '@/constants/payment-method-constants.js';
+import {
+    hopPaymentMethods,
+    paymentMethods,
+} from '@/constants/payment-method-constants.js';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
 import queryStrings from '@/constants/query-strings';
 import alert from '@/ux-components/alert/alert.vue';
@@ -398,7 +239,7 @@ export default {
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        alert
+        alert,
     },
     directives: {
         resize: {
@@ -409,15 +250,16 @@ export default {
             },
             unmounted(el) {
                 el.iFrameResizer.removeListeners();
-            }
-        }
+            },
+        },
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-        const paymentSignaturePromise = await useMainStore().getPaymentSignature();
+        const paymentSignaturePromise =
+            await useMainStore().getPaymentSignature();
 
         const wipersPromise = useMainStore().getWipers();
         const rainDefensePromise = useMainStore().getRainDefense();
@@ -426,20 +268,20 @@ export default {
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
-                promise: cmsContentPromise
+                promise: cmsContentPromise,
             },
             {
                 resultKey: 'paymentSignature',
-                promise: paymentSignaturePromise
+                promise: paymentSignaturePromise,
             },
             {
                 resultKey: 'wipers',
-                promise: wipersPromise
+                promise: wipersPromise,
             },
             {
                 resultKey: 'rainDefense',
-                promise: rainDefensePromise
-            }
+                promise: rainDefensePromise,
+            },
         ];
 
         // use resultMap to populate layout content.
@@ -452,16 +294,28 @@ export default {
             resultMap.rainDefense,
             ...supportingItems,
             ...resultMap.wipers,
-            ...glassParts
+            ...glassParts,
         ];
         const availableVaps = [resultMap.rainDefense, ...resultMap.wipers];
-        const pricedLineItemsToTax = await useMainStore().priceOrderItemsAndSaveServerData(lineItemsToTax);
-        const taxedLineItems = await useMainStore().taxOrderItemsAndSaveServerData(pricedLineItemsToTax);
+        const pricedLineItemsToTax =
+            await useMainStore().priceOrderItemsAndSaveServerData(
+                lineItemsToTax
+            );
+        const taxedLineItems =
+            await useMainStore().taxOrderItemsAndSaveServerData(
+                pricedLineItemsToTax
+            );
 
         // Match all line items to the line items as they are in the store
         // and rebuild the original structure.
-        const taxLineItems = useMainStore().mapTaxedLineItemsToStoreFormat(taxedLineItems, lineItemsFromStore);
-        const taxedVaps = useMainStore().mapTaxedLineItemsToStoreFormat(taxedLineItems, availableVaps);
+        const taxLineItems = useMainStore().mapTaxedLineItemsToStoreFormat(
+            taxedLineItems,
+            lineItemsFromStore
+        );
+        const taxedVaps = useMainStore().mapTaxedLineItemsToStoreFormat(
+            taxedLineItems,
+            availableVaps
+        );
 
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
@@ -508,7 +362,7 @@ export default {
             totalAmount: this.getAmountDue(),
             displayAmount: this.getDisplayAmountDue(),
             payInAdvanceLineItems: '',
-            shouldBlockInteraction: false
+            shouldBlockInteraction: false,
         };
     },
     computed: {
@@ -530,13 +384,19 @@ export default {
         },
         getHeaderLine1() {
             if (!this.isPaypal) {
-                return this.getCmsContent('PayInAdvanceHeaderLine1', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+                return this.getCmsContent(
+                    'PayInAdvanceHeaderLine1',
+                    widgetFields.TEXT_BLOCK_WIDGET.TEXT
+                );
             }
             return '';
         },
         getHeaderLine2() {
             if (!this.isPaypal) {
-                return this.getCmsContent('PayInAdvanceHeaderLine2', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+                return this.getCmsContent(
+                    'PayInAdvanceHeaderLine2',
+                    widgetFields.TEXT_BLOCK_WIDGET.TEXT
+                );
             }
             return '';
         },
@@ -548,70 +408,75 @@ export default {
         },
         displayPayInAdvanceAfterPayAlert() {
             return this.displayPayInAdvanceAlert(paymentMethods.AFTERPAY);
-        }
+        },
     },
-    methods:
-    {
+    methods: {
         arePagePrerequisitesValid() {
             // Line Items
-            const packageReqs = !!useMainStore().order.lineItems.supportingItems;
+            const packageReqs =
+                !!useMainStore().order.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;
+            const isMobile =
+                serviceLocation.appointmentType ===
+                    AppointmentTypeStrings.MOBILE ||
+                serviceLocation.appointmentType ===
+                    AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
 
             const serviceLocationReqs =
                 (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
 
             // Insurance
-            const isInsuranceSet = useMainStore().order.payment.isInsurance !== null;
+            const isInsuranceSet =
+                useMainStore().order.payment.isInsurance !== null;
 
             // Schedule
             const { schedule } = useMainStore().order;
             const scheduleReqs = !!(
-                schedule.date
-                && schedule.startTime
-                && schedule.endTime
-                && schedule.jobMaxMinutes
-                && schedule.jobMinMinutes
+                schedule.date &&
+                schedule.startTime &&
+                schedule.endTime &&
+                schedule.jobMaxMinutes &&
+                schedule.jobMinMinutes
             );
 
             // Contact Info
             const { contactInfo } = useMainStore().order;
             const contactInfoReqs = !!(
-                contactInfo.firstName
-                && contactInfo.lastName
-                && contactInfo.servicePhone
-                && contactInfo.emailAddress
+                contactInfo.firstName &&
+                contactInfo.lastName &&
+                contactInfo.servicePhone &&
+                contactInfo.emailAddress
             );
 
             const paymentMethodReqs =
-                useMainStore().order.payment.isPayInAdvance !== null
-                && (useMainStore().order.payment.isPayInAdvance || !!useMainStore().order.payment.payInAdvanceType);
+                useMainStore().order.payment.isPayInAdvance !== null &&
+                (useMainStore().order.payment.isPayInAdvance ||
+                    !!useMainStore().order.payment.payInAdvanceType);
 
             return (
-                packageReqs
-                && serviceLocationReqs
-                && isInsuranceSet
-                && scheduleReqs
-                && contactInfoReqs
-                && paymentMethodReqs
+                packageReqs &&
+                serviceLocationReqs &&
+                isInsuranceSet &&
+                scheduleReqs &&
+                contactInfoReqs &&
+                paymentMethodReqs
             );
         },
         setData(taxedVaps, taxLineItems) {
@@ -636,19 +501,32 @@ export default {
             return undefined;
         },
         getAddress1() {
-            return useMainStore().order.serviceLocation.address ?? useMainStore().order.serviceLocation.provider.address.streetAddress;
+            return (
+                useMainStore().order.serviceLocation.address ??
+                useMainStore().order.serviceLocation.provider.address
+                    .streetAddress
+            );
         },
         getAddress2() {
             return useMainStore().order.serviceLocation.address2;
         },
         getCity() {
-            return useMainStore().order.serviceLocation.city ?? useMainStore().order.serviceLocation.provider.address.city;
+            return (
+                useMainStore().order.serviceLocation.city ??
+                useMainStore().order.serviceLocation.provider.address.city
+            );
         },
         getState() {
-            return useMainStore().order.serviceLocation.state ?? useMainStore().order.serviceLocation.provider.address.state;
+            return (
+                useMainStore().order.serviceLocation.state ??
+                useMainStore().order.serviceLocation.provider.address.state
+            );
         },
         getZipCode() {
-            return useMainStore().order.serviceLocation.zipCode ?? useMainStore().order.serviceLocation.provider.address.zipCode;
+            return (
+                useMainStore().order.serviceLocation.zipCode ??
+                useMainStore().order.serviceLocation.provider.address.zipCode
+            );
         },
         getPaymentType() {
             switch (useMainStore().order.payment.payInAdvanceType) {
@@ -664,13 +542,33 @@ export default {
         },
         getPayInAdvanceLineItems(cartItems) {
             const { glassParts } = useMainStore().order.lineItems;
-            const lineItems = (glassParts === null)
-                ? [this.getPayInAdvanceFormattedLineItem('Labor', 0, 1), this.getPayInAdvanceFormattedLineItem('Repair supplies', 0, 1)]
-                : [this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1)];
+            const lineItems =
+                glassParts === null
+                    ? [
+                          this.getPayInAdvanceFormattedLineItem('Labor', 0, 1),
+                          this.getPayInAdvanceFormattedLineItem(
+                              'Repair supplies',
+                              0,
+                              1
+                          ),
+                      ]
+                    : [
+                          this.getPayInAdvanceFormattedLineItem(
+                              'Parts and labor',
+                              0,
+                              1
+                          ),
+                      ];
 
             cartItems.forEach((item) => {
                 if (item.name !== null && item.category !== 'promos') {
-                    lineItems.push(this.getPayInAdvanceFormattedLineItem(item.name, (item.salesTax + item.subTotal).toFixed(2), 1));
+                    lineItems.push(
+                        this.getPayInAdvanceFormattedLineItem(
+                            item.name,
+                            (item.salesTax + item.subTotal).toFixed(2),
+                            1
+                        )
+                    );
                 }
             });
 
@@ -681,9 +579,19 @@ export default {
         },
         getMockPiaLineItems() {
             let lineItems = [];
-            lineItems = [this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1)];
-            lineItems.push(this.getPayInAdvanceFormattedLineItem('New wiper blades', 75.22, 1));
-            lineItems.push(this.getPayInAdvanceFormattedLineItem('Recycling', 37.60, 1));
+            lineItems = [
+                this.getPayInAdvanceFormattedLineItem('Parts and labor', 0, 1),
+            ];
+            lineItems.push(
+                this.getPayInAdvanceFormattedLineItem(
+                    'New wiper blades',
+                    75.22,
+                    1
+                )
+            );
+            lineItems.push(
+                this.getPayInAdvanceFormattedLineItem('Recycling', 37.6, 1)
+            );
 
             this.payInAdvanceLineItems = lineItems.join('||');
         },
@@ -691,7 +599,9 @@ export default {
             return baseMixin.methods.getAmountDue(useMainStore().lineItems);
         },
         getDisplayAmountDue() {
-            return baseMixin.methods.getDisplayAmountDue(useMainStore().lineItems);
+            return baseMixin.methods.getDisplayAmountDue(
+                useMainStore().lineItems
+            );
         },
         fetchSignatureInfo(signatureInfo) {
             this.authToken = signatureInfo.token;
@@ -708,10 +618,21 @@ export default {
                 if (iframe) {
                     iframe.onload = () => {
                         if (iframe.contentWindow) {
-                            if (this.paymentType === hopPaymentMethods.CREDIT_CARD) {
-                                iframe.contentWindow.postMessage('CreditCardChosen', '*');
-                            } else if (this.paymentType === hopPaymentMethods.AFTERPAY) {
-                                iframe.contentWindow.postMessage('afterpay', '*');
+                            if (
+                                this.paymentType ===
+                                hopPaymentMethods.CREDIT_CARD
+                            ) {
+                                iframe.contentWindow.postMessage(
+                                    'CreditCardChosen',
+                                    '*'
+                                );
+                            } else if (
+                                this.paymentType === hopPaymentMethods.AFTERPAY
+                            ) {
+                                iframe.contentWindow.postMessage(
+                                    'afterpay',
+                                    '*'
+                                );
                             }
                         }
                     };
@@ -730,7 +651,8 @@ export default {
         },
         setIFrameListener() {
             window.addEventListener('message', (event) =>
-                this.handleIFrameContentWindowMessage(event));
+                this.handleIFrameContentWindowMessage(event)
+            );
         },
         setUIBlock(val) {
             this.shouldBlockInteraction = val;
@@ -742,7 +664,8 @@ export default {
         },
         displayPayInAdvanceAlert(payMethod) {
             return (
-                this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT] === payMethod
+                this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT] ===
+                payMethod
             );
         },
         paymentFailedPayLater() {
@@ -756,14 +679,17 @@ export default {
             window.location = this.payInAdvanceCancelUrl;
         },
         forwardButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
-        }
-    }
+            this.$router.navigate(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.$route
+            );
+        },
+    },
 };
 </script>
 <style lang="scss" scoped>
-.payment p{
-    margin-bottom:0.75rem;
+.payment p {
+    margin-bottom: 0.75rem;
 }
 
 .hop-iframe {

From 29acac17b29d403f5f7272e87f1e57b733b853c2 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 17 Apr 2024 10:33:02 -0400
Subject: [PATCH 19/26] WIP Update question-page-layout

---
 .../questions-page-layout.vue                 | 108 +++++++++---------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/iss-components/questions-page-layout/questions-page-layout.vue b/src/iss-components/questions-page-layout/questions-page-layout.vue
index 44d46440..999c3385 100644
--- a/src/iss-components/questions-page-layout/questions-page-layout.vue
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@@ -1,51 +1,45 @@
 <template>
-    <div :class="`page-container-grouped-styles questions-page`">
-        <div class="fade-on-route-transition position-relative">
-            <loadingModal
-                ref="loadingModal"
-                :textSlides="loadingText" />
-            <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <div class="select-car">
-                <div class="container-fluid pb-2">
-                    <div class="row px-3">
-                        <div class="col">
-                            <div class="select-car-form rounded">
-                                <vehicleBanner
-                                    class="mt-2 mb-4"
-                                    cmsWidgetName="VehicleBannerWidget"
-                                    :displayGenericVehicleImage="false" />
-                                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-                                <alert
-                                ref="alertFewMoreQuestions"
-                                cmsWidgetName="alertWidget"
-                                alertClass="alert-warning"
-                                :manualHeadline="alertFewMoreQuestionsHeader"
-                                :manualCopy="alertFewMoreQuestionsCopy"
-                                :isDismissible="false"
-                                class="mt-5" />
-                                <div
-                                    v-for="(questionsDatum, i) in questionsData"
-                                    :key="questionsDatum.key">
-                                    <questionChain
-                                        v-if="showThisQuestionChain(questionsDatum, i)"
-                                        ref="questionChain"
-                                        v-model="selectedAnswers[questionsDatum.answerKey]"
-                                        :questionData="questionsDatum.questions"
-                                        :index="i"
-                                        :answerKey="questionsDatum.answerKey"
-                                        :validationRules="validationRules" />
-                                </div>
-                                <siteFooter
-                                    ref="siteFooter"
-                                    class="mt-5"
-                                    cmsWidgetName="SiteFooterWidget"
-                                    :isForwardActionDisabled="!isMetaValid"
-                                    @backClicked="handleBackButtonAction"
-                                    @ForwardClicked="handleForwardButtonAction" />
-                            </div>
-                        </div>
-                    </div>
+    <div class="container-fluid fade-on-route-transition">
+        <div class="row justify-content-center">
+            <div class="col-md-6 px-0 px-md-2">
+                <loadingModal ref="loadingModal" :textSlides="loadingText" />
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+            </div>
+        </div>
+        <div class="row justify-content-center">
+            <div class="col-md-6 col-xl-4">
+                <vehicleBanner
+                    class="mt-2 mb-4"
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                <alert
+                    ref="alertFewMoreQuestions"
+                    cmsWidgetName="alertWidget"
+                    alertClass="alert-warning"
+                    :manualHeadline="alertFewMoreQuestionsHeader"
+                    :manualCopy="alertFewMoreQuestionsCopy"
+                    :isDismissible="false"
+                    class="mt-5" />
+                <div
+                    v-for="(questionsDatum, i) in questionsData"
+                    :key="questionsDatum.key">
+                    <questionChain
+                        v-if="showThisQuestionChain(questionsDatum, i)"
+                        ref="questionChain"
+                        v-model="selectedAnswers[questionsDatum.answerKey]"
+                        :questionData="questionsDatum.questions"
+                        :index="i"
+                        :answerKey="questionsDatum.answerKey"
+                        :validationRules="validationRules" />
                 </div>
+                <siteFooter
+                    ref="siteFooter"
+                    class="mt-5"
+                    cmsWidgetName="SiteFooterWidget"
+                    :isForwardActionDisabled="!isMetaValid"
+                    @backClicked="handleBackButtonAction"
+                    @ForwardClicked="handleForwardButtonAction" />
             </div>
         </div>
     </div>
@@ -70,7 +64,7 @@ export default {
         questionChain,
         siteSubHeader,
         siteFooter,
-        loadingModal
+        loadingModal,
     },
     props: {
         isMetaValid: Boolean,
@@ -80,7 +74,7 @@ export default {
         validationRules: String,
         modelValue: Object,
         loadingText: Array,
-        index: Number
+        index: Number,
     },
     emits: ['update:modelValue', 'forwardButtonAction', 'back-click'],
     computed: {
@@ -90,16 +84,22 @@ export default {
             },
             set(newValue) {
                 this.$emit('update:modelValue', newValue);
-            }
-        }
+            },
+        },
     },
     methods: {
         showThisQuestionChain(glass, i) {
             // return false if no questions or if suppressed
-            if (!glass.questions || glass.questions?.length < 1 || glass.isSuppressedPart) {
+            if (
+                !glass.questions ||
+                glass.questions?.length < 1 ||
+                glass.isSuppressedPart
+            ) {
                 return false;
             }
-            return this.index === i || glass.answerData?.answerResult?.length > 0;
+            return (
+                this.index === i || glass.answerData?.answerResult?.length > 0
+            );
         },
         handleForwardButtonAction() {
             this.$emit('forwardButtonAction');
@@ -109,8 +109,8 @@ export default {
         },
         showLoadingModal() {
             this.$refs.loadingModal.showModal();
-        }
-    }
+        },
+    },
 };
 </script>
 

From 9a710ab2c45bad8011b8abfbb0d1422230741a04 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 17 Apr 2024 10:46:46 -0400
Subject: [PATCH 20/26] WIP Fix misplaced </div> tags.

---
 .../policy-holder-details.vue                      | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue
index cf39a493..5e9fff1e 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.vue
+++ b/src/layouts/policy-holder-details/policy-holder-details.vue
@@ -37,15 +37,15 @@
                         isRequired
                         disableAutoFill
                         :validationRules="rules.lastName" />
+                    <siteFooter
+                        ref="siteFooter"
+                        class="mt-5"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @ForwardClicked="forwardButtonAction"
+                        @backClicked="navigateBack" />
                 </div>
             </div>
-            <siteFooter
-                ref="siteFooter"
-                class="mt-5"
-                cmsWidgetName="SiteFooterWidget"
-                :isForwardActionDisabled="!meta.valid"
-                @ForwardClicked="forwardButtonAction"
-                @backClicked="navigateBack" />
         </div>
     </Form>
 </template>

From 3276c013da4dbf9f45655c1e682f3a54243b1168 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 18 Apr 2024 13:17:23 -0400
Subject: [PATCH 21/26] WIP update modal positioning and text-link styles.

---
 .../site-header/menu-modal/menu-modal.vue     | 100 +++++++++--------
 src/ux-components/text-link/text-link.vue     | 102 +++++++++---------
 2 files changed, 102 insertions(+), 100 deletions(-)

diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue
index 3d6c6661..cc506b49 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.vue
+++ b/src/iss-components/site-header/menu-modal/menu-modal.vue
@@ -5,7 +5,21 @@
             type="button"
             :class="[isActive ? 'active' : '']"
             aria-label="Hamburger Menu (modal window)"
-            @click="toggle()">
+            @click="toggleModal">
+            <div class="bar1"></div>
+            <div class="bar2"></div>
+            <div class="bar3"></div>
+        </button>
+    </div>
+    <div class="menu-modal-container">
+        <button
+            aria-hidden="true"
+            tabindex="-1"
+            class="menu-button"
+            type="button"
+            :class="[isActive ? 'active' : '']"
+            aria-label="Hamburger Menu (modal window)"
+            @click="toggleModal">
             <div class="bar1"></div>
             <div class="bar2"></div>
             <div class="bar3"></div>
@@ -18,19 +32,8 @@
         data-bs-backdrop="false"
         tabindex="-1"
         aria-labelledby="footerModalLabel"
-        aria-hidden="true">
-        <div class="menu-modal-container">
-            <button
-                class="menu-button"
-                type="button"
-                :class="[isActive ? 'active' : '']"
-                aria-label="Hamburger Menu (modal window)"
-                @click="toggle()">
-                <div class="bar1"></div>
-                <div class="bar2"></div>
-                <div class="bar3"></div>
-            </button>
-        </div>
+        aria-hidden="true"
+        v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
         <div class="modal-dialog modal-fullscreen">
             <div class="modal-content">
                 <div class="modal-header visually-hidden">
@@ -40,30 +43,29 @@
                 </div>
                 <div class="modal-body d-flex flex-column">
                     <textLink
-                        linkType="navigation"
-                        text="Terms of service"
+                        linkType="newWindowLink"
+                        text="Terms of use"
                         href="//www.safelite.com/terms-of-use"
                         target="_blank" />
                     <textLink
-                        linkType="navigation"
+                        linkType="newWindowLink"
                         text="Your privacy choices"
                         href="//www.safelite.com/privacy-center"
                         target="_blank">
                         <template #after-text>
                             <img
                                 class="ccpa-icon"
-                                data-id="ccpa-icon"
                                 src="~@/assets/img/icons/ccpa-icon.svg"
                                 alt="Your privacy choices" />
                         </template>
                     </textLink>
                     <textLink
-                        linkType="navigation"
+                        linkType="newWindowLink"
                         text="Warranty"
                         href="//www.safelite.com/national-lifetime-warranty"
                         target="_blank" />
                     <textLink
-                        linkType="navigation"
+                        linkType="newWindowLink"
                         text="Notice at collection"
                         href="https://www.safelite.com/ccpa-privacy-policy"
                         target="_blank" />
@@ -77,8 +79,9 @@
 </template>
 
 <script>
-import textLink from '@/ux-components/text-link/text-link.vue';
+import textLink from '@/ux-components/text-link/text-link';
 import { Modal } from 'bootstrap';
+import baseMixin from '@/mixins/base-mixin.js';
 
 export default {
     name: 'menu-modal',
@@ -88,33 +91,32 @@ export default {
     data() {
         return {
             isActive: false,
-            currentFooterAndHeaderHeight: 0,
         };
     },
     methods: {
-        toggle() {
+        toggleModal() {
             if (this.isActive) {
-                // hide modal
-                this.isActive = false;
-                const modal = Modal.getInstance(
-                    document.getElementById('footerModal')
-                );
-                modal?.hide();
+                this.closeModal();
             } else {
-                // show modal
-                this.currentFooterAndHeaderHeight =
-                    this.getFooterInfoBoxHeight() + 56;
-                this.isActive = true;
-                const modal = Modal.getOrCreateInstance(
-                    document.getElementById('footerModal')
-                );
-                modal?.show();
-                document.querySelector('.fade-on-route-transition').scrollTo({
-                    top: 0,
-                    behavior: 'instant',
-                });
+                this.openModal();
             }
         },
+        openModal() {
+            Modal.getOrCreateInstance(
+                document.getElementById('footerModal')
+            ).show();
+        },
+        closeModal() {
+            Modal.getInstance(document.getElementById('footerModal')).hide();
+        },
+        show() {
+            this.isActive = true;
+            window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        },
+        hide() {
+            const self = this;
+            self.isActive = false;
+        },
     },
 };
 </script>
@@ -122,7 +124,7 @@ export default {
 <style lang="scss" scoped>
 .menu-modal-container {
     position: absolute;
-    padding: 1.47rem 1rem 1.47rem 1.47rem;
+    padding: 1.47rem 0.5rem 1.47rem 1.47rem;
     right: 0;
     button {
         border: none;
@@ -138,6 +140,7 @@ export default {
             justify-content: center;
             align-items: center;
             padding: 0; //Required to prevent 'squish' on iPhone
+            z-index: 1050;
             .bar1,
             .bar2,
             .bar3 {
@@ -161,14 +164,12 @@ export default {
 }
 .modal {
     &.menu-modal {
-        max-width: 100%;
         left: auto;
         height: calc(100% - 56px);
         top: 56px;
         border-top: 1px solid $gray-300;
         overflow-x: visible;
         overflow-y: visible;
-        z-index: 3;
         .modal-body {
             padding: 2rem;
             .ccpa-icon {
@@ -180,18 +181,15 @@ export default {
         .modal-fullscreen {
             width: 100vw;
         }
-        .navigation-link {
-            margin-bottom: 1.5rem;
-        }
         .modal-footer {
             border-top: none;
             padding: 2rem;
         }
         .menu-modal-container {
             position: absolute;
-            padding: 1.47rem 1rem 1.47rem 1.47rem;
-            right: 0.5rem;
-            top: -4.5rem;
+            padding: 1.47rem 0 1.47rem 1.47rem;
+            right: 0;
+            top: -5rem;
             button {
                 border: none;
                 &.menu-button {
@@ -201,8 +199,6 @@ export default {
                     box-shadow: none;
                     background-color: $white;
                     position: relative;
-                    right: -0.5rem;
-                    top: 0.5rem;
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 5932256a..9f98e285 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -1,33 +1,38 @@
 <template>
     <a
-      v-if="linkType === 'navigation'"
-      class="navigation-link"
-      :href="href"
-      @click="handleClick">
-      {{ text }}<slot name="after-text"></slot>
+        v-if="linkType === 'navigation'"
+        class="navigation-link"
+        :href="href"
+        @click="handleClick">
+        {{ text }}<slot name="after-text"></slot>
     </a>
     <a
-      v-else-if="linkType === 'footer'"
-      class="footer-link"
-      :href="href"
-      target="_blank"
-      @click="handleClick">
-      {{ text }}<slot name="after-text"></slot>
+        v-else-if="linkType === 'footer'"
+        class="footer-link"
+        :href="href"
+        target="_blank"
+        @click="handleClick">
+        {{ text }}<slot name="after-text"></slot>
     </a>
     <a
-      v-else-if="linkType === 'textSmall'"
-      class="small"
-      :href="href"
-      @click="handleClick">
-      {{ text }}<slot name="after-text"></slot>
+        v-else-if="linkType === 'textSmall'"
+        class="small"
+        :href="href"
+        @click="handleClick">
+        {{ text }}<slot name="after-text"></slot>
+    </a>
+    <a v-else-if="linkType === 'text'" :href="href" @click="handleClick">
+        {{ text }}<slot name="after-text"></slot>
     </a>
     <a
-      v-else-if="linkType === 'text'"
-      :href="href"
-      @click="handleClick">
-      {{ text }}<slot name="after-text"></slot>
-    </a>
-  </template>
+        v-else-if="linkType === 'newWindowLink'"
+        class="new-window-link"
+        :href="href"
+        target="_blank"
+        @click="handleClick"
+        >{{ text }}<slot name="after-text"></slot
+    ></a>
+</template>
 
 <script>
 export default {
@@ -36,8 +41,8 @@ export default {
         linkType: String,
         text: String,
         href: {
-            type: String
-        }
+            type: String,
+        },
     },
     emits: ['click-event'],
     methods: {
@@ -49,13 +54,13 @@ export default {
                 true
             );
             this.$emit('click-event');
-        }
-    }
+        },
+    },
 };
 </script>
 
 <style lang="scss" scoped>
-  a {
+a {
     color: $blue;
     text-underline-offset: 5px;
     line-height: 2;
@@ -63,31 +68,32 @@ export default {
     font-weight: 500;
     max-width: fit-content;
     &:hover {
-      color: $blue-700;
+        color: $blue-700;
     }
     &.small {
-      line-height: 24px;
-      &:hover {
-        color: $blue-700;
-      }
+        line-height: 24px;
+        &:hover {
+            color: $blue-700;
+        }
     }
-    &.navigation-link {
-      color: $black;
-      line-height: 26px;
-      white-space: nowrap;
-      align-items: center;
+    &.navigation-link,
+    &.new-window-link {
+        color: $black;
+        line-height: 26px;
+        white-space: nowrap;
+        align-items: center;
     }
     &.footer-link {
-      color: $gray-600;
-      text-decoration: none;
-      line-height: 20px;
-      padding: 0 0 2px 0;
-      font-weight: 400;
-      font-size: 0.75rem;
-      &:hover {
+        color: $gray-600;
+        text-decoration: none;
+        line-height: 20px;
         padding: 0 0 2px 0;
-        text-decoration: underline;
-      }
+        font-weight: 400;
+        font-size: 0.75rem;
+        &:hover {
+            padding: 0 0 2px 0;
+            text-decoration: underline;
+        }
     }
-  }
-  </style>
+}
+</style>

From 771e57f804778f87edcfe2445d400188bf08171f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 22 Apr 2024 10:53:24 -0400
Subject: [PATCH 22/26] Fix unit tests.

---
 .../site-header/menu-modal/menu-modal.spec.js               | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/iss-components/site-header/menu-modal/menu-modal.spec.js b/src/iss-components/site-header/menu-modal/menu-modal.spec.js
index d265b3bd..86245f20 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.spec.js
+++ b/src/iss-components/site-header/menu-modal/menu-modal.spec.js
@@ -24,12 +24,12 @@ describe('menu-modal.vue', () => {
         expect(modalFooter.text()).toContain('Safelite Group');
     });
 
-    it('Should return Terms of service text link text', async () => {
+    it('Should return Terms of use text link text', async () => {
         // Act
         const wrapper = shallowMount(menuModal);
 
         // Expect
-        expect(wrapper.html()).toContain('Terms of service');
+        expect(wrapper.html()).toContain('Terms of use');
     });
 
     it('Should return "Your privacy choices" text link text', async () => {
@@ -53,7 +53,7 @@ describe('menu-modal.vue', () => {
         // Expect
         const icon = wrapper.find('[data-id="ccpa-icon"]');
         expect(icon.isVisible()).toBe(true);
-        expect(icon.attributes('alt')).toBe('Your privacy choices');
+        expect(icon.attributes('alt')).toBe('Notice at collection');
     });
 
     it('Should return Warranty text link text', async () => {

From e4e959de32418de442edc2a288f26f684de771ad Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 22 Apr 2024 11:20:37 -0400
Subject: [PATCH 23/26] Update unit test.

---
 src/iss-components/site-header/menu-modal/menu-modal.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/iss-components/site-header/menu-modal/menu-modal.spec.js b/src/iss-components/site-header/menu-modal/menu-modal.spec.js
index 86245f20..d121a7b0 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.spec.js
+++ b/src/iss-components/site-header/menu-modal/menu-modal.spec.js
@@ -53,7 +53,7 @@ describe('menu-modal.vue', () => {
         // Expect
         const icon = wrapper.find('[data-id="ccpa-icon"]');
         expect(icon.isVisible()).toBe(true);
-        expect(icon.attributes('alt')).toBe('Notice at collection');
+        expect(icon.attributes('alt')).toBe('Your privacy choices');
     });
 
     it('Should return Warranty text link text', async () => {

From 461f09bf446110265c2341b46a48e2678e3abe96 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 22 Apr 2024 12:18:47 -0400
Subject: [PATCH 24/26] Remove unneeded unit test.

---
 .../site-header/menu-modal/menu-modal.spec.js    | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/src/iss-components/site-header/menu-modal/menu-modal.spec.js b/src/iss-components/site-header/menu-modal/menu-modal.spec.js
index d121a7b0..fc34f46f 100644
--- a/src/iss-components/site-header/menu-modal/menu-modal.spec.js
+++ b/src/iss-components/site-header/menu-modal/menu-modal.spec.js
@@ -40,22 +40,6 @@ describe('menu-modal.vue', () => {
         expect(wrapper.html()).toContain('Your privacy choices');
     });
 
-    test('Icon for link to "Privacy Policies" page is displayed with the correct alternate text', () => {
-        // NOTE: We need a way to target a specific <textLink> component so we can be sure that
-        //   an icon is coming from a specific <textLink> component.
-        // That requires an additional prop in the <textLink> component. Will hold off on adding the prop
-        //   until there is more clarity on how we handle shared components.
-        // For now the test is below is the best we can do.
-
-        // Arrange
-        const wrapper = mount(menuModal);
-
-        // Expect
-        const icon = wrapper.find('[data-id="ccpa-icon"]');
-        expect(icon.isVisible()).toBe(true);
-        expect(icon.attributes('alt')).toBe('Your privacy choices');
-    });
-
     it('Should return Warranty text link text', async () => {
         // Act
         const wrapper = shallowMount(menuModal);

From 50dc339660776f9d5815c75eccf4bafeb828abf6 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 22 Apr 2024 12:35:58 -0400
Subject: [PATCH 25/26] Fix formatting error.

---
 .../duplicate-check/duplicate-check.vue       | 65 ++++++++++---------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue
index fd66e159..7a13dee5 100644
--- a/src/layouts/duplicate-check/duplicate-check.vue
+++ b/src/layouts/duplicate-check/duplicate-check.vue
@@ -76,10 +76,6 @@ export default {
             vm.setCmsContent(cmsContent);
         });
     },
-    setup() {
-        const mainStore = useMainStore();
-        return { mainStore };
-    },
     data() {
         return {
             selectedAnswer: null,
@@ -114,25 +110,31 @@ export default {
         },
         duplicateOrders() {
             const duplicateOrderText = 'Finish Existing Claim';
-            const orders = this.mainStore.applicationUser.duplicateOrders;
-            return orders?.map((o) => {
-                const vehicle = !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
-                    ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
-                    : null;
+            const orders = useMainStore().applicationUser.duplicateOrders;
+            return (
+                orders?.map((o) => {
+                    const vehicle =
+                        !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
+                            ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
+                            : null;
 
-                const dateOfLoss = o.responseDate == null ? '' : new Date(o.responseDate).toLocaleDateString();
-                const subtext = vehicle && o.responseDate
-                    ? `${vehicle}, ${dateOfLoss}`
-                    : (vehicle ?? '').concat(dateOfLoss);
+                    const dateOfLoss =
+                        o.responseDate == null
+                            ? ''
+                            : new Date(o.responseDate).toLocaleDateString();
+                    const subtext =
+                        vehicle && o.responseDate
+                            ? `${vehicle}, ${dateOfLoss}`
+                            : (vehicle ?? '').concat(dateOfLoss);
 
-                return {
-                    Text: duplicateOrderText,
-                    Name: o.referralNumber,
-                    SubText: toTitleCase(subtext),
-                    value: o.correlationId
-                };
-            }) ?? [];
-        },
+                    return {
+                        Text: duplicateOrderText,
+                        Name: o.referralNumber,
+                        SubText: toTitleCase(subtext),
+                        value: o,
+                    };
+                }) ?? []
+            );
         },
         answers() {
             return [...this.duplicateOrders, ...this.answersFromCms];
@@ -143,16 +145,17 @@ export default {
          * @summary Steps to perform when forward button clicked.
          */
         async forwardButtonAction() {
-            if (this.selectedAnswer !== null) {
-                const selectedReferral = this.mainStore.applicationUser.duplicateOrders.find((o) => o.correlationId === this.selectedAnswer);
-                if (selectedReferral) {
-                    await this.mainStore.loadSession(selectedReferral)
-                        .catch(() => {})
-                        .finally(() => {
-                            this.navigateForward();
-                        });
-                    return;
-                }
+            if (
+                this.selectedAnswer !== null &&
+                typeof this.selectedAnswer === 'object'
+            ) {
+                await useMainStore()
+                    .loadSession(this.selectedAnswer)
+                    .catch(() => {})
+                    .finally(() => {
+                        this.navigateForward();
+                    });
+                return;
             }
 
             this.navigateForward();

From cfbb50131a30a1e05ae49dcbd7f130317bdbe5fa Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 22 Apr 2024 13:36:55 -0400
Subject: [PATCH 26/26] Fix code conflict.

---
 .../duplicate-check/duplicate-check.vue       | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue
index 7a13dee5..d341a69e 100644
--- a/src/layouts/duplicate-check/duplicate-check.vue
+++ b/src/layouts/duplicate-check/duplicate-check.vue
@@ -76,6 +76,10 @@ export default {
             vm.setCmsContent(cmsContent);
         });
     },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
     data() {
         return {
             selectedAnswer: null,
@@ -131,7 +135,7 @@ export default {
                         Text: duplicateOrderText,
                         Name: o.referralNumber,
                         SubText: toTitleCase(subtext),
-                        value: o,
+                        value: o.correlationId,
                     };
                 }) ?? []
             );
@@ -145,19 +149,21 @@ export default {
          * @summary Steps to perform when forward button clicked.
          */
         async forwardButtonAction() {
-            if (
-                this.selectedAnswer !== null &&
-                typeof this.selectedAnswer === 'object'
-            ) {
-                await useMainStore()
-                    .loadSession(this.selectedAnswer)
-                    .catch(() => {})
-                    .finally(() => {
-                        this.navigateForward();
-                    });
-                return;
+            if (this.selectedAnswer !== null) {
+                const selectedReferral =
+                    this.mainStore.applicationUser.duplicateOrders.find(
+                        (o) => o.correlationId === this.selectedAnswer
+                    );
+                if (selectedReferral) {
+                    await this.mainStore
+                        .loadSession(selectedReferral)
+                        .catch(() => {})
+                        .finally(() => {
+                            this.navigateForward();
+                        });
+                    return;
+                }
             }
-
             this.navigateForward();
         },
         navigateForward() {