From a8ddd811e35505abb0a00797041c2f9bb96583eb Mon Sep 17 00:00:00 2001
From: brydon1 <michaela.brydon@safelite.com>
Date: Fri, 15 Sep 2023 15:59:58 -0400
Subject: [PATCH] Finalizing dupe check addition to welcome page

---
 .../duplicate-check/duplicate-check.vue       | 44 ++++++++++---------
 .../policy-vehicles/policy-vehicles.vue       |  3 +-
 src/layouts/welcome-page/welcome-page.vue     | 37 +++++++++++++---
 src/store/index.js                            | 19 +++++++-
 src/styles/ux-variables.scss                  | 15 +++----
 5 files changed, 80 insertions(+), 38 deletions(-)

diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue
index 9046d155..3ba0f5eb 100644
--- a/src/layouts/duplicate-check/duplicate-check.vue
+++ b/src/layouts/duplicate-check/duplicate-check.vue
@@ -90,24 +90,28 @@ export default {
             return this.getCmsContent(this.widget.existingOrNewQuestion, 'QuestionText');
         },
         answersFromCms() {
-            return this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers');
+            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"
-                }
-            ];
+        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.testAnswers, this.answersFromCms];
+        answers() {
+            return [...this.duplicateOrders, ...this.answersFromCms];
         }
     },
     methods: {
@@ -131,7 +135,7 @@ export default {
                         {},
                         policyVehicles
                     );
-                } else {policyVehicles
+                } else {
                     this.$router.navigate(
                         this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
                         this.$route
@@ -150,7 +154,7 @@ export default {
 <style lang="scss">
 .duplicate-check-subheader {
     .subheader-secondary {
-        margin-top: map-get($spacers, 3);
+        margin-top: map-get($spacers, 2);
     }
     p {
         span {
@@ -162,8 +166,8 @@ export default {
     .question-text {
         justify-content: left;
         display: inline-flex !important;
-        margin-top: map-get($spacers, 5);
-        margin-bottom: map-get($spacers, 3);
+        margin-top: map-get($spacers, 4);
+        margin-bottom: map-get($spacers, 2);
     }
 }
 
diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue
index 4b75e92d..5dcd06c7 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.vue
+++ b/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: '',
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index 4de1f64d..d767dc07 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/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',
@@ -298,6 +299,22 @@ export default {
         async forwardButtonAction() {
             this.mainStore.updatePolicyData(this.welcomePageModel);
 
+            const duplicateCheckResponse = useMainStore().getDuplicates({
+                accountNumber: this.mainStore.order.accountNumber.toString(),
+                policyNumber: this.mainStore.order.policy.policyNumber,
+                dateOfLoss: this.mainStore.order.policy.dateOfLoss
+            });
+            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) {
                 const policyLookupResponse = useMainStore().getCoveragePolicyInfo({
@@ -307,16 +324,15 @@ export default {
                     zipCode: this.mainStore.order.policy.policyZipCode
                 });
 
-                // Settle promises and get results
-                const promisePolicyLookupResultMap = [
+                const policyPromiseResultMap = [
                     {
                         resultKey: 'policyLookupResponse',
                         promise: policyLookupResponse
                     }
                 ];
 
-                const policyLookupResultMap = await settleAllPromises(promisePolicyLookupResultMap);
-                const policyInfo = policyLookupResultMap.policyLookupResponse;
+                const policyResultMap = await settleAllPromises(policyPromiseResultMap);
+                const policyInfo = policyResultMap.policyLookupResponse;
 
                 // if policy lookup fails, navigate directly to policy-holder-details page
                 if (!policyInfo) {
@@ -346,15 +362,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 },
-                        this.vehiclesFound
+                        { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
                     );
                 } else {
                     // if policy lookup is successful, but no vehicles are associated with the policy
diff --git a/src/store/index.js b/src/store/index.js
index 4c0871da..4d599e77 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -127,7 +127,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
@@ -452,6 +453,22 @@ export const useMainStore = defineStore({
                 });
             });
         },
+        // TODO when endpoint finished replace dummy data with api call
+        getDuplicates({accountNumber, policyNumber, 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({
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index 67c4c414..8ec17642 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -157,14 +157,13 @@ $spacer: 1rem;
 $spacers: (
     0: 0,
     1: $spacer * 0.25,
-    /* 4px */ 2: $spacer * 0.5,
-    /* 8px */ 3: $spacer * 0.75,
-    /* 12px */ 4: $spacer * 1,
-    /* 16px */ 5: $spacer * 1.5,
-    /* 24px */ 6: $spacer * 2,
-    /* 32px */ 7: $spacer * 2.5,
-    /* 40px */ 8: $spacer * 3,
-    /* 48px */
+    /* 8px */ 2: $spacer * 0.5,
+    /* 12px */ 3: $spacer * 0.75,
+    /* 16px */ 4: $spacer * 1,
+    /* 24px */ 5: $spacer * 1.5,
+    /* 32px */ 6: $spacer * 2,
+    /* 40px */ 7: $spacer * 2.5,
+    /* 48px */ 8: $spacer * 3,
 );
 
 //Grid breakpoints