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

Move copy structure to cms + state getters.

Browse source
This commit is contained in:
Chloe Herd 2023-07-28 13:23:27 -04:00
parent a4785fa1c5
commit 2a746bd7be
4 changed files with 42 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/layouts/review/review-sections/schedule-review/schedule-review.vue
View file

@ -1,22 +1,17 @@
<template>
<reviewBlock
:headerCmsWidgetName="cmsWidgetName"
:headerCmsWidgetName="headerCmsWidgetName"
:content="displayContent"
@edit-clicked="editClicked" />
</template>
<script>
import reviewBlock from "@/layouts/review/review-block/review-block";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import {
convertDateStringToDate,
militaryToTwelveHourTime,
getDisplayTextForDurationLength,
} from "@/layouts/schedule/helpers/schedule-helper";
export default {
name: "schedule-review",
props: {
headerCmsWidgetName: String,
cmsWidgetName: String,
schedule: Object,
appointmentType: String,
@ -31,59 +26,11 @@ export default {
},
computed: {
displayContent() {
switch (this.appointmentType) {
case AppointmentTypeStrings.MOBILE:
return this.displayContentForMobile;
case AppointmentTypeStrings.DROP_OFF:
return this.displayContentForDropOff;
case AppointmentTypeStrings.IN_SHOP:
return this.displayContentForInShop;
default:
return [];
}
},
displayContentForInShop() {
return [
`${this.renderedDate} at ${this.renderedTime}`,
`Estimated appointment length: ${this.renderedEstimatedDuration}`,
this.getCmsContent(this.cmsWidgetName, "BodyText"),
this.getCmsContent(this.cmsWidgetName, "BodyText2"),
];
},
displayContentForDropOff() {
return [
`${this.renderedDate} drop off before 9:30am`,
`Estimated appointment length: All day`,
];
},
displayContentForMobile() {
return [
`${this.renderedDate}, arriving between ${this.renderedMobileWindow}`,
`Estimated appointment length: ${this.renderedEstimatedDuration}`,
];
},
renderedDate() {
const dateModel = convertDateStringToDate(this.schedule?.date);
return dateModel.toLocaleDateString("en-us", {
weekday: "long",
month: "long",
day: "numeric",
year: "numeric",
});
},
renderedTime() {
return militaryToTwelveHourTime(this.schedule?.startTime);
},
renderedEstimatedDuration() {
return getDisplayTextForDurationLength(
this.schedule?.jobMinMinutes,
this.schedule?.jobMaxMinutes
);
},
renderedMobileWindow() {
return `${militaryToTwelveHourTime(
this.schedule?.startTime
)} - ${militaryToTwelveHourTime(this.schedule?.endTime)}`;
},
},
components: {
reviewBlock,

6
src/layouts/review/review.vue
View file

@ -73,7 +73,8 @@
<hr class="my-0" />
<scheduleReview
cmsWidgetName="ScheduleTitleWidget"
headerCmsWidgetName="ScheduleTitleWidget"
cmsWidgetName="ScheduleWidget"
:schedule="scheduleInfo"
:appointmentType="appointmentType"
@edit-clicked="editSchedule" />
@ -210,6 +211,9 @@ export default {
scheduleInfo() {
return this.$store.getters.order.schedule;
},
exposeCms() {
return this.$root.cmsContentByWidget;
},
},
components: {
funnelHeader,

1
src/layouts/schedule/helpers/schedule-helper.js
View file

@ -48,6 +48,7 @@ export function sumDateString(dateString, daysToAdd) {
export function militaryToTwelveHourTime(timeString) {
// Expected input: "HH:MM"
if (typeof timeString !== "string") return;
let hours = parseInt(timeString.split(":")[0]);
const minutes = timeString.split(":")[1];
const meridianNotation = hours > 11 ? "PM" : "AM";

32
src/store/index.js
View file

@ -14,6 +14,11 @@ import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper
import { deepEqual } from "@/helpers/object-helper";
import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
import { partTypeStrings } from "@/constants/part-type-strings";
import {
convertDateStringToDate,
militaryToTwelveHourTime,
getDisplayTextForDurationLength,
} from "@/layouts/schedule/helpers/schedule-helper";
// Export State
const getDefaultState = () => {
@ -544,6 +549,9 @@ export const getters = {
isMobileAppointment: (state) => {
return state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
},
isDropOffAppointment: (state) => {
return state.order.serviceLocation.appointmentType === AppointmentTypeStrings.DROP_OFF;
},
isRecalibrationOnOrder: (state) => {
return getHasRecalibrationPart(state);
},
@ -552,6 +560,30 @@ export const getters = {
(vap) => vap.partType.toUpperCase() === partTypeStrings.REAR_WIPER.toUpperCase()
);
},
scheduleDisplayText: (state) => {
const dateModel = convertDateStringToDate(state.order.schedule.date);
const readableDate = dateModel?.toLocaleDateString("en-us", {
weekday: "long",
month: "long",
day: "numeric",
year: "numeric",
});
const readableStartTime = militaryToTwelveHourTime(state.order.schedule.startTime);
const readableEndTime = militaryToTwelveHourTime(state.order.schedule.endTime);
const readableDuration = getDisplayTextForDurationLength(
state.order.schedule.jobMinMinutes,
state.order.schedule.jobMaxMinutes
);
return {
date: readableDate,
startTime: readableStartTime,
endTime: readableEndTime,
duration: readableDuration,
};
},
lineItems: (state) => state.order.lineItems,
pageData: (state) => (page) => {
return state.applicationUser.pageData[page];