jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove availability indicator logic

Browse source
This commit is contained in:
scottkiener-at-safelite 2026-02-12 17:08:10 -05:00
parent 709b8cdc90
commit a87bcea7c3
1 changed files with 0 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
src/iss-components/tpa-shop-list-button/tpa-shop-list-button.vue
View file

@ -20,28 +20,6 @@
class="m-0 caption ms-2"
:class="textPosition">{{ buttonLabelSubCopy }}
</span>
<div
v-if="displayAvailabilityIndicators"
id="availabilityIndicatorBlock"
class="availability-indicator rounded-pill"
:class="availabilityRatingClass">
<loader
v-if="isLoaderDisplayed"
ref="availabilityIndicatorLoader"
loaderPosition="left"
:allowPageInteraction="true" />
<div
v-else
id="availabilityIndicator"
class="d-flex align-items-center">
<div
id="availabilityBadge"
class="availability-badge"
:class="availabilityRating == 'high' ? 'green' : 'orange'">
</div>
<span class="m-0 button-auxillary-copy">{{ badgeText }}</span>
</div>
</div>
</div>
<div class="row-two">
<span
@ -73,42 +51,6 @@ export default {
loader
},
mixins: [inputButtonWrapperMixin],
data() {
return {
availabilityRating: null,
displayAvailabilityIndicators: this.additionalButtonData?.displayAvailabilityIndicators ?? false
};
},
computed: {
isLoaderDisplayed() {
return this.availabilityRating == null;
},
availabilityRatingClass() {
if (this.availabilityRating != null) {
return this.availabilityRating === 'high' ? 'green' : 'orange';
}
return 'gray';
},
badgeText() {
if (this.availabilityRating != null) {
return this.availabilityRating === 'high' ? 'Appts available' : 'Appts low';
}
return '';
}
},
beforeMount() {
if (this.displayAvailabilityIndicators) {
const { startDate } = this.additionalButtonData;
const { endDate } = this.additionalButtonData;
const { shopAppointmentType } = this.additionalButtonData;
this.additionalButtonData
.availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
.then((data) => {
this.availabilityRating = data;
});
}
}
};
</script>
@ -165,68 +107,6 @@ export default {
font-size: .75rem;
line-height: 1.5rem;
}
.availability-indicator {
background-repeat: no-repeat;
display: flex;
align-items: center;
margin-left: auto;
padding: 0.125rem 0.5rem;
.availability-badge {
display: inline-flex;
width: .8125rem;
height: .75rem;
background-position: center;
background-repeat: no-repeat;
margin: 0 0.25rem 0 0;
&.green {
background-image: url($svg-shop-list-button-green-availability);
}
&.orange {
background-image: url($svg-shop-list-button-orange-availability);
}
}
.button-auxillary-copy {
box-sizing: border-box;
justify-content: right;
line-height: 1.25rem;
font-weight: 500;
font-size: 0.75rem;
align-items: center;
}
.loader {
padding: 0 0.25rem 0 0.25rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.loader:after {
background-color: $gray-550;
height: 1rem;
width: 1rem;
}
&.green {
color: $green-700;
background-color: $green-100;
}
&.orange {
color: $orange-600;
background-color: $orange-100;
}
&.gray {
color: $gray-600;
background-color: $gray-100;
padding-left: 0.125rem;
padding-right: 0.125rem;
}
}
}
.row-two {