Merge pull request #2731 from Safelite/feature/CASH-1183

CASH-1183: Load more timeslots

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

@@ -64,6 +64,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                             :isInsuranceSelected="isInsuranceSelected"
                             :suppressError="suppressError"
                             :labelBold="labelBold"
+                            :isHidden="setIsHidden(index)"
                             @buttonEvent="handleButtonEvent"
                             v-model="selectedValues" />
                         <!-- For nested questions -->
@@ -96,6 +97,11 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                 :name="formatString(groupName)"
                 v-if="!suppressError"></error-message>
         </div>
+        <div v-if="lazyLoad.isLazyLoad && !showAllButtons" id="show-more-button">
+            <button class="btn btn-link" type="button" @click="toggleShowAllButtons">
+                View more times
+            </button>
+        </div>
     </div>
 </template>
 
@@ -163,6 +169,13 @@ export default {
             required: false,
             default: false,
         },
+        lazyLoad: {
+            type: Object,
+            default: () => ({
+                isLazyLoad: false,
+                amountToLoad: null,
+            }),
+        },
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
@@ -194,6 +207,7 @@ export default {
     data() {
         return {
             lastValuePushedToGa: null,
+            showAllButtons: false,
         };
     },
     computed: {
@@ -289,6 +303,15 @@ export default {
                 this.$emit("update:modelValue", selectedAnswers);
             },
         },
+        setIsHidden() {
+            return (index) => {
+                return (
+                    this.lazyLoad.isLazyLoad &&
+                    index >= this.lazyLoad.amountToLoad &&
+                    !this.showAllButtons
+                );
+            };
+        },
     },
     methods: {
         formatString(str) {
@@ -301,6 +324,9 @@ export default {
             const eventName = event.eventName;
             this.$emit(`buttonEvent.${eventName}`, event.args);
         },
+        toggleShowAllButtons() {
+            this.showAllButtons = true;
+        },
     },
     watch: {
         modelValue(newValue, oldValue) {
@@ -362,6 +388,28 @@ export default {
     font-family: UrbanistSemibold;
     color: $black;
 
+    &.timeslots {
+        .col {
+            & > label[isHidden="true"] {
+                display: none;
+            }
+        }
+        #show-more-button {
+            width: 100%;
+            text-align: center;
+            margin-top: 0.5rem;
+
+            button {
+                color: $blue;
+                text-underline-offset: 4px;
+
+                &:active {
+                    background: unset;
+                }
+            }
+        }
+    }
+
     .radio-button-container {
         &:not(:last-child) {
             padding-bottom: map-get($spacers, 2);

src/digital-components/date-picker/date-picker.vue

@@ -1042,6 +1042,7 @@ export default {
 
         .view-more-dates {
             color: $blue;
+            font-family: UrbanistSemiBold;
         }
     }
     .loader {

src/layouts/schedule/time-slot-question/time-slot-question.vue

@@ -31,6 +31,7 @@
                 isInshopOrDropOffAppointment ? 'is-inshop-or-drop-off-appointment' : '',
             ]"
             :answers="availableTimeSlots"
+            :lazyLoad="{ isLazyLoad: true, amountToLoad: 10 }"
             groupName="chooseTimeSlot"
             textPosition="text-center"
             v-model="selectedAnswerForTimeSlots"