433 lines
14 KiB
Vue
433 lines
14 KiB
Vue
<script setup>
|
|
import StartOverPupup from "@/views/pages/home/StartOverPupup.vue";
|
|
import axios from "@axios";
|
|
import moment from "moment";
|
|
import ProviderInfo from "../layouts/components/ProviderInfo.vue";
|
|
import CustomNav from '../layouts/components/navbar-custom.vue';
|
|
import { nextTick } from 'vue';
|
|
|
|
import { onBeforeMount, onMounted } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import { useStore } from "vuex";
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const isLoadingVisible = ref(false);
|
|
const loginuser = ref("");
|
|
const email = ref("");
|
|
const phoneNumber = ref("");
|
|
const address = ref("");
|
|
const city = ref("");
|
|
const state = ref("");
|
|
const zip_code = ref("");
|
|
const country = ref("");
|
|
const fullAddress = ref("");
|
|
const dob = ref("");
|
|
const gender = ref("");
|
|
const height = ref("");
|
|
const weight = ref("");
|
|
const scheduleDate = ref("");
|
|
const scheduleTime = ref("");
|
|
const isTimeSlot = ref("");
|
|
const timeZone = ref("");
|
|
const timeDifference = ref();
|
|
const timeUntilMeeting = ref("");
|
|
const seetingPlanLogo = ref();
|
|
const patient_id = localStorage.getItem("patient_id");
|
|
const access_token = localStorage.getItem("access_token");
|
|
const appointmentDetails = JSON.parse(
|
|
localStorage.getItem("patient_appointment_details")
|
|
);
|
|
onBeforeMount(async () => {
|
|
store.dispatch("updateIsLoading", true);
|
|
store.dispatch("updateCurrentPage", "review-appointment");
|
|
localStorage.setItem("currentPage", "review-appointment");
|
|
await store.dispatch("getPatientInfo");
|
|
await store.dispatch("getPlanInfo");
|
|
// await store.dispatch('getPatientAppointment')
|
|
loginuser.value =
|
|
store.getters.getPatient.first_name +
|
|
" " +
|
|
store.getters.getPatient.last_name;
|
|
email.value = store.getters.getPatient.email;
|
|
phoneNumber.value = store.getters.getPatient.phone_no;
|
|
address.value = store.getters.getPatient.address;
|
|
city.value = store.getters.getPatient.city;
|
|
state.value = store.getters.getPatient.state;
|
|
zip_code.value = store.getters.getPatient.zip_code;
|
|
country.value = store.getters.getPatient.country;
|
|
fullAddress.value =
|
|
(address.value ? address.value + ", " : "") +
|
|
(city.value ? city.value + ", " : "") +
|
|
(state.value ? state.value + " " : "") +
|
|
(zip_code.value ? zip_code.value + ", " : "") +
|
|
(country.value ? country.value : "");
|
|
// dob.value = store.getters.getPatient.dob
|
|
gender.value = store.getters.getPatient.gender;
|
|
weight.value = store.getters.getPatient.weight;
|
|
height.value = store.getters.getPatient.height;
|
|
|
|
timeZone.value = appointmentDetails.timezone;
|
|
isTimeSlot.value = appointmentDetails.appointment_time;
|
|
// timeZone.value = store.getters.getBookedAppointment.timezone
|
|
// isTimeSlot.value = store.getters.getBookedAppointment.appointment_time
|
|
|
|
const time = moment(isTimeSlot.value, "HH:mm:ss");
|
|
scheduleTime.value = time.format("HH:mm a");
|
|
timeDifference.value = store.getters.getTimeDiff;
|
|
console.log("time", scheduleTime.value);
|
|
|
|
let dateString = store.getters.getPatient.dob;
|
|
let parts = dateString.split("-");
|
|
dob.value = `${parts[1]}-${parts[2]}-${parts[0]}`;
|
|
|
|
const appointment_date = new Date(appointmentDetails.appointment_date);
|
|
const formattedDate = new Intl.DateTimeFormat("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
}).format(appointment_date);
|
|
console.log("formattedDate", formattedDate);
|
|
scheduleDate.value = formattedDate;
|
|
store.dispatch("updateIsLoading", false);
|
|
});
|
|
onMounted(async () => {
|
|
let setting = await axios.post("/api/settings", {});
|
|
console.log(setting.data);
|
|
seetingPlanLogo.value = "/assets/logo/" + setting.data.logo;
|
|
});
|
|
const backFun = () => {
|
|
store.dispatch("updateIsLoading", true);
|
|
router.replace(
|
|
route.query.to && route.query.to != "/additional-information"
|
|
? String(route.query.to)
|
|
: "/book-appointment"
|
|
);
|
|
};
|
|
const convertTimeBasedOnContext = (time12hr, time24hr) => {
|
|
// Extracting the AM/PM part from the 12-hour format
|
|
const period = time12hr.slice(-2); // 'AM' or 'PM'
|
|
|
|
// Extracting the hour part from both time strings
|
|
let hour12 = parseInt(time12hr.slice(0, 2), 10);
|
|
let hour24 = parseInt(time24hr.slice(0, 2), 10);
|
|
|
|
// Adjusting the 24-hour time based on the 12-hour format's AM/PM
|
|
if (period === "PM" && hour12 !== 12) {
|
|
// If it's PM and not 12 PM, add 12 to match 24-hour format
|
|
hour24 = (hour24 % 12) + 12;
|
|
} else if (period === "AM" && hour12 === 12) {
|
|
// If it's 12 AM, it should be 00 in 24-hour format
|
|
hour24 = 0;
|
|
}
|
|
|
|
// Construct new 24-hour time string
|
|
let newTime24hr = hour24.toString().padStart(2, "0") + time24hr.slice(2);
|
|
|
|
return newTime24hr;
|
|
};
|
|
const confirmFun = async () => {
|
|
store.dispatch("updateIsLoading", true);
|
|
|
|
await store.dispatch("savePatientAppointment", {
|
|
patient_id: appointmentDetails.patient_id,
|
|
patient_name: appointmentDetails.patient_name,
|
|
patient_email: appointmentDetails.patient_email,
|
|
appointment_date: appointmentDetails.appointment_date,
|
|
appointment_time: convertTimeBasedOnContext(
|
|
appointmentDetails.timeSlotString,
|
|
appointmentDetails.appointment_time
|
|
),
|
|
timezone: appointmentDetails.timezone,
|
|
timeSlotString: appointmentDetails.timeSlotString,
|
|
});
|
|
await store.dispatch("savePatientCalendlyAppointment", {
|
|
patient_id: appointmentDetails.patient_id,
|
|
patient_name: appointmentDetails.patient_name,
|
|
patient_email: appointmentDetails.patient_email,
|
|
appointment_date: appointmentDetails.appointment_date,
|
|
appointment_time: convertTimeBasedOnContext(
|
|
appointmentDetails.timeSlotString,
|
|
appointmentDetails.appointment_time
|
|
),
|
|
timezone: appointmentDetails.timezone,
|
|
timeSlotString: appointmentDetails.timeSlotString,
|
|
url:appointmentDetails.url
|
|
});
|
|
|
|
if (!store.getters.getErrorMessage) {
|
|
if (localStorage.getItem("patient_appointment_id")) {
|
|
router.replace(
|
|
route.query.to && route.query.to != "/review-appointment"
|
|
? String(route.query.to)
|
|
: "/additional-information"
|
|
);
|
|
}
|
|
}
|
|
|
|
store.dispatch("updateIsLoading", false);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<StartOverPupup
|
|
:showPopup="store.getters.getShowStartOverPupup"
|
|
></StartOverPupup>
|
|
<VDialog
|
|
v-model="store.getters.getIsLoading"
|
|
width="110"
|
|
height="150"
|
|
color="primary"
|
|
>
|
|
<VCardText class="" style="color: white !important">
|
|
<div class="demo-space-x">
|
|
<VProgressCircular :size="40" color="primary" indeterminate />
|
|
</div>
|
|
</VCardText>
|
|
</VDialog>
|
|
<VSnackbar
|
|
v-model="store.getters.getIsTonalSnackbarVisible"
|
|
:timeout="5000"
|
|
location="top end"
|
|
variant="flat"
|
|
color="red"
|
|
>
|
|
{{ store.getters.getErrorMessage }}
|
|
</VSnackbar>
|
|
<!-- <v-app> -->
|
|
<!-- <v-main> -->
|
|
<VRow><CustomNav :logo='seetingPlanLogo'></CustomNav></VRow>
|
|
<VRow
|
|
style="min-height: 100dvh; margin: 0px;"
|
|
:style="isMobile ? { marginTop: '90px' } : { marginTop: '60px' }"
|
|
>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
class="bg-custom col-order-1"
|
|
:class="
|
|
isMobile
|
|
? ''
|
|
: 'auth-wrapper d-flex align-center justify-center pa-4'
|
|
"
|
|
>
|
|
<ProviderInfo></ProviderInfo>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
class="bg-custom-color col-order-2"
|
|
:class="
|
|
isMobile
|
|
? ''
|
|
: 'auth-wrapper d-flex align-center justify-center pa-4'
|
|
"
|
|
>
|
|
<VCard
|
|
class="auth-card pa-2 rounded-5"
|
|
style=""
|
|
:class="isMobile ? '' : 'card-wid'"
|
|
>
|
|
<VRow>
|
|
<VCol cols="12" lg="12" md="12">
|
|
<router-link
|
|
to="/"
|
|
class="text-center mb-2 mt-2"
|
|
style="
|
|
width: 100%;
|
|
position: relative;
|
|
display: block;
|
|
padding-top: 20px;
|
|
"
|
|
>
|
|
<span class="text-center">
|
|
<VImg
|
|
:src="seetingPlanLogo"
|
|
width="250"
|
|
height="50"
|
|
class="logo-img"
|
|
/>
|
|
</span>
|
|
</router-link>
|
|
</VCol>
|
|
</VRow>
|
|
<div class="text-left">
|
|
<h5 class="text-h5 pricing-title mb-0 mt-4" style="padding-left: 10px;">
|
|
Confirm Appointment
|
|
</h5>
|
|
<div class="v-col v-col-12 w-100 pb-0">
|
|
<p class="mb-0">
|
|
Your appointment with <b>Dr. Jonathan Hines</b> has been successfully scheduled for {{ scheduleDate }} at
|
|
{{ appointmentDetails.timeSlotString }}. If you have any questions or need further assistance, please don't hesitate to reach out.
|
|
|
|
</p>
|
|
<p class="mb-0">
|
|
We will email you telehealth instructions. This is
|
|
your appointment to confirm it.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- <VCol class="pt-0 pb-0">
|
|
<VCardText class="rounded-0 pt-0 pb-0" style="">
|
|
<v-list class="align-self-center">
|
|
<v-list-item>
|
|
<template v-slot:prepend>
|
|
<v-icon icon="tabler-users"></v-icon>
|
|
</template>
|
|
<v-list-item-title class="text-wrap">
|
|
{{ loginuser }}</v-list-item-title
|
|
>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<template v-slot:prepend>
|
|
<v-icon icon="mdi-calendar"></v-icon>
|
|
</template>
|
|
<v-list-item-title class="text-wrap"
|
|
>{{ scheduleDate }}
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<template v-slot:prepend>
|
|
<v-icon icon="mdi-clock"></v-icon>
|
|
</template>
|
|
<v-list-item-title class="text-wrap"
|
|
>{{ appointmentDetails.timeSlotString }}
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<template v-slot:prepend>
|
|
<v-icon icon="mdi-world"></v-icon>
|
|
</template>
|
|
<v-list-item-title class="text-wrap"
|
|
>{{ timeZone }}
|
|
</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</VCardText>
|
|
</VCol> -->
|
|
<VCol cols="12 pt-4 pb-4" class="text-center">
|
|
<!-- <RouterLink to="/book-appointment"> -->
|
|
<VBtn
|
|
@click="confirmFun"
|
|
class="text-capitalize mb-2 text-white"
|
|
block
|
|
color="rgb(var(--v-theme-yellow-theme-button))"
|
|
>Confirm</VBtn
|
|
>
|
|
<VBtn
|
|
@click="backFun"
|
|
class="text-capitalize"
|
|
color="grey"
|
|
block
|
|
>Back</VBtn
|
|
>
|
|
<!-- </RouterLink> -->
|
|
<!-- <RouterLink to="/additional-information"> -->
|
|
|
|
<!-- </RouterLink> -->
|
|
</VCol>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
<!-- </v-main> -->
|
|
<!-- </v-app> -->
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@use "@core/scss/template/pages/page-auth.scss";
|
|
|
|
.bg-custom {
|
|
background: #efefed;
|
|
}
|
|
|
|
.bg-custom-color {
|
|
background: #d8ebf6;
|
|
}
|
|
|
|
.total-font {
|
|
font-size: 20px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.v-list-item--density-default.v-list-item--one-line {
|
|
min-height: 30px !important;
|
|
}
|
|
|
|
.logo-img {
|
|
display: block;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
@media only screen and (max-width: 768px) {
|
|
.card-wid {
|
|
max-width: 600px !important;
|
|
min-width: auto !important;
|
|
}
|
|
|
|
.col-order-1 {
|
|
order: 2;
|
|
}
|
|
|
|
.col-order-2 {
|
|
order: 1;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 769px) {
|
|
.col-order-1 {
|
|
order: 1;
|
|
}
|
|
|
|
.col-order-2 {
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
.total-font {
|
|
font-size: 20px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.bg-custom {
|
|
background: #efefed;
|
|
}
|
|
|
|
.bg-custom-color {
|
|
background: #d8ebf6;
|
|
}
|
|
|
|
.bg-white bg-change-bk .current-plan {
|
|
border: 2px solid rgb(var(--v-theme-primary));
|
|
}
|
|
|
|
.cut-text {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-decoration: line-through;
|
|
text-decoration-color: red;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
.plan-card {
|
|
margin: 0rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.card-wid {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.layout-wrapper {
|
|
justify-content: center;
|
|
}
|
|
|
|
.error-message {
|
|
color: #ff2f2f;
|
|
font-size: 15px;
|
|
}
|
|
</style>
|