Merge pull request #1000 from Safelite/feature/INSR-7754

INSR-7754: Duplicate Check Heritage Parity

src/constants/endpoints.js

@@ -217,7 +217,6 @@ const endpoints = Object.freeze({
         method: 'POST'
     },
     DuplicateSearch: {
-        // eslint-disable-next-line max-len
         url: `${ORDER_BASE_URL}/duplicate-check`,
         method: 'GET'
     },
@@ -231,4 +230,4 @@ const endpoints = Object.freeze({
     }
 });
 
-export { endpoints };
+export default endpoints;

src/constants/error-messages.js

@@ -29,7 +29,7 @@ const errorMessages = Object.freeze({
     VIN_FORMAT:
         // eslint-disable-next-line max-len
         'Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q',
-    OPTION_REQUIRED: 'Please select an option',
+    OPTION_REQUIRED: 'Please choose an option',
     VEHICLE_REQUIRED: 'Please select a vehicle',
     POLICY_NUMBER_REQUIRED: 'Policy number is required.',
     POLICY_NUMBER_FORMAT: 'Please enter an alpha-numeric string',

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

@@ -55,7 +55,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
     return { wrapper };
 }
 
-const duplicateOrderText = 'Finish Existing Claim';
+const duplicateOrderText = 'Finish existing claim';
 
 describe('duplicateCheck.vue', () => {
     describe('Rendering', () => {
@@ -259,81 +259,6 @@ describe('duplicateCheck.vue', () => {
                 });
             });
         });
-        describe('getNewOrderSelectionName', () => {
-            test('answersFromCms null => returns empty string', () => {
-                // Arrange
-                const mountOptions = getMountOptions({
-                    router: { navigate: jest.fn() }
-                });
-                const answersFromCmsValue = null;
-                mountOptions.mixins = [{
-                    methods: {
-                        getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers' ? answersFromCmsValue : ''))
-                    }
-                }];
-
-                const wrapper = shallowMount(duplicateCheck, mountOptions);
-
-                // Assert
-                expect(wrapper.vm.getNewOrderSelectionName).toBe('');
-            });
-            test('answersFromCms empty list => returns empty string', () => {
-                // Arrange
-                const mountOptions = getMountOptions({
-                    router: { navigate: jest.fn() }
-                });
-                const answersFromCmsValue = [];
-                mountOptions.mixins = [{
-                    methods: {
-                        getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers' ? answersFromCmsValue : ''))
-                    }
-                }];
-
-                const wrapper = shallowMount(duplicateCheck, mountOptions);
-
-                // Assert
-                expect(wrapper.vm.getNewOrderSelectionName).toBe('');
-            });
-            test('answersFromCms non-empty list whose first item has no Name property => returns empty string', () => {
-                // Arrange
-                const mountOptions = getMountOptions({
-                    router: { navigate: jest.fn() }
-                });
-                const answersFromCmsValue = [{ test: getRandomString(6, 6) }];
-                mountOptions.mixins = [{
-                    methods: {
-                        getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers'
-                            ? answersFromCmsValue
-                            : ''))
-                    }
-                }];
-
-                const wrapper = shallowMount(duplicateCheck, mountOptions);
-
-                // Assert
-                expect(wrapper.vm.getNewOrderSelectionName).toBe('');
-            });
-            test('answersFromCms first item has Name property => returns expected', () => {
-                // Arrange
-                const mountOptions = getMountOptions({
-                    router: { navigate: jest.fn() }
-                });
-                const expectedName = getRandomString(6, 6);
-                const answersFromCmsValue = [{ Name: expectedName }];
-                mountOptions.mixins = [{
-                    methods: {
-                        getCmsContent: jest.fn().mockImplementation((_, label) => (label === 'Answers'
-                            ? answersFromCmsValue
-                            : ''))
-                    }
-                }];
-
-                const wrapper = shallowMount(duplicateCheck, mountOptions);
-
-                // Assert
-                expect(wrapper.vm.getNewOrderSelectionName).toBe(expectedName);
-            });
-        });
     });
 
     describe('Navigation', () => {

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

@@ -23,11 +23,16 @@
                         class="duplicate-check-question"
                         :cmsWidgetName="widget.existingOrNewQuestion"
                         :questionText="questionText"
-                        :answers="answers"
+                        :answers="duplicateOrders"
                         groupName="existingOrNewQuestionOption"
                         buttonTypeString="listButton"
                         isRequired
                         :validationRules="rules.selectionRequired" />
+                    <buttonMain
+                        :variant="buttonVariants.primary"
+                        buttonText="Start a new claim"
+                        class="w-100"
+                        @clickEvent="startNewClaim" />
                     <siteFooter
                         ref="siteFooter"
                         class="my-5"
@@ -48,6 +53,8 @@ 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';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
+import buttonVariants from '@/constants/button-variants';
 
 // Supporting files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js';
@@ -66,7 +73,8 @@ export default {
         buttonQuestion,
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
+        buttonMain
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -91,23 +99,16 @@ export default {
             },
             rules: {
                 selectionRequired: globalRules.OPTION_REQUIRED
-            }
+            },
+            buttonVariants
         };
     },
     computed: {
         questionText() {
             return this.getCmsContent(this.widget.existingOrNewQuestion, 'QuestionText');
         },
-        answersFromCms() {
-            return (
-                this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers') ?? []
-            );
-        },
-        getNewOrderSelectionName() {
-            return this.answersFromCms?.[0]?.Name ?? '';
-        },
         duplicateOrders() {
-            const duplicateOrderText = 'Finish Existing Claim';
+            const duplicateOrderText = 'Finish existing claim';
             const orders = useMainStore().applicationUser.duplicateOrders;
             return (
                 orders?.map((o) => {
@@ -127,9 +128,6 @@ export default {
                     };
                 }) ?? []
             );
-        },
-        answers() {
-            return [...this.duplicateOrders, ...this.answersFromCms];
         }
     },
     methods: {
@@ -197,6 +195,10 @@ export default {
                     this.$route
                 );
             }
+        },
+        async startNewClaim() {
+            this.selectedAnswer = 'NewClaim';
+            await this.forwardButtonAction();
         }
     }
 };
@@ -216,21 +218,36 @@ export default {
     .subheader-secondary {
         margin-top: map-get($spacers, 2);
     }
-    p {
-        span {
-            font-size: $h6-font-size;
-        }
-    }
 }
+
 .duplicate-check-question {
+    span {
+        font-weight:600;
+    }
     .question-text {
         justify-content: left;
         display: inline-flex !important;
         margin-top: map-get($spacers, 4);
-        margin-bottom: map-get($spacers, 2);
+        margin-bottom: 0.625rem !important;
     }
     .form-test-error {
         margin-top: 0 !important;
     }
 }
+
+.list-button-content {
+    span.small {
+        font-weight: 400;
+    }
+}
+
+.subheader-secondary {
+    p {
+        margin-bottom: 0.25rem !important;
+    }
+}
+
+.form-group {
+    margin-bottom: 1.25rem !important;
+}
 </style>

src/store/index.js

@@ -7,7 +7,7 @@ import bailoutMessage from '@/constants/bailoutMessage';
 import coverageStatuses from '@/constants/coverage-statuses';
 import coverageType from '@/constants/coverage-type';
 import damageLocationsSelected from '@/constants/damage-locations-selected';
-import { endpoints } from '@/constants/endpoints';
+import endpoints from '@/constants/endpoints';
 import { experimentSettings, experimentTriggers, experimentUniverses } from '@/constants/experiments';
 import partNumberStrings from '@/constants/part-number-strings';
 import partTypeStrings from '@/constants/part-type-strings';

src/store/store.spec.js

@@ -10,7 +10,7 @@ import {
 } from '@/helpers/data-generation.js';
 import coverageStatuses from '@/constants/coverage-statuses.js';
 import { paymentMethods } from '@/constants/payment-method-constants';
-import { endpoints } from '@/constants/endpoints';
+import endpoints from '@/constants/endpoints';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
 import bailoutCode from '@/constants/bailoutCode';
 import coverageType from '@/constants/coverage-type';