diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index cf704faa9..9862633ad 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/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" /> @@ -96,6 +97,11 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com :name="formatString(groupName)" v-if="!suppressError"> +
@@ -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); diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index 007dc0615..164706893 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/src/digital-components/date-picker/date-picker.vue @@ -1042,6 +1042,7 @@ export default { .view-more-dates { color: $blue; + font-family: UrbanistSemiBold; } } .loader { diff --git a/src/layouts/schedule/time-slot-question/time-slot-question.vue b/src/layouts/schedule/time-slot-question/time-slot-question.vue index 7d6e9b905..36aef0c26 100644 --- a/src/layouts/schedule/time-slot-question/time-slot-question.vue +++ b/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"