Merge branch 'develop' into feature/INSR-7750

src/constants/application-config.js

@@ -23,7 +23,10 @@ const applicationConfig = Object.freeze({
     YAHOO_CALENDAR: 'https://calendar.yahoo.com/?v=60',
     OUTLOOK_CALENDAR:
         'https://outlook.office.com/calendar/deeplink/compose?path=/calendar/action/compose&rru=addevent',
-    FRONTEND_LOGGER_PATH: "/analytics/api/v1/logging"
+    FRONTEND_LOGGER_PATH: "/analytics/api/v1/logging",
+    BAILOUT_ON_APPLICATION_ERROR: true,
+    BAILOUT_ON_API_ERROR: true,
+    BAILOUT_ON_ROUTER_ERROR: true
 });
 
 export default applicationConfig;

src/constants/bailoutCode.js

@@ -12,7 +12,10 @@ const bailoutCode = Object.freeze({
     NoPartsAvailable: 10,
     PartsServiceError: 11,
     SafeliteNotTheProvider: 12,
-    VehicleYMMSLookupError: 13
+    VehicleYMMSLookupError: 13,
+    ApplicationError: 14,
+    ApiError: 15,
+    RouterError: 16
 });
 
 export default bailoutCode;

src/constants/bailoutMessage.js

@@ -17,6 +17,18 @@ const bailoutMessage = Object.freeze({
         code: bailoutCode.Unknown,
         message: `An unknown bailout occurred: ${getItemData(error)}`
     }),
+    applicationError: (error) => ({
+        code: bailoutCode.ApplicationError,
+        message: `An application error occurred: ${getItemData(error)}`
+    }),
+    apiError: (error) => ({
+        code: bailoutCode.ApiError,
+        message: `An API error occurred: ${getItemData(error)}`
+    }),
+    routerError: (error) => ({
+        code: bailoutCode.RouterError,
+        message: `A router error occurred: ${getItemData(error)}`
+    }),
     saveSessionError: (error) => ({
         code: bailoutCode.SaveSessionError,
         message: `An error occurred during save session: ${getItemData(error)}`

src/digital-components/button-question/button-question.vue

@@ -127,6 +127,7 @@ export default {
         isOverflowScrollable: Boolean,
         isWide: Boolean,
         isCashOrInsurance: Boolean,
+        isHorizontalLayout: Boolean,
         modelValue: [Array, Number, String],
         value: [Number, String],
         validationRules: String,
@@ -211,7 +212,10 @@ export default {
                     classes = 'ui-radio d-flex';
                     break;
                 case 'servicePackageRadio':
-                    classes = 'package-main';
+                    classes = 'package-main d-flex flex-column';
+                    if (this.isHorizontalLayout) {
+                        classes += ' flex-md-row gap-3';
+                    }
                     break;
                 case 'providerPrefRadio':
                     classes = 'option-main';
@@ -231,6 +235,9 @@ export default {
                     break;
                 case 'servicePackageRadio':
                     classes = 'package-wrapper';
+                    if (this.isHorizontalLayout) {
+                        classes += ' flex-grow-0 flex-shrink-0';
+                    }
                     break;
                 case 'providerPrefRadio':
                     classes = 'option-wrapper';
@@ -325,6 +332,12 @@ export default {
 
 <style lang="scss" scoped>
 .button-question {
+    :deep(.package-wrapper) {
+        @media (min-width: 768px) {
+            flex: 0 0 calc(33.333% - 0.67rem);
+            max-width: calc(33.333% - 0.67rem);
+        }
+    }
     color: $black;
 
     .radio-button-container {
@@ -345,6 +358,11 @@ export default {
             &.button-question-text-left {
                 text-align: left;
             }
+            &.service-package-question-text {
+                font-weight: 500;
+                text-align: center;
+                margin-bottom: 0.5rem;
+            }
         }
     }
 

src/global-methods.js

@@ -15,10 +15,6 @@ axios.interceptors.response.use(
         if (typeof error.response === 'undefined') {
             // The request was not made, could be a bad url, bad connection or a CORS error.
             rejectionError = {
-                message:
-                    'A network error occurred. '
-                    + 'This could be a CORS issue or a dropped internet connection. '
-                    + 'It is impossible for us to know.',
                 cause: error,
                 response: error,
                 message: axiosResponseInterceptorMessages.NETWORK_ERROR
@@ -51,7 +47,7 @@ axios.interceptors.response.use(
 );
 
 export default {
-    callHttpClient({ method, endpoint, payload, logApiCall = true }) {
+    callHttpClient({ method, endpoint, payload, logApiCall = true, bailoutOnError = true }) {
         return new Promise((resolve, reject) => {
             const store = useMainStore();
             const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
@@ -66,9 +62,10 @@ export default {
                 [headerKeys.SESSION_SEQUENCE_NUMBER]: sessionKey
             };
 
+            const url = cfDistroUrl + endpoint;
             axios({
                 method,
-                url: cfDistroUrl + endpoint,
+                url,
                 data: payloadAndAnalyticsData,
                 crossDomain: true,
                 responseType: 'json',
@@ -97,10 +94,11 @@ export default {
                         }
 
                         if (error.response.status !== 404) {
-                            global.$logger.logError(
+                            global.$logger.logError(`${method}: ${endpoint}: ${error.message}`, error.response);
-                                `${method}: ${endpoint}: ${error.message}`,
+                            if (bailoutOnError && global.bailoutOnAxiosError !== undefined)
-                                error.response
+                            {
-                            );
+                                global.bailoutOnAxiosError({ url, error });
+                            }
                         }
                         return reject(error.response);
                     }

src/helpers/damage-helper.js

@@ -90,6 +90,15 @@ export function getGlassList(glassPieces) {
     return names.toLowerCase();
 }
 
+export function includesWindshieldReplacement() {
+    const mainStore = useMainStore();
+    const windshieldMatches =
+        mainStore.damage.glassToReplace?.filter(
+            (glassToReplace) => glassToReplace.glassLocation === damageLocationsSelected.WINDSHIELD
+        ) ?? [];
+    return windshieldMatches.length > 0;
+}
+
 /**
  * Commented code are copied directly from DigitalConsumer.FixMyGlass
  * and have not been adjusted for ISS.

src/iss-components/shop-list-button/shop-list-button.vue

@@ -123,7 +123,6 @@ $heritage-checked-border-color: #0070d1;
         &:checked + .list-button-content {
             background: $background-color-selected;
             border-color: $heritage-checked-border-color;
-            box-shadow: 0 0 0 1px $blue;
             .button-label-copy {
                 font-weight: 500;
                 color: $black;

src/iss-components/site-sub-header/site-sub-header.vue

@@ -117,7 +117,7 @@ export default {
         alternateFormatting() {
             // override for service-packages unique style
             if (this.issContainingPage?.toLowerCase() === 'service-packages') {
-                return 'service-packages-subtext my-4';
+                return 'service-packages-subtext';
             }
             return this.darkGraySubText ? 'dark-gray' : 'light-gray';
         }
@@ -169,8 +169,8 @@ p {
         color: $darker-gray;
     }
     &.service-packages-subtext {
-        font-weight: 500;
+        font-weight: 400;
-        line-height: 24px;
+        line-height: 26px;
         span {
             font-size: 1rem;
         }

src/layouts/address-lookup/address-lookup.vue

@@ -14,9 +14,11 @@
                         ref="siteSubHeader"
                         cmsWidgetName="SiteSubHeaderWidget"
                         class="mt-4" />
+                    <div class="mt-4">
                         <customerQuestions
                             ref="customerQuestions"
                             v-model="customerQuestions" />
+                    </div>
                     <alert
                         v-if="displayVinNotFoundAlert"
                         ref="alertVinNotFound"

src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap

@@ -2,6 +2,7 @@
 
 exports[`coverageStatement.vue returns the initial data 1`] = `
 Object {
+  "CANCEL_CLAIM_REF_NAME": "CancelClaimModal",
   "RECAL_MODAL_REF_NAME": "RecalModal",
   "baseServiceLineItems": Array [],
   "widget": Object {

src/layouts/coverage-statement/coverage-statement.spec.js

@@ -98,6 +98,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
     const wrapper = shallowMount(coverageStatement, mountOptions);
+    wrapper.vm.$refs[CANCEL_CLAIM_REF_NAME].openModal = jest.fn();
     return { wrapper };
 }
 
@@ -672,6 +673,18 @@ describe('coverageStatement.vue', () => {
                     );
             });
         });
+        describe('openCancelClaimModal', () => {
+            test('when I want to cancel link is clicked, modal opens', () => {
+                // Arrange
+                const { wrapper } = getMountedComponent({});
+
+                // Act
+                wrapper.vm.openCancelClaimModal();
+
+                // Assert
+                expect(wrapper.vm.$refs[CANCEL_CLAIM_REF_NAME].openModal).toHaveBeenCalled();
+            });
+        });
     });
     describe('claim registration api call', () => {
         it('Loaded duplicate with previously registered claim => claim registration is not called', async () => {

src/layouts/coverage-statement/coverage-statement.vue

@@ -81,7 +81,7 @@
                         linkType="text"
                         text="No, I want to cancel"
                         href="#"
-                        @clickEvent="cancelClaim" />
+                        @clickEvent="openCancelClaimModal" />
                     <textBlock
                         v-if="isDisclaimerVisible"
                         class="mt-5 mb-5"
@@ -100,6 +100,10 @@
             :ref="RECAL_MODAL_REF_NAME"
             cssModalHeadlineClass="text-center"
             cmsWidgetName="RecalModal" />
+        <cancelClaimModal
+            :ref="CANCEL_CLAIM_REF_NAME"
+            @cancelClaimConfirmation="cancelClaim"
+            @returnToClaim="navigateForward" />
     </Form>
 </template>
 
@@ -108,6 +112,7 @@
 import { Form } from 'vee-validate';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
 import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
+import cancelClaimModal from '@/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
 import textLink from '@/ux-components/text-link/text-link.vue';
 import buttonMain from '@/ux-components/button-main/button-main.vue';
@@ -134,6 +139,7 @@ import coverageStatuses from '@/constants/coverage-statuses';
 import coverageType from '@/constants/coverage-type';
 
 const RECAL_MODAL_REF_NAME = 'RecalModal';
+const CANCEL_CLAIM_REF_NAME = 'CancelClaimModal';
 
 export default {
     name: 'coverage-statement',
@@ -144,7 +150,8 @@ export default {
         buttonMain,
         textBlock,
         textLink,
-        siteFooter
+        siteFooter,
+        cancelClaimModal
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
@@ -205,7 +212,8 @@ export default {
                 explanatoryText: 'ExplanatoryTextWidget',
                 nextStep: 'NextStepsWidget'
             },
-            RECAL_MODAL_REF_NAME
+            RECAL_MODAL_REF_NAME,
+            CANCEL_CLAIM_REF_NAME
         };
     },
     computed: {
@@ -444,6 +452,9 @@ export default {
             this.baseServiceLineItems = lineItems;
         },
         formatAmountInDollars,
+        openCancelClaimModal() {
+            this.$refs[CANCEL_CLAIM_REF_NAME].openModal();
+        },
         cancelClaim() {
             this.mainStore.updateIsSafeliteProvider(false);
             this.mainStore.setBailout(bailoutMessage.RequestCallback());
@@ -531,6 +542,9 @@ export default {
             font-weight: 500;
         }
         margin-top: 6px;
+        .external-text {
+            text-decoration: underline;
+        }
         a {
             text-decoration: none;
         }

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -14,6 +14,24 @@
                         cmsWidgetName="SiteSubHeaderWidget"
                         class="mt-4"
                         subHeaderMarginClasses="mt-1" />
+                    <textboxQuestion
+                        id="license-plate-question-wrapper"
+                        v-model="licensePlate"
+                        cmsWidgetName="LicensePlateNumberQuestionWidget"
+                        isRequired
+                        disableAutoFill
+                        inputId="license-plate-question"
+                        class="mt-4"
+                        validationRules="license-plate-required" />
+                    <dropdownQuestion
+                        ref="state"
+                        v-model="licenseState"
+                        cmsWidgetName="StateQuestionWidget"
+                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
+                        :options="stateOptions"
+                        disableAutoFill
+                        validationRules="state-required"
+                        class="mt-4" />
                     <alert
                         v-if="displayVinNotFoundAlert"
                         ref="alertVinNotFound"
@@ -48,24 +66,6 @@
                         cmsWidgetName="AlertNoServiceWidget"
                         alertClass="alert-danger"
                         :isDismissable="false" />
-                    <textboxQuestion
-                        id="license-plate-question-wrapper"
-                        v-model="licensePlate"
-                        cmsWidgetName="LicensePlateNumberQuestionWidget"
-                        isRequired
-                        disableAutoFill
-                        inputId="license-plate-question"
-                        class="mt-4"
-                        validationRules="license-plate-required" />
-                    <dropdownQuestion
-                        ref="state"
-                        v-model="licenseState"
-                        cmsWidgetName="StateQuestionWidget"
-                        inputId="8fdf9dc2e13e430eb57529499dceb3eb"
-                        :options="stateOptions"
-                        disableAutoFill
-                        validationRules="state-required"
-                        class="mt-4" />
                     <siteFooter
                         ref="siteFooter"
                         class="mt-5"

src/layouts/service-packages/service-package-question/service-package-question.vue

@@ -2,12 +2,16 @@
     <buttonQuestion
         ref="buttonQuestion"
         v-model="selectedPackageName"
+        class="service-package-question"
         :answers="servicePackageAnswers"
         :groupName="groupName"
+        :questionText="questionText"
+        :questionTextClasses="['service-package-question-text']"
         buttonTypeString="servicePackageRadio"
         :buttonTypeObject="servicePackageRadio"
         :validationRules="validationRules"
-        :isRequired="isRequired" />
+        :isRequired="isRequired"
+        :isHorizontalLayout="true" />
 </template>
 
 <script>
@@ -17,9 +21,7 @@ import damageLocationsSelected from '@/constants/damage-locations-selected';
 import servicePackageRadio from '@/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue';
 import partTypeStrings from '@/constants/part-type-strings';
 import { useMainStore } from '@/store';
-import allGlassPartsAndItemsHavePrices from '@/layouts/service-packages/service-package-helper/service-package-helper';
 import { getPriceOfLineItem } from '@/helpers/price-calculator';
-import { getHighestFullySatisfiedTier } from '@/helpers/service-package-helper.js';
 
 const glassLocations = damageLocationsSelected;
 
@@ -50,7 +52,8 @@ export default {
     data() {
         return {
             servicePackageRadio,
-            selectedPackageName: ''
+            selectedPackageName: '',
+            questionText: 'Select an option:'
         };
     },
     computed: {
@@ -58,7 +61,6 @@ export default {
             if (this.availableLineItems?.lineItems) {
                 return this.availableLineItems.lineItems;
             }
-
             return this.availableLineItems ?? [];
         },
         servicePackageAnswers() {
@@ -142,9 +144,6 @@ export default {
         }
     },
     watch: {
-        availableLineItems() {
-            this.selectDefaultPackage();
-        },
         selectedPackageName(newValue) {
             const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
             this.$emit('vapsItemsSelected', VapsProductsInSelectedPackage);
@@ -213,17 +212,6 @@ export default {
             });
             return vapsPrice;
         },
-        selectDefaultPackage() {
-            const { glassToReplace, isRepair } = store.order.damage;
-            const { vaps } = store.order.lineItems;
-            const defaultTier = getHighestFullySatisfiedTier(
-                glassToReplace ?? [],
-                this.availableLineItems,
-                isRepair,
-                vaps ?? []
-            );
-            this.selectedPackageName = defaultTier;
-        },
         getVapsLineItemsForSelectedPackage(packageName) {
             const vapsLineItemsForSelectedPackage = [];
             if (packageName === packageNames.TIER_TWO) {
@@ -280,3 +268,24 @@ export default {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+.service-package-question-text {
+    font-weight: 500;
+    text-align: center;
+    margin-bottom: 0;
+}
+
+@include media-breakpoint-up(md) {
+    :deep(.package-main) {
+        padding: 0 1.5rem 0 1.5rem;
+        .package-wrapper:nth-child(2) {
+            margin-left: 0.5rem;
+        }
+        .package-wrapper:nth-child(3) {
+            margin-right: 0;
+            margin-left: 0.5rem;
+         }
+    }
+}
+</style>

src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue

@@ -7,12 +7,12 @@
             :class="[buttonLabelSubCopy ? 'has-subheader' : '']"
             for="testradio">
             <div class="package-specs">
-                <div>
+                <div class="button-label">
+                    <div class="label-wrapper">
                         <p class="m-0">
-                        <span v-html="buttonLabel"></span>
                             <span
-                            class="pricing-info"
+                                class="mt-1"
-                            v-html="buttonAuxiliaryCopy"></span>
+                                v-html="buttonLabel"></span>
                         </p>
                         <p
                             v-if="buttonLabelSubCopy"
@@ -20,6 +20,12 @@
                             v-html="buttonLabelSubCopy">
                         </p>
                     </div>
+                    <div class="pricing-info-mobile">
+                        <span
+                            class="price"
+                            v-html="buttonAuxiliaryCopy"></span>
+                    </div>
+                </div>
                 <div class="hide-when-closed">
                     <ul>
                         <li
@@ -53,11 +59,17 @@
                     <!--ms-n6-->
                     <div
                         v-if="buttonFooterCopy"
-                        class="package-footer fw-bold caption mt-4 ml-n4 mr-3"
+                        class="package-footer fw-bold caption mt-4 mr-3"
-                        v-html="buttonFooterCopy"></div>
+                        v-html="buttonFooterCopy">
                     </div>
                 </div>
             </div>
+            <div class="pricing-info-desktop">
+                <span
+                    class="price"
+                    v-html="buttonAuxiliaryCopy"></span>
+            </div>
+        </div>
     </baseInputButton>
 </template>
 
@@ -111,6 +123,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// TO DO: look into why the font renders differently than Heritage, even with the same specs
     .ml-n4 {
         margin-left: -$spacer * 2;
     }
@@ -121,8 +134,30 @@ export default {
         .package-wrapper {
             margin: 0.5rem 0;
 
+            .button-label {
+                display: flex;
+                &:before {
+                    content: "";
+                    position: relative;
+                    top: 5px;
+                    margin-right: 1rem;
+                    border-radius: 50%;
+                    border: 0.666667px solid #767676;
+                    width: 16px;
+                    height: 16px;
+                    min-width: 16px;
+                }
+            }
+
             label {
                 display: block;
+                height: 100%;
+            }
+
+            .package-label {
+                height: 100%;
+                display: flex;
+                flex-direction: column;
             }
 
             input[type="radio"] {
@@ -132,14 +167,15 @@ export default {
 
                 + .package-label {
                     display: flex;
+                    flex-direction: column;
                     align-items: flex-start;
                     position: relative;
                     cursor: pointer;
                     width: 100%;
-                    padding: 1rem;
+                    padding: 10px;
-                    border: 1px solid $gray-300;
+                    border: 0.666667px solid #dddddd;
-                    box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
+                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-                    border-radius: 0.5rem;
+                    border-radius: 0.25rem;
                     overflow: hidden;
                     min-height: 60px;
                     max-height: 100px;
@@ -151,23 +187,11 @@ export default {
                         min-height: 86px;
                     }
 
-                    &:before {
-                        content: "";
-                        position: relative;
-                        top: 5px;
-                        margin-right: 1rem;
-                        border-radius: 50%;
-                        border: 1px solid $gray-500;
-                        width: 16px;
-                        height: 16px;
-                        min-width: 16px;
-                    }
-
                     &:after {
                         content: "";
                         position: absolute;
-                        left: 19px;
+                        left: 13px;
-                        top: 24px;
+                        top: 18px;
                         border-radius: 50%;
                         width: 10px;
                         height: 10px;
@@ -176,9 +200,9 @@ export default {
                 }
 
                 &:hover {
-                    + .package-label {
+                    + .button-label {
                         &:before {
-                            border: 1px solid #8e9292;
+                            border: 0.666667px solid #767676;
                             box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2);
                         }
                     }
@@ -200,42 +224,37 @@ export default {
                     }
 
                     + .package-label {
-                        background-color: $blue-100;
+                        background-color: $background-color-selected;
-                        border: 1px solid $blue;
+                        border: 0.666667px solid $heritage-blue-secondary;
                         max-height: 500px;
                     }
 
-                    + .package-label {
+                    + .button-label {
                         &:before {
-                            box-shadow: 0px 0px 0px 1px $blue;
+                            box-shadow: 0px 0px 0px 1px $heritage-blue-primary;
+                            border: none;
                         }
                     }
 
                     + .package-label {
                         &:after {
-                            background: $blue;
+                            background: $heritage-blue-primary;
                         }
                     }
                 }
 
-                &:focus {
-                    + .package-label {
-                        &:before {
-                            border: 2px solid $blue;
-                        }
-                    }
-                }
             }
 
             .package-footer {
-                color: $red;
+                color: #af2117;
-                font-weight: $font-weight-bold; // 600 in fmg
+                font-weight: $font-weight-bold;
-                margin-top: 0.5rem; // not in fmg
+                margin-top: 20px;
+                font-size: 0.875rem;
+                line-height: 24px;
             }
 
             .package-specs {
-                display: flex;
+                flex: 0;
-                flex-direction: column;
                 width: 100%;
                 max-height: 0;
                 transition: all 1s ease;
@@ -243,32 +262,28 @@ export default {
                     max-height: 500px;
                 }
                 p {
-                    font-weight: $font-weight-bold; // 600 in fmg
+                    color: #4d4e53;
-                    display: flex;
+                    font-weight: 600;
                     justify-content: space-between;
 
-                    span {
-                        &.pricing-info {
-                            color: $green;
-                            font-size: 0.875rem;
-                        }
-                    }
-
                     &.sub-label {
                         color: $green;
                         text-transform: uppercase;
                         font-size: 0.75rem;
+                        font-weight: $font-weight-bold;
                     }
                 }
 
                 ul {
-                    margin: 1rem 0 0 -.6rem; // .9375rem in fmg
+                    margin: 0.5rem 0 0 1.25rem;
                     padding: 0;
+                    color: $darker-gray;
 
                     li {
-                        margin-bottom: 0.5rem;
+                        margin-bottom: 0.25rem;
                         font-size: 0.875rem;
                         line-height: 1.5rem;
+                        color: $darker-gray;
 
                         a {
                             line-height: 1.5rem;
@@ -291,8 +306,41 @@ export default {
                 .hide-when-closed {
                     display: none;
                     @include media-breakpoint-up(md) {
+                        display: block;
+                    }
+                }
+            }
+
+            .pricing-info-desktop {
                 display: flex;
-                        flex-direction: column;
+                flex: 1;
+                align-items: flex-end;
+                @include media-breakpoint-down(md) {
+                    display: none;
+                }
+                span {
+                    &.price {
+                        color: #075f35;
+                        font-size: 0.875rem;
+                        font-weight: $font-weight-bold;
+                        padding: 0.35rem 0 1rem 0;
+                    }
+                }
+            }
+
+            .pricing-info-mobile {
+                display: flex;
+                flex: 1;
+                justify-content: flex-end;
+                margin-top: 0.25rem;
+                @include media-breakpoint-up(md) {
+                    display: none;
+                }
+                span {
+                    &.price {
+                        color: #075f35;
+                        font-size: 0.875rem;
+                        font-weight: $font-weight-bold;
                     }
                 }
             }

src/layouts/service-packages/service-packages.vue

@@ -9,11 +9,10 @@
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
             </div>
             <div class="iss-heritage-container-width">
-                <div class="service-packages-container iss-heritage-content-container-width">
+                <div class="service-packages-container">
                     <siteSubHeader
-                        class="mt-4"
+                        class="subheader mt-5"
-                        subHeaderClasses="mt-5"
+                        justification="center"
-                        justification="left"
                         cmsWidgetName="SiteSubHeaderWidget"
                         issContainingPage="service-packages" />
                     <servicePackageQuestion
@@ -25,15 +24,24 @@
                         isRequired
                         @vapsItemsSelected="vapsItemsSelectedAction"
                         @link-event="openModalAction" />
+                    <div class="d-flex justify-content-center mt-8 mb-4">
+                        <buttonMain
+                            ref="buttonMain"
+                            class="continue-button"
+                            variant="navigation"
+                            :buttonText="'Continue'"
+                            @clickEvent="forwardButtonAction" />
+                    </div>
+                    <siteFooter
+                        cmsWidgetName="SiteFooterWidget"
+                        class="back-link"
+                        :isForwardActionDisabled="!meta.valid"
+                        :isForwardButtonHidden="true"
+                        @backClicked="navigateBack" />
+                </div>
                 <p
                     class="caption disclaimer"
                     v-html="PriceDisclaimerText"></p>
-                    <siteFooter
-                        cmsWidgetName="SiteFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
-                        @backClicked="navigateBack"
-                        @ForwardClicked="forwardButtonAction" />
-                </div>
             </div>
             <loadingModal
                 ref="loadingModal"
@@ -72,6 +80,7 @@ import globalRules from '@/constants/global-rules';
 import servicePackageQuestion from '@/layouts/service-packages/service-package-question/service-package-question.vue';
 import issPageValues from '@/router/router-constants/issPage-values';
 import bailoutMessage from '@/constants/bailoutMessage';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
 
 const store = useMainStore();
 
@@ -84,7 +93,8 @@ export default {
         Form,
         servicePackageQuestion,
         loadingModal,
-        contentGroupModal
+        contentGroupModal,
+        buttonMain
     },
     mixins: [baseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -209,30 +219,50 @@ export default {
 <style lang="scss" scoped>
 .iss-heritage-container-width {
     .service-packages-container {
+        @include media-breakpoint-up(md) {
+            width: 100%;
+            .continue-button {
+                width: 50%
+            }
+        }
+        @include media-breakpoint-down(md) {
+            .continue-button {
+                width: 90%
+            }
+        }
         position: relative;
         min-height: 1px;
         padding-left: .9375rem;
         padding-right: .9375rem;
+        display: block;
+        margin: 0 auto;
+        :deep(.subheader-primary) {
+            display: block;
+        }
+        :deep(.subheader-secondary) {
+            display: block;
+            text-align: center;
+            margin-top: 0.75rem;
+            padding: 0px;
+            p {
+                margin-bottom: 18px;
+            }
+        }
     }
 }
-
-.subheader-secondary {
-    margin-top: 0.5rem;
-    padding: 0px;
-}
-
 .disclaimer {
-    margin: 0.5rem 0 1.5rem 0;
+    margin: 0.5rem 1rem 1.5rem 1.5rem;
-
+    :deep(.external-text) {
-    a {
+        text-decoration: none;
-        color: #4d5151;
-        font-weight: 400;
     }
 }
 .service-packages {
     :deep(strong) {
-        font-weight: $font-weight-bold;
+        font-weight: 400;
     }
 }
 
+.back-link {
+    margin-left: 1rem;
+}
 </style>

src/layouts/tpa-search/tpa-search.spec.js

@@ -355,7 +355,7 @@ describe('tpa-search.vue', () => {
 
                 // Assert
                 expect(result.length).toBe(1);
-                expect(result[0].title).toBe('test shop');
+                expect(result[0].title).toBe('Test Shop');
                 expect(result[0].addressLines.length).toBe(2);
             });
 
@@ -395,7 +395,7 @@ describe('tpa-search.vue', () => {
 
                 // Assert
                 expect(result.length).toBe(1);
-                expect(result[0].buttonLabel).toBe('auto glass shop');
+                expect(result[0].buttonLabel).toBe('Auto Glass Shop');
                 expect(result[0].buttonLabelSubCopy).toBe('5.8 mi');
                 expect(result[0].value).toBe('12345');
             });
@@ -616,7 +616,7 @@ describe('tpa-search.vue', () => {
                 const result = wrapper.vm.getShopButtonDataFromProvider(provider);
 
                 // Assert
-                expect(result.buttonLabel).toBe('test shop');
+                expect(result.buttonLabel).toBe('Test Shop');
                 expect(result.buttonLabelSubCopy).toBe('5.8 mi');
                 expect(result.value).toBe('12345');
                 expect(result.buttonBodyCopy).toContain('<br>');

src/layouts/tpa-search/tpa-search.vue

@@ -265,7 +265,7 @@ export default {
         },
         providerAddresses() {
             return this.radiusFilteredAndCappedProviders?.map((provider) => ({
-                title: provider.companyName.toLowerCase(),
+                title: toTitleCase(provider.companyName),
                 fullAddress: this.getFullProviderAddress(provider),
                 addressLines: [this.getProviderAddress(provider), this.getProviderCityZipState(provider)]
             })) ?? [];
@@ -395,7 +395,7 @@ export default {
                     : null;
 
             return {
-                buttonLabel: provider?.companyName.toLowerCase() ?? '',
+                buttonLabel: toTitleCase(provider?.companyName) ?? '',
                 buttonLabelSubCopy: distance === null ? '' : `${distance} mi`,
                 buttonBodyCopy: `${this.getFullProviderAddress(provider)}<br>${
                     cellNumber ?? ''

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -5,6 +5,7 @@ import routerParams from '@/router/router-constants/router-params';
 import { useMainStore } from '@/store';
 import vehicleCategories from '@/constants/vehicle-categories';
 import VehicleDamageComponent from '@/layouts/vehicle-damage/vehicle-damage.vue';
+import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
 
 const mockRoute = {
     params: {}
@@ -12,6 +13,16 @@ const mockRoute = {
 const mockRouter = {
     navigate: jest.fn()
 };
+jest.mock('@/mixins/vehicle-questions-mixin', () => ({
+    methods: {
+        navigateForward: jest.fn(),
+        getPartsOrQuestions: jest.fn(() => Promise.resolve({
+            data: {
+                partsOrQuestions: []
+            }
+        }))
+    }
+}));
 const mountOptions = {
     global: {
         mixins: [
@@ -91,6 +102,43 @@ describe('vehicle-damage.vue', () => {
         expect(mockRouter.navigate)
             .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_REPAIR, mockRoute);
     });
+    test('When damage selected is a replace but not windshield, navigate forward from vehicle-questions-mixin', async () => {
+        mountOptions.global.plugins = [createTestingPinia({
+            initialState: {
+                main: {
+                    order: {
+                        damage: {
+                            isRepair: false,
+                            glassToReplace: [{ glassLocation: 'Rear', glassName: 'Stationary' }]
+                        }
+                    }
+                }
+            }
+        })];
+        const wrapper = mount(VehicleDamageComponent, mountOptions);
+        const siteFooterWrapper = wrapper.getComponent({ ref: 'siteFooter' });
+
+        useMainStore().getSupportingItems = jest.fn().mockImplementation(() => Promise.resolve({
+            data: { data: [
+                {
+                    description: null,
+                    partNumber: 'SUPPLIES-REPAIR',
+                    partType: 'REPAIR FEE'
+                },
+                {
+                    description: null,
+                    partNumber: 'WSREPAIR',
+                    partType: 'REPAIR FEE'
+                }
+            ] }
+        }));
+
+        siteFooterWrapper.vm.$emit('forwardClicked');
+
+        await flushPromises();
+        expect(vehicleQuestionsMixin.methods.getPartsOrQuestions).toHaveBeenCalledTimes(1);
+        expect(vehicleQuestionsMixin.methods.navigateForward).toHaveBeenCalledTimes(1);
+    });
     test('Error in getPartsOrQuestions call => bailout true and navigate forward with CLICKED_FORWARD_WITH_BAILOUT scenario', async () => {
         mountOptions.global.plugins = [createTestingPinia({
             initialState: {
@@ -115,7 +163,7 @@ describe('vehicle-damage.vue', () => {
         const partsQuestionsErrorResponse = {
             error: 'Error getting parts'
         };
-        useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => (
+        vehicleQuestionsMixin.methods.getPartsOrQuestions.mockImplementation(() => (
             partsQuestionsErrorResponse
         ));
         siteFooterWrapper.vm.$emit('forwardClicked');

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -216,6 +216,13 @@ export default {
                     === damageLocationsSelected.REPAIR
             );
         },
+        isWindshieldReplace() {
+            return (
+                this.isWindshieldDamageLocation
+                && this.selectedWindshieldOptions.selectedWindshieldDamageType
+                    === damageLocationsSelected.REPLACE
+            );
+        },
         isDriverSideReplace() {
             if (!this.isSideDoorDamageLocation) return false;
 
@@ -418,8 +425,8 @@ export default {
                     this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
                     this.$route
                 );
-            } else if (this.mainStore.order.vehicle.vin) {
+            } else if (this.mainStore.order.vehicle.vin || !this.isWindshieldReplace) {
-                // If vin already exists, navigate directly to vin-lookup
+                // If vin already exists or not replacing windshield, get parts/questions and navigate forward
 
                 const partsOrQuestionsResponse = await this.getPartsOrQuestions();
                 if (partsOrQuestionsResponse.error) {

src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue

@@ -62,7 +62,8 @@ export default {
             const answers = this.getCmsContent(this.cmsWidgetName, 'Answers');
             if (Array.isArray(answers)) {
                 if (!isVinbyAddressPermissible) {
-                    answers.splice(answers.indexOf(vinLookupMethodSelections.HOMEADDRESS), 1);
+                    const homeAddressIndex = answers.findIndex(answer => answer.Name === vinLookupMethodSelections.HOMEADDRESS);
+                    answers.splice(homeAddressIndex, 1);
                 }
                 this.answersFromCms = answers;
             }

src/layouts/vehicle-parts/vehicle-parts.spec.js

@@ -212,6 +212,7 @@ describe('vehicle-parts.vue', () => {
 
     test('User had part questions > navigateBack triggers a router.navigateWithoutSaving change with correct scenario', async () => {
         // Arrange
+        useMainStore().damage.glassToReplace = [{  glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }];
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
@@ -244,6 +245,7 @@ describe('vehicle-parts.vue', () => {
 
     test('User did not have part questions > navigateBack triggers a router.navigate change with correct scenario', async () => {
         // Arrange
+        useMainStore().damage.glassToReplace = [{  glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }];
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {

src/layouts/vin-lookup/vin-lookup.vue

@@ -14,8 +14,6 @@
                         <siteSubHeader
                             cmsWidgetName="SiteSubHeaderWidget"
                             class="mt-4" />
-                        <vinLookupAlerts
-                            :activeAlertType="activeVehicleLookupAlertType" />
                         <vinQuestion
                             v-model="vin"
                             class="mt-4"
@@ -23,6 +21,8 @@
                             :isDisabled="vinPopulatedOnPageLoad"
                             textPosition="left" />
                         <vinLocationInformation />
+                        <vinLookupAlerts
+                            :activeAlertType="activeVehicleLookupAlertType" />
                         <siteFooter
                             ref="siteFooter"
                             cmsWidgetName="SiteFooterWidget"

src/main.js

@@ -14,6 +14,8 @@ import router from './router';
 import App from './App.vue';
 
 import Logger from "@/helpers/logger";
+import bailoutMessage from '@/constants/bailoutMessage';
+import applicationConfig from '@/constants/application-config';
 // Instantiate global logging object
 global.$logger = new Logger();
 
@@ -46,15 +48,26 @@ function getPageName(vm) {
 // Vue Error Handling
 vueApp.config.errorHandler = (err, vm, info) => {
     const pageName = getPageName(vm);
-    global.$logger.logError(
+    global.$logger.logError(`Page Name - ${pageName} - ${info}: ${err.message}\n${err.stack}`);
-        `Page Name - ${pageName} - ${info}: ${err.message}\n${err.stack}`
+    if (applicationConfig.BAILOUT_ON_APPLICATION_ERROR) {
-    );
+        router.navigateBailout(bailoutMessage.applicationError(`[${pageName}] ${info}: ${err.message}\n${err.stack}`));
+    }
 };
 
 // Vue Router Error Handling
 router.onError((err) => {   
     global.$logger.logError(err.message, err.cause);
+    if (applicationConfig.BAILOUT_ON_ROUTER_ERROR) {
+        router.navigateBailout(bailoutMessage.routerError(`${err.message}\n${err.stack}`));
+    }
 });
+
+global.bailoutOnAxiosError = (error) => {
+    if (applicationConfig.BAILOUT_ON_API_ERROR) {
+        router.navigateBailout(bailoutMessage.apiError(error));
+    }
+}
+
 vueApp.mount('#app');
 
 // define global rules

src/mixins/vehicle-questions-mixin.js

@@ -1,3 +1,4 @@
+import { includesWindshieldReplacement } from '@/helpers/damage-helper';
 import issPageValues from '@/router/router-constants/issPage-values';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios';
 import { useMainStore } from '@/store';
@@ -457,6 +458,8 @@ export default {
             let backNavigationScenario = '';
             if (self.mainStore.order.damage.isRepair) {
                 backNavigationScenario = navigationScenarios.CLICKED_BACK_WITH_REPAIR;
+            } else if (!includesWindshieldReplacement()) {
+                backNavigationScenario = navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS;
             } else {
                 backNavigationScenario = self.mainStore.vehicle.vin
                     ? navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS

src/mixins/vehicle-questions-mixin.spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import { setupMocksForJsFiles, getMountOptions } from '@/helpers/unit-test-helper.js';
 import issPageValues from '@/router/router-constants/issPage-values';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios';
-import { useMainStore } from '@/store';
+import { useMainStore, getDefaultState } from '@/store';
 
 /** @ignore */
 function setupMocks({ issPage = issPageValues.VIN_LOOKUP }) {
@@ -53,6 +53,7 @@ function setupMocks({ issPage = issPageValues.VIN_LOOKUP }) {
 describe('vehicle-questions-mixin', () => {
     afterEach(() => {
         jest.clearAllMocks();
+        useMainStore().order = getDefaultState().order;
     });
 
     describe('hasPartQuestions', () => {
@@ -2181,7 +2182,8 @@ describe('vehicle-questions-mixin', () => {
     });
 
     describe('navigateBackByVehicleQuestions', () => {
-        test('current page is coverage-statement and damage is repair => go to vehicle-damage', () => {
+        describe('current page is coverage-statement', () => {
+            test('damage is repair => go to vehicle-damage', () => {
                 // Arrange
                 const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
                 useMainStore().order.damage.isRepair = true;
@@ -2195,6 +2197,69 @@ describe('vehicle-questions-mixin', () => {
                     { query: { issPage: issPageValues.COVERAGE_STATEMENT } }
                 );
             });
+            test('damage is replace but not windshield => go to vehicle-damage', () => {
+                // Arrange
+                const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
+                useMainStore().order.damage.isRepair = false;
+                useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }];
+
+                // Act
+                wrapper.vm.navigateBackByVehicleQuestions();
+
+                // Assert
+                expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
+                    navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
+                    { query: { issPage: issPageValues.COVERAGE_STATEMENT } }
+                );
+            });
+            test('damage is replace and includes windshield, we have vin => go to vehicle-damage', () => {
+                // Arrange
+                const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
+                useMainStore().order.damage.isRepair = false;
+                useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }];
+                useMainStore().order.vehicle.vin = '5NMS3CADXLH233004';
+
+                // Act
+                wrapper.vm.navigateBackByVehicleQuestions();
+
+                // Assert
+                expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
+                    navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
+                    { query: { issPage: issPageValues.COVERAGE_STATEMENT } }
+                );
+            });
+            test('damage is replace and includes windshield => go to vehicle-lookup', () => {
+                // Arrange
+                const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
+                useMainStore().order.damage.isRepair = false;
+                useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }];
+
+                // Act
+                wrapper.vm.navigateBackByVehicleQuestions();
+
+                // Assert
+                expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
+                    navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
+                    { query: { issPage: issPageValues.COVERAGE_STATEMENT } }
+                );
+            });
+            test('damage is replace and includes windshield but there are parts to choose => go to vehicle-parts', () => {
+                // Arrange
+                const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
+                useMainStore().order.damage.isRepair = false;
+                useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }];
+                wrapper.vm.hasGlassLocationWithMultipleParts = jest.fn().mockReturnValue(true);
+
+                // Act
+                wrapper.vm.navigateBackByVehicleQuestions();
+
+                // Assert
+                expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
+                    navigationScenarios.CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE,
+                    { query: { issPage: issPageValues.COVERAGE_STATEMENT } }
+                );
+            });
+        });
 
         test(
             'current page is molding questions and there are part questions, multiple parts to choose, and capability questions => go to vehicle-parts',

src/router/index.js

@@ -281,7 +281,10 @@ function navigate(
     }
 
     // Match our maps up and navigate if we have a destination.
-    const matchingScenarioMap = getNavigationMap(scenario, currentRoute);
+    let matchingScenarioMap = getNavigationMap(scenario, currentRoute);
+    if (!matchingScenarioMap && scenario === navigationScenarios.BAILOUT) {
+        matchingScenarioMap = { destinationIssPageValue: issPageValues.BAILOUT_PAGE }
+    }
 
     if (!matchingScenarioMap) {
         window.console.error('No matching scenario found. Please review the routing table.');
@@ -332,6 +335,18 @@ function navigateToUrl(url, optionalQuery = {}) {
     window.location.assign(externalUrl);
 }
 
+router.navigateBailout = (bailoutData = null) => {
+    if (bailoutData != null && !useMainStore().isBailout) {
+        useMainStore().setBailout(bailoutData)
+    }
+    router.navigate(
+        navigationScenarios.BAILOUT,
+        router.currentRoute.value,
+        {},
+        { [routerParams.SKIP_SAVE_SESSION]: true }
+    );
+}
+
 // Get navigation map depending on the scenario and the current 'page' you're on.
 function getNavigationMap(scenario, currentRoute) {
     const issPageValue = currentRoute.query.issPage;

src/router/router-constants/navigation-scenarios.js

@@ -61,6 +61,7 @@ const navigationScenarios = Object.freeze({
     CLICKED_BACK_WITH_MOLDING_QUESTIONS: 'CLICKED_BACK_WITH_MOLDING_QUESTIONS',
     CLICKED_BACK_WITH_CAPABILITY_QUESTIONS: 'CLICKED_BACK_WITH_CAPABILITY_QUESTIONS',
     CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: 'CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS',
+    CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS: 'CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS',
     CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: 'CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS',
 
     // Schedule
@@ -113,6 +114,7 @@ const navigationScenarios = Object.freeze({
     // Bailout
     CLICKED_FORWARD_WITH_BAILOUT: 'CLICKED_FORWARD_WITH_BAILOUT',
     CLICKED_NEED_HELP_WITH_BAILOUT: 'CLICKED_NEED_HELP_WITH_BAILOUT',
+    BAILOUT: 'BAILOUT'
 });
 
 export default navigationScenarios;

src/router/router-constants/routing-table.js

@@ -192,6 +192,10 @@ const routingTable = () => [
                 scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
                 destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
             },
+            {
+                scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
+                destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+            },
             {
                 scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
                 destinationIssPageValue: issPageValues.VEHICLE_LOOKUP
@@ -233,6 +237,10 @@ const routingTable = () => [
                 scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
                 destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
             },
+            {
+                scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
+                destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+            },
             {
                 scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
                 destinationIssPageValue: issPageValues.VEHICLE_LOOKUP
@@ -262,6 +270,10 @@ const routingTable = () => [
                 scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
                 destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
             },
+            {
+                scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
+                destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+            },
             {
                 scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
                 destinationIssPageValue: issPageValues.VEHICLE_LOOKUP
@@ -295,6 +307,10 @@ const routingTable = () => [
                 scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
                 destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
             },
+            {
+                scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
+                destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+            },
             {
                 scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
                 destinationIssPageValue: issPageValues.VEHICLE_LOOKUP
@@ -540,6 +556,10 @@ const routingTable = () => [
                 scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS,
                 destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
             },
+            {
+                scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS,
+                destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+            },
             {
                 scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
                 destinationIssPageValue: issPageValues.VEHICLE_LOOKUP

src/store/index.js

@@ -879,8 +879,7 @@ export const useMainStore = defineStore({
 
             return globalMethods.callHttpClient({
                 method: endpoints.GetMobilePremiumFee.method,
-                endpoint: `${endpoints.GetMobilePremiumFee.url}/${paymentType}/${damageType}`,
+                endpoint: `${endpoints.GetMobilePremiumFee.url}/${paymentType}/${damageType}`
-                logApiCall: true
             });
         },
         getMobileTimeSlots(startDate, endDate, zipCodeOverride = null) {
@@ -935,14 +934,7 @@ export const useMainStore = defineStore({
             return globalMethods.callHttpClient({
                 method: endpoints.GetMobileTimeSlots.method,
                 endpoint: endpoints.GetMobileTimeSlots.url,
-                payload,
+                payload
-                logApiCall: true,
-                additionalSuccessEventDataHandler: (response) =>
-                    getTimeSlotsAdditionalEventData(
-                        response.data.provisionalTriggers,
-                        zipCodeOverride ?? order.serviceLocation.zipCode,
-                        response.data.days?.[0]?.date
-                    )
             });
         },
         getShopTimeSlots(startDate, endDate, shopAppointmentType, providerNumber) {
@@ -998,8 +990,7 @@ export const useMainStore = defineStore({
             return globalMethods.callHttpClient({
                 method: endpoints.GetShopTimeSlots.method,
                 endpoint: endpoints.GetShopTimeSlots.url,
-                payload,
+                payload
-                additionalSuccessEventDataHandler: (response) => provisionalTriggersToString(response.data.provisionalTriggers)
             });
         },
         async getWipers() {
@@ -1553,8 +1544,7 @@ export const useMainStore = defineStore({
                     method: endpoints.SaveSession.method,
                     endpoint: endpoints.SaveSession.url,
                     payload,
-                    additionalSuccessEventDataHandler: () =>
+                    bailoutOnError: false
-                        `Email provided: ${customer.emailAddress ? 'true' : 'false'}`
                 }).then((response) => {
                     if (loadedFromDupeCheck) {
                         this.order.loadedSessionClearedPreviousData = true;
@@ -2457,7 +2447,7 @@ export const useMainStore = defineStore({
         // populate initial state
         populateInitialState(forceReset) {
             if (!sessionStorage.getItem(storeId) || forceReset) {
-                this.$state = state;
+                this.$state = getDefaultState();
             }
         },
 
@@ -2466,8 +2456,7 @@ export const useMainStore = defineStore({
             return globalMethods.callHttpClient({
                 method: endpoints.GetAlertReasons.method,
                 endpoint: `${endpoints.GetAlertReasons.url}/${ctu}`,
-                payload: {},
+                payload: {}
-                logApiCall: true
             });
         },
 

src/ux-components/alert/alert.vue

@@ -355,7 +355,7 @@ export default {
             border-top-color: $alert-red-color;
         }
         svg {
-            fill: $red-600;
+            fill: $alert-red-color;
             width: 1rem;
             height: 1rem;
         }