Merge branch 'develop' into feature/SSR-705

src/digital-components/modal/modal.vue

@@ -64,7 +64,7 @@ export default {
         },
         isButtonDisabled: Boolean
     },
-    emits: ['footer-button-event'],
+    emits: ['footer-button-event', 'isModalOpened'],
     setup(props) {
         const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`;
 
@@ -108,10 +108,12 @@ export default {
         openModal() {
             const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
             modal?.show();
+            this.$emit('isModalOpened', true);
         },
         closeModal() {
             const modal = Modal.getInstance(document.getElementById(this.modalId));
             modal?.hide();
+            this.$emit('isModalOpened', false);
         }
     }
 };

src/layouts/duplicate-check/duplicate-check.spec.js

@@ -0,0 +1,443 @@
+// Components
+import duplicateCheck from '@/layouts/duplicate-check/duplicate-check.vue';
+
+// Supporting Files
+import { shallowMount } from '@vue/test-utils';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { createTestingPinia } from '@pinia/testing';
+import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
+import { getRandomString } from '@/helpers/data-generation.js';
+
+const duplicateOrderText = 'Finish Existing Claim';
+
+describe('duplicateCheck.vue', () => {
+    describe('Rendering', () => {
+        test('Should render site header', () => {
+            // Arrange
+            const wrapper = shallowMount(duplicateCheck, getMountOptions());
+
+            // Act
+            const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
+
+            // Assert
+            expect(siteHeader.exists()).toBeTruthy();
+        });
+        test('Should render sub title', () => {
+            // Arrange
+            const wrapper = shallowMount(duplicateCheck, getMountOptions());
+
+            // Act
+            const siteSubHeader = wrapper.findComponent({ ref: 'siteSubHeader' });
+
+            // Assert
+            expect(siteSubHeader.exists()).toBeTruthy();
+        });
+        test('Should render question subcomponent', () => {
+            // Arrange
+            const wrapper = shallowMount(duplicateCheck, getMountOptions());
+
+            // Act
+            const question = wrapper.findComponent({ ref: 'buttonQuestion' });
+
+            // Assert
+            expect(question.exists()).toBeTruthy();
+        });
+        test('Should render site footer', () => {
+            // Arrange
+            const wrapper = shallowMount(duplicateCheck, getMountOptions());
+
+            // Act
+            const footer = wrapper.findComponent({ ref: 'siteFooter' });
+
+            // Assert
+            expect(footer.exists()).toBeTruthy();
+        });
+
+        // TODO update or remove
+        // test('Mocked store with no contact info yields expected data', () => {
+        //     // Arrange
+        //     const mountOptions = getMountOptions();
+
+        //     const firstName = getRandomString(4, 15);
+        //     const lastName = getRandomString(4, 15);
+        //     const emailAddress = getRandomString(10, 20);
+        //     const phoneNumber = getRandomInt(1000000000, 9999999999);
+        //     const mainInitialState = {
+        //         order: {
+        //             customer: {
+        //                 firstName,
+        //                 lastName,
+        //                 emailAddress,
+        //                 phoneNumber
+        //             }
+        //         }
+        //     };
+        //     mountOptions.global = {
+        //         plugins: [createTestingPinia({
+        //             initialState: {
+        //                 main: mainInitialState
+        //             }
+        //         })]
+        //     };
+
+        //     const wrapper = shallowMount(contactDetails, mountOptions);
+
+        //     // Assert
+        //     expect(wrapper.vm.firstName).toBe(firstName);
+        //     expect(wrapper.vm.lastName).toBe(lastName);
+        //     expect(wrapper.vm.emailAddress).toBe(emailAddress);
+        //     expect(wrapper.vm.phoneNumber).toBe(phoneNumber);
+        // });
+        // test('Mock store with contact info yields expected data', () => {
+        //     // Arrange
+        //     const customer = {
+        //         firstName: getRandomString(4, 15),
+        //         lastName: getRandomString(4, 15),
+        //         emailAddress: getRandomString(10, 20),
+        //         phoneNumber: getRandomInt(1000000000, 9999999999)
+        //     };
+        //     const contactInfo = {
+        //         firstName: getRandomString(4, 15),
+        //         lastName: getRandomString(4, 15),
+        //         emailAddress: getRandomString(10, 20),
+        //         phoneNumber: getRandomInt(1000000000, 9999999999),
+        //         requestTextUpdates: getRandomBoolean(),
+        //         notesForTechnician: getRandomString(50, 100)
+        //     };
+        //     const mainInitialState = {
+        //         order: {
+        //             customer,
+        //             contactInfo
+        //         }
+        //     };
+        //     const mountOptions = getMountOptions();
+        //     mountOptions.global = {
+        //         plugins: [createTestingPinia({
+        //             initialState: {
+        //                 main: mainInitialState
+        //             }
+        //         })]
+        //     };
+
+        //     const wrapper = shallowMount(contactDetails, mountOptions);
+
+        //     // Assert
+        //     expect(wrapper.vm.firstName).toBe(contactInfo.firstName);
+        //     expect(wrapper.vm.lastName).toBe(contactInfo.lastName);
+        //     expect(wrapper.vm.emailAddress).toBe(contactInfo.emailAddress);
+        //     expect(wrapper.vm.phoneNumber).toBe(contactInfo.phoneNumber);
+        //     expect(wrapper.vm.requestTextUpdates).toBe(contactInfo.requestTextUpdates);
+        //     expect(wrapper.vm.notesForTechnician).toBe(contactInfo.notesForTechnician);
+        // });
+    });
+
+    describe('duplicateOrders computed', () => {
+        test('duplicateOrders in store undefined => returns empty list', () => {
+            // Arrange
+            const mountOptions = getMountOptions({
+                router: { navigate: jest.fn() }
+            });
+        
+            const mainInitialState = {
+                applicationUser: {
+                    duplicateOrders: undefined
+                }
+            };
+            mountOptions.global.plugins = [createTestingPinia({
+                initialState: {
+                    main: mainInitialState
+                }
+            })];
+
+            const wrapper = shallowMount(duplicateCheck, mountOptions);
+
+            // Assert
+            expect(wrapper.vm.duplicateOrders.length).toBe(0);
+        });
+        test('duplicateOrders in store empty => returns empty list', () => {
+            // Arrange
+            const mountOptions = getMountOptions({
+                router: { navigate: jest.fn() }
+            });
+        
+            const mainInitialState = {
+                applicationUser: {
+                    duplicateOrders: []
+                }
+            };
+            mountOptions.global.plugins = [createTestingPinia({
+                initialState: {
+                    main: mainInitialState
+                }
+            })];
+
+            const wrapper = shallowMount(duplicateCheck, mountOptions);
+
+            // Assert
+            expect(wrapper.vm.duplicateOrders.length).toBe(0);
+        });
+        test('duplicateOrder in store with null vehicle year => returns order with only date in subtext', () => {
+            // Arrange
+            const mountOptions = getMountOptions({
+                router: { navigate: jest.fn() }
+            });
+        
+            const date = getRandomString(9, 9);
+            const referralNumber = getRandomString(6, 6);
+            const mainInitialState = {
+                applicationUser: {
+                    duplicateOrders: [
+                        {
+                            vehicleYear: null,
+                            vehicleMake: getRandomString(5, 5),
+                            vehicleModel: getRandomString(5, 5),
+                            dateOfLoss: date,
+                            referralNumber: referralNumber
+                        }
+                    ]
+                }
+            };
+            mountOptions.global.plugins = [createTestingPinia({
+                initialState: {
+                    main: mainInitialState
+                }
+            })];
+
+            const wrapper = shallowMount(duplicateCheck, mountOptions);
+
+            // Assert
+            expect(wrapper.vm.duplicateOrders.length).toBe(1);
+            expect(wrapper.vm.duplicateOrders[0]).toStrictEqual({
+                Text: duplicateOrderText,
+                Name: referralNumber,
+                SubText: date
+
+            });
+        });
+        test('duplicateOrder in store with null vehicle make => returns order with only date subtext', () => {
+            // Arrange
+            const mountOptions = getMountOptions({
+                router: { navigate: jest.fn() }
+            });
+
+            const date = getRandomString(9, 9);
+            const referralNumber = getRandomString(6, 6);
+            const mainInitialState = {
+                applicationUser: {
+                    duplicateOrders: [
+                        {
+                            vehicleYear: getRandomString(6, 6),
+                            vehicleMake: null,
+                            vehicleModel: getRandomString(5, 5),
+                            dateOfLoss: date,
+                            referralNumber: referralNumber
+                        }
+                    ]
+                }
+            };
+            mountOptions.global.plugins = [createTestingPinia({
+                initialState: {
+                    main: mainInitialState
+                }
+            })];
+
+            const wrapper = shallowMount(duplicateCheck, mountOptions);
+
+            // Assert
+            expect(wrapper.vm.duplicateOrders.length).toBe(1);
+            expect(wrapper.vm.duplicateOrders[0]).toStrictEqual({
+                Text: duplicateOrderText,
+                Name: referralNumber,
+                SubText: date
+            });
+        });
+        test('duplicateOrder in store with null vehicle model => returns order with only date subtext', () => {
+            // Arrange
+            const mountOptions = getMountOptions({
+                router: { navigate: jest.fn() }
+            });
+
+            const date = getRandomString(9, 9);
+            const referralNumber = getRandomString(6, 6);
+            const mainInitialState = {
+                applicationUser: {
+                    duplicateOrders: [
+                        {
+                            vehicleYear: getRandomString(6, 6),
+                            vehicleMake: getRandomString(6, 6),
+                            vehicleModel: null,
+                            dateOfLoss: date,
+                            referralNumber: referralNumber
+                        }
+                    ]
+                }
+            };
+            mountOptions.global.plugins = [createTestingPinia({
+                initialState: {
+                    main: mainInitialState
+                }
+            })];
+
+            const wrapper = shallowMount(duplicateCheck, mountOptions);
+
+            // Assert
+            expect(wrapper.vm.duplicateOrders.length).toBe(1);
+            expect(wrapper.vm.duplicateOrders[0]).toStrictEqual({
+                Text: duplicateOrderText,
+                Name: referralNumber,
+                SubText: date
+            });
+        });
+        test('duplicateOrder in store with all vehicle info => returns order with year, make, model and date in subtext', () => {
+            // Arrange
+            const mountOptions = getMountOptions({
+                router: { navigate: jest.fn() }
+            });
+
+            const year = getRandomString(6, 6,);
+            const make = getRandomString(6, 6);
+            const model = getRandomString(6, 6);
+            const date = getRandomString(9, 9);
+            const referralNumber = getRandomString(6, 6);
+            const mainInitialState = {
+                applicationUser: {
+                    duplicateOrders: [
+                        {
+                            vehicleYear: year,
+                            vehicleMake: make,
+                            vehicleModel: model,
+                            dateOfLoss: date,
+                            referralNumber: referralNumber
+                        }
+                    ]
+                }
+            };
+            mountOptions.global.plugins = [createTestingPinia({
+                initialState: {
+                    main: mainInitialState
+                }
+            })];
+
+            const wrapper = shallowMount(duplicateCheck, mountOptions);
+
+            // Assert
+            expect(wrapper.vm.duplicateOrders.length).toBe(1);
+            expect(wrapper.vm.duplicateOrders[0]).toStrictEqual({
+                Text: duplicateOrderText,
+                Name: referralNumber,
+                SubText: `${year} ${make} ${model}, ${date}`
+            });
+        });
+    });
+
+    describe('Navigation', () => {
+        test('Back button clicked triggers navigation', () => {
+            // Arrange
+            const wrapper = shallowMount(duplicateCheck, getMountOptions({
+                router: {
+                    navigate: jest.fn()
+                }
+            }));
+
+            // Act
+            wrapper.vm.backButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
+        });
+
+        describe('forwardButtonAction', () => {
+            test('policyLookupSuccessful true and policy vehicles returned => CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES', () => {
+                // Arrange
+                const mountOptions = getMountOptions({
+                    router: { navigate: jest.fn() }
+                });
+            
+                const mainInitialState = {
+                    order: {
+                        policy: {
+                            policyLookupSuccessful: true,
+                            vehicles: [{test: 'a'}]
+                        }
+                    }
+                };
+                mountOptions.global.plugins = [createTestingPinia({
+                    initialState: {
+                        main: mainInitialState
+                    }
+                })];
+
+                const wrapper = shallowMount(duplicateCheck, mountOptions);
+
+                // Act
+                wrapper.vm.forwardButtonAction();
+
+                // Assert
+                expect(wrapper.vm.$router.navigate).toHaveBeenCalledTimes(1);
+                expect(wrapper.vm.$router.navigate)
+                    .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES, undefined);
+            });
+            test('policyLookupSuccessful true and no policy vehicles returned => CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES', () => {
+                // Arrange
+                const mountOptions = getMountOptions({
+                    router: { navigate: jest.fn() }
+                });
+            
+                const mainInitialState = {
+                    order: {
+                        policy: {
+                            policyLookupSuccessful: true,
+                            vehicles: []
+                        }
+                    }
+                };
+                mountOptions.global.plugins = [createTestingPinia({
+                    initialState: {
+                        main: mainInitialState
+                    }
+                })];
+
+                const wrapper = shallowMount(duplicateCheck, mountOptions);
+
+                // Act
+                wrapper.vm.forwardButtonAction();
+
+                // Assert
+                expect(wrapper.vm.$router.navigate).toHaveBeenCalledTimes(1);
+                expect(wrapper.vm.$router.navigate)
+                    .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES, undefined);
+            });
+            test('policyLookupSuccessful false => CLICKED_FORWARD_POLICY_UNVERIFIED', () => {
+                // Arrange
+                const mountOptions = getMountOptions({
+                    router: { navigate: jest.fn() }
+                });
+            
+                const mainInitialState = {
+                    order: {
+                        policy: {
+                            policyLookupSuccessful: false
+                        }
+                    }
+                };
+                mountOptions.global.plugins = [createTestingPinia({
+                    initialState: {
+                        main: mainInitialState
+                    }
+                })];
+
+                const wrapper = shallowMount(duplicateCheck, mountOptions);
+
+                // Act
+                wrapper.vm.forwardButtonAction();
+
+                // Assert
+                expect(wrapper.vm.$router.navigate).toHaveBeenCalledTimes(1);
+                expect(wrapper.vm.$router.navigate)
+                    .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED, undefined);
+            });
+        });
+    });
+});

src/layouts/duplicate-check/duplicate-check.vue

@@ -0,0 +1,171 @@
+<template>
+    <Form
+        ref="duplicate-check-form"
+        v-slot="{ meta }"
+        @submit="onSubmit"
+        @invalidSubmit="onInvalidSubmit">
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition">
+                <siteHeader
+                    ref="siteHeader"
+                    :cmsWidgetName="widget.siteHeader" 
+                    />
+                <div class="container-fluid px-6">
+                    <siteSubHeader
+                        id="sub-header"
+                        ref="siteSubHeader"
+                        class="mt-5 duplicate-check-subheader"
+                        :cmsWidgetName="widget.siteSubHeader" />
+
+                    <buttonQuestion
+                        ref="buttonQuestion"
+                        class="duplicate-check-question"
+                        v-model="selectedAnswer"
+                        :cmsWidgetName="widget.existingOrNewQuestion"
+                        :questionText="questionText"
+                        :answers="answers"
+                        buttonTypeString="listButton"
+                        isRequired
+                        :validationRules="rules.selectionRequired">
+                    </buttonQuestion>
+                    <siteFooter
+                        ref="siteFooter"
+                        class="my-5"
+                        :cmsWidgetName="widget.siteFooter"
+                        :isForwardActionDisabled="!meta.valid"
+                        @forwardClicked="forwardButtonAction"
+                        @backClicked="backButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import siteHeader from '@/iss-components/site-header/site-header.vue';
+import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
+import buttonQuestion from '@/digital-components/button-question/button-question.vue';
+
+// Supporting files
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
+import { Form } from 'vee-validate';
+import BaseFormMixin from '@/mixins/base-form-mixin.js';
+import { useMainStore } from '@/store/index.js';
+import globalRules from '@/constants/global-rules.js';
+
+export default {
+    name: 'duplicate-check',
+    components: {
+        siteHeader,
+        siteSubHeader,
+        buttonQuestion,
+        siteFooter,
+        Form
+    },
+    mixins: [BaseFormMixin],
+    async beforeRouteEnter(to, from, next) {
+        const cmsContent = await fetchCmsContentForPage(to.query.issPage);
+
+        next((vm) => {
+            vm.setCmsContent(cmsContent);
+        });
+    },
+    data() {
+        return {
+            widget: {
+                siteHeader: 'SiteHeaderWidget',
+                siteSubHeader: 'SiteSubHeaderWidget',
+                existingOrNewQuestion: 'ExistingOrNewQuestion',
+                siteFooter: 'SiteFooterWidget'
+            },
+            rules: {
+                selectionRequired: globalRules.OPTION_REQUIRED
+            }
+        }
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.widget.existingOrNewQuestion, 'QuestionText');
+        },
+        answersFromCms() {
+            return this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers') ?? [];
+        },
+        duplicateOrders() {
+            const duplicateOrderText = 'Finish Existing Claim';
+            const orders = useMainStore().applicationUser.duplicateOrders;
+            return orders?.map(o => {
+                const vehicle = !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
+                    ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
+                    : null;
+                const subtext = !!vehicle
+                    ? `${vehicle}, ${o.dateOfLoss}`
+                    : o.dateOfLoss;
+
+                return {
+                    Text: duplicateOrderText,
+                    Name: o.referralNumber,
+                    SubText: subtext
+                };
+            }) ?? [];
+        },
+        answers() {
+            return [...this.duplicateOrders, ...this.answersFromCms];
+        }
+    },
+    methods: {
+        /**
+         * @summary Steps to perform when back button clicked.
+         */
+        backButtonAction() {
+            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        /**
+         * @summary Steps to perform when forward button clicked.
+         */
+        forwardButtonAction() {
+            if (useMainStore().order.policy.policyLookupSuccessful){
+                const policyVehicles = useMainStore().order.policy.vehicles ?? [];
+                if (policyVehicles.length > 0) {
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+                        this.$route
+                    );
+                } else {
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+                        this.$route
+                    );
+                }
+            } else {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+                    this.$route);
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.duplicate-check-subheader {
+    .subheader-secondary {
+        margin-top: map-get($spacers, 2);
+    }
+    p {
+        span {
+            font-size: $h6-font-size;
+        }
+    }
+}
+.duplicate-check-question {
+    .question-text {
+        justify-content: left;
+        display: inline-flex !important;
+        margin-top: map-get($spacers, 4);
+        margin-bottom: map-get($spacers, 2);
+    }
+}
+
+</style>

src/layouts/policy-vehicles/policy-vehicles.spec.js

@@ -9,7 +9,6 @@ import baseMixin from '@/mixins/base-mixin';
 import { getRandomString, getRandomInt } from '@/helpers/data-generation';
 import endorsementOptions from '@/constants/endorsement-options';
 import { createTestingPinia } from '@pinia/testing';
-import issPageValues from '@/router/router-constants/issPage-values';
 import vehicleSelectionOptions from '@/constants/vehicle-selection-options';
 
 // Mock fetchCmsContentForPage
@@ -412,9 +411,9 @@ describe('policy-vehicles.vue', () => {
     test('first vehicle is auto-selected if only one vehicle on policy', async () => {
         // Arrange
         const vin = getRandomString(17, 17);
-        useMainStore().applicationUser = {
+        useMainStore().order = {
-            pageData: {
+            policy: {
-                [issPageValues.POLICY_VEHICLES]: [{ vin }]
+                vehicles: [{ vin }]
             }
         };
 

src/layouts/policy-vehicles/policy-vehicles.vue

@@ -49,7 +49,6 @@ import policyVehiclesQuestion from '@/layouts/policy-vehicles/policy-vehicles-qu
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
-import issPageValues from '@/router/router-constants/issPage-values.js';
 import vehicleSelectionOptions from '@/constants/vehicle-selection-options.js';
 import endorsementOptions from '@/constants/endorsement-options.js';
 import globalRules from '@/constants/global-rules.js';
@@ -73,7 +72,7 @@ export default {
         });
     },
     data() {
-        const policyVehicles = useMainStore().pageData(issPageValues.POLICY_VEHICLES);
+        const policyVehicles = useMainStore().order.policy.vehicles;
         return {
             policyVehicles,
             selectedVehicleVin: '',

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -83,7 +83,8 @@ import vehicleProtectedQuestion from '@/layouts/service-location/mobile-location
 // Helpers
 import {
     getPricedMobileFeePart,
-    getServiceabilityDetails
+    getServiceabilityDetails,
+    getZipCodeData
 } from '@/helpers/service-location-helper';
 import { deepClone } from '@/helpers/object-helper.js';
 
@@ -254,7 +255,7 @@ export default {
                 !== this.modelValue.addressQuestions.zipCode
             ) {
                 // Validate the Zip Code
-                const zipCodeData = await this.getZipCodeData(this.internalModel.addressQuestions.zipCode);
+                const zipCodeData = await getZipCodeData(this.internalModel.addressQuestions.zipCode);
 
                 if (!zipCodeData.isValid) {
                     this.displayInvalidZipAlert = true;

src/layouts/service-location/service-location.vue

@@ -147,7 +147,7 @@ export default {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-        const serviceZipCode = useMainStore().order.customer.address.zipCode;
+        const serviceZipCode = useMainStore().order.serviceLocation.zipCode || useMainStore().order.customer.address.zipCode;
         const zipCodeData = getZipCodeData(serviceZipCode);
 
         const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);

src/layouts/welcome-page/welcome-page.spec.js

@@ -1,6 +1,5 @@
 import welcomePage from '@/layouts/welcome-page/welcome-page.vue';
 
-// Supporting files
 // Supporting files
 import { shallowMount } from '@vue/test-utils';
 import settleAllPromises from '@/helpers/layout-helper.js';
@@ -11,6 +10,8 @@ import applicationConfig from '@/constants/application-config';
 import { useMainStore } from '@/store';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios';
 import routerParams from '@/router/router-constants/router-params';
+import { getRandomString } from '@/helpers/data-generation.js';
+import { createTestingPinia } from '@pinia/testing';
 
 // Mock our module for promises.
 jest.mock('@/helpers/layout-helper.js', () => jest.fn());
@@ -90,6 +91,39 @@ function setupMocks({
     return { wrapper, apiPromise };
 }
 
+function getMountedComponent(mainInitialState = {}, initialData = {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        }
+    });
+
+    mountOptions.global.stubs = {
+        siteHeader: true,
+        recalModal: true,
+        contentGroupModal: true,
+        alert: true
+    };
+    mountOptions.global.plugins = [createTestingPinia({
+        initialState: {
+            main: mainInitialState
+        }
+    })];
+    mountOptions.data = () => (
+        initialData
+    );
+
+    const apiResponses = {
+        supportingItems: []
+    };
+    const apiPromise = Promise.resolve(apiResponses);
+    settleAllPromises.mockImplementation(() => apiPromise);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+    const wrapper = shallowMount(welcomePage, mountOptions);
+    return { wrapper };
+}
+
 describe('welcome-page.vue', () => {
     test('Should render welcomePage sub-components (policyNumber, policyZipCode, dateOfLoss, damageCause etc.)', async () => {
         // Arrange
@@ -142,6 +176,29 @@ describe('welcome-page.vue', () => {
 });
 
 describe('navigation', () => {
+    test('if duplicates found, navigate to duplicate check page', async () => {
+        // Arrange
+        const { wrapper } = getMountedComponent({});
+
+        const duplicatesExist = {
+            policyLookupResponse: {},
+            duplicateCheckResponse: [{ test: 'a'}]
+        };
+
+        settleAllPromises.mockImplementation(() => Promise.resolve(duplicatesExist));
+
+        // Act
+        await wrapper.vm.forwardButtonAction();
+
+        // Assert
+        expect(wrapper.vm.mainStore.getDuplicateReferrals).toHaveBeenCalled();
+        expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+            navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
+            undefined,
+            {},
+            { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+        );
+    });
     test('if policy and vehicles are found, navigate to policy-vehicle page', async () => {
         // Arrange
         const mockvehicles = [
@@ -183,8 +240,7 @@ describe('navigation', () => {
             navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
             undefined,
             {},
-            { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true },
+            { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-            mockvehicles
         );
     });
     test('if policy is found, but no vehicles, navigate to vehicle-selection page', async () => {

src/layouts/welcome-page/welcome-page.vue

@@ -243,6 +243,7 @@ export default {
         return {
             welcomePageModel: this.getWelcomePageModelFromStore(),
             vehiclesFound: [],
+            duplicates: [],
             rules: {
                 policyNumber: 'policy-number-required',
                 policyZip: 'policy-zip-required|policy-zip-format',
@@ -297,6 +298,17 @@ export default {
     methods: {
         async forwardButtonAction() {
             this.mainStore.updatePolicyData(this.welcomePageModel);
+            const duplicateCheckResponse = useMainStore().getDuplicateReferrals();
+            const duplicatePromiseResultMap = [
+                {
+                    resultKey: 'duplicateCheckResponse',
+                    promise: duplicateCheckResponse
+                }
+            ];
+            const duplicateResultMap = await settleAllPromises(duplicatePromiseResultMap);
+
+            this.mainStore.applicationUser.duplicateOrders = duplicateResultMap.duplicateCheckResponse ?? [];
+            this.duplicates = duplicateResultMap.duplicateCheckResponse;
 
             // call coverage policy lookup if isCoverageEnabled flag enabled
             if (this.isCoverageEnabled) {
@@ -307,16 +319,15 @@ export default {
                     zipCode: this.mainStore.order.policy.policyZipCode
                 });
 
-                // Settle promises and get results
+                const policyPromiseResultMap = [
-                const promisePolicyLookupResultMap = [
                     {
                         resultKey: 'policyLookupResponse',
                         promise: policyLookupResponse
                     }
                 ];
 
-                const policyLookupResultMap = await settleAllPromises(promisePolicyLookupResultMap);
+                const policyResultMap = await settleAllPromises(policyPromiseResultMap);
-                const policyInfo = policyLookupResultMap.policyLookupResponse;
+                const policyInfo = policyResultMap.policyLookupResponse;
 
                 // if policy lookup fails, navigate directly to policy-holder-details page
                 if (!policyInfo) {
@@ -337,6 +348,7 @@ export default {
                     this.mainStore.order.serviceLocation.zipCode = policy.insureds?.[0]?.zipCode;
 
                     // populate vehicles
+                    this.mainStore.order.policy.vehicles = policy.vehicles;
                     this.vehiclesFound = policy.vehicles;
                 }
                 return this.navigateForward(policy);
@@ -345,15 +357,22 @@ export default {
         },
 
         navigateForward(policy) {
-            if (policy) {
+            if (this.duplicates?.length > 0 ?? false) {
+                this.$router.navigate(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
+                    this.$route,
+                    {},
+                    { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
+                );
+            }
+            else if (policy) {
                 if (this.vehiclesFound) {
                     // if policy lookup is successful and vehicles are found, navigate to policy-vehicles page
                     this.$router.navigate(
                         this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
                         this.$route,
                         {},
-                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true },
+                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
-                        this.vehiclesFound
                     );
                 } else {
                     // if policy lookup is successful, but no vehicles are associated with the policy

src/router/router-constants/issPage-values.js

@@ -9,6 +9,7 @@ const issPageValues = Object.freeze({
     CAPABILITY_QUESTIONS: 'capability-questions',
     CONTACT_CONFIRMATION: 'contact-confirmation',
     CONTACT_DETAILS: 'contact-details',
+    DUPLICATE_CHECK: 'duplicate-check',
     POLICY_ENDORSEMENTS: 'policy-endorsements',
     ESTIMATE: 'estimate',
     COVERAGE_STATEMENT: 'coverage-statement',

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

@@ -8,6 +8,7 @@ const navigationScenarios = Object.freeze({
     MOVE_FORWARD_ENTRY_PAGE: 'MOVE_FORWARD_ENTRY_PAGE',
 
     // Welcome
+    CLICKED_FORWARD_WITH_DUPLICATES: 'CLICKED_FORWARD_WITH_DUPLICATES',
     CLICKED_FORWARD_POLICY_UNVERIFIED: 'CLICKED_FORWARD_POLICY_UNVERIFIED',
     CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES: 'CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES',
     CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES: 'CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES',

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

@@ -356,6 +356,10 @@ const routingTable = () => [
                 scenario: navigationScenarios.CLICKED_FORWARD,
                 destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
             },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
+                destinationIssPageValue: issPageValues.DUPLICATE_CHECK
+            },
             {
                 scenario: navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
                 destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
@@ -374,6 +378,27 @@ const routingTable = () => [
             }
         ]
     },
+    {
+        issPageValue: issPageValues.DUPLICATE_CHECK,
+        maps: [
+            {
+                scenario: navigationScenarios.CLICKED_BACK,
+                destinationIssPageValue: issPageValues.WELCOME_PAGE
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
+                destinationIssPageValue: issPageValues.POLICY_HOLDER_DETAILS
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+                destinationIssPageValue: issPageValues.VEHICLE_SELECTION
+            },
+            {
+                scenario: navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+                destinationIssPageValue: issPageValues.POLICY_VEHICLES
+            }
+        ]
+    },
     {
         issPageValue: issPageValues.POLICY_HOLDER_DETAILS,
         maps: [

src/store/index.js

@@ -60,6 +60,7 @@ const getDefaultState = () => ({
                 repair: null, // numerical value; how much customer owes on deductible in repair case
                 replace: null // numerical value; how much customer owes on deductible in replace case,
             },
+            vehicles: [],
             endorsementQuestionAnswers: null
         },
         customer: {
@@ -142,7 +143,8 @@ const getDefaultState = () => ({
         savedSessionId: null,
         crmCustomerId: null,
         lastPageVisited: null,
-        triggeredSiteEntry: false
+        triggeredSiteEntry: false,
+        duplicateOrders: []
     },
     issConfig: {
         clientName: 'Generic Insurance', // this is the default and will be overriden by the client's name
@@ -467,6 +469,28 @@ export const useMainStore = defineStore({
                 });
             });
         },
+        // TODO when endpoint finished replace dummy data with api call
+        getDuplicateReferrals() {
+            const apiInputs = [
+                this.issConfig.accountNumber,
+                this.order.policy.policyNumber,
+                this.order.policy.dateOfLoss
+            ];
+
+            return [
+                {
+                    referralNumber: "12345",
+                    vehicleYear: "2013",
+                    vehicleMake: "Honda",
+                    vehicleModel: "Civic",
+                    dateOfLoss: "09/23/2023"
+                },
+                {
+                    referralNumber: "34210",
+                    dateOfLoss: "08/01/2022"
+                }
+            ];
+        },
         async lookupVinByPlate(licensePlate, licenseState) {
             try {
                 const response = await globalMethods.callHttpClient({

src/styles/ux-variables.scss

@@ -157,14 +157,13 @@ $spacer: 1rem;
 $spacers: (
     0: 0,
     1: $spacer * 0.25,
-    /* 4px */ 2: $spacer * 0.5,
+    /* 8px */ 2: $spacer * 0.5,
-    /* 8px */ 3: $spacer * 0.75,
+    /* 12px */ 3: $spacer * 0.75,
-    /* 12px */ 4: $spacer * 1,
+    /* 16px */ 4: $spacer * 1,
-    /* 16px */ 5: $spacer * 1.5,
+    /* 24px */ 5: $spacer * 1.5,
-    /* 24px */ 6: $spacer * 2,
+    /* 32px */ 6: $spacer * 2,
-    /* 32px */ 7: $spacer * 2.5,
+    /* 40px */ 7: $spacer * 2.5,
-    /* 40px */ 8: $spacer * 3,
+    /* 48px */ 8: $spacer * 3,
-    /* 48px */
 );
 
 //Grid breakpoints