display multiple prices / visual changes

src/components/Output/CardDish.js

@@ -8,7 +8,7 @@ export default function CardDish(props) {
   const history = useHistory();
   const {
     name,
-    price,
+    prices,
     imgUrl,
     weight,
     vegan,
@@ -17,6 +17,22 @@ export default function CardDish(props) {
     _id,
   } = props.dish;
 
+  const FormatPrices = () => {
+    if (prices.price1.priceName === "") {
+      return(
+        <h5>{ prices.price1.price }zł</h5>
+      )
+    } else {
+      return (
+        <div className="carddish-prices-multi">
+          {prices.price1.priceName !== "" && <h5>{prices.price1.price}zł ({ prices.price1.priceName })</h5>}
+          {prices.price2.priceName !== "" && <h5>{prices.price2.price}zł ({prices.price2.priceName})</h5>}
+          {prices.price3.priceName !== "" && <h5>{prices.price3.price}zł ({ prices.price3.priceName })</h5>}
+        </div>
+      )
+    }
+  }
+
   return (
     <div
       className="carddish-container"
@@ -30,17 +46,20 @@ export default function CardDish(props) {
         <div className="carddish-left-info">
           <div className="carddish-left-upper">
             <h2>{name}</h2>
-            <p>Porcja: {weight}</p>
-            <p>
-              {vegan && "Danie wegańskie | "}
-              {vegetarian && "Danie wegetariańskie"}
-            </p>
+            <div className="carddish-left-middle">
+              <p>Porcja: {weight}</p>
+              <p>
+                {(vegan & vegetarian) ? "wegańskie | wegetariańskie" : ""}
+                {(vegan & !vegetarian) ? "wegańskie" : ""}
+                {(!vegan & vegetarian) ? "wegetariańskie" : ""}
+              </p>
+            </div>
           </div>
           <Pictograms pictograms={extractTags(allergens)} />
         </div>
       </div>
       <div className="carddish-right">
-        <h5>{!props.hidePrice && `${price} zł`}</h5>
+        <FormatPrices/>
         <KeyboardArrowRightIcon color="primary" />
       </div>
     </div>

src/components/Output/Restaurant.js

@@ -59,6 +59,10 @@ export default function Restaurant(props) {
             />
           )}
           <WorkingHours hours={restaurant.workingHours} />
+          {restaurant.lunchHours && <h5>Lunch menu</h5>}
+          {restaurant.lunchHours && (
+            <p style={{ color: "#bbbbbb", fontWeight: 400 }}>{restaurant.lunchHours}</p>
+          )}
           <hr />
           <h5>Lokalizacja</h5>
           {restaurant.location && (
@@ -68,9 +72,6 @@ export default function Restaurant(props) {
       </div>
       <div className="restaurant-content">
         <div className="restaurant-dishes">
-          {restaurant.lunchHours && (
-            <h3>Lunch menu ({restaurant.lunchHours})</h3>
-          )}
           {!showDishList && <CircularProgress />}
           {(showDishList && restaurant.lunchMenu) && <LunchMenu restaurant={restaurant} />}
           <h3>Menu</h3>