Adding dupe check to iss flow

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

@@ -16,7 +16,7 @@
         </div>
         <div
             class="subheader-secondary d-flex align-items-center container-fluid overflow-hidden"
-            :class="justifySubheader">
+            :class="justifySubheader ">
             <p
                 class="fw-normal mb-0"
                 :class="alternateFormatting">

src/layouts/contact-details/contact-details.vue

@@ -13,7 +13,6 @@
                     <siteSubHeader
                         id="sub-header"
                         ref="siteSubHeader"
-                        class="mt-5"
                         :cmsWidgetName="widget.siteSubHeader" />
                     <textboxQuestion
                         ref="firstNameQuestion"

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

@@ -0,0 +1,169 @@
+<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
+                        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');
+        },
+        testAnswers() {
+            return [
+                {
+                    Text: 'Finish Existing Claim',
+                    Name: "1",
+                    SubText: "2013 Honda Civic, 09/23/2023"
+                },
+                {
+                    Text: 'Finish Existing Claim',
+                    Name: "2",
+                    SubText: "08/01/2022"
+                }
+            ];
+        },
+        answers(){
+            return [...this.testAnswers, ...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) {
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
+                        this.$route,
+                        {},
+                        {},
+                        policyVehicles
+                    );
+                } else {policyVehicles
+                    this.$router.navigate(
+                        this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
+                        this.$route
+                    );
+                }
+            }
+            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, 3);
+    }
+    p {
+        span {
+            font-size: $h6-font-size;
+        }
+    }
+}
+.duplicate-check-question {
+    .question-text {
+        justify-content: left;
+        display: inline-flex !important;
+        margin-top: map-get($spacers, 5);
+        margin-bottom: map-get($spacers, 3);
+    }
+}
+
+</style>

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

@@ -337,6 +337,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);

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',
     ESTIMATE: 'estimate',
     COVERAGE_STATEMENT: 'coverage-statement',
     LICENSE_PLATE_LOOKUP: 'license-plate-lookup',

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

@@ -370,6 +370,34 @@ const routingTable = () => [
             }
         ]
     },
+    {
+        issPageValue: issPageValues.DUPLICATE_CHECK,
+        maps: [
+            {
+                scenario: navigationScenarios.CLICKED_BACK,
+                destinationIssPageValue: issPageValues.WELCOME_PAGE
+            },
+            // TODO confirm all listed scenarios work
+            {
+                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
+            },
+            // if previous claim selected
+                // unverified => policyholder details
+                // verified => policy-vehicle page
+            // new claim
+                // lookup fails => policyholder details
+                // lookup succeeds => policy-vehicle page
+        ]
+    },
     {
         issPageValue: issPageValues.POLICY_HOLDER_DETAILS,
         maps: [

src/store/index.js

@@ -58,7 +58,8 @@ const getDefaultState = () => ({
             deductible: {
                 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: []
         },
         customer: {
             address: {