import React, { Component } from "react";
import { __ } from "@wordpress/i18n";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import {
Dialog, DialogTitle, DialogContent, DialogActions, Divider,
IconButton, Grid, FormControl, TextField, Tooltip,
Select, MenuItem, Box, Typography, Badge, Avatar, Button,
InputAdornment, FormControlLabel, Chip, Autocomplete, Switch
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import DeleteIcon from "@mui/icons-material/Delete";
import {SnackbarNotice} from "../../functions";
import currencies from "../../currencies.json";
import LoadingButton from "@mui/lab/LoadingButton";
import InfoIcon from "@mui/icons-material/Info";
import { ReactComponent as ServiceIconPlaceholder } from "../../assets/service-icon-placeholder.svg";
class AddService extends Component {
state = {
allLocations: [],
snackbarOpen: false,
snackbarMessage: "",
snackbarType: "success",
loading: false,
addFormData: {
serviceName: "",
price: "",
category: "",
location: [],
image: "",
toggleGoogleMeet: false,
toggleZoomMeeting: false,
note: "",
},
editFormData: {
serviceName: "",
price: "",
category: "",
location: [],
image: "",
toggleGoogleMeet: false,
toggleZoomMeeting: false,
note: "",
},
errors: {
serviceName: false,
price: false,
category: 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"
},
},
},
MuiSwitch: {
styleOverrides: {
root: {
width: "40px",
height: "23px",
padding: "0px",
borderRadius: "13px"
},
switchBase: {
padding: "0px",
margin: "3px",
transitionDuration: "300ms",
"&.Mui-checked": {
transform: "translateX(17px)",
color: "#FFFFFF",
"& .MuiSwitch-thumb": {
color: "#EBF8F8",
},
"& + .MuiSwitch-track": {
backgroundColor: "#036666",
opacity: 1,
border: "none",
},
"&.Mui-disabled + .MuiSwitch-track": {
opacity: 0.5,
},
},
"&.Mui-focusVisible .MuiSwitch-thumb": {
color: "#33cf4d",
border: "6px solid #FFFFFF",
},
"&.Mui-disabled .MuiSwitch-thumb": {
opacity: 0.5,
},
"&.Mui-disabled + .MuiSwitch-track": {
opacity: 0.7,
},
"& .MuiSwitch-input": {
border: "none",
background: "none",
display: "none"
}
},
thumb: {
width: "17px",
height: "17px",
color: "#036666"
},
track: {
borderRadius: "13px",
backgroundColor: "#EBF8F8",
opacity: 1,
transition: "background-color 500ms",
border: "1px solid #BFD4D4",
height: "auto"
},
},
},
}
})
};
componentDidMount() {
const ProLocation = window.ProLocation;
if ( ProLocation ) {
this.fetchLocationData();
}
}
componentDidUpdate(prevProps) {
if ( prevProps.generalGmeet !== this.props.generalGmeet ) {
this.setState(prevState => ({
addFormData: {
...prevState.addFormData,
toggleGoogleMeet: this.props.generalGmeet
},
editFormData: {
...prevState.editFormData,
toggleGoogleMeet: this.props.generalGmeet
}
}));
}
if (this.props.serviceId && prevProps.serviceId !== this.props.serviceId) {
this.loadServiceData(this.props.serviceId);
}
}
handleClose = () => this.props.onClose && this.props.onClose();
fetchLocationData = () => {
fetch(`${wpbAdmin.root}bookify/v1/get-locations`, {
method: "GET",
headers: {
"Content-Type": "application/json",
"X-WP-Nonce": wpApiSettings.nonce
}
})
.then((response) => response.json())
.then((data) => {
this.setState({
allLocations: data.locations,
});
})
.catch((error) => {
console.error("Error fetching data:", error);
});
};
handleInputChange = (event) => {
const { name, value, type, checked } = event.target;
const formState = this.props.serviceId ? "editFormData" : "addFormData";
this.setState((prevState) => ({
[formState]: {
...prevState[formState],
[name]: type === "checkbox" ? checked : value
},
errors: {
...prevState.errors,
[name]: false
}
}));
};
handleLocationChange = (event, value) => {
const formState = this.props.serviceId ? "editFormData" : "addFormData";
this.setState(prevState => ({
[formState]: { ...prevState[formState], location: value },
errors: { ...prevState.errors, location: [] }
}));
};
loadServiceData = (serviceId) => {
const service = this.props.fetchServiceById(serviceId);
if (service) {
const serviceLocationIds = service.service_location ? service.service_location : [];
const selectedLocations = this.state.allLocations.filter(loc => serviceLocationIds.includes(loc.id));
this.setState({
editFormData: {
serviceName: service.service_name,
price: service.service_price,
category: service.service_category,
location: selectedLocations,
image: service.service_img,
toggleGoogleMeet: service.service_gmeet,
toggleZoomMeeting: service.service_zoom,
note: service.service_note,
}
});
}
};
handleServiceSubmit = () => {
const { addFormData, editFormData } = this.state;
const { serviceId, fetchServiceData } = this.props;
const GoogleConnectBtn = window.GoogleConnectBtn;
const ZoomMeeting = window.ZoomMeeting;
const ProLocation = window.ProLocation;
const dataToSend = {};
const currentForm = serviceId ? editFormData : addFormData;
const errors = {
serviceName: !currentForm.serviceName,
price: !currentForm.price,
category: currentForm.category != "" ? false : true,
};
this.setState({ errors });
if (errors.serviceName || errors.price || errors.category) {
return;
}
this.setState({ loading: true });
const selectedLocationIds = currentForm.location.map(loc => loc.id);
if ( serviceId ) {
dataToSend.service_id = serviceId;
}
if ( GoogleConnectBtn ) {
dataToSend.service_gmeet = currentForm.toggleGoogleMeet;
}
if ( ZoomMeeting ) {
dataToSend.service_zoom = currentForm.toggleZoomMeeting;
}
if ( ProLocation ) {
dataToSend.service_location = JSON.stringify(selectedLocationIds);
}
dataToSend.service_name = currentForm.serviceName;
dataToSend.service_price = currentForm.price;
dataToSend.service_category = currentForm.category;
dataToSend.service_img = currentForm.image;
dataToSend.note = currentForm.note;
const endpoint = this.props.serviceId ? `${wpbAdmin.root}bookify/v1/update-service` : `${wpbAdmin.root}bookify/v1/add-service`;
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: {
serviceName: "",
price: "",
category: "",
location: [],
image: "",
toggleGoogleMeet: false,
note: "",
},
errors: { serviceName: false, price: false, category: false },
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "success",
loading: false,
});
this.handleClose();
fetchServiceData();
} else {
this.setState({
snackbarOpen: true,
snackbarMessage: response.message,
snackbarType: "error",
loading: false,
});
}
})
.catch(error => {
console.error("Error:", error);
this.setState({ loading: false });
})
}
handleRemoveImage = () => {
this.setState(prevState => ({
[this.props.serviceId ? "editFormData" : "addFormData"]: {
...prevState[this.props.serviceId ? "editFormData" : "addFormData"],
image: "",
}
}));
};
handleServiceImage = () => {
if (this.state.frame) {
this.state.frame.open();
return;
}
const frame = wp.media({
title: "Select or Upload Service Photo",
button: {
text: "Upload",
},
multiple: false,
});
frame.on("select", () => {
const attachment = frame.state().get("selection").first().toJSON();
this.setState(prevState => ({
[this.props.serviceId ? "editFormData" : "addFormData"]: {
...prevState[this.props.serviceId ? "editFormData" : "addFormData"],
image: attachment.url,
}
}));
});
frame.open();
this.setState({ frame });
}
render() {
const { open, AllCategories, serviceId, currency, gmeetDisable, zoomDisable } = this.props;
const { theme, addFormData, editFormData, errors, snackbarOpen, snackbarMessage, snackbarType, allLocations, loading } = this.state;
const currentForm = serviceId ? editFormData : addFormData;
const matchedCurrency = Object.values(currencies).find(eachCurrency => eachCurrency.code === currency);
const ProLocation = window.ProLocation;
const GoogleConnectBtn = window.GoogleConnectBtn;
const ZoomMeeting = window.ZoomMeeting;
return (
<>
);
}
}
export default AddService;