From 13f9451f3dc1f3abd3f3b80a9276de5130be3b17 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 5 Jul 2023 10:11:06 -0400
Subject: [PATCH] Update footer spacing on select pages.

---
 .../questions-page-layout.vue                 |   2 +-
 .../coverage-statement/coverage-statement.vue |  11 +-
 .../service-location/service-location.vue     |  24 +-
 .../service-packages/service-packages.vue     | 299 +++++++++---------
 src/layouts/vehicle-lookup/vehicle-lookup.vue |   2 +-
 src/layouts/vehicle-parts/vehicle-parts.vue   |   1 +
 6 files changed, 165 insertions(+), 174 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 9a500e89..effd7433 100644
--- a/src/iss-components/questions-page-layout/questions-page-layout.vue
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@@ -29,7 +29,7 @@
                                     :validationRules="validationRules" />
                                 </div>
                                 <siteFooter
-                                class="mt-3"
+                                class="mt-5"
                                 ref="siteFooter"
                                 cmsWidgetName="SiteFooterWidget"
                                 :isForwardActionDisabled="!isMetaValid"
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index f50a0b84..510cc288 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -27,6 +27,7 @@
                                   <steeringText  cmsWidgetName="MASteeringText" ></steeringText>
                               </div>
                               <siteFooter
+                                class="mt-5"
                                 cmsWidgetName="SiteFooterWidget"
                                 :isForwardActionDisabled="!meta.valid"
                                 @backClicked="navigateBack"
@@ -38,7 +39,7 @@
               </div>
           </div>
       </div>
-      <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />	
+      <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
   </Form>
 </template>
 <script>
@@ -71,7 +72,7 @@ export default {
       recalModal,
       steeringText
   },
-  mounted() { 
+  mounted() {
     setupModalLinks(this);
   },
   computed: {
@@ -142,7 +143,7 @@ export default {
           }
           return false;
       },
-      
+
       async forwardButtonAction() {
           return this.navigateForward();
       },
@@ -174,10 +175,10 @@ ol {
   color: $black;
 }
 p strong {
-  color: $black;  
+  color: $black;
   font-weight: 500;
 }
 p.small{
     margin-bottom:0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 77a2ff10..80162a37 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -31,22 +31,14 @@
                                         validationRules="selection-required"
                                         class="service-location-button-question mb-1"/>
                                         <div class="select-car">
-                                        <div class="container-fluid pb-2 g-0">
-                                            <div class="row">
-                                                <div class="col px-0">
-                                                    <div class="select-car-form rounded">
-                                                        <siteFooter
-                                                        class="mt-4"
-                                                        cmsWidgetName="SiteFooterWidget"
-                                                        :isForwardActionDisabled="!meta.valid"
-                                                        @backClicked="backButtonAction"
-                                                        @forwardClicked="forwardButtonAction"
-                                                        ref="siteFooter"
-                                                        />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
+                                        <siteFooter
+                                            class="mt-5"
+                                            cmsWidgetName="SiteFooterWidget"
+                                            :isForwardActionDisabled="!meta.valid"
+                                            @backClicked="backButtonAction"
+                                            @forwardClicked="forwardButtonAction"
+                                            ref="siteFooter"
+                                        />
                                     </div>
                                 </div>
                             </div>
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index b09e5276..aa023a47 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -1,30 +1,27 @@
 <template>
-      <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <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"
-                                />
+                justification="left"
+                issContainingPage="service-packages"
+                />
                 <div class="mx-5">
-            
                     <servicePackageQuestion ref="servicePackage"
-                                            cmsWidgetName="ServicePackage"
-                                            groupName="ServicePackageQuestion"
-                                            :availableLineItems="availableLineItems"
-                                            @vapsItemsSelected="vapsItemsSelectedAction"
-                                            v-on:link-event="openModalAction"
-                                            validationRules="option-required"
-                                            isRequired 
+                    cmsWidgetName="ServicePackage"
+                    groupName="ServicePackageQuestion"
+                    :availableLineItems="availableLineItems"
+                    @vapsItemsSelected="vapsItemsSelectedAction"
+                    v-on:link-event="openModalAction"
+                    validationRules="option-required"
+                    isRequired
                     />
-                    
-                    <p class="caption disclaimer" v-html="PriceDisclaimerText"></p> 
-                    
+                    <p class="caption disclaimer" v-html="PriceDisclaimerText"></p>
                     <siteFooter cmsWidgetName="SiteFooterWidget"
-                                :isForwardActionDisabled="!meta.valid"
-                                @back-clicked="backButtonAction"
-                                @ForwardClicked="forwardButtonAction" />
+                    :isForwardActionDisabled="!meta.valid"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
         </div>
@@ -33,155 +30,155 @@
         <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
         <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
         <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
-        
-                
+
+
     </Form>
 </template>
 
 <script>
-    // Components
-    import baseFormMixin              from '@/mixins/base-form-mixin';
-    import siteHeader                 from '@/iss-components/site-header/site-header';
-    import siteFooter                 from '@/iss-components/site-footer/site-footer';
-    import siteSubHeader              from '@/iss-components/site-sub-header/site-sub-header';
-    import servicePackageQuestion     from './service-package-question/service-package-question';
-    import textBlock                  from '@/digital-components/text-block/text-block';
-    import contentGroupModal          from '@/iss-components/content-group-modal/content-group-modal';
-    import loadingModal               from '@/iss-components/loading-modal/loading-modal.vue';
-    import { settleAllPromises }      from '@/helpers/layout-helper';
-    import { useMainStore }           from "@/store";
-    import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-    import { required }               from '@/helpers/validation-rules';
-    import { errorMessages }          from '@/constants/error-messages';
-    import { Form, defineRule }       from 'vee-validate';
-    import { allGlassPartsAndItemsHavePrices } from '@/layouts/service-packages/service-package-helper/service-package-helper'
+// Components
+import baseFormMixin              from '@/mixins/base-form-mixin';
+import siteHeader                 from '@/iss-components/site-header/site-header';
+import siteFooter                 from '@/iss-components/site-footer/site-footer';
+import siteSubHeader              from '@/iss-components/site-sub-header/site-sub-header';
+import servicePackageQuestion     from './service-package-question/service-package-question';
+import textBlock                  from '@/digital-components/text-block/text-block';
+import contentGroupModal          from '@/iss-components/content-group-modal/content-group-modal';
+import loadingModal               from '@/iss-components/loading-modal/loading-modal.vue';
+import { settleAllPromises }      from '@/helpers/layout-helper';
+import { useMainStore }           from "@/store";
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { required }               from '@/helpers/validation-rules';
+import { errorMessages }          from '@/constants/error-messages';
+import { Form, defineRule }       from 'vee-validate';
+import { allGlassPartsAndItemsHavePrices } from '@/layouts/service-packages/service-package-helper/service-package-helper'
 
-    defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
+defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
 
-    const store = useMainStore();
+const store = useMainStore();
 
-    export default {
-        name: 'service-packages',
-        mixins: [baseFormMixin],
-        async beforeRouteEnter(to, from, next) {
-            // Call APIs
-            const cmsContentPromise      = fetchCmsContentForPage(to.query.issPage);
+export default {
+    name: 'service-packages',
+    mixins: [baseFormMixin],
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise      = fetchCmsContentForPage(to.query.issPage);
 
-            const wipersPromise          = await store.getWipers();
-            const rainDefensePromise     = await store.getRainDefense();
-            const supportingItemsPromise = await store.getSupportingItems();
-            const promiseResultMap = [
-                {
-                    resultKey: 'cmsContent',
-                    promise: cmsContentPromise,
-                },
-                {
-                    resultKey: 'wipers',
-                    promise: wipersPromise,
-                },
-                {
-                    resultKey: 'rainDefense',
-                    promise: rainDefensePromise,
-                },
-                {
-                    resultKey: 'supportingItems',
-                    promise: supportingItemsPromise,
-                },
-            ];
-            const resultMap = await settleAllPromises(promiseResultMap);
+        const wipersPromise          = await store.getWipers();
+        const rainDefensePromise     = await store.getRainDefense();
+        const supportingItemsPromise = await store.getSupportingItems();
+        const promiseResultMap = [
+            {
+                resultKey: 'cmsContent',
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: 'wipers',
+                promise: wipersPromise,
+            },
+            {
+                resultKey: 'rainDefense',
+                promise: rainDefensePromise,
+            },
+            {
+                resultKey: 'supportingItems',
+                promise: supportingItemsPromise,
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
 
-            const clonedGlassParts = store.order.lineItems.glassParts
-                ? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
-                : [];
-            const availableLineItems = [
-                resultMap.rainDefense,
-                ...resultMap.supportingItems,
-                ...resultMap.wipers,
-                ...clonedGlassParts,
-            ];
+        const clonedGlassParts = store.order.lineItems.glassParts
+        ? JSON.parse(JSON.stringify(store.order.lineItems.glassParts))
+        : [];
+        const availableLineItems = [
+            resultMap.rainDefense,
+            ...resultMap.supportingItems,
+            ...resultMap.wipers,
+            ...clonedGlassParts,
+        ];
 
-            const pricingResults = await store.getPriceOrderItems(availableLineItems);
+        const pricingResults = await store.getPriceOrderItems(availableLineItems);
 
-            // Call the "next" function to complete the transition to this page.
-            next((vm) => {
-                vm.setCmsContent(resultMap.cmsContent);
-                vm.pricedGlassParts   = clonedGlassParts;
-                vm.supportingItems    = resultMap.supportingItems;
-                vm.availableLineItems = pricingResults;
-            });
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.pricedGlassParts   = clonedGlassParts;
+            vm.supportingItems    = resultMap.supportingItems;
+            vm.availableLineItems = pricingResults;
+        });
+    },
+    data() {
+        return {
+            selectedVaps:       [],
+            availableLineItems: [],
+            supportingItems:    [],
+            pricedGlassParts:   []
+        };
+    },
+    computed: {
+        PriceDisclaimerText() {
+            return this.getCmsContent("PriceDisclaimerWidget", "Text");
         },
-        data() {
-            return {
-                selectedVaps:       [],
-                availableLineItems: [],
-                supportingItems:    [],
-                pricedGlassParts:   []
-            };
+    },
+    methods: {
+        openModalAction(modalName) {
+            this.$refs[modalName.args].openModal();
         },
-        computed: {
-            PriceDisclaimerText() {
-                return this.getCmsContent("PriceDisclaimerWidget", "Text");
-            },
-        },
-        methods: {
-            openModalAction(modalName) {
-                this.$refs[modalName.args].openModal();
-            },
-            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.referralNumber?.length !== 6
-                );
-            },
-            vapsItemsSelectedAction(vapsItemsSelected) {
-                this.selectedVaps = vapsItemsSelected;
-            },
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
-            forwardButtonAction() {
-                const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps };
-                if (!allGlassPartsAndItemsHavePrices(parts)) {
-                    console.error('One or more items have no price assigned!');
+        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.referralNumber?.length !== 6
+                    );
+                },
+                vapsItemsSelectedAction(vapsItemsSelected) {
+                    this.selectedVaps = vapsItemsSelected;
+                },
+                backButtonAction() {
+                    this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+                },
+                forwardButtonAction() {
+                    const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps };
+                    if (!allGlassPartsAndItemsHavePrices(parts)) {
+                        console.error('One or more items have no price assigned!');
+                    }
+                    if (this.pricedGlassParts.length > 0) {
+
+                        store.saveGlassParts(this.pricedGlassParts);
+                    }
+                    store.saveSupportingItems(this.supportingItems);
+                    store.saveVaps(this.selectedVaps);
+
+                    this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
                 }
-                if (this.pricedGlassParts.length > 0) {
-
-                    store.saveGlassParts(this.pricedGlassParts);
-                }
-                store.saveSupportingItems(this.supportingItems);
-                store.saveVaps(this.selectedVaps);
-
-                this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
+            },
+            components: {
+                siteHeader,
+                siteFooter,
+                siteSubHeader,
+                Form, /* eslint-disable-line */
+                textBlock,
+                servicePackageQuestion,
+                loadingModal,
+                contentGroupModal
             }
-        },
-        components: {
-            siteHeader,
-            siteFooter,
-            siteSubHeader,
-            Form, /* eslint-disable-line */
-            textBlock,
-            servicePackageQuestion,
-            loadingModal,
-            contentGroupModal
+        };
+        </script>
+        <style lang="scss">
+        .subheader-secondary {
+            margin-top: .5rem;
+            padding: 0px;
         }
-    };
-</script>
-<style lang="scss">
-    .subheader-secondary {
-        margin-top: .5rem;
-        padding: 0px; 
-    }
 
-    .disclaimer {
-        margin-top: 1.3rem;
+        .disclaimer {
+            margin: 1.3rem 0 1.5rem 0;
 
-        a {
-            color: #4D5151;
-            font-weight: 400;
+            a {
+                color: #4D5151;
+                font-weight: 400;
+            }
         }
-    }
-</style>
\ No newline at end of file
+        </style>
diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue
index ee7d74df..f2ebe6d0 100644
--- a/src/layouts/vehicle-lookup/vehicle-lookup.vue
+++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue
@@ -11,7 +11,7 @@
                                     <VehicleBanner class="mt-2 mb-4" cms-widget-name="VehicleBannerWidget" :display-generic-vehicle-image="false" />
                                     <SiteSubHeader cms-widget-name="SiteSubHeaderWidget" class="mt-5 mb-2" />
                                     <VinLookupMethods v-model="selectedVinLookupMethod" cms-widget-name="VINLookupMethod" group-name="VinLookupMethods" ref="VinLookupMethods" />
-                                    <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" class="mt-3"/>
+                                    <SiteFooter cms-widget-name="SiteFooterWidget" :is-forward-action-disabled="isForwardActionDisabled" @back-clicked="backButtonAction" @forward-clicked="forwardButtonAction" class="mt-5"/>
                                 </div>
                             </div>
                         </div>
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 7bd3241c..e88c5c6d 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -38,6 +38,7 @@
                                         :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
                                     </div>
                                     <siteFooter
+                                    class="mt-5"
                                     cmsWidgetName="SiteFooterWidget"
                                     ref="siteFooter"
                                     :isForwardActionDisabled="isForwardActionDisabled"