Merge branch 'develop' into feature/jnou/fix-iss-regression

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/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" />
-                    <customerQuestions
+                    <div class="mt-4">
-                        ref="customerQuestions"
+                        <customerQuestions
-                        v-model="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,18 +7,24 @@
             :class="[buttonLabelSubCopy ? 'has-subheader' : '']"
             for="testradio">
             <div class="package-specs">
-                <div>
+                <div class="button-label">
-                    <p class="m-0">
+                    <div class="label-wrapper">
-                        <span v-html="buttonLabel"></span>
+                        <p class="m-0">
+                            <span
+                                class="mt-1"
+                                v-html="buttonLabel"></span>
+                        </p>
+                        <p
+                            v-if="buttonLabelSubCopy"
+                            class="sub-label m-0"
+                            v-html="buttonLabelSubCopy">
+                        </p>
+                    </div>
+                    <div class="pricing-info-mobile">
                         <span
-                            class="pricing-info"
+                            class="price"
                             v-html="buttonAuxiliaryCopy"></span>
-                    </p>
+                    </div>
-                    <p
-                        v-if="buttonLabelSubCopy"
-                        class="sub-label m-0"
-                        v-html="buttonLabelSubCopy">
-                    </p>
                 </div>
                 <div class="hide-when-closed">
                     <ul>
@@ -53,10 +59,16 @@
                     <!--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: flex;
+                        display: block;
-                        flex-direction: column;
+                    }
+                }
+            }
+
+            .pricing-info-desktop {
+                display: flex;
+                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" />
-                    <p
+                    <div class="d-flex justify-content-center mt-8 mb-4">
-                        class="caption disclaimer"
+                        <buttonMain
-                        v-html="PriceDisclaimerText"></p>
+                            ref="buttonMain"
+                            class="continue-button"
+                            variant="navigation"
+                            :buttonText="'Continue'"
+                            @clickEvent="forwardButtonAction" />
+                    </div>
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
+                        class="back-link"
                         :isForwardActionDisabled="!meta.valid"
-                        @backClicked="navigateBack"
+                        :isForwardButtonHidden="true"
-                        @ForwardClicked="forwardButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
+                <p
+                    class="caption disclaimer"
+                    v-html="PriceDisclaimerText"></p>
             </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/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/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,19 +2182,83 @@ 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', () => {
-            // Arrange
+            test('damage is repair => go to vehicle-damage', () => {
-            const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
+                // Arrange
-            useMainStore().order.damage.isRepair = true;
+                const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
+                useMainStore().order.damage.isRepair = true;
 
-            // Act
+                // Act
-            wrapper.vm.navigateBackByVehicleQuestions();
+                wrapper.vm.navigateBackByVehicleQuestions();
 
-            // Assert
+                // Assert
-            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
+                expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
-                navigationScenarios.CLICKED_BACK_WITH_REPAIR,
+                    navigationScenarios.CLICKED_BACK_WITH_REPAIR,
-                { query: { issPage: issPageValues.COVERAGE_STATEMENT } }
+                    { 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(

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

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

@@ -536,6 +536,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

@@ -2457,7 +2457,7 @@ export const useMainStore = defineStore({
         // populate initial state
         populateInitialState(forceReset) {
             if (!sessionStorage.getItem(storeId) || forceReset) {
-                this.$state = state;
+                this.$state = getDefaultState();
             }
         },
 

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;
         }