From d82af3bdb1fd7cbccd29ccdc0e71199b05202226 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 3 Dec 2025 14:21:29 -0500
Subject: [PATCH 1/6] question page layout updates

---
 .../questions-page-layout.spec.js             | 54 ------------------
 .../questions-page-layout.vue                 | 55 +++++++++----------
 2 files changed, 26 insertions(+), 83 deletions(-)

diff --git a/src/iss-components/questions-page-layout/questions-page-layout.spec.js b/src/iss-components/questions-page-layout/questions-page-layout.spec.js
index ebfb53ac..855ae439 100644
--- a/src/iss-components/questions-page-layout/questions-page-layout.spec.js
+++ b/src/iss-components/questions-page-layout/questions-page-layout.spec.js
@@ -19,60 +19,6 @@ jest.mock('@/helpers/cms-content-helper', () => ({
 }));
 
 function setupMocks() {
-    // TODO: Use or delete these
-    const unused1 = () => ({
-        partsOrQuestions: [
-            {
-                parts: null,
-                partQuestions: [
-                    {
-                        questionSequence: 1,
-                        questionText:
-                            'Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?',
-                        answers: [
-                            {
-                                answerResult: '',
-                                answerText: 'Yes',
-                                nextQuestionSequence: 2
-                            },
-                            {
-                                answerResult: '',
-                                answerText: 'No',
-                                nextQuestionSequence: 3
-                            }
-                        ]
-                    }
-                ],
-                glassLocation: 'Windshield',
-                glassName: 'Single',
-                answerKey: 'Windshield-Single',
-                answerData: null
-            }
-        ]
-    });
-    const unused2 = () => ({
-        partsQuestionAnswers: [
-            {
-                glassLocation: 'Windshield',
-                glassName: 'Single',
-                result: 'FW04848',
-                answeredQuestions: [
-                    {
-                        questionText:
-                            'Is your vehicle equipped with the Panoramic Sunroof which can be identified by having a glass panel over the rear seats?',
-                        selectedAnswerText: 'Yes',
-                        questionNum: 1
-                    },
-                    {
-                        questionText:
-                            'Is your vehicle equipped with a heated windshield that melts snow and ice from underneath the windshield wiper blades?',
-                        selectedAnswerText: 'Yes',
-                        questionNum: 2
-                    }
-                ]
-            }
-        ]
-    });
     const mountOptions = getMountOptions({
         mixins: [baseMixin, vehicleQuestionsMixin]
     });
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 999c3385..6be20312 100644
--- a/src/iss-components/questions-page-layout/questions-page-layout.vue
+++ b/src/iss-components/questions-page-layout/questions-page-layout.vue
@@ -1,18 +1,13 @@
 <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">
-                <loadingModal ref="loadingModal" :textSlides="loadingText" />
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            </div>
+    <div class="fade-on-route-transition">
+        <div class="justify-content-center">
+            <siteHeader cmsWidgetName="SiteHeaderWidget" />
         </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" />
+        <div class="iss-heritage-container-width">
+            <div class="questions-page-layout-container iss-heritage-content-container-width">
+                <siteSubHeader
+                    class="mt-4"
+                    cmsWidgetName="SiteSubHeaderWidget" />
                 <alert
                     ref="alertFewMoreQuestions"
                     cmsWidgetName="alertWidget"
@@ -48,23 +43,19 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import alert from '@/ux-components/alert/alert.vue';
 import questionChain from '@/digital-components/question-chain/question-chain.vue';
 import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
-import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
 
 export default {
     name: 'questions-page',
     components: {
         siteHeader,
-        vehicleBanner,
         alert,
         questionChain,
         siteSubHeader,
-        siteFooter,
-        loadingModal,
+        siteFooter
     },
     props: {
         isMetaValid: Boolean,
@@ -74,7 +65,7 @@ export default {
         validationRules: String,
         modelValue: Object,
         loadingText: Array,
-        index: Number,
+        index: Number
     },
     emits: ['update:modelValue', 'forwardButtonAction', 'back-click'],
     computed: {
@@ -84,16 +75,16 @@ 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
+                !glass.questions
+                || glass.questions?.length < 1
+                || glass.isSuppressedPart
             ) {
                 return false;
             }
@@ -106,15 +97,21 @@ export default {
         },
         handleBackButtonAction() {
             this.$emit('back-click');
-        },
-        showLoadingModal() {
-            this.$refs.loadingModal.showModal();
-        },
-    },
+        }
+    }
 };
 </script>
 
 <style lang="scss" scoped>
+.iss-heritage-container-width {
+    .questions-page-layout-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+    }
+}
+
 .questions-page {
     .question-text {
         margin-bottom: 0.5rem;

From 4ab5496f6c7b9ba0e71af582b6a8d5e73f0c2efd Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 3 Dec 2025 14:29:52 -0500
Subject: [PATCH 2/6] order confirmation

couldnt nav to
formatting
remove banner
header updates
---
 .../order-confirmation.spec.js                | 186 ++++++++----------
 .../order-confirmation/order-confirmation.vue |  87 ++++----
 2 files changed, 131 insertions(+), 142 deletions(-)

diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js
index f57fac7a..f8dd40b7 100644
--- a/src/layouts/order-confirmation/order-confirmation.spec.js
+++ b/src/layouts/order-confirmation/order-confirmation.spec.js
@@ -13,7 +13,7 @@ import coverageStatuses from '@/constants/coverage-statuses';
 import coverageType from '@/constants/coverage-type';
 import { deepClone } from '@/helpers/object-helper';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
-import { paymentMethods } from "@/constants/payment-method-constants";
+import { paymentMethods } from '@/constants/payment-method-constants';
 
 jest.mock('@/helpers/layout-helper.js', () => jest.fn());
 
@@ -42,10 +42,6 @@ const headerStub = {
     render: () => {}
 };
 
-const vehicleBannerStub = {
-    render: () => {}
-};
-
 const addToCalendarStub = {
     render: () => {}
 };
@@ -148,7 +144,6 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
     mountOptions.global.stubs = {
         siteFooter: footerStub,
         siteHeader: headerStub,
-        vehicleBanner: vehicleBannerStub,
         addToCalendar: addToCalendarStub
     };
 
@@ -181,7 +176,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
 describe('OrderConfirmation.vue', () => {
     afterEach(() => {
         jest.resetAllMocks();
-    })
+    });
     describe('Page pre-requisites', () => {
         test('If submitted order saved to store, page pre-reqs return true', async () => {
             // Arrange
@@ -204,7 +199,7 @@ describe('OrderConfirmation.vue', () => {
             const mockStoreActions = () => {
                 useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage);
             };
-            wrapper = getMountedComponent({}, {}, mockStoreActions).wrapper;    
+            wrapper = getMountedComponent({}, {}, mockStoreActions).wrapper;
         });
         test('Should render Site Header', () => {
             // Act
@@ -213,13 +208,6 @@ describe('OrderConfirmation.vue', () => {
             // Assert
             expect(siteHeader.exists()).toBe(true);
         });
-        test('Should render Vehicle Banner', () => {
-            // Act
-            const vehicleBanner = wrapper.findComponent(vehicleBannerStub);
-
-            // Assert
-            expect(vehicleBanner.exists()).toBe(true);
-        });
         test('If Advanced flow, should display Site Footer', () => {
             // Arrange
             const mockStoreActions = () => {
@@ -287,7 +275,7 @@ describe('OrderConfirmation.vue', () => {
         });
     });
     describe('Computed properties', () => {
-        describe('customValueMap', () =>{
+        describe('customValueMap', () => {
             test.each([
                 'inShopAppointment',
                 'dropOffAppointment',
@@ -314,7 +302,7 @@ describe('OrderConfirmation.vue', () => {
             });
             test('returns expected vehicle info', () => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 const year = 1998;
                 const make = 'Toyota';
                 const model = 'Cruse';
@@ -327,9 +315,9 @@ describe('OrderConfirmation.vue', () => {
                 const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions);
 
                 // Act
-                const actualYear = wrapper.vm.customValueMap['vehicleYear'];
-                const actualMake = wrapper.vm.customValueMap['vehicleMake'];
-                const actualModel = wrapper.vm.customValueMap['vehicleModel'];
+                const actualYear = wrapper.vm.customValueMap.vehicleYear;
+                const actualMake = wrapper.vm.customValueMap.vehicleMake;
+                const actualModel = wrapper.vm.customValueMap.vehicleModel;
 
                 // Assert
                 expect(actualYear).toBe(year);
@@ -338,7 +326,7 @@ describe('OrderConfirmation.vue', () => {
             });
             test('returns expected customer email', () => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 const emailAddress = 'email@google.com';
                 order.customer.emailAddress = emailAddress;
                 const mockStoreActions = () => {
@@ -347,19 +335,15 @@ describe('OrderConfirmation.vue', () => {
                 const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions);
 
                 // Act
-                const actualEmail = wrapper.vm.customValueMap['email'];
+                const actualEmail = wrapper.vm.customValueMap.email;
 
                 // Assert
                 expect(actualEmail).toBe(emailAddress);
             });
-        })
+        });
         describe('confirmationEmailText', () => {
-            const greaterId = "&gt;";
-            const lessId = "&lt;";
-            const mobileWording = "Mobile wording";
-            const nonMobileWording = "Non mobile wording";
-            const mobileWidget = "MobileWordingWidget";
-            const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget"
+            const greaterId = '&gt;';
+            const lessId = '&lt;';
             test.each([
                 ['test', 'test'],
                 [`te${greaterId}st`, 'te>st'],
@@ -394,7 +378,7 @@ describe('OrderConfirmation.vue', () => {
                 ['Between 11 PM - 12 AM', '23:00', '00:00']
             ])('should return Mobile time in expected format "%p" when start time "%p" and end time "%p"', (expected, startTime, endTime) => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 order.schedule.startTime = startTime;
                 order.schedule.endTime = endTime;
                 order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
@@ -416,7 +400,7 @@ describe('OrderConfirmation.vue', () => {
                 ['01:00', '02:00']
             ])('should return Drop off time in same format regardless of start/end time', (startTime, endTime) => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 order.schedule.startTime = startTime;
                 order.schedule.endTime = endTime;
                 order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
@@ -440,7 +424,7 @@ describe('OrderConfirmation.vue', () => {
                 ['at 12:00 PM', '12:00', '02:00']
             ])('should return In Shop time in expected format "%p" when start time "%p"', (expected, startTime, endTime) => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 order.schedule.startTime = startTime;
                 order.schedule.endTime = endTime;
                 order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
@@ -457,19 +441,19 @@ describe('OrderConfirmation.vue', () => {
             });
         });
         describe('appointmentLocation', () => {
-            var order = deepClone(sessionStorage);
+            const order = deepClone(sessionStorage);
             order.serviceLocation = {
-                address: "123 Service Rd.",
-                address2: "Box 4",
-                city: "Columbus",
-                state: "OH",
-                zipCode: "12345",
+                address: '123 Service Rd.',
+                address2: 'Box 4',
+                city: 'Columbus',
+                state: 'OH',
+                zipCode: '12345',
                 provider: {
                     address: {
-                        streetAddress: "304 provider Ln.",
-                        city: "pittsburg",
-                        state: "PA",
-                        zipCode: "16001"
+                        streetAddress: '304 provider Ln.',
+                        city: 'pittsburg',
+                        state: 'PA',
+                        zipCode: '16001'
                     }
                 }
             };
@@ -509,9 +493,7 @@ describe('OrderConfirmation.vue', () => {
                 // Assert
                 expect(text).toBe(expectedShopLocation);
             });
-            test.each(
-                ['turtle', undefined, null]
-            )('unknown appointment type %p returns null', (type) => {
+            test.each(['turtle', undefined, null])('unknown appointment type %p returns null', (type) => {
                 // Arrange
                 order.serviceLocation.appointmentType = type;
                 const mockStoreActions = () => {
@@ -527,20 +509,20 @@ describe('OrderConfirmation.vue', () => {
             });
         });
         describe('serviceLocationFullAddress', () => {
-            var order = deepClone(sessionStorage);
+            const order = deepClone(sessionStorage);
             beforeEach(() => {
                 order.serviceLocation = {
-                    address: "123 Service Rd.",
-                    address2: "Box 4",
-                    city: "Columbus",
-                    state: "OH",
-                    zipCode: "12345",
+                    address: '123 Service Rd.',
+                    address2: 'Box 4',
+                    city: 'Columbus',
+                    state: 'OH',
+                    zipCode: '12345',
                     provider: {
                         address: {
-                            streetAddress: "304 provider Ln.",
-                            city: "pittsburg",
-                            state: "PA",
-                            zipCode: "16001"
+                            streetAddress: '304 provider Ln.',
+                            city: 'pittsburg',
+                            state: 'PA',
+                            zipCode: '16001'
                         }
                     }
                 };
@@ -550,7 +532,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "123 Service Rd., Box 4,<br/> Columbus, OH 12345";
+                const expected = '123 Service Rd., Box 4,<br/> Columbus, OH 12345';
 
                 // Act
                 const text = wrapper.vm.serviceLocationFullAddress;
@@ -564,7 +546,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = ", Box 4,<br/> Columbus, OH 12345";
+                const expected = ', Box 4,<br/> Columbus, OH 12345';
 
                 // Act
                 const text = wrapper.vm.serviceLocationFullAddress;
@@ -578,7 +560,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "123 Service Rd., <br/> Columbus, OH 12345";
+                const expected = '123 Service Rd., <br/> Columbus, OH 12345';
 
                 // Act
                 const text = wrapper.vm.serviceLocationFullAddress;
@@ -592,7 +574,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "123 Service Rd., Box 4,<br/> , OH 12345";
+                const expected = '123 Service Rd., Box 4,<br/> , OH 12345';
 
                 // Act
                 const text = wrapper.vm.serviceLocationFullAddress;
@@ -606,7 +588,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "123 Service Rd., Box 4,<br/> Columbus,  12345";
+                const expected = '123 Service Rd., Box 4,<br/> Columbus,  12345';
 
                 // Act
                 const text = wrapper.vm.serviceLocationFullAddress;
@@ -620,7 +602,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "123 Service Rd., Box 4,<br/> Columbus, OH ";
+                const expected = '123 Service Rd., Box 4,<br/> Columbus, OH ';
 
                 // Act
                 const text = wrapper.vm.serviceLocationFullAddress;
@@ -638,7 +620,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = ", <br/> ,  ";
+                const expected = ', <br/> ,  ';
 
                 // Act
                 const text = wrapper.vm.serviceLocationFullAddress;
@@ -648,20 +630,20 @@ describe('OrderConfirmation.vue', () => {
             });
         });
         describe('providerFullAddress', () => {
-            var order = deepClone(sessionStorage);
+            const order = deepClone(sessionStorage);
             beforeEach(() => {
                 order.serviceLocation = {
-                    address: "123 Service Rd.",
-                    address2: "Box 4",
-                    city: "Columbus",
-                    state: "OH",
-                    zipCode: "12345",
+                    address: '123 Service Rd.',
+                    address2: 'Box 4',
+                    city: 'Columbus',
+                    state: 'OH',
+                    zipCode: '12345',
                     provider: {
                         address: {
-                            streetAddress: "304 provider Ln.",
-                            city: "pittsburg",
-                            state: "PA",
-                            zipCode: "16001"
+                            streetAddress: '304 provider Ln.',
+                            city: 'pittsburg',
+                            state: 'PA',
+                            zipCode: '16001'
                         }
                     }
                 };
@@ -671,7 +653,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "304 Provider Ln.,<br/> Pittsburg, PA 16001";
+                const expected = '304 Provider Ln.,<br/> Pittsburg, PA 16001';
 
                 // Act
                 const text = wrapper.vm.providerFullAddress;
@@ -685,7 +667,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "";
+                const expected = '';
 
                 // Act
                 const text = wrapper.vm.providerFullAddress;
@@ -699,7 +681,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "304 Provider Ln.,<br/> , PA 16001";
+                const expected = '304 Provider Ln.,<br/> , PA 16001';
 
                 // Act
                 const text = wrapper.vm.providerFullAddress;
@@ -713,7 +695,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "304 Provider Ln.,<br/> Pittsburg,  16001";
+                const expected = '304 Provider Ln.,<br/> Pittsburg,  16001';
 
                 // Act
                 const text = wrapper.vm.providerFullAddress;
@@ -727,7 +709,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "304 Provider Ln.,<br/> Pittsburg, PA ";
+                const expected = '304 Provider Ln.,<br/> Pittsburg, PA ';
 
                 // Act
                 const text = wrapper.vm.providerFullAddress;
@@ -744,7 +726,7 @@ describe('OrderConfirmation.vue', () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
-                const expected = "";
+                const expected = '';
 
                 // Act
                 const text = wrapper.vm.providerFullAddress;
@@ -754,10 +736,10 @@ describe('OrderConfirmation.vue', () => {
             });
         });
         describe('appointmentWordingText', () => {
-            const mobileWording = "Mobile wording";
-            const nonMobileWording = "Non mobile wording";
-            const mobileWidget = "MobileWordingWidget";
-            const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget"
+            const mobileWording = 'Mobile wording';
+            const nonMobileWording = 'Non mobile wording';
+            const mobileWidget = 'MobileWordingWidget';
+            const dropOffAndInShopWidget = 'DropOffAndInShopWordingWidget';
             let mixin;
             beforeEach(() => {
                 processIfStatements.mockImplementation((content) => content);
@@ -765,13 +747,13 @@ describe('OrderConfirmation.vue', () => {
                 mixin = {
                     methods: {
                         getCmsContent: jest.fn().mockImplementation((widget, _) => {
-                            if (widget == mobileWidget){
+                            if (widget === mobileWidget) {
                                 return mobileWording;
                             }
-                            if (widget == dropOffAndInShopWidget){
+                            if (widget === dropOffAndInShopWidget) {
                                 return nonMobileWording;
                             }
-                            return "";
+                            return '';
                         }),
                         setCmsContent: jest.fn()
                     }
@@ -784,15 +766,15 @@ describe('OrderConfirmation.vue', () => {
                 [AppointmentTypeStrings.IN_SHOP, nonMobileWording],
                 ['unknown', null],
                 [null, null],
-                [undefined, null],
+                [undefined, null]
             ])('appointment type %p returns wording %p', (type, wording) => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 order.serviceLocation.appointmentType = type;
                 const mockStoreActions = () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
-                
+
                 const { wrapper } = getMountedComponent({}, {}, mockStoreActions, mixin);
 
                 // Act
@@ -803,10 +785,10 @@ describe('OrderConfirmation.vue', () => {
             });
         });
         describe('appointmentWordingText2', () => {
-            const mobileWording = "Mobile wording";
-            const nonMobileWording = "Non mobile wording";
-            const mobileWidget = "MobileWordingWidget";
-            const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget"
+            const mobileWording = 'Mobile wording';
+            const nonMobileWording = 'Non mobile wording';
+            const mobileWidget = 'MobileWordingWidget';
+            const dropOffAndInShopWidget = 'DropOffAndInShopWordingWidget';
             let mixin;
             beforeEach(() => {
                 processIfStatements.mockImplementation((content) => content);
@@ -814,13 +796,13 @@ describe('OrderConfirmation.vue', () => {
                 mixin = {
                     methods: {
                         getCmsContent: jest.fn().mockImplementation((widget, _) => {
-                            if (widget == mobileWidget){
+                            if (widget === mobileWidget) {
                                 return mobileWording;
                             }
-                            if (widget == dropOffAndInShopWidget){
+                            if (widget === dropOffAndInShopWidget) {
                                 return nonMobileWording;
                             }
-                            return "";
+                            return '';
                         }),
                         setCmsContent: jest.fn()
                     }
@@ -833,10 +815,10 @@ describe('OrderConfirmation.vue', () => {
                 [AppointmentTypeStrings.IN_SHOP, nonMobileWording],
                 ['unknown', null],
                 [null, null],
-                [undefined, null],
+                [undefined, null]
             ])('appointment type %p returns wording "%p"', (type, wording) => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 order.serviceLocation.appointmentType = type;
                 const mockStoreActions = () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@@ -861,7 +843,7 @@ describe('OrderConfirmation.vue', () => {
                 [undefined, false]
             ])('appointment type %p returns %p', (type, expected) => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 order.serviceLocation.appointmentType = type;
                 const mockStoreActions = () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@@ -886,7 +868,7 @@ describe('OrderConfirmation.vue', () => {
                 [undefined, false]
             ])('appointment type %p returns %p', (type, expected) => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 order.serviceLocation.appointmentType = type;
                 const mockStoreActions = () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@@ -911,7 +893,7 @@ describe('OrderConfirmation.vue', () => {
                 [undefined, false]
             ])('appointment type %p returns %p', (type, expected) => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 order.serviceLocation.appointmentType = type;
                 const mockStoreActions = () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@@ -957,7 +939,7 @@ describe('OrderConfirmation.vue', () => {
                 ['Wednesday, December 30', '2026-12-30']
             ])('returns %p given %p', (expected, date) => {
                 // Arrange
-                var order = deepClone(sessionStorage);
+                const order = deepClone(sessionStorage);
                 const mockStoreActions = () => {
                     useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
                 };
@@ -970,5 +952,5 @@ describe('OrderConfirmation.vue', () => {
                 expect(result).toBe(expected);
             });
         });
-    })
+    });
 });
diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue
index c364ae05..4dc7b20e 100644
--- a/src/layouts/order-confirmation/order-confirmation.vue
+++ b/src/layouts/order-confirmation/order-confirmation.vue
@@ -4,14 +4,12 @@
         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="widgets.siteHeader" />
-                </div>
+        <div class="fade-on-route-transition">
+            <div class="justify-content-center">
+                <siteHeader :cmsWidgetName="widgets.siteHeader" />
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+            <div class="iss-heritage-container-width">
+                <div class="order-confirmation-container iss-heritage-content-container-width">
                     <div class="text-center text-color--black pt-5 pb-5 fs-5">
                         <img :src="orderConfirmationImage" />
                         <span
@@ -19,15 +17,11 @@
                             v-html="orderConfirmationHeaderText"></span>
                     </div>
                     <div class="appointment-details">
-                        <div>
-                            <vehicleBanner
-                                :cmsWidgetName="widgets.vehicleBanner"
-                                :displayGenericVehicleImage="false">
-                            </vehicleBanner>
-                        </div>
                         <div class="appointment-date-time text-center mt-4">
                             <p>{{ formatDate(schedule.date) }}</p>
-                            <p class="mt-2">{{ appointmentTimeText }}</p>
+                            <p class="mt-2">
+                                {{ appointmentTimeText }}
+                            </p>
                         </div>
                         <addToCalendar
                             mobileWidgetName="AddToCalendar_Mobile"
@@ -85,7 +79,6 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-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';
 import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
@@ -117,7 +110,6 @@ export default {
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
         siteHeader,
-        vehicleBanner,
         siteFooter,
         addToCalendar,
         cartDropdown
@@ -181,7 +173,7 @@ export default {
                 dropOffAndInShop: 'DropOffAndInShopWordingWidget',
                 siteFooter: 'SiteFooterWidget'
             }
-        }
+        };
     },
     computed: {
         customValueMap() {
@@ -196,12 +188,13 @@ export default {
                 email: this.customerEmail,
                 CUSTOMER_PORTAL_URL: applicationConfig.CUSTOMER_PORTAL_URL,
                 CUSTOMER_PORTAL_LOGIN_TOKEN: this.customerPortalLoginToken
-            }
+            };
         },
         confirmationEmailText() {
-            var content = this.getCmsContentWithCustomValues(
+            const content = this.getCmsContentWithCustomValues(
                 this.widgets.emailConfirmation,
-                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+            );
             return content
                 ?.replaceAll('&lt;', '<')
                 ?.replaceAll('&gt;', '>');
@@ -209,41 +202,47 @@ export default {
         orderConfirmationHeaderText() {
             return this.getCmsContent(
                 this.widgets.orderConfirmation,
-                widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+                widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
+            );
         },
         orderConfirmationImage() {
             return this.getCmsContent(
                 this.widgets.orderConfirmation,
-                widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
+                widgetFields.CONTENT_GROUP_WIDGET.IMAGE
+            );
         },
         mobileWordingText() {
             return this.getCmsContentWithCustomValues(
                 this.widgets.mobile,
-                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+            );
         },
         mobileWordingText2() {
             return this.getCmsContent(
                 this.widgets.mobile,
-                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
+            );
         },
         nonMobileWordingText() {
             return this.getCmsContentWithCustomValues(
                 this.widgets.dropOffAndInShop,
-                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+            );
         },
         nonMobileWordingText2() {
             return this.getCmsContentWithCustomValues(
                 this.widgets.dropOffAndInShop,
-                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
+            );
         },
         appointmentTimeText() {
             const { startTime, endTime } = this.schedule;
-            if (this.isDropOffAppointment){
+            if (this.isDropOffAppointment) {
                 return 'Drop off before 9:30 AM';
             }
-            if (this.isInShopAppointment){
+            if (this.isInShopAppointment) {
                 const formattedStartTime = get12HourTimeFormat(startTime);
-                return `at ${formattedStartTime}`
+                return `at ${formattedStartTime}`;
             }
             if (this.isMobileAppointment) {
                 const mobileStartTime = get12HourTimeMobileFormat(startTime);
@@ -253,38 +252,38 @@ export default {
             return null;
         },
         appointmentLocation() {
-            if (this.isMobileAppointment){
+            if (this.isMobileAppointment) {
                 return this.serviceLocationFullAddress;
             }
-            if (this.isDropOffAppointment || this.isInShopAppointment){
+            if (this.isDropOffAppointment || this.isInShopAppointment) {
                 return this.providerFullAddress;
             }
-            return null
+            return null;
         },
         serviceLocationFullAddress() {
-            var { address, address2, city, state, zipCode } = this.serviceLocation;
+            const { address, address2, city, state, zipCode } = this.serviceLocation;
             return `${address ?? ''}, ${address2 ? `${address2},` : ''}<br/> ${city ?? ''}, ${state ?? ''} ${zipCode ?? ''}`;
         },
         providerFullAddress() {
-            var { streetAddress, city, state, zipCode } = this.providerAddress;
+            const { streetAddress, city, state, zipCode } = this.providerAddress;
             return streetAddress
                 ? `${toTitleCase(streetAddress)},<br/> ${toTitleCase(city)}, ${state ?? ''} ${zipCode ?? ''}`
                 : '';
         },
         appointmentWordingText() {
-            if (this.isMobileAppointment){
+            if (this.isMobileAppointment) {
                 return this.mobileWordingText;
             }
-            if (this.isInShopAppointment || this.isDropOffAppointment){
+            if (this.isInShopAppointment || this.isDropOffAppointment) {
                 return this.nonMobileWordingText;
             }
             return null;
         },
         appointmentWordingText2() {
-            if (this.isMobileAppointment){
+            if (this.isMobileAppointment) {
                 return this.mobileWordingText2;
             }
-            if (this.isInShopAppointment || this.isDropOffAppointment){
+            if (this.isInShopAppointment || this.isDropOffAppointment) {
                 return this.nonMobileWordingText2;
             }
             return null;
@@ -293,7 +292,7 @@ export default {
             const mobileAppointmentTypes = [
                 AppointmentTypeStrings.MOBILE,
                 AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
-            ]
+            ];
             return mobileAppointmentTypes.includes(this.appointmentType);
         },
         isInShopAppointment() {
@@ -402,7 +401,7 @@ export default {
             const processedIfStatements = processIfStatements(
                 rawText,
                 'custom',
-                (v) => { return this.customValueMap[v] }
+                (v) => this.customValueMap[v]
             );
             return getStringWithCustomValues(processedIfStatements, this.customValueMap);
         },
@@ -420,6 +419,14 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.iss-heritage-container-width {
+    .order-confirmation-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+    }
+}
 
 .page-container-grouped-styles {
     overflow: auto;

From 4d14c07fcdbaba65d0f60fc04c5bd1847a690b0a Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 3 Dec 2025 14:41:21 -0500
Subject: [PATCH 3/6] payment page updates

feel like this is gonna need some work when we can get there.  not sure on the iframe and the 2 forms
---
 src/layouts/payment-method/payment-method.vue | 33 ++++++++++---------
 src/layouts/payment-page/payment-page.vue     | 25 ++++++++------
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 90d12c7b..953425f4 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -4,24 +4,19 @@
         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="SiteHeaderWidget" />
-                </div>
+        <div class="fade-on-route-transition">
+            <div class="justify-content-center">
+                <siteHeader
+                    ref="siteHeader"
+                    cmsWidgetName="SiteHeaderWidget" />
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
+            <div class="iss-heritage-container-width">
+                <div class="payment-method-container iss-heritage-content-container-width">
                     <siteSubHeader
                         class="mb-5 mt-4 px-3"
                         cmsWidgetName="SiteSubHeaderWidget"
                         subTextClasses="text-center"
-                        subHeaderClasses="mt-2" />
+                        subHeaderClasses="mt-4" />
                     <div class="main-content-container">
                         <hr class="my-0" />
                         <reviewDropdown ref="reviewDropdown" />
@@ -305,10 +300,18 @@ export default {
 
 <style lang="scss" scoped>
 $page-side-padding: 1.5rem;
+.iss-heritage-container-width {
+    .payment-method-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+    }
+}
 
 .main-content-container {
-        padding: 0;
-    }
+    padding: 0;
+}
 
 .page-container-grouped-styles {
     overflow: auto;
diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index efdc2638..8ac64f7c 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -1,13 +1,11 @@
 <template>
     <Form>
-        <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 class="fade-on-route-transition">
+            <div class="justify-content-center">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+            <div class="iss-heritage-container-width">
+                <div class="payment-page-container iss-heritage-content-container-width">
                     <alert
                         v-if="displayPayInAdvanceCreditCardAlert"
                         name="payInAdvanceCreditCardErrorAlert"
@@ -787,12 +785,19 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.container-fluid {
-    &.fade-on-route-transition {
-        height: unset;
+.iss-heritage-container-width {
+    .payment-page-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
     }
 }
 
+.fade-on-route-transition {
+    height: unset;
+}
+
 .payment p {
     margin-bottom: 0.75rem;
 }

From 1413140befb721a8c8a28c1624637e4fbb6d8062 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 3 Dec 2025 15:15:59 -0500
Subject: [PATCH 4/6] last updates for this card for now.

remove vehicle banner
blindly make header/css changes
---
 .../order-confirmation/order-confirmation.vue |  1 -
 src/layouts/payment-method/payment-method.vue |  4 +-
 src/layouts/payment-page/payment-page.spec.js |  6 +-
 .../service-packages/service-packages.vue     | 23 +++++---
 .../tpa-confirmation/tpa-confirmation.spec.js | 17 ++----
 .../tpa-confirmation/tpa-confirmation.vue     | 32 +++++-----
 .../__snapshots__/tpa-submit.spec.js.snap     |  1 -
 src/layouts/tpa-submit/tpa-submit.vue         |  1 -
 .../vehicle-parts/vehicle-parts.spec.js       |  4 --
 src/layouts/vehicle-parts/vehicle-parts.vue   | 58 +++++++++----------
 10 files changed, 67 insertions(+), 80 deletions(-)

diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue
index 4dc7b20e..98edaf23 100644
--- a/src/layouts/order-confirmation/order-confirmation.vue
+++ b/src/layouts/order-confirmation/order-confirmation.vue
@@ -166,7 +166,6 @@ export default {
             referralNumber: referralNumber?.toString(),
             widgets: {
                 siteHeader: 'SiteHeaderWidget',
-                vehicleBanner: 'VehicleBannerWidget',
                 emailConfirmation: 'EmailConfirmationWordingWidget',
                 orderConfirmation: 'OrderConfirmationContent',
                 mobile: 'MobileWordingWidget',
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 953425f4..855935ad 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -83,7 +83,6 @@ import { Form } from 'vee-validate';
 import issPageValues from '@/router/router-constants/issPage-values';
 import bailoutMessage from '@/constants/bailoutMessage';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
-import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import { saveSession, submitWorkOrder } from '@/helpers/order-helper.js';
 import { experimentSettings } from '@/constants/experiments';
 import submitType from '@/constants/submit-type';
@@ -101,8 +100,7 @@ export default {
         reviewDropdown,
         cartDropdown,
         paymentMethodQuestion,
-        alert,
-        VehicleBanner
+        alert
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
diff --git a/src/layouts/payment-page/payment-page.spec.js b/src/layouts/payment-page/payment-page.spec.js
index d36e9de2..13830ddc 100644
--- a/src/layouts/payment-page/payment-page.spec.js
+++ b/src/layouts/payment-page/payment-page.spec.js
@@ -191,7 +191,7 @@ const defaultOrder = {
         damage: {
             isRepair: false,
             numberOfChips: null,
-            glassToReplace: [{location: 'windshield'}]
+            glassToReplace: [{ location: 'windshield' }]
         },
         lineItems: {
             glassParts: [parts.windshield],
@@ -380,7 +380,7 @@ describe('payment-page.vue', () => {
             // Arrange
             const { wrapper } = getMountedComponent(defaultOrder);
 
-            const outerDiv = wrapper.find('.container-fluid');
+            const outerDiv = wrapper.find('.fade-on-route-transition');
             const clickFn = jest.fn();
             outerDiv.element.addEventListener('click', clickFn);
 
@@ -443,7 +443,7 @@ describe('payment-page.vue', () => {
             const { wrapper } = getMountedComponent(defaultOrder);
             useMainStore().order.payment.paymentMethod = paymentMethods.PayNow;
 
-            useMainStore().savePaymentMethodChoice = jest.fn().mockImplementation((value) => {useMainStore().order.payment.paymentMethod = value});
+            useMainStore().savePaymentMethodChoice = jest.fn().mockImplementation((value) => { useMainStore().order.payment.paymentMethod = value; });
 
             // Act
             wrapper.vm.handleIFrameContentWindowMessage(event);
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index ec43ae28..8905db79 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -4,16 +4,14 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="container-fluid fade-on-route-transition service-packages">
-            <div class="row justify-content-center">
-                <div class="col-md-6 px-0 px-md-2">
-                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                </div>
+        <div class="fade-on-route-transition service-packages">
+            <div class="justify-content-center">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+            <div class="iss-heritage-container-width">
+                <div class="service-packages-container iss-heritage-content-container-width">
                     <siteSubHeader
-                        class="mb-2 mt-4"
+                        class="mt-4"
                         subHeaderClasses="mt-5"
                         justification="left"
                         cmsWidgetName="SiteSubHeaderWidget"
@@ -199,6 +197,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.iss-heritage-container-width {
+    .service-packages-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+    }
+}
+
 .subheader-secondary {
     margin-top: 0.5rem;
     padding: 0px;
diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
index 11f9e60b..cfd64cba 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.spec.js
@@ -78,18 +78,18 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
 const defaultOrder = {
     serviceLocation: {
         provider: {
-            companyName: "Hershey",
-            phoneNumber: "726-117-0377"
+            companyName: 'Hershey',
+            phoneNumber: '726-117-0377'
         }
     },
     currentDeductible: 479,
     isVerified: false,
-    carrierPhoneNumber: "757-277-0388",
+    carrierPhoneNumber: '757-277-0388',
     vehicle: {
         imageUrl: 'url for image',
         category: 'car'
     }
-}
+};
 
 describe('TPAConfirmation.vue', () => {
     describe('Rendering', () => {
@@ -108,13 +108,6 @@ describe('TPAConfirmation.vue', () => {
             // Assert
             expect(siteHeader.exists()).toBe(true);
         });
-        test('Should render Vehicle Banner', () => {
-            // Act
-            const vehicleBanner = wrapper.findComponent({ ref: 'vehicleBanner' });
-
-            // Assert
-            expect(vehicleBanner.exists()).toBe(true);
-        });
         test('Should render Confirmation Body One', () => {
             // Act
             const bodyOne = wrapper.findComponent({ ref: 'tpaConfirmationBodyOne' });
@@ -249,7 +242,7 @@ describe('TPAConfirmation.vue', () => {
                     [false, false, 0],
                     [false, false, 500],
                     [true, true, 0],
-                    [false, true, 500] 
+                    [false, true, 500]
                 ])('with argument zeroDeductible', (expected, isVerified, deductible) => {
                     test(`returns ${expected} when coverageStatus is ${getEnumName(coverageStatuses, status)} and currentDeductible is ${deductible}`, () => {
                         // Arrange
diff --git a/src/layouts/tpa-confirmation/tpa-confirmation.vue b/src/layouts/tpa-confirmation/tpa-confirmation.vue
index 62646ce4..08d520ff 100644
--- a/src/layouts/tpa-confirmation/tpa-confirmation.vue
+++ b/src/layouts/tpa-confirmation/tpa-confirmation.vue
@@ -4,21 +4,14 @@
         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="SiteHeaderWidget" />
-                </div>
+        <div class="fade-on-route-transition">
+            <div class="justify-content-center">
+                <siteHeader
+                    ref="siteHeader"
+                    cmsWidgetName="SiteHeaderWidget" />
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <vehicleBanner
-                        ref="vehicleBanner"
-                        class="mb-4"
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
+            <div class="iss-heritage-container-width">
+                <div class="tpa-confirmation-container iss-heritage-content-container-width">
                     <div class="d-flex justify-content-center align-items-center text-color--black pb-2 fs-5">
                         <img :src="tpaConfirmationImage" />
                         <span
@@ -69,7 +62,6 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
 import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
@@ -96,7 +88,6 @@ export default {
     components: {
         siteHeader,
         siteFooter,
-        vehicleBanner,
         textBlock,
         deductibleBox,
         // eslint-disable-next-line vue/no-reserved-component-names
@@ -219,6 +210,15 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.iss-heritage-container-width {
+    .tpa-confirmation-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+    }
+}
+
 .text-color--black {
     color: $black;
 }
diff --git a/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap b/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
index 48eedef7..42ed6d08 100644
--- a/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
+++ b/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
@@ -20,7 +20,6 @@ Object {
       "shop": "PreferredShopSubTitle",
       "vehicle": "VehicleSubTitle",
     },
-    "vehicleBanner": "VehicleBannerWidget",
   },
 }
 `;
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 306ab7a6..5b3b223a 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -161,7 +161,6 @@ export default {
                 siteHeader: 'SiteHeaderWidget',
                 siteSubHeader: 'SiteSubHeaderWidget',
                 serviceSummary: 'ServiceSummaryContent',
-                vehicleBanner: 'VehicleBannerWidget',
                 subheader: {
                     vehicle: 'VehicleSubTitle',
                     damage: 'DamageSubTitle',
diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js
index 50459f63..cd7d01e9 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.spec.js
+++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js
@@ -62,10 +62,6 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
     const apiResponses = {
         cmsContent: {
             SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
-            VehicleBannerWidget: {
-                GenericVehicleImage:
-                    `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`
-            },
             FunnelHeaderWidget: {
                 LogoImage:
                     `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 24bf1fc1..101e3771 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -1,47 +1,36 @@
 <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" />
-                </div>
+    <Form
+        ref="theForm"
+        @submit="onSubmit"
+        @invalidSubmit="onInvalidSubmit">
+        <div class="fade-on-route-transition">
+            <div class="justify-content-center">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
             </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" />
+            <div class="iss-heritage-container-width">
+                <div class="vehicle-parts-container iss-heritage-content-container-width">
                     <siteSubHeader
                         ref="siteSubHeader"
+                        class="mt-4"
                         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">
+                    <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
-                                ]
-                            "
+                            v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
                             :glassLocation="item.glassLocation"
                             :glassName="item.glassName"
                             :colorAnswers="item.colorAnswers"
-                            :alreadyPopulatedPartsData="
-                                alreadyPopulatedPartsData
-                            " />
+                            :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
                     </div>
                     <siteFooter
                         ref="siteFooter"
@@ -60,7 +49,6 @@
 // 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';
@@ -81,7 +69,6 @@ export default {
         Form,
         glassPartQuestion,
         siteHeader,
-        vehicleBanner,
         siteSubHeader,
         siteFooter,
         alert
@@ -239,9 +226,18 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-#vehicle-parts-alert {
-    .alert-heading {
-        margin-top: 0.25rem !important;
+.iss-heritage-container-width {
+    .vehicle-parts-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+
+        #vehicle-parts-alert {
+            .alert-heading {
+                margin-top: 0.25rem !important;
+            }
+        }
     }
 }
 </style>

From 581674a3228ebd09b98dad83530c68f881d7c429 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 3 Dec 2025 15:18:18 -0500
Subject: [PATCH 5/6] remove vehicle banner component

---
 .../vehicle-banner/vehicle-banner.spec.js     | 114 ------------------
 .../vehicle-banner/vehicle-banner.vue         |  84 -------------
 2 files changed, 198 deletions(-)
 delete mode 100644 src/iss-components/vehicle-banner/vehicle-banner.spec.js
 delete mode 100644 src/iss-components/vehicle-banner/vehicle-banner.vue

diff --git a/src/iss-components/vehicle-banner/vehicle-banner.spec.js b/src/iss-components/vehicle-banner/vehicle-banner.spec.js
deleted file mode 100644
index 1eac7cf3..00000000
--- a/src/iss-components/vehicle-banner/vehicle-banner.spec.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import vehicleCategories from '@/constants/vehicle-categories.js';
-import { useMainStore } from '@/store';
-import { createApp } from 'vue';
-import { createPinia, mapStores } from 'pinia';
-
-import App from '@/App.vue';
-import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
-
-const cmsData = { VehicleBannerWidget:
-  {
-      GenericVehicleImage: 'blurred-image.jpg',
-      GenericVehicleImageFilePath: 'images/default-source/default-album/blurred-image.jpg',
-      CarUnmatchedVehicleIcon: 'car-placeholder.jpg',
-      TruckUnmatchedVehicleIcon: 'truck-placeholder.jpg',
-      VanUnmatchedVehicleIcon: 'van-placeholder.jpg',
-      CommercialVanUnmatchedVehicleIcon: 'commercial-placeholder.jpg',
-      SuvUnmatchedVehicleIcon: 'suv-placeholder.jpg'
-  } };
-
-const vueApp = createApp(App);
-const pinia = createPinia();
-vueApp.use(pinia);
-const store = useMainStore();
-
-const mockMixin = {
-
-    methods: {
-        getCmsContent(widgetName, fieldName) {
-            return cmsData[widgetName][fieldName];
-        }
-    },
-    computed: {
-        ...mapStores(useMainStore),
-        vehicleCategories() {
-            return vehicleCategories;
-        }
-    }
-};
-
-describe('vehicleBanner', () => {
-    test('renders the blurrycar image when displayGenericVehicleImage is true', async () => {
-        const wrapper = shallowMount(vehicleBanner, {
-            propsData: {
-                displayGenericVehicleImage: true,
-                cmsWidgetName: 'VehicleBannerWidget'
-            },
-            mixins: [mockMixin]
-        });
-
-        expect(wrapper.vm.vehicleImageToDisplay).toEqual(wrapper.vm.genericVehicleImage);
-        expect(wrapper.find('img').attributes('class')).toContain('vehicle-image');
-        wrapper.unmount();
-    });
-
-    test('renders expected vehicle image', async () => {
-        store.order.vehicle.imageUrl = 'url_to_vehicle_image';
-
-        const wrapper = shallowMount(vehicleBanner, {
-            propsData: {
-                displayGenericVehicleImage: false,
-                cmsWidgetName: 'VehicleBannerWidget'
-            },
-            mixins: [mockMixin]
-        });
-
-        expect(wrapper.vm.vehicleImageToDisplay).toEqual('url_to_vehicle_image');
-        expect(wrapper.find('img').attributes('class')).toContain('vehicle-image');
-        wrapper.unmount();
-    });
-
-    test('should render default car icon when imageUrl is null and category is default', async () => {
-        store.order.vehicle.imageUrl = null;
-
-        const wrapper = shallowMount(vehicleBanner, {
-            propsData: {
-                displayGenericVehicleImage: false,
-                cmsWidgetName: 'VehicleBannerWidget'
-            },
-            mixins: [mockMixin]
-        });
-
-        const iconUrl = wrapper.vm.vehicleImageToDisplay;
-
-        expect(iconUrl).toEqual('car-placeholder.jpg');
-        wrapper.unmount();
-    });
-
-    const params = [['CAR', 'car-placeholder.jpg'],
-        ['TRUCK', 'truck-placeholder.jpg'],
-        ['VAN', 'van-placeholder.jpg'],
-        ['COMMERCIAL VAN', 'commercial-placeholder.jpg'],
-        ['SUV', 'suv-placeholder.jpg'],
-        ['OTHER', 'car-placeholder.jpg']];
-
-    test.each(params)('renders correct icon when imageUrl is not populated for %s and %s', async (category, expectedIcon) => {
-        store.order.vehicle.imageUrl = null;
-        store.order.vehicle.category = category;
-
-        const wrapper = shallowMount(vehicleBanner, {
-            propsData: {
-                displayGenericVehicleImage: false,
-                cmsWidgetName: 'VehicleBannerWidget'
-            },
-            mixins: [mockMixin]
-        });
-
-        const vehicleIcon = wrapper.vm.getUnmatchedVehicleIcon();
-
-        expect(vehicleIcon).toEqual(expectedIcon);
-        expect(wrapper.find('img').attributes('class')).toContain('vehicle-image');
-        wrapper.unmount();
-    });
-});
diff --git a/src/iss-components/vehicle-banner/vehicle-banner.vue b/src/iss-components/vehicle-banner/vehicle-banner.vue
deleted file mode 100644
index 6a17a3b7..00000000
--- a/src/iss-components/vehicle-banner/vehicle-banner.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="vehicle_banner text-center">
-    <img
-      class="vehicle-image img-fluid"
-      :src="vehicleImageToDisplay"
-      alt="" />
-  </div>
-</template>
-
-<script>
-export default {
-    name: 'vehicle-banner',
-    props: {
-        displayGenericVehicleImage: {
-            type: Boolean,
-            required: true
-        },
-        cmsWidgetName: String
-    },
-    computed: {
-        vehicleImageToDisplay() {
-            if (this.displayGenericVehicleImage) {
-                return this.genericVehicleImage;
-            }
-
-            const imageUrl = (this.mainStore.hasSubmittedOrder())
-                ? this.mainStore.getSubmittedOrder().vehicle.imageUrl
-                : this.mainStore.order.vehicle.imageUrl;
-
-            if (!imageUrl || imageUrl === 'NULL') {
-                return this.getUnmatchedVehicleIcon();
-            }
-
-            return imageUrl;
-        },
-        genericVehicleImage() {
-            return this.getCmsContent(this.cmsWidgetName, 'GenericVehicleImage');
-        },
-        carUnmatchedVehicleIcon() {
-            return this.getCmsContent(this.cmsWidgetName, 'CarUnmatchedVehicleIcon');
-        },
-        truckUnmatchedVehicleIcon() {
-            return this.getCmsContent(this.cmsWidgetName, 'TruckUnmatchedVehicleIcon');
-        },
-        vanUnmatchedVehicleIcon() {
-            return this.getCmsContent(this.cmsWidgetName, 'VanUnmatchedVehicleIcon');
-        },
-        commercialUnmatchedVehicleIcon() {
-            return this.getCmsContent(this.cmsWidgetName, 'CommercialVanUnmatchedVehicleIcon');
-        },
-        suvUnmatchedVehicleIcon() {
-            return this.getCmsContent(this.cmsWidgetName, 'SuvUnmatchedVehicleIcon');
-        }
-    },
-    methods: {
-        getUnmatchedVehicleIcon() {
-            const category = this.mainStore.getSubmittedOrder()?.vehicle.category ?? this.mainStore.order.vehicle.category;
-            switch (category) {
-                case this.vehicleCategories.CAR:
-                    return this.carUnmatchedVehicleIcon;
-                case this.vehicleCategories.SUV:
-                    return this.suvUnmatchedVehicleIcon;
-                case this.vehicleCategories.TRUCK:
-                    return this.truckUnmatchedVehicleIcon;
-                case this.vehicleCategories.VAN:
-                    return this.vanUnmatchedVehicleIcon;
-                case this.vehicleCategories.COMMERCIALVAN:
-                    return this.commercialUnmatchedVehicleIcon;
-                default:
-                    return this.carUnmatchedVehicleIcon;
-            }
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.vehicle-image {
-  max-width: 290px;
-  object-fit: cover;
-  width: 100%;
-  height: 132px;
-}
-</style>

From 33ed8e68fb13100940a049c82f9586dd293abb12 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 3 Dec 2025 15:46:42 -0500
Subject: [PATCH 6/6] access denied footer/css

---
 src/layouts/access-denied/access-denied.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/layouts/access-denied/access-denied.vue b/src/layouts/access-denied/access-denied.vue
index f43d786f..d329343b 100644
--- a/src/layouts/access-denied/access-denied.vue
+++ b/src/layouts/access-denied/access-denied.vue
@@ -1,4 +1,5 @@
 <template>
+<form>
     <div class="page-container-grouped-styles access-denied">
         <div class="fade-on-route-transition position-relative">
             <div class="container-fluid">
@@ -10,6 +11,7 @@
             </div>
         </div>
     </div>
+</form>
 </template>
 
 <script>