order cost summary content + logic complete

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

 import React, {useState, useEffect} from 'react'
 
-export default function ReviewOrder() {
+export default function ReviewOrder(props) {
+
+
+    let calcTotalBeforeTax = (itemsTotal, shippingTotal) => {
+        return parseFloat(itemsTotal) + parseFloat(shippingTotal)
+    }
+
+    let calcTaxAmount = (itemsTotal, shippingTotal, taxRate) => {
+        return calcTotalBeforeTax(itemsTotal, shippingTotal) * taxRate
+    }
+
+    let calcGrandTotal = (itemsTotal, shippingTotal, taxRate) => {
+        return calcTotalBeforeTax(itemsTotal, shippingTotal) * (parseFloat(1.00) + parseFloat(taxRate))
+    }
+    
     return (
         <div id="ReviewOrder">
 
@@ -10,11 +24,11 @@ export default function ReviewOrder() {
 
             <div className="OrderSummaryElement" id="itemsPrice">
                 <div>
-                    Items (n):
+                    Items {props.numCartItems}:
                 </div>
 
                 <div>
-                    $xxx.xx
+                    ${props.itemsTotal}
                 </div>
             </div>
 
@@ -25,7 +39,7 @@ export default function ReviewOrder() {
                 </div>
 
                 <div id="shippingHandlingPrice">
-                    $xxx.xx
+                    ${props.shippingHandling}
                 </div>
             </div>
 
@@ -35,7 +49,8 @@ export default function ReviewOrder() {
                 </div>
 
                 <div id="beforeTaxPrice">
-                    $xxx.xx
+                    {/* ${props.itemsTotal + props.shippingHandling} */}
+                    ${calcTotalBeforeTax(props.itemsTotal, props.shippingHandling)}
                 </div>
             </div>
 
@@ -45,7 +60,7 @@ export default function ReviewOrder() {
                 </div>
 
                 <div id="taxCalculatedPrice">
-                    $xxx.xx
+                    ${calcTaxAmount(props.itemsTotal, props.shippingHandling, props.taxRate)}
                 </div>
             </div>
 
@@ -55,7 +70,7 @@ export default function ReviewOrder() {
                 </div>
 
                 <div id="orderTotalPrice">
-                    $xxx.xx
+                    ${calcGrandTotal(props.itemsTotal, props.shippingHandling, props.taxRate)}
                 </div>
             </div>
         </div>

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

@@ -29,8 +29,23 @@ export default function Checkout() {
     const [cvv, setCVV] = useState([])
 
 
+    ///////////////////////
+    // Review Order State
+    ///////////////////////
+    const [numCartItems, setNumCartItems] = useState([3])
+    const [itemsTotal, setItemsTotal] = useState([87.65]) // arbitrary cart total
+    const [shippingHandling, setShippingHandling] = useState([8.00]) // arbitraty shipping and handling amount
+    const [taxRate, setTaxRate] = useState([0.0725]) // california tax rate
+
 
-    // This watches for changes on any shipping input field and prints the current states on any change
+    ///////////////////////
+    // Submit Button State
+    ///////////////////////
+    const [submitButtonActive, setSubmitButtonActive] = useState([false])
+    const [allFieldsValidated, setAllFieldsValidated] = useState([false])
+
+
+    // This watches for changes on any shipping input fields and prints the current states on any change
     useEffect( () => {
         console.log("======================================")
         console.log("First Name: " + firstName)
@@ -42,6 +57,8 @@ export default function Checkout() {
         console.log("Zip: " + zipCode)
     }, [firstName, lastName, shippingAddress, aptSuiteNo, city, state, zipCode])
 
+
+    // This watches for changes on any billing input fields and prints the current states on any change
     useEffect( () => {
         console.log("======================================")
         console.log("Card Number: " + cardNumber)
@@ -74,7 +91,12 @@ export default function Checkout() {
             />
 
             {/* Displays info about order. Calculates price with tax / shipping applied */}
-            <ReviewOrder />
+            <ReviewOrder
+                numCartItems={numCartItems}
+                itemsTotal={itemsTotal}
+                shippingHandling={shippingHandling}
+                taxRate={taxRate}
+            />
 
             {/* Request to submit happens here, initiates input validation and sends if success */}
             <SubmitOrder />