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, TextField,
Typography, Badge, Avatar, Button
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import DeleteIcon from "@mui/icons-material/Delete";
import { SnackbarNotice } from "../../functions";
import LoadingButton from "@mui/lab/LoadingButton";
import { MuiTelInput } from "mui-tel-input";
import { ReactComponent as CustomerIconPlaceholder } from "../../assets/person-icon-placeholder.svg";
class AddCustomer extends Component {
state = {
addFormData: {
fullName: "",
phoneNumber: "",
email: "",
password: "",
note: "",
image: ""
},
editFormData: {
fullName: "",
phoneNumber: "",
email: "",
password: "",
note: "",
image: ""
},
errors: {
fullName: false,
phoneNumber: false,
email: false,
emailValidation: false,
password: false,
},
frame: null,
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",
},
}
}
]
},
}
})
};
componentDidUpdate(prevProps) {
if (this.props.customerId && prevProps.customerId !== this.props.customerId) {
this.loadCustomerData(this.props.customerId);
}
};
handleClose = () => { this.props.onClose && this.props.onClose() };
handleInputChange = (event) => {
const { name, value } = event.target;
const formState = this.props.customerId ? "editFormData" : "addFormData";
this.setState(prevState => ({
[formState]: { ...prevState[formState], [name]: value },
errors: { ...prevState.errors, [name]: false }
}));
};
handlePhoneChange = (newphone) => {
const formState = this.props.customerId ? "editFormData" : "addFormData";
this.setState(prevState => ({
[formState]: { ...prevState[formState], "phoneNumber": newphone },
errors: { ...prevState.errors, "phoneNumber": false }
}));
};
handleRemoveImage = () => {
this.setState(prevState => ({
[this.props.customerId ? "editFormData" : "addFormData"]: {
...prevState[this.props.customerId ? "editFormData" : "addFormData"],
image: "",
}
}));
};
handleCustomerImage = () => {
if (this.state.frame) {
this.state.frame.open();
return;
}
const frame = wp.media({
title: "Select or Upload Customer Photo",
button: {
text: "Upload",
},
multiple: false,
});
frame.on("select", () => {
const attachment = frame.state().get("selection").first().toJSON();
this.setState(prevState => ({
[this.props.customerId ? "editFormData" : "addFormData"]: {
...prevState[this.props.customerId ? "editFormData" : "addFormData"],
image: attachment.url,
}
}));
});
frame.open();
this.setState({ frame });
}
loadCustomerData = (customerId) => {
const customer = this.props.fetchCustomerById(customerId);
if (customer) {
this.setState({
editFormData: {
fullName: customer.customer_name,
email: customer.customer_email,
password: "",
phoneNumber: customer.customer_phone,
note: customer.customer_note,
image: customer.customer_img
}
});
}
};
AddCustomerDetails = () => {
const { addFormData, editFormData } = this.state;
const { customerId, fetchCustomerData } = this.props;
const dataToSend = {};
const currentForm = customerId ? editFormData : addFormData;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const errors = {
fullName: !currentForm.fullName,
email: !currentForm.email,
emailValidation: !emailRegex.test(currentForm.email),
phoneNumber: !currentForm.phoneNumber,
};
if ( !customerId ) {
errors.password = !currentForm.password;
}
this.setState({ errors });
if ( errors.fullName || errors.email || errors.emailValidation || errors.phoneNumber || (!customerId && errors.password) ) {
return;
}
this.setState({ loading: true });
if (customerId) {
dataToSend.customer_id = customerId;
}
dataToSend.customer_fullname = currentForm.fullName;
dataToSend.customer_phone = currentForm.phoneNumber;
dataToSend.customer_email = currentForm.email;
dataToSend.customer_password = currentForm.password;
dataToSend.customer_note = currentForm.note;
dataToSend.customer_img = currentForm.image;
const endpoint = customerId ? `${wpbAdmin.root}bookify/v1/update-customer` : `${wpbAdmin.root}bookify/v1/add-customer`;
fetch(endpoint, {
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({
addFormData: {
fullName: "",
phoneNumber: "",
email: "",
password: "",
note: "",
image: ""
},
errors: { fullName: false, email: false, password: false, phoneNumber: false },
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "success",
loading: false,
});
fetchCustomerData();
this.handleClose();
} 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, customerId } = this.props;
const { theme, addFormData, editFormData, errors, snackbarOpen, snackbarMessage, snackbarType, loading } = this.state;
const currentForm = customerId ? editFormData : addFormData;
return (
<>
);
}
}
export default AddCustomer;