component: add Order button and its state

src/components/Burger/BuildControls/BuildControls.css

@@ -7,4 +7,46 @@
     box-shadow: 0 2px 1px #ccc;
     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/Burger/BuildControls/BuildControls.js

@@ -4,23 +4,25 @@ import BuildControl from './BuildControl/BuildControl';
 import classes from './BuildControls.css';
 
 const controls = [
-    { name: 'Salad', type: 'salad'},
+    { name: 'Salad', type: 'salad' },
-    { name: 'Cheese', type: 'cheese'},
+    { name: 'Cheese', type: 'cheese' },
-    { name: 'Bacon', type: 'bacon'},
+    { name: 'Bacon', type: 'bacon' },
-    { name: 'Meat', type: 'meat'},
+    { name: 'Meat', type: 'meat' },
 ];
 
 const buildControls = (props) => (
     <div className={classes.BuildControls}>
         <p>Current Price: <strong>{props.price.toFixed(2)}</strong></p>
-        {controls.map( ctrl => (
+        {controls.map(ctrl => (
-            <BuildControl 
+            <BuildControl
-            key={ctrl.name} 
+                key={ctrl.name}
-            name={ctrl.name} 
+                name={ctrl.name}
-            added={() => props.ingredientAdded(ctrl.type) }
+                added={() => props.ingredientAdded(ctrl.type)}
-            removed={() => props.ingredientRemoved(ctrl.type)}
+                removed={() => props.ingredientRemoved(ctrl.type)}
-            disabled={props.disabled[ctrl.type]} />
+                disabled={props.disabled[ctrl.type]} />
         ))}
+        <button className={classes.OrderButton}
+            disabled={!props.purchasable}>ORDER NOW</button>
     </div>
 )
 

src/components/Burger/BurgerIngredient/BurgerIngredient.js

@@ -39,7 +39,7 @@ class BurgerIngredient extends Component {
     }
 }
 
-BurgerIngredient.PropTypes = {
+BurgerIngredient.propTypes = {
     type: PropTypes.string.isRequired
 };
 

src/containers/BurgerBuilder/BurgerBuilder.js

@@ -21,23 +21,37 @@ class BurgerBuilder extends Component {
             bacon: 0,
         },
         totalPrice: 0,
+        purchasable: false,
+    }
+
+    updatePurchaseState (ingredients) {
+        const sum = Object.keys(ingredients) 
+        .map( igkey => {
+            return ingredients[igkey];
+        })
+        .reduce((sum, el) => {
+            return sum + el;
+        }, 0);
+
+        this.setState({purchasable: sum > 0});
     }
 
     addIngredientHandler = (type) => {
         const oldCount = this.state.ingredients[type];
         const newCount = oldCount + 1;
-        const updatedIngredient = {
+        const updatedIngredients = {
             ...this.state.ingredients,
         };
-        updatedIngredient[type] = newCount;
+        updatedIngredients[type] = newCount;
 
         const priceAddition = INGREDIENT_PRICE[type];
         const oldPrice = this.state.totalPrice;
         const newPrice = oldPrice + priceAddition;
         this.setState({
             totalPrice: newPrice,
-            ingredients: updatedIngredient,
+            ingredients: updatedIngredients,
         });
+        this.updatePurchaseState(updatedIngredients);
     }
 
     removeIngredientHandler = (type) => {
@@ -46,18 +60,19 @@ class BurgerBuilder extends Component {
             return;
         }
         const newCount = oldCount - 1;
-        const updatedIngredient = {
+        const updatedIngredients = {
             ...this.state.ingredients,
         };
-        updatedIngredient[type] = newCount;
+        updatedIngredients[type] = newCount;
 
         const priceDeduction = INGREDIENT_PRICE[type];
         const oldPrice = this.state.totalPrice;
         const newPrice = oldPrice - priceDeduction ;
         this.setState({
             totalPrice: newPrice,
-            ingredients: updatedIngredient,
+            ingredients: updatedIngredients,
         });
+        this.updatePurchaseState(updatedIngredients);
     }
 
     render() {
@@ -76,6 +91,7 @@ class BurgerBuilder extends Component {
                     ingredientAdded={this.addIngredientHandler} 
                     ingredientRemoved={this.removeIngredientHandler}
                     disabled={disabledInfo}
+                    purchasable={this.state.purchasable}
                     price={this.state.totalPrice} />
             </Aux>
         );