From b021f3bf457de016e9cbfaa4811e8d05ee1cfbfa Mon Sep 17 00:00:00 2001
From: Sneha <sneha.a@safelite.com>
Date: Mon, 27 Mar 2023 08:57:38 +0530
Subject: [PATCH] SSR-273

Frond end provider preference page
---
 .../provider-preference.vue                   |  54 ++++++-
 .../shoppreference-modal.vue                  | 134 ++++++++++++++++++
 2 files changed, 184 insertions(+), 4 deletions(-)
 create mode 100644 src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue

diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index 6e8c2067..637f9f4b 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -2,9 +2,23 @@
   <Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit" v-slot="{ meta }">
     <div class="page-container-grouped-styles overflow-auto">
       <siteHeader cmsWidgetName="SiteHeaderWidget" />
-      <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+      <siteSubHeader cmsWidgetName="SiteSubHeader" id="sub-header" />
       <div class="fade-on-route-transition sub-container make-tall px-5">
-        <p>Placeholder for provider-preference page</p>
+        <div v-html="ProviderPreferenceHeaderText"  class="text-center mt-4 mb-4" ></div>
+        <div
+            v-html="ProviderPreferenceBodyText"
+            class="mt-0" 
+        ></div>
+        <shoppreferenceModal cmsWidgetName="ShopPreferenceDrawer" /> 
+
+        <buttonQuestion
+            cmsWidgetName="ServiceLocationQuestion"
+            :questionText="questionText"
+            :answers="answersFromCms"
+            buttonTypeString="listButton"
+            isRequired
+            validationRules="questions-required" />
+
         <siteFooter
           cmsWidgetName="SiteFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -20,20 +34,33 @@
 // 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";
+import shoppreferenceModal from '@/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue';
+
+// DEFINE VALIDATION RULES
+defineRule("questions-required", required(errorMessages.OPTION_REQUIRED));
 export default {
   name: "provider-preference",
+  props:{
+    //answersToDisplay: Array
+  },
   mixins: [baseFormMixin],
   components: {
     siteFooter,
     siteHeader,
     siteSubHeader,
     Form,
+    shoppreferenceModal,
+    buttonQuestion
   },
   data() {
     return {};
@@ -52,6 +79,20 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);
     });
   },
+  computed: {
+    ProviderPreferenceHeaderText(){
+      return this.getCmsContent("ProviderPreference", "HeaderText");
+    },
+    ProviderPreferenceBodyText(){
+      return this.getCmsContent("ProviderPreference", "BodyText");
+    },
+    questionText() {
+            return this.getCmsContent("ServiceLocationQuestion", "QuestionText");
+        },
+    answersFromCms() {
+            return this.getCmsContent("ServiceLocationQuestion", "Answers");
+        },
+      },
   methods: {
     arePagePrerequisiteValid() {
       return true;
@@ -66,4 +107,9 @@ export default {
     resetDependentState() {},
   },
 };
-</script>
\ No newline at end of file
+</script>
+<style lang="scss">
+#sub-header span{
+color: #000000;
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue b/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue
new file mode 100644
index 00000000..5ea1f8d1
--- /dev/null
+++ b/src/layouts/provider-preference/shoppreference-modal/shoppreference-modal.vue
@@ -0,0 +1,134 @@
+<template>
+    <!-- Modal -->
+    <div
+        class="modal fade modal-component"
+        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
+        :id="cmsWidgetName"
+        tabindex="-1"
+        aria-labelledby="ModalComponentLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+                </div>
+                <div class="modal-body ps-4 pe-4 pt-4 pb-4">
+                    <h5 class="mb-4 text-center header-text" v-html="ModalHeadline"></h5>
+                    <p class="mb-2 subheader-text" v-html="ModalSubheadertext"></p>
+                </div>
+                <div class="modal-footer px-5 py-4">
+                    <buttonMain
+                        isPrimary
+                        class="w-100"
+                        ref="buttonMain"
+                        suppressLoader
+                        :buttonText="ModalCloseButtonText"
+                        @click-event="buttonClick"
+                        data-bs-dismiss="modal" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import buttonMain from "@/ux-components/button-main/button-main";
+
+export default {
+    name: "modal",
+    props: {
+        cmsWidgetName: String,
+    },
+    computed: {
+        ModalHeadline() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        ModalSubheadertext() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        ModalCloseButtonText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+    },
+    methods: {
+        resetButtonStyle() {
+            this.$refs.buttonMain.resetButtonStyle();
+        },
+    },
+    components: {
+        buttonMain,
+    },
+};
+</script>
+
+<style lang="scss">
+.modal {
+    top: auto;
+    bottom: 0;
+    h5,
+    strong,
+    .header-text{
+        color: #000000;
+        font-weight: 500;
+
+    }
+    .subheader-text {
+        color: #525656;
+    }
+    .modal-header {
+        border-bottom: none;
+        .btn-close {
+            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+            opacity: 1;
+        }
+    }
+    &.modal-component {
+        .modal-dialog {
+            max-width: 576px;
+            margin: 0 auto;
+            .modal-content {
+                margin: 0 auto;
+                box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
+                border-radius: 1.5rem 1.5rem 0 0;
+                .modal-body {
+                    .modal-sub-body {
+                        color: $gray-600;
+                    }
+                    ul {
+                        margin-bottom: 0;
+                    }
+                    p {
+                        &:last-child {
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+            }
+            &.modal-dialog-centered {
+                align-items: flex-end;
+                min-height: 100%;
+            }
+        }
+        .modal-footer {
+            border-top: none;
+            background-color: $gray-100;
+            box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
+            button {
+                margin: 0;
+            }
+        }
+    }
+}
+body {
+    .modal-backdrop {
+        height: 100%;
+        &.show {
+            opacity: 0.4;
+        }
+    }
+}
+</style>