finished lesson 57

src/components/BuildControls/BuildControls.css

@@ -8,3 +8,43 @@
     margin: auto;
     padding: 10px 0;
 }
+
+.OrderButton {
+    background-color: #dad735;
+    outline: none;
+    cursor: pointer;
+    border: 1px solid #966909;
+    color: #966909;
+    font-family: inherit;
+    font-size: 1.2em;
+    padding: 15px 30px;
+    box-shadow: 2px 2px 2px #966909;
+}
+
+.OrderButton:hover, .OrderButton:active {
+    background-color: #a0db41;
+    border: 1px solid #966909;
+    color: #966909;
+}
+.OrderButton:disabled {
+    background-color: #c7c6c6;
+    cursor: not-allowed;
+    border: 1px solid #ccc;
+    color: #888888;
+}
+
+.OrderButton:not(:disabled) {
+    animation: enable 0.3s linear;
+}
+
+@keyframes enable {
+    0% {
+        transform: scale(1);
+    }
+    60% {
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1);
+    }
+}

src/components/BuildControls/BuildControls.js

@@ -5,7 +5,7 @@ import BuildControl from './BuildControl/BuildControl'
 const BuildControls = props => {
   return (
     <div className='BuildControls'>
-      <p>Current Price: <strong>{props.price} TG</strong></p>
+      <p>Current Price: <strong>{props.price} KZT</strong></p>
       {Object.keys(props.ingredients).map(ingType => {
         return <BuildControl 
           key={ingType} 
@@ -15,6 +15,12 @@ const BuildControls = props => {
           disabledInfo={props.disabledInfo[ingType]}
         />
       })}
+      <button 
+          onClick={props.ordered}
+          className='OrderButton'
+          disabled={!props.purchasable}
+      >ORDER NOW
+      </button>
     </div>
   )
 }

src/components/Burger/OrderSummary/OrderSummary.js

+import React from "react";
+import Button from "../../UI/Button/Button";
+import './OrderSummary.css'
+
+
+const OrderSummary = (props) => {
+
+    const ingredientSummary = Object.keys(props.ingredients)
+        .map(igKey => {
+            return (
+                <li key={igKey}>
+                    <span style={{textTransform: 'capitalize'}}>
+                        {igKey}
+                    </span> : {props.ingredients[igKey]}
+                </li>
+            )
+        })
+    return (
+        <>
+            <h3>Your order</h3>
+            <p>A delicious burger with the following ingredients:</p>
+            <ul>
+                {ingredientSummary}
+            </ul>
+            <p><strong>Total price: </strong>{props.price} KZT</p>
+            <p>Continue to checkout</p>
+            <Button btnType={'Danger'} clicked={props.purchaseCancelled}>CANCEL</Button>
+            <Button btnType={'Success'} clicked={props.purchaseContinued}>CONTINUE</Button>
+        </>
+    )
+}
+
+export default OrderSummary
\ No newline at end of file

src/components/UI/Backdrop/Backdrop.css

+.Backdrop {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 100;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
\ No newline at end of file

src/components/UI/Backdrop/Backdrop.js

+import React from "react";
+import './Backdrop.css'
+
+
+const Backdrop = ({show, clicked}) => {
+    return (
+        <>
+            {show ? <div onClick={clicked} className="Backdrop" /> : null}
+        </>
+    )
+}
+
+export default Backdrop
\ No newline at end of file

src/components/UI/Button/Button.css

+.Button {
+    background-color: transparent;
+    border: none;
+    color: white;
+    outline: none;
+    cursor: pointer;
+    font: inherit;
+    padding: 10px;
+    margin: 10px;
+    font-weight: bold;
+}
+
+.Button:first-of-type {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.Success {
+    color: #5C9210;
+}
+
+.Danger {
+    color: #944317;
+}
\ No newline at end of file

src/components/UI/Button/Button.js

+import React from "react";
+import './Button.css'
+
+
+const Button = (props) => {
+    return (
+        <button
+            onClick={props.clicked}
+            className={['Button', props.btnType].join(' ')}
+        >
+            {props.children}
+        </button>
+    )
+}
+
+export default Button
\ No newline at end of file

src/components/UI/Modal/Modal.css

+.Modal {
+    position: fixed;
+    z-index: 500;
+    background-color: white;
+    width: 70%;
+    border: 1px solid #ccc;
+    box-shadow: 1px 1px 1px black;
+    padding: 16px;
+    left: 15%;
+    top: 30%;
+    box-sizing: border-box;
+    transition: all 0.3s ease-out;
+}
+
+@media (min-width: 600px) {
+    .Modal {
+        width: 500px;
+        left: calc(50% - 250px);
+    }
+}
\ No newline at end of file

src/components/UI/Modal/Modal.js

+import React from "react";
+import Backdrop from "../Backdrop/Backdrop";
+import './Modal.css'
+
+
+const Modal = (props) => {
+    return (
+        <>
+            <Backdrop 
+                show={props.show}
+                clicked={props.closed}
+            />
+            <div 
+                className="Modal"
+                style={{
+                    transform: props.show ? 'translateY(0)' : 'translateY(-100vh)',
+                    opacity: props.show ? '1' : '0'
+                }}
+            >
+                {props.children}
+            </div>
+        </>
+    )
+}
+
+export default Modal
\ No newline at end of file

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { useState } from 'react';
 import BuildControls from '../../components/BuildControls/BuildControls';
 import Burger from '../../components/Burger/Burger'
+import OrderSummary from '../../components/Burger/OrderSummary/OrderSummary';
+import Modal from '../../components/UI/Modal/Modal';
 
 const BurgerBuilder = () => {
   const [ingredients, setIngredients] = useState({
@@ -11,6 +13,8 @@ const BurgerBuilder = () => {
     meat: 0
   })
   const [totalPrice, setTotalPrice] = useState(200)
+  const [purchasable, setPurchasable] = useState(false)
+  const [purchasing, setPurchasing] = useState(false)
 
   const INGREDIENT_PRICES = {
     salad: 50,
@@ -30,6 +34,7 @@ const BurgerBuilder = () => {
 
     setIngredients(updatedIngredients)
     setTotalPrice(newPrice)
+    updatePurchaseState(updatedIngredients)
   }
 
   const removeIngredientHandler = (type) => {
@@ -45,6 +50,7 @@ const BurgerBuilder = () => {
 
     setIngredients(updatedIngredients)
     setTotalPrice(newPrice)
+    updatePurchaseState(updatedIngredients)
   }
 
   const disabledInfo = {...ingredients}
@@ -53,8 +59,38 @@ const BurgerBuilder = () => {
     disabledInfo[key] = disabledInfo[key] <= 0
   }
 
+  const updatePurchaseState = (ingredients) => {
+    const sum = Object.keys(ingredients)
+      .map(igKey => ingredients[igKey])
+      .reduce((sum, el) => sum + el, 0)
+
+      setPurchasable(sum > 0)
+  }
+
+  const purchaseHandler = () => {
+    setPurchasing(true)
+  }
+  const purchaseCancelHandler = () => {
+    setPurchasing(false)
+  }
+
+  const purchaseContinueHandler = () => {
+    alert('You continued!')
+  }
+
   return (
     <>
+      <Modal
+        show={purchasing}
+        closed={purchaseCancelHandler}
+      >
+        <OrderSummary 
+            ingredients={ingredients}
+            price={totalPrice} 
+            purchaseCancelled={purchaseCancelHandler}
+            purchaseContinued={purchaseContinueHandler}
+        />
+      </Modal>
       <Burger ingredients={ingredients} />
       <BuildControls 
         ingredients={ingredients}
@@ -62,6 +98,8 @@ const BurgerBuilder = () => {
         ingredientAdded={addIngredientHandler}
         ingredientRemoved={removeIngredientHandler}
         disabledInfo={disabledInfo}
+        purchasable={purchasable}
+        ordered={purchaseHandler}
       />
     </>
   )