commit

src/common-components/button-question-modal/button-question-modal.vue

@@ -16,12 +16,23 @@
                         data-bs-dismiss="modal"
                         aria-label="Close"></button>
                 </div>
-                <div class="modal-body ps-4 pe-4 pt-5 pb-4">
+                <div class="modal-body">
-                    <h5 class="mb-4" v-html="this.ModalQuestionText"></h5>
+                    <label
+                        :aria-label="this.ModalQuestionText"
+                        class="form-label text-center w-100 mb-5 fw-bold"
+                        v-html="this.ModalQuestionText"></label>
                 </div>
+                <buttonQuestion
+                class="radioQuestion"
+                :questionText="questionText"
+                :answers="ModalSelectOptionAnswers"
+                groupName="ChooseVehicleYear"
+                v-model="selectedValue"
+                isRequired />
                 <div class="modal-footer px-5 py-4">
                     <buttonMain
                         class="w-100"
+                        isPrimary
                         ref="buttonMain"
                         suppressLoader
                         :buttonText="ModalSelectButtonText"
@@ -45,6 +56,11 @@ export default {
     props: {
         cmsWidgetName: String,
     },
+    data() {
+        return {
+            answers: [],
+        };
+    },
     computed: {
         ModalQuestionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
@@ -52,7 +68,7 @@ export default {
         ModalSelectButtonText() {
             return this.getCmsContent(this.cmsWidgetName, "ButtonText");
         },
-        ModalSelectOptionText() {
+        ModalSelectOptionAnswers() {
             return this.getCmsContent(this.cmsWidgetName, "Answers");
         },
     },
@@ -63,6 +79,7 @@ export default {
     },
     components: {
         buttonMain,
+        buttonQuestion,
     },
 };
 </script>
@@ -92,6 +109,8 @@ export default {
                 box-shadow: 0px 16px 48px -16px rgba(0, 0, 0, 0.25);
                 border-radius: 1.5rem 1.5rem 0 0;
                 .modal-body {
+                    padding-bottom: 0px;
+                    padding-top:0px;
                     ul {
                         margin-bottom: 0;
                     }
@@ -115,6 +134,12 @@ export default {
                 margin: 0;
             }
         }
+        .radioQuestion
+        {
+            padding-bottom: 20px;
+            padding-right: 24px;
+            padding-left: 24px;
+        }
     }
 }
 body {

src/common-components/textbox-question/textbox-question.vue

@@ -12,7 +12,7 @@
                 includeSearchIcon ? 'has-search-icon' : '',
                 includeSelectIcon ? 'has-select-icon' : '',
             ]">
-            <input
+                <input
                 class="form-control"
                 v-model.trim="value"
                 v-maska="mask"
@@ -37,9 +37,12 @@
                 @change="validationRules ? handleChange : () => {}"
                 @blur="validationRules ? handleChange : () => {}"
                 :maxlength="maxLength ? maxLength : '999'"
-                @focus="$emit('focus', $event.target.value)" />
+                @focus="$emit('focus', $event.target.value)" 
+                :data-bs-toggle="includeSelectIcon ? 'modal' : ''"
+                :data-bs-target="'#' + this.cmsWidgetName" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
-            <button v-if="includeSelectIcon" type="submit" aria-label="Select button" />
+            <button v-if="includeSelectIcon" type="submit" data-bs-toggle="modal"
+                :data-bs-target="'#' + this.cmsWidgetName" aria-label="Select button" />
         </div>
         <div v-show="errorMessage" class="row my-2 form-test-error">
             <span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>

src/layouts/welcome-page/welcome-page.vue

@@ -24,7 +24,6 @@
                     placeholderText="Select an option"
                     includeSelectIcon
                     disableAutoFill
-                    :data-bs-target="'#' + DamageCauseQuestion"
                     validationRules="damage-cause-required" />
             </div>
         </div>
@@ -41,8 +40,8 @@
     import { defineRule } from "vee-validate";
     import { required } from "@/helpers/validation-rules";
     import { errorMessages } from "@/constants/error-messages";
-	import textboxQuestion from "@/common-components/textbox-question/textbox-question"
+	import textboxQuestion from "@/common-components/textbox-question/textbox-question";
-    import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal"
+    import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal";
 
     //define validation rules
     defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
@@ -60,7 +59,6 @@
 		    },
 		    validationRules: String,       
 	    }, 
-        components: { siteHeader, siteSubHeader, textboxQuestion },
         async beforeRouteEnter(to, from, next) 
         {
             // Call APIs
@@ -85,7 +83,7 @@
             siteHeader,
             siteSubHeader,
             buttonQuestionModal,
-            textboxQuestion
+            textboxQuestion,
         },
     }
 </script>

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

@@ -11,7 +11,7 @@
         <span class="m-0">{{ this.buttonText }}</span>
         <loader
             class="ms-2"
-            v-if="isLoaderDisplayed"
+            v-if="isLoaderDisplayed && !suppressLoader"
             v-bind:class="[this.loaderColor, this.loaderPosition]" />
     </button>
 </template>
@@ -28,6 +28,7 @@ export default {
         loaderColor: String,
         loaderPosition: String,
         isFloat: Boolean,
+        suppressLoader: Boolean,
     },
     data() {
         return {