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

Fix availability indicators for shop address

Browse source
This commit is contained in:
Alex Humphries 2026-01-13 12:20:05 -05:00
parent f3f99457f2
commit 21e9127b50
3 changed files with 35 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,6 +10,7 @@
:aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<div class="row-one">
<div class="availability-indicator-spacer"></div>
<span
id="buttonLabelSpan"
class="m-0 button-label-copy"
@ -21,20 +22,22 @@
class="m-0 button-label-sub-copy"
:class="textPosition">{{ buttonLabelSubCopy }}
</span>
<div
v-if="displayAvailabilityIndicators"
id="availabilityIndicatorBlock"
class="availability-indicator rounded-pill"
:class="availabilityRatingClass">
<div class="availability-indicator-container">
<div
id="availabilityIndicator"
class="d-flex align-items-center">
v-if="displayAvailabilityIndicators"
id="availabilityIndicatorBlock"
class="availability-indicator rounded-pill"
:class="availabilityRatingClass">
<div
id="availabilityBadge"
class="availability-badge"
:class="availabilityRating == 'high' ? 'green' : 'orange'">
id="availabilityIndicator"
class="d-flex align-items-center">
<div
id="availabilityBadge"
class="availability-badge"
:class="availabilityRatingClass">
</div>
<span class="m-0 button-auxillary-copy">{{ badgeText }}</span>
</div>
<span class="m-0 button-auxillary-copy">{{ badgeText }}</span>
</div>
</div>
</div>
@ -157,11 +160,23 @@ $heritage-checked-border-color: #0070d1;
border-left: 1px solid $heritage-border-color;
}
.availability-indicator-spacer {
width: 8rem;
margin-right: auto;
}
.availability-indicator-container {
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: auto;
width: 8rem;
}
.availability-indicator {
background-repeat: no-repeat;
display: flex;
align-items: center;
margin-left: auto;
padding: 0.125rem 0.5rem;
.availability-badge {
@ -179,6 +194,11 @@ $heritage-checked-border-color: #0070d1;
&.orange {
background-image: url($svg-shop-list-button-orange-availability);
}
&.gray {
background-image: url(~@/assets/img/heritage-loader-blue.gif);
background-size: contain;
}
}
.button-auxillary-copy {
box-sizing: border-box;

2
src/layouts/service-location/service-location.vue
View file

@ -79,7 +79,7 @@
v-model="selectedProvider"
:serviceZipcode="zipCode"
:isDisplayed="isInshop"
:selectAppointmentType="selectedAppointmentType"
:selectedAppointmentType="selectedAppointmentType"
modalWidgetName="ChangeLocationModalWidget"
cmsWidgetName="ShopAddressWidget" />
<contentGroupModal

4
src/layouts/service-location/shop-address/shop-address.vue
View file

@ -176,11 +176,11 @@ export default {
const formattedEndDate = endDate.toISOString().split('T')[0];
return {
displayAvailabilityIndicators: false,
displayAvailabilityIndicators: true,
availabilityRatingCallback: getAvailabilityRating,
startDate: formattedStartDate,
endDate: formattedEndDate,
shopAppointmentType: this.selectedAppointmentType
shopAppointmentType: "InshopOrDropoff"
};
},
serviceZipPrompt() {