CASH-619 DupCheck page layout

CASH-619 DupCheck page layout

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

@@ -5,9 +5,40 @@
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
-                    <!--
-                            ... Page code goes here.
-                    -->
+                    
+                    <textBlock
+                        cmsWidgetName="DupCheckPageTitleWidget"
+                        typeStyle="h1"
+                        :customText="pageTitleText"
+                        class="mb-5 text-left text-md-left cc-page-title" />
+
+                    <textBlock
+                        cmsWidgetName="DupCheckPageInstructionsWidget"
+                        typeStyle="body"
+                        :customText="pageInstructionsText"
+                        class="mb-5 text-left text-md-left cc-page-instructions" />
+
+                    <buttonQuestion
+                        :questionText="existingClaimsQuestionText"
+                        :answers="existingClaimsAnswers"
+                        class="mb-4"
+                        groupName="existingClaimsQuestion"
+                        buttonTypeString="listButton"
+                        isRequired
+                        v-model="existingClaimsSelectedValue" />
+
+                    <div class="or-divider mb-4" role="separator" aria-label="or">
+                        <span class="or-divider-text">or</span>
+                    </div>
+
+                    <buttonQuestion
+                        :answers="startNewClaimAnswers"
+                        class="mb-4"
+                        groupName="existingClaimsQuestion"
+                        buttonTypeString="listButton"
+                        isRequired
+                        v-model="startNewClaimSelectedValue" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -24,6 +55,8 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import textBlock from "@/digital-components/text-block/text-block";
+import buttonQuestion from "@/digital-components/button-question/button-question";
 import { Form } from "vee-validate";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -40,6 +73,8 @@ export default {
         funnelHeader,
         navbar,
         funnelSubHeader,
+        textBlock,
+        buttonQuestion,
     },
     // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
     async beforeRouteEnter(to, from, next) {
@@ -56,6 +91,30 @@ export default {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+    computed: {
+        pageTitleText() {
+            return this.getCmsContent("DupCheckPageTitleWidget", "Text");
+        },
+        pageInstructionsText() {
+            return this.getCmsContent("DupCheckPageInstructionsWidget", "Text");
+        },
+        existingClaimsQuestionText() {
+            return this.getCmsContent("ExistingClaimsListWidget", "QuestionText");
+        },
+        existingClaimsAnswers() {
+            return this.getCmsContent("ExistingClaimsListWidget", "Answers");
+        },
+        startNewClaimQuestionText() {
+            return this.getCmsContent("StartNewClaimWidget", "QuestionText");
+        },
+        startNewClaimAnswers() {
+            const answers = this.getCmsContent("StartNewClaimWidget", "Answers");
+            return answers.map(answer => ({
+                buttonLabel: answer.Text,
+                value: answer.Name,
+            }));
+        },
+    },
 
     methods: {
         backButtonAction() {
@@ -76,3 +135,30 @@ export default {
     },
 };
 </script>
+<style lang="scss">
+.cc-page-title {
+    font-size: 20px !important;
+    line-height: 1.325;
+    font-weight: 300;
+    color: $black;
+}
+.or-divider {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    color: $gray-600;
+
+    &::before,
+    &::after {
+        content: "";
+        flex: 1;
+        border-bottom: 1px solid $gray-500;
+    }
+
+    .or-divider-text {
+        padding: 0 0.75rem;
+        font-size: 0.875rem;
+        text-transform: lowercase;
+    }
+}
+</style>

src/ux-components/list-button/list-button.vue

@@ -6,9 +6,10 @@
         <div
             :aria-label="buttonLabel"
             class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
-            <span class="m-0" :class="[textPosition, labelBold ? 'span-bold' : '']">
-                {{ buttonLabel }}
-            </span>
+            <span
+                class="m-0"
+                :class="[textPosition, labelBold ? 'span-bold' : '']"
+                v-html="buttonLabel"></span>
             <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
                 {{ buttonLabelSubCopy }}
             </span>