import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import {
Dialog, DialogTitle, DialogContent, DialogActions, Box,
Divider, IconButton, Grid, FormControl, Typography,
Chip, Select, MenuItem, TextField, Button
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";
import {SnackbarNotice} from "../../functions";
import LoadingButton from "@mui/lab/LoadingButton";
class AddAppointment extends Component {
state = {
services: [],
staffs: [],
daysOpen: [],
specialDates: [],
holidays: [],
slots: [],
servicePrice: "",
statuses: [
"Pending",
"Confirmed",
"Completed",
"Delayed",
"On Hold",
"Cancelled"
],
addFormData: {
appointmentStaff: "",
appointmentLocation: "",
appointmentService: "",
appointmentDate: null,
appointmentDuration: [],
appointmentCustomer: "",
appointmentStatus: "",
appointmentNote: "",
},
errors: {
appointmentLocation: false,
appointmentService: false,
appointmentStaff: false,
appointmentDate: false,
appointmentDuration: false,
appointmentStatus: false,
appointmentCustomer: false,
},
snackbarOpen: false,
snackbarMessage: "",
snackbarType: "",
loading: false,
theme: createTheme({
typography: {
wpbkThemeLabel: {
color: "#042626",
fontSize: "15px",
fontWeight: "500",
paddingBottom: "5px",
}
},
components: {
MuiButton: {
variants: [
{
props: { variant: "wpbkThemeModalBtn" },
style: {
borderColor: "none",
backgroundColor: "#036666",
color: "#FFFFFF",
textTransform: "capitalize",
height: "40px",
"&:hover": {
backgroundColor: "#025151",
color: "#FFFFFF"
},
"&.Mui-disabled": {
color: "#FFFFFF",
opacity: 0.7,
},
"& .MuiLoadingButton-loadingIndicator": {
color: "#FFFFFF",
}
},
},
{
props: { variant: "wpbkCancelbtn"},
style: {
textTransform: "capitalize",
height: "40px",
color: "#036666",
"&:hover": {
backgroundColor: "#DDEEEE",
},
}
}
]
},
MuiMenuItem: {
styleOverrides: {
root: {
marginLeft: "3px",
marginRight: "3px",
paddingLeft: "10px",
paddingRight: "10px",
borderRadius: "8px"
},
},
},
}
})
};
handleClose = () => {
this.setState({
addFormData: {
appointmentLocation: "",
appointmentService: "",
appointmentStaff: "",
appointmentDate: null,
appointmentDuration: [],
appointmentCustomer: "",
appointmentNote: "",
}
}, () => {
this.props.onClose && this.props.onClose();
});
};
handleLocationChange = (event) => {
const { value } = event.target;
const dataToSend = {};
dataToSend.location_id = value;
fetch(`${wpbAdmin.root}bookify/v1/services-by-location`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": wpApiSettings.nonce
},
body: JSON.stringify(dataToSend)
})
.then(response => response.json())
.then(data => {
this.setState(prevState => ({
addFormData: {
...prevState.formData,
appointmentLocation: value,
appointmentService: "",
appointmentStaff: "",
appointmentDate: null,
appointmentDuration: [],
appointmentCustomer: "",
},
errors: { ...prevState.errors, appointmentLocation: false },
services: data.services,
staffs: [],
slots: [],
daysOpen: [],
specialDate: [],
holidays: []
}));
})
.catch(error => {
console.error("Error:", error);
})
}
handleServiceChange = (event) => {
const { value } = event.target;
const dataToSend = {};
dataToSend.service_id = value;
fetch(`${wpbAdmin.root}bookify/v1/staffs-by-service`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": wpApiSettings.nonce
},
body: JSON.stringify(dataToSend)
})
.then(response => response.json())
.then(data => {
this.setState(prevState => ({
addFormData: {
...prevState.addFormData,
appointmentService: value,
appointmentDuration: [],
appointmentStaff: "",
appointmentDate: null,
},
errors: { ...prevState.errors, appointmentService: false },
staffs: data.staffs,
slots: [],
daysOpen: [],
specialDate: [],
holidays: []
}));
})
.catch(error => {
console.error("Error:", error);
})
}
handleStaffChange = ( event ) => {
const { value } = event.target;
const { staffs } = this.state;
const selectedStaff = staffs.find(staff => staff.staff_id === value);
const priceByStaff = selectedStaff.service_price;
const dataToSend = {};
dataToSend.staff_id = value;
fetch(`${wpbAdmin.root}bookify/v1/dates-by-staff`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": wpApiSettings.nonce
},
body: JSON.stringify(dataToSend)
})
.then(response => response.json())
.then(data => {
this.setState(prevState => ({
addFormData: {
...prevState.addFormData,
appointmentStaff: value,
appointmentDate: null,
appointmentDuration: [],
},
errors: { ...prevState.errors, appointmentStaff: false },
daysOpen: data.dates,
specialDate: data.special,
holidays: data.holidays,
servicePrice: priceByStaff
}));
})
.catch(error => {
console.error("Error:", error);
})
}
handleDateChange = (date) => {
const weekDay = date.day();
const selectedDate = dayjs(date).format("YYYY-MM-DD");
const { addFormData } = this.state;
const { daysOpen, specialDate } = this.state;
let timeSlots = [];
let isSpecialDate = false;
for (let key in specialDate) {
if (specialDate[key].date === selectedDate) {
timeSlots = specialDate[key].slots;
isSpecialDate = true;
break;
}
}
if ( ! isSpecialDate ) {
for (let key in daysOpen) {
if (daysOpen[weekDay]) {
timeSlots = daysOpen[weekDay].slots;
break;
}
}
}
const dataToSend = {};
dataToSend.date = selectedDate;
dataToSend.slots = JSON.stringify(timeSlots);
dataToSend.staff_id = addFormData.appointmentStaff;
fetch(`${wpbAdmin.root}bookify/v1/available-slots`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": wpApiSettings.nonce
},
body: JSON.stringify(dataToSend)
})
.then(response => response.json())
.then(data => {
this.setState(prevState => ({
addFormData: {
...prevState.addFormData,
appointmentDate: date,
appointmentDuration: []
},
errors: { ...prevState.errors, appointmentDate: false },
slots: data.available_slots,
}));
})
.catch(error => {
console.error("Error:", error);
})
};
shouldDisableDate = (date) => {
const { daysOpen, holidays, specialDate } = this.state;
const day = date.day();
const specialDates = Object.values(specialDate).map(entry => entry.date);
if (specialDates.includes(date.format("YYYY-MM-DD"))) {
return false;
}
if (daysOpen.length <= 0) {
return true;
}
const eachDay = Object.keys(daysOpen).map(day => parseInt(day));
const isDayOpen = eachDay.includes(day);
if (holidays.length > 0) {
const holidayObjects = JSON.parse(holidays);
const holidayDates = Object.values(holidayObjects).map(holiday => holiday.dateFormated);
const isHoliday = holidayDates.includes(date.format("YYYY-MM-DD"));
return !isDayOpen || isHoliday;
}
return !isDayOpen;
}
handleInputChange = (event) => {
const { name, value } = event.target;
this.setState(prevState => ({
addFormData: {
...prevState.addFormData,
[name]: value,
},
errors: { ...prevState.errors, [name]: false }
}));
};
AddAppointmentDetails = () => {
const { addFormData, servicePrice } = this.state;
const { fetchCalendarData } = this.props;
const ProLocation = window.ProLocation;
const errors = {
appointmentLocation: addFormData.appointmentLocation === "" || !addFormData.appointmentLocation,
appointmentService: addFormData.appointmentService === "" || !addFormData.appointmentService,
appointmentStaff: addFormData.appointmentStaff === "" || !addFormData.appointmentStaff,
appointmentDate: !addFormData.appointmentDate,
appointmentDuration: addFormData.appointmentDuration.length === 0 || !addFormData.appointmentDuration,
appointmentStatus: !addFormData.appointmentStatus,
appointmentCustomer: addFormData.appointmentCustomer === "" || !addFormData.appointmentCustomer,
};
this.setState({ errors });
if ( errors.appointmentStaff || errors.appointmentService || errors.appointmentDate || errors.appointmentDuration || errors.appointmentCustomer || errors.appointmentStatus ) {
return;
}
if ( ProLocation && errors.appointmentLocation ) {
return;
}
const totalPrice = servicePrice * ( typeof addFormData.appointmentDuration == "string" ? 1 : addFormData.appointmentDuration.length );
this.setState({ loading: true });
const dataToSend = {};
if ( ProLocation ) {
dataToSend.appointment_location = addFormData.appointmentLocation;
}
dataToSend.appointment_service = addFormData.appointmentService;
dataToSend.appointment_staff = addFormData.appointmentStaff;
dataToSend.appointment_date = addFormData.appointmentDate ? addFormData.appointmentDate.format( "YYYY-MM-DD" ) : "";
dataToSend.appointment_duration = Array.isArray(addFormData.appointmentDuration) ? addFormData.appointmentDuration.join(',') : addFormData.appointmentDuration;
dataToSend.appointment_price = totalPrice;
dataToSend.customer_id = addFormData.appointmentCustomer;
dataToSend.appointment_status = addFormData.appointmentStatus;
dataToSend.note = addFormData.appointmentNote;
fetch(`${wpbAdmin.root}bookify/v1/add-appointment`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": wpApiSettings.nonce
},
body: JSON.stringify(dataToSend)
})
.then(response => response.json())
.then(response => {
if ( response.success ) {
this.setState({
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "success",
loading: false,
});
this.handleClose();
fetchCalendarData();
} else {
this.setState({
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "error",
loading: false,
});
}
})
.catch(error => {
console.error("Error:", error);
this.setState({ loading: false });
})
};
render() {
const { open, locations, customers, dateFormat, priorToggle, priorTime, defaultStatus } = this.props;
const { theme, addFormData, errors, staffs, slots, snackbarOpen, snackbarMessage, snackbarType, statuses, loading } = this.state;
const ProLocation = window.ProLocation;
const allServices = ProLocation ? this.state.services : this.props.services;
const ProMultipleBooking = window.ProMultipleBooking;
const appointmentStaffData = staffs.find(staff => staff.staff_id === addFormData.appointmentStaff);
const staffMultipleBooking = appointmentStaffData ? JSON.parse( appointmentStaffData.mulitple_booking ) : false;
addFormData.appointmentStatus = addFormData.appointmentStatus ? addFormData.appointmentStatus : defaultStatus;
let maxDate = null;
if ( priorToggle == "Enable" ) {
maxDate = dayjs().add(parseInt(priorTime), "month");
}
return (
<>
);
}
}
export default AddAppointment;