Navigating to the <ContactData /> Component

README.md

@@ -74,3 +74,4 @@ Firebase Common API Endpoint: <https://burger-builder-ram.firebaseio.com/>
 3. Navigating to the Checkout Page: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/0b4e6a4c06d40293f5b77cf0255f5be35680d1a8)
 4. Navigating Back & To Next Page: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/055272d5adc3d75bb447e681bf5e149d026af714)
 5. Passing `ingredients` data via Query Params using `URLSearchParams()` & `encodeURIComponent()` methods: [Commit Details](https://github.com/Ch-sriram/burger-builder/commit/269ed08052bb9ceedabc3692510fd72c6d7650fe)
+6. Navigating to the `<ContactData />` Component: [Commit Details]()

src/containers/Checkout/Checkout.component.jsx

@@ -1,8 +1,10 @@
 // LIBRARY IMPORTS
 import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
 
 // CUSTOM COMPONENTS
 import CheckoutSummary from '../../components/Order/CheckoutSummary/CheckoutSummary.component';
+import ContactData from './ContactData/ContactData.component';
 
 class Checkout extends Component {
   state = {
@@ -35,6 +37,8 @@ class Checkout extends Component {
           checkoutCancelled={this.checkoutCancelledHandler}
           checkoutContinued={this.checkoutContinuedHandler}
         />
+        <Route
+          path={`${this.props.match.url}/contact-data`} component={ContactData} />
       </div>
     );
   }

src/containers/Checkout/ContactData/ContactData.component.jsx

@@ -0,0 +1,65 @@
+// LIBRARY IMPORTS
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+// CUSTOM COMPONENTS
+import { StyledButton as Button } from '../../../components/UI/Buttons/StyledButton.styled';
+
+// STYLED COMPONENTS
+const FormDiv = styled.div`
+  margin: 20px auto;
+  width: 80%;
+  text-align: center;
+  box-shadow: 0 2px 3px #CCC;
+  border: 1px solid #EEE;
+  padding: 10px;
+  box-sizing: border-box;
+  
+  & form {
+    display: flex; 
+    flex-flow: column; 
+    align-items: center;
+
+    input:not(:last-of-type) {
+      margin-bottom: 7px;
+    }
+
+    input {
+      width: 50%;
+      text-align: center; 
+      font: inherit;
+    }
+  }
+  
+  @media (min-width: 600px) { width: 500px; }
+`;
+
+class ContactData extends Component {
+  // we'll add this info dynamically after we know about 
+  // handling forms in react
+  state = {
+    name: '',
+    email: '',
+    address: {
+      street: '',
+      postalCode: '',
+    }
+  }
+
+  render() {
+    return (
+      <FormDiv>
+        <h3>Enter Your Contact Details</h3>
+        <form>
+          <input type="text" name="name" placeholder="Your Name" />
+          <input type="email" name="email" placeholder="Your E-Mail" />
+          <input type="text" name="street" placeholder="Street Address" />
+          <input type="text" name="postal" placeholder="Postal Code" />
+          <Button type="success">ORDER</Button>
+        </form>
+      </FormDiv>
+    );
+  }
+}
+
+export default ContactData;