Implementing the functionality of the <StyledButton /> Component

README.md

@@ -32,3 +32,4 @@ NOTE: There can be more additions into the design, over iterations of the Applic
 15. Showing/Hiding the `<OrderSummary />` Modal Component w. Animation: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/c50a7880b846b16bb0b1267034faf945d18f40e0)
 16. Implementing a `<Backdrop />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/d97b727fe03205c73aaad09d223f08dd18febcb4)
 17. Adding a Custom Button `<StyledButton />` Component: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/d97b727fe03205c73aaad09d223f08dd18febcb4)
+18. Implementing the Functionality of the `<StyledButton />` Component: [Commit Details]()

src/components/Burger/OrderSummary/OrderSummary.component.jsx

@@ -5,6 +5,9 @@ import styled from 'styled-components';
 // CUSTOM COMPONENTS
 import Aux from '../../../hoc/Auxiliary/Auxiliary.hoc';
 
+// STYLED IMPORTS
+import { StyledButton as Button } from '../../UI/Buttons/StyledButton.styled';
+
 const UL = styled.ul`list-style-type: circle;`;
 
 const orderSummary = props => {
@@ -22,6 +25,12 @@ const orderSummary = props => {
       <UL>{ingredientSummary}</UL>
       <h4>Price: ${props.price.toFixed(2)}</h4>
       <p>Continue to Checkout?</p>
+      <Button
+        type="danger"
+        onClick={props.orderCancelled}>CANCEL</Button>
+      <Button
+        type="success"
+        onClick={props.orderContinued}>CONTINUE</Button>
     </Aux>
   );
 };

src/components/UI/Buttons/StyledButton.styled.jsx

@@ -10,7 +10,7 @@ export const StyledButton = styled.button`
   padding: 10px;
   margin: 10px;
   font-weight: bold;
-  color: ${props => props.color.toLowerCase() === 'success' ? '#5C9210' : '#944317'};
+  color: ${props => props.type.toLowerCase() === 'success' ? '#5C9210' : '#944317'};
 
   &:first-of-type {
     margin-left: 0;

src/containers/BurgerBuilder/BurgerBuilder.component.jsx

@@ -77,6 +77,10 @@ class BurgerBuilder extends Component {
     this.setState({ orderNow: false });
   }
 
+  orderContinueHandler = () => {
+    alert('Order Placed!');
+  }
+
   render() {
     const disabledInfo = { ...this.state.ingredients };
     for (let key in disabledInfo) {
@@ -89,6 +93,8 @@ class BurgerBuilder extends Component {
           <OrderSummary
             ingredients={this.state.ingredients}
             price={this.state.totalPrice}
+            orderCancelled={this.orderCancelHandler}
+            orderContinued={this.orderContinueHandler}
           />
         </Modal>
         <Burger ingredients={this.state.ingredients}/>