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

WIP

Browse source
This commit is contained in:
Katie Kroell 2024-03-07 16:34:16 -05:00
parent 5c9416e989
commit cda30c1cd7
4 changed files with 78 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
src/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue
View file

@ -3,7 +3,7 @@
<div class="add-to-calendar"> <div class="add-to-calendar">
<button @click="openCalendarModal"> <button @click="openCalendarModal">
<span class="add-to-calendar-span"> <span class="add-to-calendar-span">
<img src="@/assets/img/icons/add-to-calendar.svg" class="add-to-calendar-img" /> <img src="@/assets/img/icons/spinner.svg" class="add-to-calendar-img" />
<span class="add-to-calendar-text">Add to calendar</span></span> <span class="add-to-calendar-text">Add to calendar</span></span>
</button> </button>
</div> </div>
@ -25,7 +25,7 @@ import { getDateFormat,
addMinutes } from '@/helpers/date-helper.js'; addMinutes } from '@/helpers/date-helper.js';
import calendarModalQuestion from '@/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue'; import calendarModalQuestion from '@/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue';
import { AppointmentTypeStrings, RouteCodeFlags } from '@/constants/schedule-constants'; import { AppointmentTypeStrings, RouteCodeFlags } from '@/constants/schedule-constants';
import store from '@/store'; import { useMainStore } from '@/store';
import calendarOptions from '@/constants/calendar-options'; import calendarOptions from '@/constants/calendar-options';
import calendarStatus from '@/constants/calendar-status'; import calendarStatus from '@/constants/calendar-status';
import { getCalendarFile, download } from '@/helpers/add-to-calendar-helper'; import { getCalendarFile, download } from '@/helpers/add-to-calendar-helper';
@ -51,6 +51,10 @@ export default {
scheduleStartTime: String, scheduleStartTime: String,
scheduleEndTime: String scheduleEndTime: String
}, },
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() { data() {
return { return {
selectedCalendarOption: null selectedCalendarOption: null
@ -67,64 +71,64 @@ export default {
return obj; return obj;
} }
}, },
IsSameDayDropOff() { isSameDayDropOff() {
const todaysDate = new Date().toISOString().split('T')[0]; const todaysDate = new Date().toISOString().split('T')[0];
return this.scheduleDate === todaysDate; return this.scheduleDate === todaysDate;
}, },
AddToCalendar_Mobile_Subject() { addToCalendar_Mobile_Subject() {
return this.getCmsContent(this.mobileWidgetName, 'HeaderText'); return this.getCmsContent(this.mobileWidgetName, 'HeaderText');
}, },
AddToCalendar_Mobile_Body() { addToCalendar_Mobile_Body() {
return this.getCmsContent(this.mobileWidgetName, 'BodyText'); return this.getCmsContent(this.mobileWidgetName, 'BodyText');
}, },
AddToCalendar_InShop_Subject() { addToCalendar_InShop_Subject() {
return this.getCmsContent(this.inShopWidgetName, 'HeaderText'); return this.getCmsContent(this.inShopWidgetName, 'HeaderText');
}, },
AddToCalendar_InShop_Body() { addToCalendar_InShop_Body() {
return this.getCmsContent(this.inShopWidgetName, 'BodyText'); return this.getCmsContent(this.inShopWidgetName, 'BodyText');
}, },
AddToCalendar_DropOff_Subject() { addToCalendar_DropOff_Subject() {
return this.getCmsContent(this.dropOffWidgetName, 'HeaderText'); return this.getCmsContent(this.dropOffWidgetName, 'HeaderText');
}, },
AddToCalendar_DropOff_Body() { addToCalendar_DropOff_Body() {
return this.getCmsContent(this.dropOffWidgetName, 'BodyText'); return this.getCmsContent(this.dropOffWidgetName, 'BodyText');
}, },
AddToCalendar_OvernightDropOff_Subject() { addToCalendar_OvernightDropOff_Subject() {
return this.getCmsContent(this.overnightDropOffWidgetName, 'HeaderText'); return this.getCmsContent(this.overnightDropOffWidgetName, 'HeaderText');
}, },
AddToCalendar_OvernightDropOff_Body() { addToCalendar_OvernightDropOff_Body() {
return this.getCmsContent(this.overnightDropOffWidgetName, 'BodyText'); return this.getCmsContent(this.overnightDropOffWidgetName, 'BodyText');
}, },
AddToCalendar_AllDayDropOff_Subject() { addToCalendar_AllDayDropOff_Subject() {
return this.getCmsContent(this.allDayDropOffWidgetName, 'HeaderText'); return this.getCmsContent(this.allDayDropOffWidgetName, 'HeaderText');
}, },
AddToCalendar_AllDayDropOff_Body() { addToCalendar_AllDayDropOff_Body() {
return this.getCmsContent(this.allDayDropOffWidgetName, 'BodyText'); return this.getCmsContent(this.allDayDropOffWidgetName, 'BodyText');
}, },
AddToCalendar_SameDayDropOff_Subject() { addToCalendar_SameDayDropOff_Subject() {
return this.getCmsContent(this.sameDayDropOffWidgetName, 'HeaderText'); return this.getCmsContent(this.sameDayDropOffWidgetName, 'HeaderText');
}, },
AddToCalendar_SameDayDropOff_Body() { addToCalendar_SameDayDropOff_Body() {
return this.getCmsContent(this.sameDayDropOffWidgetName, 'BodyText'); return this.getCmsContent(this.sameDayDropOffWidgetName, 'BodyText');
}, },
UniqueId() { uniqueId() {
return store.getters.submittedOrder.referralNumber?.toString(); return this.mainStore.order.referralNumber?.toString();
}, },
ServiceType() { serviceType() {
const { isRepair } = store.getters.submittedOrder.damage; const { isRepair } = this.mainStore.order.damage.isRepair;
const funnelHasRecalibrationPart = store.getters.isRecalibrationOnSubmittedOrder; const { hasRecalibrationPart } = this.mainStore;
if (!isRepair) { if (!isRepair) {
if (funnelHasRecalibrationPart) { if (hasRecalibrationPart) {
return serviceType.REPLACEMENT_AND_RECALIBRATION; return serviceType.REPLACEMENT_AND_RECALIBRATION;
} }
return serviceType.REPLACEMENT; return serviceType.REPLACEMENT;
} }
return serviceType.REPAIR; return serviceType.REPAIR;
}, },
RouteCode() { routeCode() {
return store.getters.submittedOrder.schedule.routeCode; return this.mainStore.order.schedule.routeCode;
}, },
Appointment() { appointment() {
let subject = ''; let subject = '';
let location = ''; let location = '';
const startDateTime = combineDateAndTime(this.scheduleDate, this.scheduleStartTime); const startDateTime = combineDateAndTime(this.scheduleDate, this.scheduleStartTime);
@ -136,8 +140,8 @@ export default {
if (this.appointmentType === AppointmentTypeStrings.MOBILE) { if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
location = this.serviceLocationFullAddress?.replace('<br/>', ''); location = this.serviceLocationFullAddress?.replace('<br/>', '');
subject = this.AddToCalendar_Mobile_Subject?.replace( subject = this.AddToCalendar_Mobile_Subject?.replace(
'{custom:SERVICETYPE}', '{custom:serviceType}',
this.ServiceType this.serviceType
); );
body = this.AddToCalendar_Mobile_Body; body = this.AddToCalendar_Mobile_Body;
} else { } else {
@ -165,21 +169,21 @@ export default {
// eslint-disable-next-line brace-style // eslint-disable-next-line brace-style
} // normal time slot } // normal time slot
else { else {
subject = this.AddToCalendar_DropOff_Subject?.replace( subject = this.addToCalendar_DropOff_Subject?.replace(
'{custom:SERVICETYPE}', '{custom:serviceType}',
this.ServiceType this.serviceType
); );
body = this.AddToCalendar_DropOff_Body?.replace( body = this.addToCalendar_DropOff_Body?.replace(
'{custom:ADDRESS}', '{custom:address}',
location location
); );
} }
} else { } else {
subject = this.AddToCalendar_InShop_Subject?.replace( subject = this.addToCalendar_InShop_Subject?.replace(
'{custom:SERVICETYPE}', '{custom:serviceType}',
this.ServiceType this.serviceType
); );
body = this.AddToCalendar_InShop_Body?.replace('{custom:ADDRESS}', location); body = this.addToCalendar_InShop_Body?.replace('{custom:address}', location);
} }
duration = calculateDuration(startDateTime, endDateTime); duration = calculateDuration(startDateTime, endDateTime);
} }
@ -227,40 +231,40 @@ export default {
const outlookComTimeSpanFormat = 'yyyy-MM-ddTHH:mm:ss'; const outlookComTimeSpanFormat = 'yyyy-MM-ddTHH:mm:ss';
if (type === calendarOptions.OUTLOOKCOM) { if (type === calendarOptions.OUTLOOKCOM) {
URL = `${applicationConfig.OUTLOOK_CALENDAR}&startdt=${encodeURIComponent( URL = `${applicationConfig.OUTLOOK_CALENDAR}&startdt=${encodeURIComponent(
getDateFormat(this.Appointment.StartDate, outlookComTimeSpanFormat) getDateFormat(this.appointment.startDate, outlookComTimeSpanFormat)
)}&enddt=${encodeURIComponent( )}&enddt=${encodeURIComponent(
getDateFormat(this.Appointment.EndDate, outlookComTimeSpanFormat) getDateFormat(this.appointment.endDate, outlookComTimeSpanFormat)
)}&subject=${encodeURIComponent( )}&subject=${encodeURIComponent(
this.Appointment.Subject this.appointment.subject
)}&body=${encodeURIComponent(this.Appointment.Body)}&location=${encodeURIComponent( )}&body=${encodeURIComponent(this.appointment.body)}&location=${encodeURIComponent(
this.Appointment.Location this.appointment.location
)}`; )}`;
} }
if (type === calendarOptions.GOOGLE) { if (type === calendarOptions.GOOGLE) {
URL = `${applicationConfig.GOOGLE_CALENDAR}&text=${encodeURIComponent( URL = `${applicationConfig.GOOGLE_CALENDAR}&text=${encodeURIComponent(
this.Appointment.Subject this.appointment.subject
)}&dates=${encodeURIComponent( )}&dates=${encodeURIComponent(
getDateFormat(this.Appointment.StartDate, dateFormat) getDateFormat(this.appointment.startDate, dateFormat)
)}/${encodeURIComponent( )}/${encodeURIComponent(
getDateFormat(this.Appointment.EndDate, dateFormat) getDateFormat(this.appointment.endDate, dateFormat)
)}&details=${encodeURIComponent( )}&details=${encodeURIComponent(
this.Appointment.Body this.appointment.body
)}&location=${encodeURIComponent(this.Appointment.Location)}&sf=true&output=xml`; )}&location=${encodeURIComponent(this.appointment.location)}&sf=true&output=xml`;
} }
if (type === calendarOptions.YAHOO) { if (type === calendarOptions.YAHOO) {
URL = `${applicationConfig.YAHOO_CALENDAR}&TITLE=${encodeURIComponent( URL = `${applicationConfig.YAHOO_CALENDAR}&TITLE=${encodeURIComponent(
this.Appointment.Subject this.appointment.subject
)}&DESC=${encodeURIComponent(this.Appointment.Body)}&ST=${encodeURIComponent( )}&DESC=${encodeURIComponent(this.appointment.body)}&ST=${encodeURIComponent(
getDateFormat(this.Appointment.StartDate, dateFormat) getDateFormat(this.appointment.startDate, dateFormat)
)}&DUR=${this.Appointment.Duration}&in_loc=${encodeURIComponent( )}&DUR=${this.appointment.duration}&in_loc=${encodeURIComponent(
this.Appointment.Location this.appointment.location
)}`; )}`;
} }
return { return {
url: URL, url: URL,
name: type, name: type,
// eslint-disable-next-line import/no-dynamic-require, global-require // eslint-disable-next-line import/no-dynamic-require, global-require
icon: require(`@/assets/img/icons/${type}.svg`) // icon: require(`@/assets/img/icons/${type}.svg`)
}; };
}, },
getAppointment() { getAppointment() {
@ -283,7 +287,7 @@ export default {
} }
}; };
</script> </script>
<style scoped> <!-- <style scoped>
.add-to-calendar-text { .add-to-calendar-text {
margin: 0 0 0 7px; margin: 0 0 0 7px;
color: #1574a1; color: #1574a1;
@ -310,4 +314,4 @@ export default {
display: inline; display: inline;
width: 20px; width: 20px;
} }
</style> </style> -->

4
src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue
View file

@ -27,7 +27,7 @@ export default {
mixins: [inputButtonWrapperMixin] mixins: [inputButtonWrapperMixin]
}; };
</script> </script>
<style lang="scss" scoped> <!-- <style lang="scss" scoped>
.list-button { .list-button {
outline: none; outline: none;
input[type="radio"], input[type="radio"],
@ -78,4 +78,4 @@ export default {
.position-relative { .position-relative {
position: relative; position: relative;
} }
</style> </style> -->

4
src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-question.vue
View file

@ -164,7 +164,7 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <!-- <style lang="scss" scoped>
.calendar-modal.modal.modal-component { .calendar-modal.modal.modal-component {
> .modal-dialog > .modal-content { > .modal-dialog > .modal-content {
margin-top: 24px; margin-top: 24px;
@ -174,4 +174,4 @@ export default {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
} }
</style> </style> -->

19
src/layouts/order-confirmation/order-confirmation.vue
View file

@ -25,6 +25,19 @@
<p>{{ appointmentDateFormatted }}</p> <p>{{ appointmentDateFormatted }}</p>
<p>{{ appointmentTimeFormatted }}</p> <p>{{ appointmentTimeFormatted }}</p>
</div> </div>
<!-- <addToCalendar
mobileWidgetName="addToCalendar_Mobile"
inShopWidgetName="addToCalendar_InShop"
dropOffWidgetName="addToCalendar_DropOff"
overnightDropOffWidgetName="addToCalendar_OvernightDropOff"
allDayDropOffWidgetName="addToCalendar_AllDayDropOff"
sameDayDropOffWidgetName="addToCalendar_SameDayDropOff"
:serviceLocationFullAddress="serviceLocationFullAddress"
:providerFullAddress="providerFullAddress"
:appointmentType="appointmentType"
:scheduleDate="appointmentDate"
:scheduleStartTime="appointmentStartTime"
:scheduleEndTime="appointmentEndTime" /> -->
<div <div
class="appointment-text text-center lh-base" class="appointment-text text-center lh-base"
v-html="appointmentWordingText"> v-html="appointmentWordingText">
@ -52,6 +65,7 @@
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue'; import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue';
// Supporting files // Supporting files
import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper'; import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from '@/helpers/layout-helper';
@ -69,6 +83,7 @@ export default {
siteHeader, siteHeader,
vehicleBanner, vehicleBanner,
siteFooter, siteFooter,
addToCalendar,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form Form
}, },
@ -274,7 +289,7 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <!-- <style lang="scss" scoped>
$page-side-padding: 1.5rem; $page-side-padding: 1.5rem;
.page-container-grouped-styles { .page-container-grouped-styles {
@ -315,4 +330,4 @@ $page-side-padding: 1.5rem;
color: $black; color: $black;
} }
} }
</style> </style> -->