WIP

src/digital-components/button-question/button-question.vue

@@ -128,6 +128,7 @@ export default {
         valueToLogType: String,
         additionalButtonStyling: String,
         isSmallQuestionText: Boolean,
+        availability: String,
     },
     beforeMount() {
         if (this.buttonTypeObject) {

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

@@ -6,11 +6,13 @@
         <div
             :aria-label="buttonLabel"
             class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
-            <span class="m-0 button-label-copy" :class="textPosition">
+            <div class="row-one">
-                {{ buttonLabel }}
+                <span class="m-0 button-label-copy" :class="textPosition">{{ buttonLabel }}</span>
                 <span class="m-0 button-label-sub-copy" :class="textPosition">{{ buttonLabelSubCopy }}</span>
-                <span class="m-0 button-auxillary-copy text-end">{{ buttonAuxillaryCopy }}</span>
+                <div class="availability-indicator" :class="availability === 'high' ? 'green' : 'red'">
-            </span>
+                    <span class="m-0 button-auxillary-copy" >{{ buttonAuxillaryCopy }}</span>
+                </div> 
+            </div>
             <span
                 v-if="buttonBodyCopy"
                 class="m-0 button-label-sub-copy small"
@@ -44,6 +46,7 @@ export default {
     data() {
         return {
             isLoaderDisplayed: false,
+            availability: "low",
         };
     },
     methods: {

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

@@ -19,6 +19,15 @@
                 textPosition="text-start"
                 v-model="selectedValue"
                 isRequired />
+            <textLink
+                ref="showMoreShopsLink"
+                id="showMoreShopsId"
+                cmsWidgetName="ShowMoreShopsLinkWidget"
+                linkType="text"
+                :text="showMoreShopsLinkText"
+                href="#!"
+                @click-event="getNextShopsFromList"
+                aria-label="Show more shops" />
         </div>
     </transition>
 </template>
@@ -36,6 +45,7 @@ import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
+import textLink from '@/ux-components/text-link/text-link';
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
@@ -46,6 +56,9 @@ export default {
         return {
             shops: [],
             shopListButton: shopListButton,
+            availability: "high",
+            answers: [],
+            shopIndex: 0,
         };
     },
     props: {
@@ -58,6 +71,7 @@ export default {
     components: {
         alert,
         buttonQuestion,
+        textLink,
     },
     computed: {
         questionText() {
@@ -71,23 +85,12 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
-        answers() {
-            // Map API result data
-            const mappedData = this.shops.map((shop) => {
-                return {
-                    Name: shop.providerNumber,
-                    buttonLabel: shop.city,
-                    buttonLabelSubCopy: `${shop.distance} mi`,
-                    buttonBodyCopy: `${shop.streetAddress}, ${shop.city}, ${shop.state} ${shop.zipCode}`,
-                    buttonAuxillaryCopy: `foo`
-                };
-            });
-
-            return mappedData;
-        },
         displayDropoffInformation() {
             return this.isDropoff;
         },
+        showMoreShopsLinkText() {
+            return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
+        },
     },
     methods: {
         loadInitialData() {
@@ -97,6 +100,7 @@ export default {
         },
         initializeComponent(initialData) {
             this.shops = initialData;
+            this.getNextShopsFromList();
         },
         async updateShopList() {
             const result = await this.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
@@ -104,6 +108,38 @@ export default {
             });
             return result.data;
         },
+        shopIterator(array, n){
+            let l = array.length; 
+            return () => {
+                var end = this.shopIndex + n;
+                var part = array.slice(this.shopIndex, end);
+                this.shopIndex = end < l ? end : this.shopIndex.length - 1;
+                return part;
+            };  
+        },
+        getNextShopsFromList() {
+            const nextShop = this.shopIterator(this.shops, 3);
+
+            // Map API result data
+            const mappedData = nextShop().map((shop) => {
+                return {
+                    Name: shop.providerNumber,
+                    buttonLabel: shop.city,
+                    buttonLabelSubCopy: `${shop.distance} mi`,
+                    buttonBodyCopy: `${shop.streetAddress}, ${shop.city}, ${shop.state} ${shop.zipCode}`,
+                    buttonAuxillaryCopy: `foo`,
+                };
+            });
+
+            if (this.answers.length === 0) {
+                this.answers = mappedData;
+            } else {
+                mappedData.forEach(shop => {
+                    this.answers.push(shop);
+                })
+            }
+            
+        }
     },
     watch: {
         serviceZipCode: {
@@ -124,30 +160,70 @@ export default {
     }
 
     .button-content {
-        .button-label-copy {
+        .row-one {
             display: flex;
-            font-weight: 500;
-            line-height: 1.5rem;
             align-items: center;
             margin-bottom: 0.25rem !important;
 
+            .button-label-copy {
+                flex-grow: 0; 
+                line-height: 1.5rem;
+                font-weight: 500;       
+            }
+
             .button-label-sub-copy {
-                margin-bottom: 0rem !important;
+                flex-grow: 1;           
+                line-height: 1.25rem !important;
+                font-weight: 400;      
+                font-size: 0.75rem;
                 color: #727676;
                 padding-left: 0.25rem;
-                font-weight: 400;
-                line-height: 1.25rem;
-                font-size: 0.75rem;
             }
 
-            .button-auxillary-copy {
+            .availability-indicator {
-                display: flex;
+                display: none;
-                align-items: right;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                padding: 0.125rem 1.5rem;
+                gap: 0.25rem;
+                background: #E3F2EA;
+                border-radius: 4.5rem;
+
+                .button-auxillary-copy {
+                    justify-content: right;
+                    line-height: 1.25rem !important;
+                    font-weight: 400;      
+                    font-size: 0.75rem;
+                }
+
+                .green {
+                    color: #006A36;
+                    background: #E3F2EA;
+                }
+
+                .red {
+                    color: #AC160B;
+                    background: #E3F2EA;
+                }
+
+
             }
+
         }
-
-
     }
+
+    // .button-question-overflow {
+    //     height: 60vh; //calc(100vh - 274px);
+
+    //     // .overflow-scroll {
+    //     //     // Height will be determined by overall height of content above list
+    //     //     height: calc(100% - 314px);
+    //     //     overflow-x: hidden !important;
+    //     //     -webkit-overflow-scrolling: touch;
+    //     // }
+    // }
+
 }
 
 .drop-off-alert {

src/store/index.js

@@ -941,7 +941,7 @@ export const actions = {
         return globalMethods.callMockHttpClient({
             method: endpoints.GetProviderLocations.method,
             //TODO: Remove Mocky Endpoints
-            endpoint: "https://run.mocky.io/v3/2a82baf7-c6e8-40ac-8e2e-9d91800c7f9b",
+            endpoint: "https://run.mocky.io/v3/062bfed7-29a7-4001-b5e8-6135ec10494f",
         });
     },