Initial check-in

src/layouts/service-location/shop-question/shop-question.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

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

@@ -0,0 +1,82 @@
+<template>
+    <transition name="fade" mode="out-in">
+        <div class="shop-question" aria-live="polite">
+            <buttonQuestion
+                class="radioQuestion"
+                isOverflowScrollable
+                selectingInitiatesLoad
+                :questionText="questionText"
+                :answers="shops"
+                groupName="ChooseShop"
+                textPosition="text-start"
+                v-model="selectedValue"
+                isRequired />
+        </div>
+    </transition>
+</template>
+
+<script>
+import buttonQuestion from "@/digital-components/button-question/button-question";
+
+// Supporting files
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "shop-question",
+    data() {
+        return {
+            shops: [],
+        }       
+    },
+    props: {
+        modelValue: String,
+        isDropoff: Boolean,
+        serviceZipCode: String,
+        cmsWidgetName: String,
+        validationRules: String,
+    },
+    components: {
+        buttonQuestion,
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        selectedValue: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        answers() {
+            return this.getCmsContent(this.cmsWidgetName, "Answers");
+        },
+    },
+    methods: {
+        loadInitialData() {
+            return this.dispatchStoreAction(storeActions.GET_VEHICLE_MAKES, {
+                year: store.getters.vehicle.year,
+            });
+        },
+        initializeComponent(initialData) {
+            this.makes = initialData;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.modal-dialog {
+    .question-text {
+        & > span {
+            text-align: left;
+        }
+    }
+}
+</style>