UI updates, unit test fixes

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', () => {
@@ -313,26 +313,6 @@ describe('duplicateCheck.vue', () => {
                 // 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);
-            });
         });
     });
 

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,18 +99,14 @@ 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 ?? '';
         },
@@ -127,9 +131,6 @@ export default {
                     };
                 }) ?? []
             );
-        },
-        answers() {
-            return [...this.duplicateOrders, ...this.answersFromCms];
         }
     },
     methods: {
@@ -197,6 +198,10 @@ export default {
                     this.$route
                 );
             }
+        },
+        async startNewClaim() {
+            this.selectedAnswer = 'NewClaim';
+            await this.forwardButtonAction();
         }
     }
 };
@@ -217,6 +222,7 @@ export default {
         margin-top: map-get($spacers, 2);
     }
 }
+
 .duplicate-check-question {
     span {
         font-weight:600;
@@ -225,10 +231,26 @@ export default {
         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>