import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import {
Paper, Typography, TableContainer, Table, TableHead,
TableRow, TableCell, TableSortLabel, TableBody,
TablePagination, Avatar, IconButton, Box, Skeleton, Button
} from "@mui/material";
import ModeIcon from "@mui/icons-material/Mode";
import DeleteIcon from "@mui/icons-material/Delete";
import {
handleRequestSort, handleChangePage, handleChangeRowsPerPage
} from "../../functions";
import { SnackbarNotice, ConfirmationDialog } from "../../functions";
import currencies from "../../currencies.json";
import EditAppointment from "./EditAppointment";
import dayjs from "dayjs";
class AppointmentTable extends Component {
state = {
snackbarOpen: false,
snackbarMessage: "",
snackbarType: "success",
dialogOpen: false,
selectedAppointment: null,
confirmationDialogOpen: false,
confirmationLoading: false,
AppointmentIdToDelete: null,
}
handleEditDialogOpen = (appointment) => {
this.setState({ dialogOpen: true, selectedAppointment: appointment });
};
handleDeleteDialogClose = () => {
this.setState({ dialogOpen: false, selectedAppointment: null });
};
componentDidMount() {
let { headCells } = this.props;
const ZoomMeeting = window.ZoomMeeting;
if ( ZoomMeeting ) {
headCells.push(
{ id: "zoom_meeting", label: "Zoom Meeting", priority: 37 },
);
}
headCells = window.wp.hooks.applyFilters("bookify_appointment_table_add_columns", headCells);
this.props.setState({ headCells });
}
handleAppointmentDelete = (AppointmentId) => {
this.setState({ confirmationDialogOpen: true, AppointmentIdToDelete: AppointmentId });
};
confirmationAppointmentDelete = () => {
const { AppointmentIdToDelete } = this.state;
this.setState({ confirmationLoading: true });
const dataToSend = {};
dataToSend.appointment_id = AppointmentIdToDelete;
fetch(`${wpbAdmin.root}bookify/v1/delete-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({
confirmationDialogOpen: false,
AppointmentIdToDelete: null,
confirmationLoading: false,
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "success",
});
this.props.fetchAppointmentData();
} else {
this.setState({
confirmationLoading: false,
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "error",
});
}
})
.catch(error => {
console.error("Error deleting category:", error);
this.setState({ confirmationLoading: false });
})
}
handleZoomStartLink = (zoomLinks) => {
window.open( zoomLinks.start_url, "_blank" );
}
handleZoomJoinLink = (zoomLinks) => {
window.open( zoomLinks.join_url, "_blank" );
}
render() {
const { dialogOpen, selectedAppointment, snackbarOpen, snackbarMessage, snackbarType, confirmationDialogOpen, confirmationLoading } = this.state;
const { state, setState, headCells, TableData, totalCount, pageSize, page, orderBy, order, currency, locations, services, customers, priorToggle, priorTime, dateFormat, timeFormat, isStaff, dataLoading } = this.props;
const matchedCurrency = Object.values(currencies).find(eachCurrency => eachCurrency.code === currency);
const timeFormated = timeFormat == "12-hour" ? "hh:mm A" : "HH:mm";
return (
<>
{headCells.sort((a, b) => a.priority - b.priority).map((headCell) => (
{headCell.id === "action" ? (
{headCell.label}
) : (
handleRequestSort(state, setState, headCell.id)}
>
{headCell.label}
)}
))}
{dataLoading ? (
Array.from({ length: 5 }).map((_, index) => (
{headCells.map((headCell) => (
))}
))
) : 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" ? (
{dayjs(row[headCell.id]).format(dateFormat)}
) : headCell.id === "appointment_customer" ? (
{row["appointment_customer_name"]}
{row["appointment_customer_email"]}
) : 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" ? (
{JSON.parse(row[headCell.id]).map((time) => {
const [start, end] = time.split(" - ");
return `${dayjs(`1970-01-01 ${start}`).format(timeFormated)} - ${dayjs(`1970-01-01 ${end}`).format(timeFormated)}`;
}).join(" | ")}
) : headCell.id === "appointment_created" ? (
{dayjs(row[headCell.id]).format(dateFormat + " " + timeFormated)}
) : headCell.id === "zoom_meeting" ? (
row.zoom_links ? (
) : "-"
) : headCell.id === "appointment_status" ? (
row.appointment_status === "Pending" ? (
{row.appointment_status}
) : 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.appointment_status}
)
) : headCell.id === "action" ? (
this.handleEditDialogOpen(row)}
>
{ ! isStaff && (
<>
{
this.handleAppointmentDelete(row.appointment_id)
}}
sx={{padding:"6px"}}
>
)}
) : (
row[headCell.id]
)}
))}
);
})
)}
handleChangePage(state, setState, this.props.fetchAppointmentData, newPage)}
onRowsPerPageChange={(event) => handleChangeRowsPerPage(state, setState, this.props.fetchAppointmentData, event)}
/>
this.setState({ confirmationDialogOpen: false, AppointmentIdToDelete: null })}
onConfirm={this.confirmationAppointmentDelete}
loading={confirmationLoading}
/>
);
}
}
export default AppointmentTable;