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

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

@ -25,6 +25,19 @@
<p>{{ appointmentDateFormatted }}</p>
<p>{{ appointmentTimeFormatted }}</p>
</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
class="appointment-text text-center lh-base"
v-html="appointmentWordingText">
@ -52,6 +65,7 @@
import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.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
import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
@ -69,6 +83,7 @@ export default {
siteHeader,
vehicleBanner,
siteFooter,
addToCalendar,
// eslint-disable-next-line vue/no-reserved-component-names
Form
},
@ -274,7 +289,7 @@ export default {
}
};
</script>
<style lang="scss" scoped>
<!-- <style lang="scss" scoped>
$page-side-padding: 1.5rem;
.page-container-grouped-styles {
@ -315,4 +330,4 @@ $page-side-padding: 1.5rem;
color: $black;
}
}
</style>
</style> -->