Multiple prices (unfinished)

package.json

@@ -19,7 +19,7 @@
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^4.0.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "validator": "^13.1.1"

src/components/Dialogs.js

@@ -1,7 +1,7 @@
 import React from "react";
 import RegulaminDialog from "./Dialogs/RegulaminDialog";
 
-export default function (props) {
+export default function Dialogs (props) {
   return (
     <div>
       <RegulaminDialog />

src/components/Dialogs/NewDish.js

@@ -23,11 +23,11 @@ import InputLabel from "@material-ui/core/InputLabel";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import Checkboxes from "../Input/Checkboxes";
 import { backend } from "../../config";
+import InputPrices from "../Input/InputPrices";
 
 // ICONS
 
 import TextFieldsIcon from "@material-ui/icons/TextFields";
-import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
 import FitnessCenterIcon from "@material-ui/icons/FitnessCenter";
 import LocalHospitalIcon from "@material-ui/icons/LocalHospital";
 import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
@@ -46,6 +46,11 @@ const useStyles = makeStyles((theme) => ({
       overflow: "visible",
     },
   },
+  h4: {
+    color: "#d68000",
+    fontSize: "16px",
+    fontWeight: "500"
+  },
   closeButton: {
     color: "#bbbbbb",
     position: "absolute",
@@ -103,7 +108,20 @@ export default function NewRestaurant() {
     restaurantId: restaurantID,
     name: "",
     category: "",
-    price: "",
+    prices: {
+      price1: {
+        priceName: "",
+        price: ""
+      },
+      price2: {
+        priceName: "",
+        price: ""
+      },
+      price3: {
+        priceName: "",
+        price: ""
+      },
+    },
     notes: "",
     imgUrl: "",
     hidden: false,
@@ -152,6 +170,10 @@ export default function NewRestaurant() {
     setState({ ...state, category: event.target.value });
   };
 
+  const handlePricesChange = (value) => {
+    setState({ ...state, prices: value });
+  }
+
   const handleAdd = () => {
     if (validateForm()) {
       sendForm();
@@ -164,14 +186,14 @@ export default function NewRestaurant() {
     const validation = {
       name: validator.isLength(state.name, { max: 50, min: 1 }),
       category: restaurant.categories.includes(state.category),
-      price: validator.isLength(state.price, { max: 10, min: 1 }),
+      prices: validator.isLength(state.prices.price1.priceName, { max: 18, min: 1 }) && validator.isLength(state.prices.price1.price, { max: 18, min: 1 }),
     };
 
     setState({
       ...state,
       nameError: !validation.name,
       categoryError: !validation.category,
-      priceError: !validation.price,
+      priceError: !validation.prices,
     });
 
     return validation.name && validation.category && validation.price;
@@ -182,7 +204,7 @@ export default function NewRestaurant() {
       restaurantId: restaurantID,
       name: state.name,
       category: state.category,
-      price: state.price,
+      prices: state.prices,
       notes: state.notes,
       imgUrl: state.imgUrl,
       hidden: false,
@@ -251,9 +273,10 @@ export default function NewRestaurant() {
         <DialogContent>
           <p>Danie zostanie dodane do: {restaurant.name}</p>
           <Paper variant="outlined">
-            <div className="newRestaurant-content">
+            <div className="newRestaurant-content-fullwidth">
               <TextField
-                className={styles.textInput}
+                className={styles.textInputFullWidth}
+                fullWidth
                 required
                 value={state.name}
                 error={state.nameError}
@@ -271,6 +294,11 @@ export default function NewRestaurant() {
                   ),
                 }}
               />
+            </div>
+            <div className="newRestaurant-content-fullwidth">
+              <InputPrices error={state.priceError} prices={state.prices} setPrices={handlePricesChange}/>
+            </div>
+            <div className="newRestaurant-content">
               <FormControl
                 variant="outlined"
                 required
@@ -288,25 +316,6 @@ export default function NewRestaurant() {
                   {Categories}
                 </Select>
               </FormControl>
-              <TextField
-                className={styles.textInput}
-                required
-                label="Cena (zł)"
-                placeholder="np. 18,50"
-                error={state.priceError}
-                value={state.price}
-                variant="outlined"
-                onChange={(event) =>
-                  setState({ ...state, price: event.target.value })
-                }
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <AttachMoneyIcon color="primary" />
-                    </InputAdornment>
-                  ),
-                }}
-              />
               <TextField
                 className={styles.textInput}
                 label="Porcja"
@@ -403,8 +412,8 @@ export default function NewRestaurant() {
               />
             </div>
           </Paper>
-          <Paper>
+          <Paper variant="outlined">
-            <h4>Dodaj zdjęcie.</h4>
+            <h4 className={styles.h4}>Dodaj zdjęcie.</h4>
             <ImageUpload
               img={state.imgUrl}
               onUpload={(link) => handleImageUploaded(link)}

src/components/Input/Checkboxes.js

@@ -10,10 +10,11 @@ import FormHelperText from "@material-ui/core/FormHelperText";
 const useStyles = makeStyles((theme) => ({
   root: {
     "& .MuiFormLabel-root": {
-      color: "#e99800",
+      color: "#d68000",
       marginBottom: theme.spacing(2),
       marginLeft: "auto",
       marginRight: "auto",
+      fontWeight: "500"
     },
     "& .MuiFormHelperText-root": {
       color: "#7e7e7e",
@@ -141,9 +142,6 @@ export default function Checkboxes(props) {
             label="Sezam"
           />
         </FormGroup>
-        <FormHelperText>
-          Jeżeli nie masz pewności, czy danie zawiera alergen, zaznacz go :)
-        </FormHelperText>
       </FormControl>
       <FormControl component="fieldset" className={classes.formControl}>
         <FormLabel component="legend">Inne</FormLabel>

src/components/Input/InputPrices.js

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    '& > *': {
+        margin: theme.spacing(0),
+        backgroundColor: "#262626",
+        padding: theme.spacing(1)
+        },
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    },
+    header: {
+        color: "#d68000",
+        fontSize: "16px"
+    },
+    paragraph: {
+        color: "#bbbbbb",
+        fontSize: "12px"
+    },
+    option: {
+        color: "#d68000",
+        minWidth: "60px",
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        marginBottom: "0px",
+        marginTop: "0px"
+    },
+    paper: {
+        '& > *': {
+            margin: theme.spacing(1),
+            backgroundColor: "#262626",
+            padding: theme.spacing(1)
+        },
+    },
+    textField: {
+        margin: theme.spacing(1),
+        marginBottom: "0px",
+        marginTop: "0px"
+    },
+    subOption: {
+        margin: "0px",
+        color: "#bbbbbb",
+        fontSize: "11px"
+    },
+    optionContainer: {
+        display: "flex",
+        alignItems: "center",
+        margin: theme.spacing(1)
+    }
+}));
+
+export default function InputPrices(props) {
+    const classes = useStyles();
+    const [multi, setMulti] = useState("initial");
+
+    return <div className={classes.root}>
+        <Paper variant="outlined">
+            <h3 className={classes.header}>Podaj ceny</h3>
+            <p className={classes.paragraph}>Jeżeli ta pozycja w menu ma kilka opcji cenowych (np. Mała/Średnia/Duża porcja) - możesz dodać do trzech cen wraz z nazwami poszczególnych opcji.</p>
+            <div className={classes.paper} style={{ display: multi }}>
+                <div className={classes.optionContainer}>
+                    <h4 className={classes.option}>Cena 1</h4>
+                    <TextField error={props.error} value={props.prices.price1.priceName} onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price1: {
+                                priceName: event.target.value,
+                                price: props.prices.price1.price
+                        }})
+                    }} className={classes.textField} label="Nazwa" variant="outlined" required placeholder="np. Mała"/>
+                    <TextField error={props.error} onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price1: {
+                                priceName: props.prices.price1.priceName,
+                                price: event.target.value
+                        }})
+                    }} value={props.prices.price1.price} className={classes.textField} label="Cena" variant="outlined" required placeholder="np. 14zł"/>
+                </div>
+                <div className={classes.optionContainer}>
+                    <div>
+                        <h4 className={classes.option}>Cena 2</h4>
+                        <p className={classes.subOption}>(opcjonalna)</p>
+                    </div>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price2: {
+                                priceName: event.target.value,
+                                price: props.prices.price2.price
+                        }})
+                    }} value={props.prices.price2.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Średnia"/>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price2: {
+                                priceName: props.prices.price2.priceName,
+                                price: event.target.value
+                        }})
+                    }} value={props.prices.price2.price} className={classes.textField} label="Cena" variant="outlined" placeholder="np. 18zł"/>
+                </div>
+                <div className={classes.optionContainer}>
+                    <div>
+                        <h4 className={classes.option}>Cena 3</h4>
+                        <p className={classes.subOption}>(opcjonalna)</p>
+                    </div>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price3: {
+                                priceName: event.target.value,
+                                price: props.prices.price3.price
+                        }})
+                    }} value={props.prices.price3.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Duża"/>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price3: {
+                                priceName: props.prices.price3.priceName,
+                                price: event.target.value
+                        }})
+                    }} value={props.prices.price3.price} className={classes.textField} label="Cena" variant="outlined" placeholder="np. 22zł"/>
+                </div>
+            </div>
+        </Paper>
+    </div>
+}

src/components/Output/Footer.js

@@ -4,7 +4,7 @@ export default class Footer extends React.Component {
   render() {
     return (
       <div className="footer">
-        <p>Bankai Software 2020 (wersja testowa aplikacji)</p>
+        <p>Menui (wersja testowa aplikacji)</p>
       </div>
     );
   }

src/config.js

@@ -1,4 +1,5 @@
-export const backend = "https://menui.azurewebsites.net/";
+/* export const backend = "https://menui.azurewebsites.net/"; */
+export const backend = "http://localhost:4000/";
 
 export const restaurantTypes = [
     "afrykańska",