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

Merge branch 'develop' into feature/CSR-1144

Browse source
This commit is contained in:
CarlNation 2023-05-25 10:51:21 -04:00
commit d0597c7c54
3 changed files with 72 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/layouts/schedule/schedule.vue
View file

@ -73,7 +73,7 @@ import {
getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy,
} from "@/helpers/cms-content-helper";
import { PREMIUM_FEE_PART_TYPE } from "./constants/schedule-constants";
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "./constants/schedule-constants";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import store from "@/store";
@ -267,6 +267,57 @@ export default {
this.selectedDate = null;
}
},
updateFooterButtonText(timeSlotData) {
let funnelFooterButtonText;
if (!timeSlotData.id) {
funnelFooterButtonText = "Continue";
} else {
funnelFooterButtonText =
"Select " + this.convertSelectedDateToShortMonthAndDay(this.selectedDate);
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
funnelFooterButtonText +=
" at " +
this.getDisplayTextForMilitaryTime(this.appointmentDateAndTime.startTime);
} else if (
this.appointmentType === AppointmentTypeStrings.MOBILE &&
!timeSlotData.isPremiumAppointment
) {
funnelFooterButtonText +=
" at " +
this.getDisplayTextForMilitaryTime(
this.appointmentDateAndTime.startTime,
true
) +
" - " +
this.getDisplayTextForMilitaryTime(
this.appointmentDateAndTime.endTime,
true
);
}
}
this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);
},
convertSelectedDateToShortMonthAndDay(selectedDate) {
// This conversion ensures we don't get get GMT induced date changes
const dateObject = new Date(`${selectedDate.dateString}T00:00:00`);
return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
},
// Expected input: "HH:MM:SS"
getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
let hours = parseInt(militaryTimeInput.split(":")[0]);
const minutes = militaryTimeInput.split(":")[1];
let meridianNotation = hours > 11 ? "PM" : "AM";
if (hours > 12) {
hours -= 12;
}
if (shouldTrimMinutesIfEmpty && minutes === "00") {
return `${hours} ${meridianNotation}`;
} else {
return `${hours}:${minutes} ${meridianNotation}`;
}
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
@ -296,6 +347,9 @@ export default {
};
}
},
selectedTimeSlotData() {
this.updateFooterButtonText(this.selectedTimeSlotData);
},
},
components: {
funnelHeader,

25
src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
View file

@ -97,10 +97,7 @@ export default {
this.handleChange(this.modelValue.id);
},
dateAndTimeSlotData(newValue, oldValue) {
const numberOfOptions = newValue?.timeSlots.length;
if (numberOfOptions === 1) {
this.selectedTimeSlotId = newValue.timeSlots[0].id;
}
this.autoSelectTimeSlotIfOnlyOneIsAvailable(newValue);
},
},
computed: {
@ -181,7 +178,7 @@ export default {
if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
availableTimeSlots = [
{
value: this.dateAndTimeSlotData.timeSlots[0],
value: this.dateAndTimeSlotData.timeSlots[0].id,
buttonLabel: this.dropoffButtonText,
},
];
@ -256,10 +253,9 @@ export default {
getDisplayTextForMilitaryTime(militaryTimeInput) {
let hours = parseInt(militaryTimeInput.split(":")[0]);
const minutes = militaryTimeInput.split(":")[1];
let meridianNotation = "AM";
if (militaryTimeInput.split(":")[0] > 12) {
let meridianNotation = hours > 11 ? "PM" : "AM";
if (hours > 12) {
hours -= 12;
meridianNotation = "PM";
}
return `${hours}:${minutes} ${meridianNotation}`;
},
@ -274,6 +270,19 @@ export default {
}
return displayTextForDurationLength;
},
autoSelectTimeSlotIfOnlyOneIsAvailable(newdateAndTimeSlotDataValue) {
const numberOfOptions = newdateAndTimeSlotDataValue?.timeSlots.length;
if (
numberOfOptions === 1 &&
!(
this.appointmentType === AppointmentTypeStrings.MOBILE &&
this.premiumAppointmentFee &&
newdateAndTimeSlotDataValue.timeSlots[0].offerPremium
)
) {
this.selectedTimeSlotId = newdateAndTimeSlotDataValue.timeSlots[0].id;
}
},
addPremiumFlagToInput(timeSlotId) {
return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG);
},

17
src/layouts/schedule/time-slot-modal-question/timeslot-modal-list-button/timeslot-modal-list-button.vue
View file

@ -19,33 +19,17 @@
<span v-if="screenReaderOnlyText" class="sr-only">
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && selectingInitiatesLoad"
:class="[this.loaderColor, this.loaderPosition]" />
</div>
</baseInputButton>
</template>
<script>
import loader from "@/ux-components/loader/loader";
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "timeslotModalListButton",
mixins: [inputButtonWrapperMixin],
props: {
loaderColor: String,
loaderPosition: {
type: String,
default: "right",
},
},
data() {
return {
isLoaderDisplayed: false,
};
},
computed: {
formattedButtonLabelSubCopy() {
return this.buttonLabelSubCopy;
@ -62,7 +46,6 @@ export default {
},
},
components: {
loader,
baseInputButton,
},
};