Add content code to be styled and apply input validation to

ecom-web/src/components/checkout/PaymentMethod.js

@@ -2,8 +2,29 @@ import React, {useState, useEffect} from 'react'
 
 export default function PaymentMethod() {
     return (
-        <div>
-            PAYMENT METHOD COMPONENT
+        <div id="PaymentInput">
+
+            <div className="OrderDirectionsElement" id="PaymentLabel">
+                <p>Step 2 - Billing</p>
+            </div>
+
+            <div className="shippingInfoInput" id="cardNumberInput">
+                <input placeholder="Card Number"></input>
+            </div>
+
+            <div className="shippingInfoInput" id="cardholderNameInput">
+                <input placeholder="Cardholder Name"></input>
+            </div>
+
+            <div className="shippingInfoInput" id="expirationDateInput">
+                <input placeholder="Expiration Date"></input>
+            </div>
+
+            <div className="shippingInfoInput" id="cvvCodeInput">
+                <input placeholder="CVV"></input>
+            </div>
+
+
         </div>
     )
 }

ecom-web/src/components/checkout/ReviewOrder.js

@@ -2,8 +2,65 @@ import React, {useState, useEffect} from 'react'
 
 export default function ReviewOrder() {
     return (
+        <div id="ReviewOrder">
+
+            <div className="OrderReviewElement" id="OrderSummary">
+                <p>Step 3 - Order Summary</p>
+            </div>
+
+            <div>
+                <div>
+                    Items (n):
+                </div>
+
+                <div>
+                    $xxx.xx
+                </div>
+            </div>
+
+
             <div>
-            REVIEW ORDER COMPONENT
+                <div>
+                    Shipping and Handling:
+                </div>
+
+                <div>
+                    $xxx.xx
+                </div>
+            </div>
+
+            <div>
+                <div>
+                    Total Before Tax
+                </div>
+
+                <div>
+                    $xxx.xx
+                </div>
+            </div>
+
+            <div>
+                <div>
+                    Estimated Tax:
+                </div>
+
+                <div>
+                    $xxx.xx
+                </div>
+            </div>
+
+            <div>
+                <div>
+                    Order Total:
+                </div>
+
+                <div>
+                    $xxx.xx
+                </div>
+            </div>
+
+
+
         </div>
     )
 }

ecom-web/src/components/checkout/ShippingAddress.js

@@ -2,8 +2,43 @@ import React, {useState, useEffect} from 'react'
 
 export default function ShippingAddress() {
     return (
-        <div>
-            SHIPPING ADDRESS COMPONENT
+        <div id="shippingInput">
+
+            <div className="OrderDirectionsElement" id="ShippingLabel">
+                <p>Step 1 - Shipping</p>
+            </div>
+
+            <div className="shippingInfoInput" id="firstNameInput">
+                <input placeholder="First Name"></input>
+            </div>
+
+            <div className="shippingInfoInput" id="lastNameInput">
+                <input placeholder="Last Name"></input>
+            </div>
+
+            <div className="shippingInfoInput" id="addressInput">
+                <input placeholder="Shipping Address"></input>
+            </div>
+
+            <div className="shippingInfoInput" id="aptSuiteInput">
+                <input placeholder="Apt. / Suite no"></input>
+            </div>
+
+            <div className="shippingInfoInput" id="cityInput">
+                <input placeholder="City"></input>
+            </div>
+
+            <div className="shippingInfoInput" id="stateInput">
+                <input placeholder="State"></input>
+            </div>
+
+            <div className="shippingInfoInput" id="zipCodeInput">
+                <input placeholder="Postal Code"></input>
+            </div>
+
+            <div className="shippingInfoInput" id="ShippingPriorityInput">
+                <input placeholder="Shipping Priority"></input>
+            </div>
         </div>
     )
 }

ecom-web/src/components/checkout/SubmitOrder.js

-import React, {useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
 
 export default function SubmitOrder() {
     return (
-        <div>
-            SUBMIT ORDER COMPONENT
+        <div id="SubmitOrder">
+
+            <div id="SubmitLabel">
+                <p>Step 4 - Checkout</p>
+            </div>
+
+
+            <div id="SubmitButtonInput">
+                <button>Submit Order</button>
+            </div>
+
+
         </div>
     )
 }

ecom-web/src/components/checkout/checkout.jsx → ecom-web/src/components/checkout/checkout.js

@@ -7,7 +7,15 @@ import SubmitOrder from './SubmitOrder.js'
 
 export default function checkout() {
     return (
-        <div>
+        <div id="checkout-container">
+
+            <ShippingAddress />
+
+            <PaymentMethod />
+
+            <ReviewOrder />
+
+            <SubmitOrder />
             
         </div>
     )