Merge branch 'AFP68-pipeline-user-session-place-order' into 'Dev'

Afp68 pipeline user session place order

See merge request !24

ecom-web/src/actions/cart_actions.js

@@ -3,6 +3,7 @@ import * as ApiUtil from '../util/cart_api_util';
 export const RECEIVE_USER_CART = "RECEIVE_USER_CART";
 export const CLEAR_USER_CART = "CLEAR_USER_CART";
 
+
 const receiveUserCart = cart => ({
     type: RECEIVE_USER_CART,
     cart
@@ -12,6 +13,7 @@ export const clearUserCart = () => ({
     type: CLEAR_USER_CART
 })
 
+
 export const fetchUserCart = userEmail => dispatch => ApiUtil.fetchUserCart(userEmail)
     .then(cart => dispatch(receiveUserCart(cart)));
 
@@ -20,3 +22,4 @@ export const updateUserCart = (updatedCart, userEmail) => dispatch => ApiUtil.up
 
 export const createUserCart = newCart => dispatch => ApiUtil.createCart(newCart)
     .then(res => res.json)
+

ecom-web/src/actions/cart_processing_actions.js

+import {priceCalcUtil, numItemsCalcUtil} from '../util/cart_processing_util'
+
+export const GET_TOTAL_PRICE = "GET_TOTAL_PRICE"
+export const GET_NUM_ITEMS = "GET_NUM_ITEMS"
+export const GET_CART_PRODUCTS = "GET_CART_PRODUCTS"
+
+export const getTotalPrice = (totalPrice) => ({
+    type: GET_TOTAL_PRICE,
+    payload: totalPrice
+})
+
+export const getNumItems = (numItems) => ({
+    type: GET_NUM_ITEMS,
+    payload: numItems
+})
+
+export const getCartProducts = (cartProducts) => ({
+    type: GET_CART_PRODUCTS,
+    payload: cartProducts
+})
+
+
+export const calcTotalPrice = (productList) => {
+    return (dispatch) => {
+        return dispatch(getTotalPrice(priceCalcUtil(productList)))
+    }
+}
+
+export const calcNumItems = (productList) => {
+    return (dispatch) => {
+        return dispatch(getNumItems(numItemsCalcUtil(productList)))
+    }
+}
+
+export const storeCartItemsInProcessing = (productList) => {
+    return (dispatch) => {
+        return dispatch(getCartProducts(productList))
+    }
+}
\ No newline at end of file

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 
 export default function SubmitOrder(props) {
     
-    let handleSubmitClick = (e) => {
+    let handleSubmitClick = () => {
         console.log("Submit Button Clicked")
 
         props.setSubmitButtonActive(1)
@@ -17,7 +17,7 @@ export default function SubmitOrder(props) {
             </div>
 
             <div id="SubmitButtonContainer">
-                <p className="errorMessage">{(props.errorWhileValidating === 1 && props.allFieldsValidated[0] === 0)? 'One or more fields is missing a value' : ''}</p>
+                <p className="errorMessage">{(props.errorWhileValidating === 1 && props.allFieldsValidated === 0)? 'One or more fields is missing a value' : ''}</p>
                 <button id="SubmitButtonInput" onClick={() => {handleSubmitClick()}} >Submit Order</button>
             </div>
 

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

-import React, {useState, useEffect} from 'react'
-import {useSelector, useDispatch} from 'react-redux'
+import React, { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
 
 import ShippingAddress from './ShippingAddress.js'
 import PaymentMethod from './PaymentMethod.js'
@@ -7,41 +7,42 @@ import ReviewOrder from './ReviewOrder.js'
 import SubmitOrder from './SubmitOrder.js'
 import './checkout.css'
 
-import {dispatchOrderInfo} from './../../actions/checkout_actions'
+import { dispatchOrderInfo } from './../../actions/checkout_actions'
+import { updateUserCart } from './../../actions/cart_actions'
+import { calcTotalPrice, calcNumItems, storeCartItemsInProcessing } from './../../actions/cart_processing_actions'
 
 
 export default function Checkout() {
-    
-    ///////////////////////
-    // REDUX Global State
-    ///////////////////////
-    // const {currentUser} = useSelector(state => state)
-    // const {cart} = useSelector(state => state)
-    
-    
-    ///////////////////////
-    // Submit Action State
-    ///////////////////////
-    
+
+
     const dispatch = useDispatch()
 
     ///////////////////////
     // Shipping Info State
     ///////////////////////
-    const [firstName, setFirstName] = useState([])
-    const [lastName, setLastName] = useState([])
-    const [shippingAddress, setShippingAddress] = useState([])
-    const [aptSuiteNo, setAptSuiteNo] = useState([])
-    const [city, setCity] = useState([])
-    const [state, setState] = useState([])
-    const [zipCode, setZipCode] = useState([])
+    // const [firstName, setFirstName] = useState("Guy")
+    // const [lastName, setLastName] = useState("Fieri")
+    // const [shippingAddress, setShippingAddress] = useState("1234 Flavortown Dr")
+    // const [aptSuiteNo, setAptSuiteNo] = useState("Apt 317")
+    // const [city, setCity] = useState("Santa Rosa")
+    // const [state, setState] = useState("California")
+    // const [zipCode, setZipCode] = useState("90210")
+
+    const [firstName, setFirstName] = useState("")
+    const [lastName, setLastName] = useState("")
+    const [shippingAddress, setShippingAddress] = useState("")
+    const [aptSuiteNo, setAptSuiteNo] = useState("")
+    const [city, setCity] = useState("")
+    const [state, setState] = useState("")
+    const [zipCode, setZipCode] = useState("")
+
 
 
     ///////////////////////
     // Billing Info State
     ///////////////////////
     const [cardNumber, setCardNumber] = useState(["123456789"])
-    const [cardHolderName, setCardHolderName] = useState(["Jane Doe"])
+    const [cardHolderName, setCardHolderName] = useState(["Guy Fieri"])
     const [expirationDate, setExpirationDate] = useState(["05/20206"])
     const [cvv, setCVV] = useState(["123"])
 
@@ -49,110 +50,96 @@ export default function Checkout() {
     ///////////////////////
     // Order Review / Summary 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
+
+    const numCartItems = useSelector(state => state.cartProcessing.numItems)
+    const itemsTotal = useSelector(state => state.cartProcessing.totalPrice)
+    const taxRate = 0.0725
+    const shippingHandling = 9.00
 
 
     ///////////////////////
     // Submit Button State
     ///////////////////////
-    const [submitButtonActive, setSubmitButtonActive] = useState([0])
-    const [allFieldsValidated, setAllFieldsValidated] = useState([0])
-    const [errorWhileValidating, setErrorWhileValidating] = useState([0])
+    const [submitButtonActive, setSubmitButtonActive] = useState(0)
+    const [allFieldsValidated, setAllFieldsValidated] = useState(0)
+    const [errorWhileValidating, setErrorWhileValidating] = useState(0)
+
 
+    ///////////////////////
+    // Form Submission State
+    ///////////////////////
+    const user = useSelector(state => state.user.currentUser)
+    const cart = useSelector(state => state.cart)
 
-    // This effect listens for the submit button to be clicked
-    // It then checks each of the required fields to make sure they are non null
-    useEffect( () => {
 
-        // when submit button clicked after being inactive
+    useEffect(() => {
+
+        if (firstName && lastName && shippingAddress && city && state && zipCode) {
+            console.log("All Fields Validated!")
+            setAllFieldsValidated(1)
+        }
+
+    }, [firstName, lastName, shippingAddress, city, state, zipCode])
+
+    useEffect(() => {
+
         if (submitButtonActive === 1) {
-            
-            // fields to make sure are non-empty
-            let fieldsToCheck = [
-                firstName,
-                lastName,
-                shippingAddress,
-                city,
-                state,
-                zipCode
-            ]
-    
-            // initially validated, gets flipped if required field is empty
-            let validated = 1
-            for (let i in fieldsToCheck) {
-                if (fieldsToCheck[i].length === 0) {
-                    console.log("a required Field Value was empty")
-                    validated = 0
-                    break
+            if (allFieldsValidated) {
+                setErrorWhileValidating(0)
+                handleSubmit()
+                console.log("Successful submission request")
+                setSubmitButtonActive(0)
+
+
+                const cartUpdateObj = {
+                    userId: user.email,
+                    cartItems: []
                 }
-            }
-    
-            // if validated, propogate to component state that all fields were validated
-            if (validated === 1) {
-                setAllFieldsValidated(1)
-            }
 
-            // if invalid, propogate to component state
+                // clear user cart now that order has been placed
+                dispatch(updateUserCart(cartUpdateObj, cartUpdateObj.userId))
+                dispatch(storeCartItemsInProcessing([]))
+                dispatch(calcTotalPrice([]))
+                dispatch(calcNumItems([]))
+            }
             else {
-                console.log("Failed to validate")
                 setErrorWhileValidating(1)
                 setSubmitButtonActive(0)
             }
         }
+        else { ; }
 
-        // when submit button gets reset from active to inactive
-        else if (submitButtonActive === 0) {
-            ;
-        }
 
     }, [submitButtonActive])
 
 
 
-    // This effect looks for the allFieldsValidated signal and fires off the order submission when complete
-    useEffect( () => {
-        handleSubmit()
-        console.log("Successful submission request")
-    }, [allFieldsValidated])
-
-
-
     let handleSubmit = () => {
         console.log("Submitting Order!")
 
-        let chrisSpec = {
+        let orderInfo = {
             "user": {
-                "userId": "e-com-test-id",
-                "email": "test@test.test",
-                "firstName":"ecom",
-                "lastName":"test"
+                "userId": user.userId,
+                "email": user.email,
+                "firstName": user.firstName,
+                "lastName": user.lastName,
+                "accessToken": user.accessToken
             },
             "address": {
-                "state": "IL",
-                "city": "chicago",
-                "zip": "90210",
-                "street": "Grand"
+                "state": state,
+                "city": city,
+                "zip": zipCode,
+                "street": shippingAddress
             },
             "cart": {
                 "id": "something",
-                "userId": "e-com-test-id",
-                "cartItems":[
-                        {
-                            "quantity": 2,
-                            "productRef": {
-                                "id": "something",
-                                "sku": "AFP-1",
-                                "upc": "00002"
-                            }
-                        }
-                    ]
-            }   
+                "userId": user.userId,
+                "cartItems": cart
+            }
         }
 
-        dispatch(dispatchOrderInfo(chrisSpec))
+        console.log(orderInfo)
+        dispatch(dispatchOrderInfo(orderInfo))
 
     }
 
@@ -160,7 +147,7 @@ export default function Checkout() {
         <div id="checkout-container">
 
             {/* Collects User's shipping info */}
-            <ShippingAddress 
+            <ShippingAddress
                 captureFirstName={setFirstName}
                 captureLastName={setLastName}
                 captureShippingAddress={setShippingAddress}
@@ -175,7 +162,7 @@ export default function Checkout() {
                 cardNumber={cardNumber}
                 cardHolderName={cardHolderName}
                 expirationDate={expirationDate}
-                cvv={cvv} 
+                cvv={cvv}
                 captureCardNumber={setCardNumber}
                 captureCardHolderName={setCardHolderName}
                 captureExpirationDate={setExpirationDate}
@@ -197,7 +184,7 @@ export default function Checkout() {
                 errorWhileValidating={errorWhileValidating}
                 allFieldsValidated={allFieldsValidated}
             />
-            
+
         </div>
     )
 }

ecom-web/src/components/shopping-cart/CartItem.js

@@ -27,7 +27,7 @@ export default function CartItem(props) {
                         value={props.quantity}
                         min="1"
                         max="99"
-                        onChange={(e) => {props.handleQuantityUpdate(props.productInfo.sku, e.target.value)}}
+                        onChange={(e) => {props.handleQuantityUpdate(props.productInfo.sku, parseInt( e.target.value) )}}
                     />
                     
                     

ecom-web/src/components/shopping-cart/shopping-cart.js

@@ -3,7 +3,8 @@ import CartItem from './CartItem.js'
 import './shopping-cart.css'
 import { useSelector, useDispatch } from 'react-redux'
 import { Link, Redirect } from 'react-router-dom'
-import { updateUserCart } from './../../actions/cart_actions'
+import { updateUserCart} from './../../actions/cart_actions'
+import { calcTotalPrice, calcNumItems, storeCartItemsInProcessing } from './../../actions/cart_processing_actions'
 
 
 export default function ShoppingCart() {
@@ -75,12 +76,16 @@ export default function ShoppingCart() {
   ////////////////////////////////////////////////////////////////
   useEffect(() => {
     if (!userSession) return;
+    
     const cartUpdateObj = {
       userId: userSession.email,
       cartItems: cartRefs
     }
 
     dispatch(updateUserCart(cartUpdateObj, cartUpdateObj.userId))
+    dispatch(storeCartItemsInProcessing(cartItems))
+    dispatch(calcTotalPrice(cartItems))
+    dispatch(calcNumItems(cartItems))
 
   }, [cartItems])
 

ecom-web/src/reducers/cart_processing_reducer.js

+import {GET_TOTAL_PRICE, GET_NUM_ITEMS, GET_CART_PRODUCTS} from './../actions/cart_processing_actions'
+
+
+const initialState = {
+    cartProducts: [],
+    numItems: 0,
+    totalPrice: 0
+}
+
+const cartProcessingReducer = (prevState = initialState, action) => {
+    Object.freeze(prevState)
+    const nextState = {...prevState}
+
+    switch (action.type) {
+        
+        case GET_TOTAL_PRICE:
+            nextState.totalPrice = action.payload
+            return nextState
+
+        case GET_NUM_ITEMS:
+            nextState.numItems = action.payload
+            return nextState
+
+        case GET_CART_PRODUCTS:
+            nextState.cartProducts = action.payload
+            return nextState
+
+
+        default:
+            return nextState
+    }
+
+}
+
+export default cartProcessingReducer
\ No newline at end of file

ecom-web/src/reducers/root_reducer.js

@@ -3,14 +3,15 @@ import productsReducer from './products_reducer';
 import orderReducer from './order_reducer'
 import userReducer from './user_reducer'
 import cartReducer from './cart_reducer';
+import cartProcessingReducer from './cart_processing_reducer'
 
 
 const rootReducer = combineReducers({
     market: productsReducer,
     user: userReducer,
     cart: cartReducer,
-    orderStatus: orderReducer
-
+    orderStatus: orderReducer,
+    cartProcessing: cartProcessingReducer
 });
 
 export default rootReducer;
\ No newline at end of file

ecom-web/src/util/cart_api_util.js

@@ -9,6 +9,5 @@ export const createCart = newCart => {
 }
 
 export const updateCart = (updatedCart, userEmail) => {
-    // debugger
     return axios.put(`http://localhost:8080/api/carts/${userEmail}`, updatedCart)
-}
\ No newline at end of file
+}

ecom-web/src/util/cart_processing_util.js

+export const priceCalcUtil = (productList) => {
+    const totalPrice = productList.reduce((acc, curr) => {return parseFloat(acc) + (parseFloat(curr.product.price) * parseFloat(curr.quantity))}, 0)
+    console.log("PRICE IN CART: " + totalPrice)
+    return totalPrice
+}
+
+
+export const numItemsCalcUtil = (productList) => {
+    const totalItems = productList.reduce((acc, curr) => {return parseInt(acc) + parseInt(curr.quantity)}, 0)
+    console.log("ITEMS IN CART: " + totalItems)
+    return totalItems
+}