import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import {
Paper, Typography, TableContainer, Table, TableHead,
TableRow, TableCell, TableSortLabel, TableBody,
TablePagination, Box, Button
} from "@mui/material";
import currencies from "./currencies.json";
import { SnackbarNotice, ConfirmationDialog } from "./functions";
import {
handleRequestSort, handleChangePage, handleChangeRowsPerPage
} from "./functions";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
class AppointmentApp extends Component {
state = {
headCells: [
{ id: "appointment_id", label: "ID", priority: 0 },
{ id: "appointment_date", label: "Appointment Date", priority: 5 },
{ id: "appointment_staff", label: "Staff", priority: 15 },
{ id: "appointment_service", label: "Service", priority: 20 },
{ id: "appointment_price", label: "Payment", priority: 25 },
{ id: "appointment_duration", label: "Duration", priority: 30 },
{ id: "appointment_created", label: "Created At", priority: 35 },
{ id: "appointment_status", label: "Status", priority: 40 },
],
title: "Appointment(s)",
currency: "USD",
TableData: [],
orderBy: "id",
order: "desc",
totalCount: 0,
pageSize: 10,
page: 0,
timeFormat: "12-hour",
snackbarOpen: false,
snackbarMessage: "",
snackbarType: "success",
confirmationDialogOpen: false,
confirmationLoading: false,
AppointmentStatus: null,
}
componentDidMount() {
dayjs.extend(utc);
dayjs.extend(timezone);
this.fetchAppointmentData();
const title = window.wp.hooks.applyFilters("bookify_frontend_appointment_title", "Appointment(s)");
this.setState({
title: title,
});
const ZoomMeeting = window.ZoomMeeting;
if ( ZoomMeeting ) {
this.state.headCells.push(
{ id: "zoom_meeting", label: "Zoom Meeting", priority: 37 },
);
}
}
fetchAppointmentData = (page = 1, pageSized = 10, changePageSize = false) => {
const { pageSize } = this.state;
let perPageSized = pageSize;
if ( changePageSize ) {
perPageSized = pageSized;
}
fetch(`${wpbAptApp.root}bookify/frontend/v1/get-appointments?page=${page}&pageSize=${perPageSized}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": wpbAptApp.nonce
}
})
.then((response) => response.json())
.then((data) => {
this.setState({
TableData: data.data,
totalCount: data.total,
currency: data.currency,
timeFormat: data.timeFormat,
});
})
.catch(error => {
console.error("Error:", error);
})
};
handleCancelAppointment = ( event, appointmentId ) => {
this.setState({ confirmationDialogOpen: true, AppointmentStatus: appointmentId });
}
confirmationAppointmentDelete = () => {
const { AppointmentStatus } = this.state;
this.setState({ confirmationLoading: true });
const dataToSend = {};
dataToSend.appointment_id = AppointmentStatus;
fetch(`${wpbAptApp.root}bookify/frontend/v1/appointment-status`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": wpbAptApp.nonce
},
body: JSON.stringify(dataToSend)
})
.then(response => response.json())
.then((response) => {
if ( response.success ) {
this.setState({
confirmationDialogOpen: false,
confirmationLoading: false,
AppointmentStatus: null,
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "success",
});
this.fetchAppointmentData();
} else {
this.setState({
confirmationDialogOpen: false,
confirmationLoading: false,
AppointmentStatus: null,
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "error",
});
}
})
.catch(error => {
console.error("Error deleting category:", error);
this.setState({ confirmationLoading: false });
})
}
convertSlotToTimezone = (slot, UserTimezone) => {
const { timeFormat } = this.state;
const timeFormated = timeFormat == "12-hour" ? "hh:mm A" : "HH:mm";
const [start, end] = slot.split(" - ");
const formatedStartTime = dayjs(`1970-01-01 ${start}`).format("HH:mm");
const formatedEndTime = dayjs(`1970-01-01 ${end}`).format("HH:mm");
const startTime = dayjs.tz(`1970-01-01 ${formatedStartTime}`, wpbAptApp.wpTimezone).tz(UserTimezone).format(timeFormated);
const endTime = dayjs.tz(`1970-01-01 ${formatedEndTime}`, wpbAptApp.wpTimezone).tz(UserTimezone).format(timeFormated);
return `${startTime} - ${endTime}`;
};
handleZoomJoinLink = (zoomLinks) => {
window.open( zoomLinks.join_url, "_blank" );
}
render() {
const { headCells, title, TableData, currency, orderBy, order, totalCount, pageSize, page, snackbarOpen, snackbarMessage, snackbarType, confirmationDialogOpen, confirmationLoading } = this.state;
const matchedCurrency = Object.values(currencies).find(eachCurrency => eachCurrency.code === currency);
return(
<>
{title}
{headCells.sort((a, b) => a.priority - b.priority).map((headCell) => (
handleRequestSort(this.state, this.setState.bind(this), headCell.id)}
>
{headCell.label}
))}
{TableData.length === 0 ? (
{__("No records to display", "bookify")}
) : (
TableData.map((row) => {
return (
{headCells.sort((a, b) => a.priority - b.priority).map((headCell) => (
{headCell.id === "appointment_date" ? (
{row[headCell.id]}
) : headCell.id === "appointment_staff" ? (
{row["appointment_staff_name"]}
{row["appointment_staff_email"]}
) : headCell.id === "appointment_service" ? (
{row["service_name"] ? row["service_name"] : " - "}
) : headCell.id === "appointment_price" ? (
{matchedCurrency ? `${matchedCurrency.symbol_native} ${row[headCell.id]}` : row[headCell.id]}
) : headCell.id === "appointment_duration" ? (
{(() => {
const UserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
return JSON.parse(row[headCell.id])
.map(slot => this.convertSlotToTimezone(slot, UserTimezone))
.join(" | ");
})()}
) : headCell.id === "zoom_meeting" ? (
row.zoom_links ? (
) : "-"
) : headCell.id === "appointment_status" ? (
row.appointment_status === "Pending" ? (
) : row.appointment_status === "Confirmed" ? (
{row.appointment_status}
) : row.appointment_status === "Completed" ? (
{row.appointment_status}
) : row.appointment_status === "Delayed" ? (
{row.appointment_status}
) : row.appointment_status === "On Hold" ? (
) : (
{row.appointment_status}
)
) : (
row[headCell.id]
)}
))}
);
})
)}
handleChangePage(this.state, this.setState.bind(this), this.fetchAppointmentData, newPage)}
onRowsPerPageChange={(event) => handleChangeRowsPerPage(this.state, this.setState.bind(this), this.fetchAppointmentData, event)}
/>
this.setState({ confirmationDialogOpen: false, AppointmentStatus: null })}
onConfirm={this.confirmationAppointmentDelete}
loading={confirmationLoading}
/>
)
}
}
export default AppointmentApp;