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

Wired up backend and some styling tweaks

Browse source
This commit is contained in:
Leah Schumann 2023-05-26 10:10:48 -04:00
parent 3dd67afea3
commit c5d1ae0442
4 changed files with 31 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/layouts/service-location/helpers/service-location-helper/service-location-helper.js
View file

@ -44,7 +44,12 @@ export async function getServiceabilityDetails(serviceZipCode, lineItems) {
return Promise.resolve(serviceabilityDetails);
}
export async function getAvailabilityRating(startDate, endDate, shopAppointmentType, providerNumber) {
export async function getAvailabilityRating(
startDate,
endDate,
shopAppointmentType,
providerNumber
) {
// For a given shop provider number and date range, get the appointment time slots available
const shopTimeSlots = await baseMixin.methods.dispatchStoreAction(
storeActions.GET_SHOP_TIME_SLOTS,

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

@ -17,7 +17,7 @@
<div
class="availability-indicator rounded-pill"
:class="availabilityRatingClass">
<div v-if="!isLoaderDisplayed" class="availability-badge"></div>
<div v-if="!isLoaderDisplayed" class="availability-badge" :class="availabilityRating == 'Good' ? 'green' : 'red'"></div>
<span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">{{
availabilityRating == "Good" ? "Appts available" : "Appts low"
}}</span>
@ -54,15 +54,16 @@ export default {
},
beforeMount() {
this.displayLoader();
console.log(this.value)
const startDate = this.additionalButtonData.startDate;
const endDate = this.additionalButtonData.endDate;
const shopAppointmentType = this.additionalButtonData.shopAppointmentType;
this.additionalButtonData.availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value).then((data) => {
this.availabilityRating = data;
this.isLoaderDisplayed = false;
});
this.additionalButtonData
.availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
.then((data) => {
this.availabilityRating = data;
this.isLoaderDisplayed = false;
});
},
data() {
return {
@ -129,10 +130,6 @@ export default {
&:checked + .list-button-content span {
font-weight: 500;
}
// &:checked + .list-button-content span:nth-child(2) {
// font-weight: 400;
// color: $gray-600;
// }
}
}
.list-button-content {
@ -173,12 +170,20 @@ export default {
.availability-badge {
display: inline;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
width: 13px;
height: 12px;
background-position: center;
background-repeat: no-repeat;
margin: 0 0.25rem 0 0;
&.green {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
}
&.red {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23AC160B'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23AC160B'/%3E%3C/svg%3E%0A");
}
}
.button-auxillary-copy {

15
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -107,12 +107,12 @@ export default {
},
additionalButtonData() {
const startDate = new Date();
const endDate = new Date()
const endDate = new Date();
endDate.setDate(startDate.getDate() + 7);
const formattedStartDate = startDate.toISOString().split("T")[0];
const formattedEndDate = endDate.toISOString().split("T")[0];
return {
availabilityRatingCallback: getAvailabilityRating,
startDate: formattedStartDate,
@ -277,14 +277,17 @@ export default {
background-repeat: no-repeat;
background-size: 0.75rem;
background-position: 0.5rem 0.75rem;
border-radius: 0.5rem;
display: flex;
flex-direction: row;
padding: 0.5rem 0.5rem 0.5rem 1.5rem !important;
gap: 0.25rem;
.alert-heading {
text-align: left;
font-size: 0.75rem;
line-height: 1.25rem;
}
p {
padding-left: 0.5rem;
margin-bottom: 0;
}
}
</style>

2
src/store/index.js
View file

@ -1183,8 +1183,6 @@ export const actions = {
},
};
console.log(payload)
return globalMethods.callHttpClient({
method: endpoints.GetShopTimeSlots.method,
endpoint: endpoints.GetShopTimeSlots.url,