Skip to content

E
ecommerce-maven
Commit ec73ed49 authored by Kyle Muldoon's avatar Kyle Muldoon
Browse files
Options

All done

parent c7e9eb4f
Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 62 deletions
ecom-web/src/components/checkout/SubmitOrder.js
View file @ ec73ed49
......@@ -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
View file @ ec73ed49
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,24 +7,35 @@ 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() {
const dispatch = useDispatch()
///////////////////////
// Shipping Info State
///////////////////////
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("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("")
///////////////////////
......@@ -49,9 +60,9 @@ export default function Checkout() {
///////////////////////
// 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)
///////////////////////
......@@ -61,65 +72,48 @@ export default function Checkout() {
const cart = useSelector(state => state.cart)
useEffect(() => {
if (firstName && lastName && shippingAddress && city && state && zipCode) {
console.log("All Fields Validated!")
setAllFieldsValidated(1)
}
}, [firstName, lastName, shippingAddress, city, state, zipCode])
// 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( () => {
useEffect(() => {
// when submit button clicked after being inactive
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!")
......@@ -141,7 +135,7 @@ export default function Checkout() {
"id": "something",
"userId": user.userId,
"cartItems": cart
}
}
}
console.log(orderInfo)
......@@ -153,7 +147,7 @@ export default function Checkout() {
<div id="checkout-container">
{/* Collects User's shipping info */}
<ShippingAddress
<ShippingAddress
captureFirstName={setFirstName}
captureLastName={setLastName}
captureShippingAddress={setShippingAddress}
......@@ -168,7 +162,7 @@ export default function Checkout() {
cardNumber={cardNumber}
cardHolderName={cardHolderName}
expirationDate={expirationDate}
cvv={cvv}
cvv={cvv}
captureCardNumber={setCardNumber}
captureCardHolderName={setCardHolderName}
captureExpirationDate={setExpirationDate}
......@@ -190,7 +184,7 @@ export default function Checkout() {
errorWhileValidating={errorWhileValidating}
allFieldsValidated={allFieldsValidated}
/>
</div>
)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment