update

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);
+    }
+}
\ No newline at end of file

src/components/BuildControls/BuildControls.tsx

@@ -7,10 +7,14 @@ interface Props {
     ingredients: Ingredients;
     onMoreClick: (ingType: IngredientNames) => void;
     onLessClick: (ingType: IngredientNames) => void;
-    price: number
+    onOpenModal: VoidFunction;
+    price: number;
+    purshasable: boolean;
 }
 
-const BuildControls = ({ingredients, onMoreClick, onLessClick, price}: Props) => {
+const BuildControls = (props: Props) => {
+    const {ingredients, onMoreClick, onLessClick, onOpenModal, price, purshasable} = props;
+
     return (
         <div className='BuildControls'>
             <p>Current Price: <strong>{price} ₸</strong></p>
@@ -22,6 +26,8 @@ const BuildControls = ({ingredients, onMoreClick, onLessClick, price}: Props) =>
                     onMoreClick={() => onMoreClick(ingType as IngredientNames)}
                 />
             ))}
+
+            <button onClick={onOpenModal} disabled={!purshasable} className="OrderButton">ORDER NOW</button>
         </div>
     );
 }

src/components/Burger/OrderSummary.tsx

+import { IngredientNames, Ingredients } from "@/interfaces/Ingredients";
+import React from "react";
+import { Button } from "../UI/Button/Button";
+
+type TProps = {
+    price: number;
+    ingredients: Ingredients;
+    purchaseCancelled: VoidFunction;
+    purchaseContinued: VoidFunction
+};
+
+const styleIng: React.CSSProperties = {
+    textTransform: "capitalize"
+};
+
+export const OrderSummary = ({ingredients, price, purchaseCancelled, purchaseContinued}: TProps) => {
+    const ingredientSummary = Object.keys(ingredients) //[salad, bacon ...]
+                                .map(ing => (
+                                    <li key={ing}>
+                                        <span style={styleIng}>
+                                            {ing}
+                                        </span>: {ingredients[ing as IngredientNames]}
+                                    </li>
+                                ));
+
+    return (
+        <>
+            <h3>Your order</h3>
+            <p>A delicious burger with the following ingredients:</p>
+            <ul>
+                {ingredientSummary}
+            </ul>
+            <p><strong>Total Price: {price} ₸</strong></p>
+            <p>Continue to checkout?</p>
+            <Button btnType="Danger" click={purchaseCancelled}>CANCEL</Button>
+            <Button btnType="Success" click={purchaseContinued}>CONTINUE</Button>
+        </>
+    );
+};
\ 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.6);
+}
\ No newline at end of file

src/components/UI/Backdrop/Backdrop.tsx

+import React from "react";
+import "./Backdrop.css";
+
+type TProps = {
+    show: boolean;
+    onClosed: VoidFunction
+}
+
+export const Backdrop = ({show, onClosed}: TProps) => {
+    return (
+        <div 
+            onClick={onClosed} 
+            className="Backdrop" 
+            style={{display: show ? "block" : "none"}}
+        >    
+        </div>
+    )
+};
\ 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.tsx

+import React, { MouseEventHandler, ReactNode } from "react";
+import "./Button.css";
+
+type TProps = {
+    children: ReactNode;
+    click: MouseEventHandler<HTMLButtonElement>;
+    btnType: 'Success' | 'Danger';
+}
+
+export const Button = ({click, btnType, children}: TProps) => {
+    return (
+        <button
+            onClick={click}
+            className={['Button', btnType].join(' ')}
+        >
+            {children}
+        </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;
+    color: black;
+}
+
+@media (min-width: 600px) {
+    .Modal {
+        width: 500px;
+        left: calc(50% - 250px);
+    }
+}
\ No newline at end of file

src/components/UI/Modal/Modal.tsx

+import React, { ReactNode } from "react";
+import "./Modal.css";
+import { Backdrop } from "../Backdrop/Backdrop";
+
+type TProps = {
+    children: ReactNode;
+    show: boolean;
+    onClosed: VoidFunction
+}
+
+export const Modal = ({children, show, onClosed}: TProps) => {
+    return (
+        <>
+            <Backdrop show={show} onClosed={onClosed}/>
+            <div 
+                className={"Modal"} 
+                style={{transform: show ? "translateY(0)" : "translateY(-100vh)"}}
+            >
+                {children}
+            </div>
+        </>
+    )
+};
\ No newline at end of file

src/containers/BurgerBuilder/BurgerBuilder.tsx

@@ -3,9 +3,13 @@ import type { Ingredients, IngredientNames } from '@/interfaces/Ingredients';
 import Burger from '@/components/Burger/Burger';
 import BuildControls from '@/components/BuildControls/BuildControls';
 import { IngredientPrices } from '@/helpers/IngPrice';
+import { Modal } from '@/components/UI/Modal/Modal';
+import { OrderSummary } from '@/components/Burger/OrderSummary';
 
 const BurgerBuilder = () => {
     const [totalPrice, setTotalPrice] = useState<number>(IngredientPrices.bread);
+    const [purshasable, setPurshasable] = useState<boolean>(false);
+    const [show, setShow] = useState<boolean>(false);
     const [ingredients, setIngredients] = useState<Ingredients>({
         salad: 0,
         meat: 0,
@@ -19,6 +23,7 @@ const BurgerBuilder = () => {
             ingredientsCopy[ingType] -= 1;
             setIngredients(ingredientsCopy);
             setTotalPrice(prevState => prevState - IngredientPrices[ingType]);
+            updatePurshasable(ingredientsCopy);
         };
     };
 
@@ -27,15 +32,45 @@ const BurgerBuilder = () => {
         ingredientsCopy[ingType] += 1;
         setTotalPrice(prevState => prevState + IngredientPrices[ingType]);
         setIngredients(ingredientsCopy);
+        updatePurshasable(ingredientsCopy);
+    };
+
+    const updatePurshasable = (ings: Ingredients) => {
+        const sum = Object.keys(ings) // [salad, meat, bacon, cheese]
+                        .map(ing => ings[ing as IngredientNames]) // [0, 0, 0 ,0]
+                        .reduce((a, b) => a + b, 0); // 0
+        setPurshasable(sum > 0);
+    };
+
+    const onOpenModalHandler = () => {
+        setShow(true);
+    };
+
+    const onClosedHandler = () => {
+        setShow(false);
+    };
+
+    const onPurchaseContinued = () => {
+        alert("В будущем напишем логику")
     };
 
     return (
         <>
+            <Modal show={show} onClosed={onClosedHandler}>
+                <OrderSummary 
+                    ingredients={ingredients} 
+                    price={totalPrice}
+                    purchaseCancelled={onClosedHandler}
+                    purchaseContinued={onPurchaseContinued}
+                />
+            </Modal>
             <Burger ingredients={ingredients}/>
             <BuildControls 
+                purshasable={purshasable}
                 price={totalPrice}
                 onLessClick={onLessClick} 
                 onMoreClick={onMoreClick}
+                onOpenModal={onOpenModalHandler}
                 ingredients={ingredients}
             />
         </>