WIP

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

@@ -1,12 +1,18 @@
 <template>
     <transition name="fade" mode="out-in">
         <div class="shop-question" aria-live="polite">
+            <alert
+                ref="alertDropoffInformation"
+                v-if="displayDropoffInformation"
+                class="mb-4 drop-off-alert"
+                cmsWidgetName="AlertDropoffInformationWidget"
+                alertClass="alert-info"
+                v-bind:isDismissible="false" />
             <buttonQuestion
                 class="radioQuestion"
                 isOverflowScrollable
-                selectingInitiatesLoad
                 :questionText="questionText"
-                :answers="shops"
+                :answers="answers"
                 groupName="ChooseShop"
                 textPosition="text-start"
                 v-model="selectedValue"
@@ -16,21 +22,27 @@
 </template>
 
 <script>
+import alert from "@/ux-components/alert/alert";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 
+import { storeActions } from "@/constants/store-actions.js";
+import store from "@/store";
+
 // Supporting files
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import baseMixin from "@/mixins/base-mixin.js";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
 export default {
     name: "shop-question",
+    mixins: [baseMixin],
     data() {
         return {
             shops: [],
-        }       
+        };
     },
     props: {
         modelValue: String,
@@ -40,6 +52,7 @@ export default {
         validationRules: String,
     },
     components: {
+        alert,
         buttonQuestion,
     },
     computed: {
@@ -55,28 +68,90 @@ export default {
             },
         },
         answers() {
-            return this.getCmsContent(this.cmsWidgetName, "Answers");
+            // Map API result data, to address-vehicles data structure
+            const mappedData = this.shops.map((s) => {
+                return {
+                    Name: s.providerNumber,
+                    Text: `${s.city}<span class='distance'>${s.distance} mi</span>`,
+                    SubText: `${s.streetAddress}, ${s.city}, ${s.state} ${s.zipCode}`,                  
+                };
+            });
+
+            return mappedData;
+        },
+        displayDropoffInformation() {
+            return this.isDropoff;
         },
     },
     methods: {
         loadInitialData() {
-            return this.dispatchStoreAction(storeActions.GET_VEHICLE_MAKES, {
-                year: store.getters.vehicle.year,
+            return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
+                serviceZipCode: this.serviceZipCode,
             });
         },
         initializeComponent(initialData) {
-            this.makes = initialData;
+            this.shops = initialData;
+        },
+        async updateShopList() {
+            const result = await this.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
+                serviceZipCode: this.serviceZipCode,
+            });
+            return result.data;
+        },
+    },
+    watch: {
+        serviceZipCode: {
+            async handler() {
+                this.shops = await this.updateShopList();
+            },
         },
     },
 };
 </script>
 
 <style lang="scss">
-.modal-dialog {
+.shop-question {
+    margin-top: 1rem !important;
+
     .question-text {
-        & > span {
-            text-align: left;
+        margin-top: 0.5rem !important;
+    }
+
+    .button-content {
+        .button-label-copy {
+            display: flex;
+            font-weight: 500;
+            line-height: 1.5rem;
+            align-items: center;
+            margin-bottom: 0.25rem !important;    
+            
+            .distance {
+                color: #727676;
+                margin-left: 0.25rem;
+                font-weight: 400;
+                line-height: 1.25rem;
+                font-size: 0.75rem;            
+            }
+        }
+
+        .button-label-sub-copy {
+            font-weight: 400;
+            margin-bottom: 0rem !important;
         }
     }
 }
+
+.drop-off-alert {
+    .alert-heading {
+        text-align: left;
+        font-size: 0.75rem !important;
+        line-height: 1.25rem !important;
+    }
+
+    margin-top: 0.5rem !important;
+    padding-left: 1.5rem !important;
+    padding-right: 0.5rem !important;
+}
+
+
 </style>