154 lines
4.2 KiB
JavaScript
154 lines
4.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import DialogTitle from "@material-ui/core/DialogTitle";
|
|
import DialogContent from "@material-ui/core/DialogContent";
|
|
import Dialog from "@material-ui/core/Dialog";
|
|
import Divider from "@material-ui/core/Divider";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import ButtonSecondary from "../Input/ButtonSecondary";
|
|
import ButtonPrimary from "../Input/ButtonPrimary";
|
|
import IconButton from "@material-ui/core/IconButton";
|
|
import TextField from "@material-ui/core/TextField";
|
|
import CloseIcon from "@material-ui/icons/Close";
|
|
import { useSelector } from "react-redux";
|
|
import { useHistory } from "react-router-dom";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
textAlign: "center",
|
|
"& .MuiPaper-root": {
|
|
minWidth: "30%",
|
|
backgroundColor: "#262626",
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
closeButton: {
|
|
color: "#bbbbbb",
|
|
position: "absolute",
|
|
right: theme.spacing(1),
|
|
top: theme.spacing(1),
|
|
},
|
|
textInput: {
|
|
margin: theme.spacing(2),
|
|
"& .MuiInputBase-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
"& .MuiInputLabel-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
textInputFullWidth: {
|
|
marginTop: theme.spacing(2),
|
|
marginBottom: theme.spacing(2),
|
|
"& .MuiInputBase-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
"& .MuiInputLabel-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
"$ .MuiFormHelperText-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
timePicker: {
|
|
margin: theme.spacing(2),
|
|
"& .MuiInputBase-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
"& .MuiInputLabel-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
stepLabel: {
|
|
"& .MuiStepLabel-label": {
|
|
color: "#bbbbbb",
|
|
},
|
|
"& .MuiStepLabel-active": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
}));
|
|
|
|
export default function Settings() {
|
|
const history = useHistory();
|
|
const style = useStyles();
|
|
const data = useSelector((state) => state.data.userData);
|
|
const initialState = {
|
|
firstname: data.firstname,
|
|
lastname: data.lastname,
|
|
email: data.userEmail,
|
|
NIP: data.billing.NIP,
|
|
adress: data.billing.adress,
|
|
companyName: data.billing.companyName,
|
|
};
|
|
const [state, setState] = useState(initialState);
|
|
return (
|
|
<Dialog aria-labelledby="settings-title" className={style.root} open={true}>
|
|
<DialogTitle id="settings-title">Ustawienia konta</DialogTitle>
|
|
<IconButton
|
|
className={style.closeButton}
|
|
onClick={() => {}}
|
|
aria-label="close"
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<Divider />
|
|
<DialogContent>
|
|
<TextField
|
|
className={style.textInput}
|
|
value={state.firstname}
|
|
onChange={(event) =>
|
|
setState({ ...state, firstname: event.target.value })
|
|
}
|
|
label="Imię"
|
|
variant="outlined"
|
|
/>
|
|
<TextField
|
|
className={style.textInput}
|
|
value={state.lastname}
|
|
onChange={(event) =>
|
|
setState({ ...state, lastname: event.target.value })
|
|
}
|
|
label="Nazwisko"
|
|
variant="outlined"
|
|
/>
|
|
<TextField
|
|
className={style.textInput}
|
|
value={state.email}
|
|
onChange={(event) =>
|
|
setState({ ...state, email: event.target.value })
|
|
}
|
|
label="Email"
|
|
variant="outlined"
|
|
/>
|
|
<TextField
|
|
className={style.textInput}
|
|
value={state.companyName}
|
|
onChange={(event) =>
|
|
setState({ ...state, companyName: event.target.value })
|
|
}
|
|
label="Nazwa firmy"
|
|
variant="outlined"
|
|
/>
|
|
<TextField
|
|
className={style.textInput}
|
|
value={state.NIP}
|
|
onChange={(event) => setState({ ...state, NIP: event.target.value })}
|
|
label="NIP"
|
|
variant="outlined"
|
|
/>
|
|
<TextField
|
|
className={style.textInput}
|
|
value={state.adress}
|
|
onChange={(event) =>
|
|
setState({ ...state, adress: event.target.value })
|
|
}
|
|
label="Adres firmy"
|
|
variant="outlined"
|
|
/>
|
|
<ButtonPrimary onClick={() => history.push("/")} text="Anuluj" />
|
|
<ButtonSecondary text="Zapisz" />
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|