import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import {
Paper, Typography, TableContainer, Table, TableHead,
TableRow, TableCell, TableSortLabel, TableBody, TablePagination,
Avatar, FormControl, Select, MenuItem, Box, IconButton, Skeleton
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/Delete";
import {
handleRequestSort, handleChangePage, handleChangeRowsPerPage
} from "../../functions";
import { SnackbarNotice, ConfirmationDialog } from "../../functions";
import currencies from "../../currencies.json";
import dayjs from "dayjs";
class PaymentTable extends Component {
state = {
StatusOptions: [
"Pending",
"Paid",
"Partially Paid"
],
snackbarOpen: false,
snackbarMessage: "",
snackbarType: "success",
confirmationDialogOpen: false,
confirmationLoading: false,
paymentToDelete: null,
};
componentDidMount() {
let { headCells } = this.props;
headCells = window.wp.hooks.applyFilters("bookify_payment_table_add_columns", headCells);
this.props.setState({ headCells });
}
handlePaymentDelete = (payment) => {
this.setState({ confirmationDialogOpen: true, paymentToDelete: payment });
};
ConfirmationPaymentDelete = () => {
const { paymentToDelete } = this.state;
const { fetchPaymentData } = this.props
this.setState({ confirmationLoading: true });
const dataToSend = {};
dataToSend.payment_id = paymentToDelete.payment_id;
dataToSend.total_amount = paymentToDelete.total;
dataToSend.appointment_id = paymentToDelete.appointment_id;
fetch(`${wpbAdmin.root}bookify/v1/delete-payment`, {
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,
confirmationLoading: false,
paymentToDelete: null,
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "success",
});
fetchPaymentData();
} else {
this.setState({
confirmationLoading: false,
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "error",
});
}
})
.catch(error => {
console.error("Error:", error);
this.setState({ confirmationLoading: false });
})
}
handlePaymentStatusChange = ( event, paymentID ) => {
const { value } = event.target;
const { fetchPaymentData } = this.props
const dataToSend = {};
dataToSend.payment_id = paymentID;
dataToSend.payment_status = value;
fetch(`${wpbAdmin.root}bookify/v1/update-payment`, {
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",
});
fetchPaymentData();
} else {
this.setState({
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "error"
});
}
})
.catch(error => {
console.error("Error:", error);
})
}
render() {
const { StatusOptions, snackbarOpen, snackbarMessage, snackbarType, confirmationDialogOpen, confirmationLoading } = this.state;
const { state, setState, headCells, TableData, totalCount, currency, dateFormat, pageSize, page, order, orderBy, dataLoading } = this.props;
const matchedCurrency = Object.values(currencies).find(eachCurrency => eachCurrency.code === currency);
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"]}
) : headCell.id === "total" ? (
{`${matchedCurrency.symbol_native} ${row[headCell.id]}`}
) : headCell.id === "paid" ? (
{`${matchedCurrency.symbol_native} ${row[headCell.id]}`}
) : headCell.id === "due" ? (
{`${matchedCurrency.symbol_native} ${row[headCell.id]}`}
) : headCell.id === "status" ? (
) : headCell.id === "action" ? (
{
this.handlePaymentDelete(row)
}}
sx={{padding:"0px 8px"}}
>
) : (
row[headCell.id]
)}
))}
);
})
)}
handleChangePage(state, setState, this.props.fetchPaymentData, newPage)}
onRowsPerPageChange={(event) => handleChangeRowsPerPage(state, setState, this.props.fetchPaymentData, event)}
/>
this.setState({ confirmationDialogOpen: false, paymentToDelete: null })}
onConfirm={this.ConfirmationPaymentDelete}
loading={confirmationLoading}
/>
)
}
}
export default PaymentTable;