Front End of service-location page

SSR-370

src/layouts/service-location/service-location.vue

@@ -1,14 +1,23 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
-        <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
-                <siteHeader cmsWidgetName="SiteHeaderWidget" />
+        <div class="page-container-grouped-styles">  
+            <siteHeader cmsWidgetName="SiteHeaderWidget" class="siteHeader"/>
+            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" /> 
+            <div class="fade-on-route-transition position-relative px-5 choose-option">
+
+                <buttonQuestion 
+                    cmsWidgetName="ServiceTypeQuestionWidget" 
+                    :questionText="questionText" 
+                    :answers="answersFromCms" 
+                    buttonTypeString="listCard" 
+                    isRequired 
+                    v-model="selectedValues" 
+                    validationRules="selection-required"/>
                 <div class="select-car">
                     <div class="container-fluid pb-2">
                         <div class="row px-3">
                             <div class="col">
                                 <div class="select-car-form rounded">
-                                    <p>Placeholder for service-location page</p>
                                     <siteFooter
                                     cmsWidgetName="SiteFooterWidget"
                                     :isForwardActionDisabled="!meta.valid"
@@ -26,22 +35,30 @@
     </Form>
 </template>
 <script>
-// Import Supporting Files
+  // Import Supporting Files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+
 // Import Component
 import baseFormMixin from "@/mixins/base-form-mixin";
-import { Form } from "vee-validate";
+import { Form, defineRule } from "vee-validate";
 import siteFooter from "@/iss-components/site-footer/site-footer.vue";
 import siteHeader from "@/iss-components/site-header/site-header.vue";
 import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
+
+// DEFINE VALIDATION RULES
+defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
 export default {
-    name: "provider-preference",
+    name: "service-location",
     mixins: [baseFormMixin],
     components: {
         siteFooter,
         siteHeader,
         siteSubHeader,
+        buttonQuestion,
         Form,
     },
     data() {
@@ -50,25 +67,31 @@ export default {
     async beforeRouteEnter(to, from, next) {
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
         // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-        ];
+        const promiseResultMap = [{
+            resultKey: "cmsContent",
+            promise: cmsContentPromise,
+        }, ];
         const resultMap = await settleAllPromises(promiseResultMap);
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
+    computed: {
+        questionText() {
+            return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
+        },
+        answersFromCms() {
+            return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
+        },        
+    },
     methods: {
         arePagePrerequisiteValid() {
             return true;
         },
         backButtonAction() {
             /**
-            * this.navigationScenarios comes from base-mixin
-            */
+             * this.navigationScenarios comes from base-mixin
+             */
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {},
@@ -77,7 +100,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .fade-on-route-transition {
     margin-bottom: 100px;
 }
@@ -90,4 +113,40 @@ export default {
         overflow: hidden;
     }
 }
-</style>
+#sub-header span {
+    color:#000000;
+}
+.question-text {
+   & > span {
+        line-height: 1.500rem;
+    }
+}
+.list-card-content p {
+    &:first-of-type {
+    line-height: 1.5rem;
+    }
+    &:not(:nth-of-type(1)){
+    line-height: 1.250rem;
+    }
+}
+.siteHeader{
+    .site-header{
+        margin-bottom: 1.25rem !important;
+    }
+    
+}
+.choose-option{
+        .button-question >div {
+            &:first-of-type {
+        margin-bottom: 0.95rem;
+        line-height: 1.500rem;
+            }
+    }
+}
+.button-question{
+    .row.form-test-error{
+        line-height:1.500rem;
+        padding-left: 0rem !important;
+    }
+}
+</style>