Skip to content

E
ecommerce-maven
Commit ebab7434 authored by Shaphen Pangburn's avatar Shaphen Pangburn
Browse files
Options

Resolve merge conflicts

parent c192bbc3
Hide whitespace changes
Inline Side-by-side
Showing with 58 additions and 338 deletions
ecom-web/src/components/checkout/checkout.js
View file @ ebab7434
import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import ShippingAddress from './ShippingAddress.js'
import PaymentMethod from './PaymentMethod.js'
import ReviewOrder from './ReviewOrder.js'
import SubmitOrder from './SubmitOrder.js'
import './checkout.css'
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
///////////////////////
......@@ -27,7 +20,6 @@ export default function Checkout() {
// 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("")
......@@ -35,9 +27,6 @@ export default function Checkout() {
const [city, setCity] = useState("")
const [state, setState] = useState("")
const [zipCode, setZipCode] = useState("")
///////////////////////
// Billing Info State
///////////////////////
......@@ -45,57 +34,43 @@ export default function Checkout() {
const [cardHolderName, setCardHolderName] = useState(["Guy Fieri"])
const [expirationDate, setExpirationDate] = useState(["05/20206"])
const [cvv, setCVV] = useState(["123"])
///////////////////////
// Order Review / Summary State
///////////////////////
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)
///////////////////////
// Form Submission State
///////////////////////
const user = useSelector(state => state.user.currentUser)
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])
useEffect(() => {
if (submitButtonActive === 1) {
if (allFieldsValidated) {
setErrorWhileValidating(0)
handleSubmit()
console.log("Successful submission request")
setSubmitButtonActive(0)
const cartUpdateObj = {
userId: user.email,
cartItems: []
}
// clear user cart now that order has been placed
dispatch(updateUserCart(cartUpdateObj, cartUpdateObj.userId))
dispatch(storeCartItemsInProcessing([]))
......@@ -108,28 +83,9 @@ export default function Checkout() {
}
}
else { ; }
}, [submitButtonActive])
let handleSubmit = () => {
console.log("Submitting Order!")
// let order = {}
// order["firstName"] = firstName
// order["lastName"] = lastName
// order["shippingAddress"] = shippingAddress
// order["aptSuitNo"] = aptSuiteNo
// order["city"] = city
// order["state"] = state
// order["zipCode"] = zipCode
// order["cardNumber"] = cardNumber
// order["cardHolderName"] = cardHolderName
// order["expirationDate"] = expirationDate
// order["cvv"] = cvv
// console.log(order)
let orderInfo = {
"user": {
"userId": user.userId,
......@@ -150,41 +106,11 @@ export default function Checkout() {
"cartItems": cart
}
}
console.log(orderInfo)
dispatch(dispatchOrderInfo(orderInfo))
}
// 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)
console.log("Last Name: " + lastName)
console.log("Shipping Address: " + shippingAddress)
console.log("Apt Suite No: " + aptSuiteNo)
console.log("City: " + city)
console.log("State: " + state)
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)
console.log("Card Holder Name: " + cardHolderName)
console.log("Expiration Date: " + expirationDate)
console.log("CVV: " + cvv)
}, [cardNumber, cardHolderName, expirationDate, cvv])
return (
<div id="checkout-container">
{/* Collects User's shipping info */}
<ShippingAddress
captureFirstName={setFirstName}
......@@ -195,7 +121,6 @@ export default function Checkout() {
captureState={setState}
captureZipCode={setZipCode}
/>
{/* Collects User's payment info */}
<PaymentMethod
cardNumber={cardNumber}
......@@ -207,7 +132,6 @@ export default function Checkout() {
captureExpirationDate={setExpirationDate}
captureCVV={setCVV}
/>
{/* Displays info about order. Calculates price with tax / shipping applied */}
<ReviewOrder
numCartItems={numCartItems}
......@@ -215,7 +139,6 @@ export default function Checkout() {
shippingHandling={shippingHandling}
taxRate={taxRate}
/>
{/* Request to submit happens here, initiates input validation and sends if success */}
<SubmitOrder
submitButtonActive={submitButtonActive}
......@@ -223,9 +146,6 @@ export default function Checkout() {
errorWhileValidating={errorWhileValidating}
allFieldsValidated={allFieldsValidated}
/>
</div>
)
}
}
\ No newline at end of file
ecom-web/src/components/shopping-cart/CartItem.js
View file @ ebab7434
import React from 'react'
import './shopping-cart.css'
export default function CartItem(props) {
return (
<div className="shoppingCartItem" >
{console.log(props.productInfo)}
{/* This is based on amazon's style */}
{/* Flex-Direction: Row */}
{/* Left image div */}
<div id="productImageContainer">
<img className="productImage" alt="" src={props.productInfo.productImageUrl} />
<div className="productImageContainer">
<img className="productImage" alt="Product" src={props.productInfo.productImageUrl} />
</div>
{/* Name and Product details */}
<div id="nameAndDetails">
<div id="productName">{props.productInfo.productName}</div>
<div id="productStock">{props.productInfo.availableStock} left in stock</div>
<div className="nameAndDetails">
<div className="productName">{props.productInfo.productName}</div>
<div className="productStock">{props.productInfo.availableStock} left in stock</div>
<div className="quantityControls">
<input
className="productQuantitySelect"
type="number"
......@@ -32,37 +22,13 @@ export default function CartItem(props) {
max="99"
onChange={(e) => {props.handleQuantityUpdate(props.productInfo.sku, parseInt( e.target.value) )}}
/>
<button onClick={() => { props.handleDelete(props.productInfo.sku) }}>Delete</button>
</div>
</div>
{/* Price and promotions */}
<div id="priceAndPromotions">
<div id="productPrice">${props.productInfo.price.toFixed(2)}</div>
<div className="priceAndPromotions">
<div className="productPrice">${props.productInfo.price.toFixed(2)}</div>
</div>
</div>
)
}
/*
brand
name
price
*/
\ No newline at end of file
}
\ No newline at end of file
ecom-web/src/components/shopping-cart/shopping-cart-container.jsx
View file @ ebab7434
import { connect } from 'react-redux';
import ShoppingCart from './shopping-cart';
import ShoppingCart from './shopping-cart.js';
const mSTP = state => ({
......
ecom-web/src/components/shopping-cart/shopping-cart.css
View file @ ebab7434
* {
font-family: Arial, sans-serif;
}
#shoppingCartContainer {
display: flex;
flex-direction: column;
......@@ -11,11 +9,17 @@
height: 100vh;
width: 100%;
}
#cartItemList {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 100px;
}
.shoppingCartItem {
width: 80%;
min-height: 250px;
min-height: 200px;
border-top: 2px solid black;
display: flex;
background-color: white;
......@@ -24,31 +28,33 @@
align-items: center;
justify-content: space-between;
}
#productImageContainer {
.productName {
padding-top: 25px;
margin-bottom: 15px;
font-size: 125%;
}
.productImageContainer {
display: flex;
width: 30%;
margin-right: 20px;
max-height: 100%;
max-width: 100%;
}
.productImage {
display: flex;
width: 100%;
padding: 15px;
/* height: auto; */
/* max-height: 100%; */
}
#nameAndDetails {
.nameAndDetails {
display: flex;
width: 45%;
height: 200px;
flex-direction: column;
text-align: left;
}
#priceAndPromotions {
.priceAndPromotions {
display: flex;
width: 10%;
height: 200px;
......@@ -56,11 +62,33 @@
flex-direction: column;
align-items: flex-end;
}
#productQuantitySelect {
.productPrice {
margin-top: 40px;
font-size: 125%;
font-weight: bold;
}
.quantityControls{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
.productQuantitySelect {
width: 40px;
}
#checkoutButtonContainer {
width: 50%;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#checkoutButton {
width: 100%;
height: 100%;
background-color: black;
color: white;
font-size: 150%;
font-weight: bold;
margin-bottom: 100px;
}
\ No newline at end of file
ecom-web/src/components/shopping-cart/shopping-cart.js
View file @ ebab7434
......@@ -5,26 +5,17 @@ import { useSelector, useDispatch } from 'react-redux'
import { Link, Redirect } from 'react-router-dom'
import { updateUserCart} from './../../actions/cart_actions'
import { calcTotalPrice, calcNumItems, storeCartItemsInProcessing } from './../../actions/cart_processing_actions'
export default function ShoppingCart() {
const dispatch = useDispatch()
const userSession = useSelector(state => state.user.currentUser)
const allProducts = useSelector(state => state.market.products)
const [cartRefs, setCartRefs] = useState(useSelector(state => state.cart))
const [cartItems, setCartItems] = useState([])
////////////////////////////////////////////////////////////////
// Map Product Refs to Products that exist in redux global state
////////////////////////////////////////////////////////////////
useEffect(() => {
const productsFromRefs = []
cartRefs.map((cartRef) => {
productsFromRefs.push((
{
......@@ -32,31 +23,22 @@ export default function ShoppingCart() {
quantity: cartRef.quantity
}))
})
console.log("NEW PRODUCTS FROM REFS YO")
console.log(productsFromRefs)
setCartItems(productsFromRefs)
}, [cartRefs])
////////////////////////////////
// Delete Item from Cart
////////////////////////////////
let handleDelete = (skuToBeDeleted) => {
const newCartRefs = cartRefs.filter((cartRef) => !(cartRef.productRef.sku === skuToBeDeleted))
setCartRefs(newCartRefs)
}
////////////////////////////////
// Update Quantity of an item
////////////////////////////////
let handleQuantityUpdate = (skuToBeUpdated, newQuantity) => {
const newCartRefs = []
cartRefs.map( (cartRef) => {
if (cartRef.productRef.sku === skuToBeUpdated) {
let temp = cartRef
......@@ -67,35 +49,26 @@ export default function ShoppingCart() {
newCartRefs.push(cartRef)
}
})
setCartRefs(newCartRefs)
}
////////////////////////////////////////////////////////////////
// Sync Cart with backend and redux global state
////////////////////////////////////////////////////////////////
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])
if (!userSession) return <Redirect to="/product-market" />
return (
<div id="shoppingCartContainer">
{/* map each cart item into CartItem component */}
<div id="cartItemList">
{cartItems.map((currItem) => {
return (
......@@ -109,12 +82,9 @@ export default function ShoppingCart() {
)
})}
</div>
<Link id="checkoutButtonContainer" to="/checkout">
<button id="checkoutButton">Proceed To Checkout</button>
</Link>
</div>
)
}
}
\ No newline at end of file
ecom-web/src/components/shopping-cart/shopping-cart.jsx deleted 100644 → 0
View file @ c192bbc3
import React, {useState, useEffect} from 'react'
import CartItem from './CartItem.js'
import './shopping-cart.css'
export default function ShoppingCart() {
const [cartItems, setCartItems] = useState([])
// load the json containing user's cart items
useEffect( () => {
setCartItems(
[
{
"id": 1,
"sku": 1,
"upc": 1,
"productName": "UMYOGO Mens Athletic Walking Blade Running Tennis Shoes",
"productDescription": "Rubber sole Rubber material of sole possesses high durability for prolonging the wearing time of our shoes.\nThe elastic blade soles have high flexibility which allows the shoes to bend strongly while doing sports.\nKnit upper material make it possible that your feet free breath when you run or walk.\nIt's soft and protective to cushion your every step",
"price": 45.00,
"availableStock": 100,
"blockedStock": 20,
"productImageUrl": "https://images-na.ssl-images-amazon.com/images/I/71djekdy4eL._AC_UY695_.jpg",
"brand": "UMYOGO",
"category": "shoe",
"quantity": 2
},
{
"id": 2,
"sku": 2,
"upc": 2,
"productName": "adidas Women's Cloudfoam Pure Running Shoe",
"productDescription": "100% Synthetic\nImported\nRubber sole\nPlatform measures approximately 0-3 inches\nBoot opening measures approximately 6-12 inches around\nWomen's specific fit\nCloudfoam memory sockliner and textile lining",
"price": 50.00,
"availableStock": 100,
"blockedStock": 20,
"productImageUrl": "https://images-na.ssl-images-amazon.com/images/I/71G0sB8FnFL._AC_UX695_.jpg",
"brand": "Adidas",
"category": "shoe"
},
{
"id": 3,
"sku": 3,
"upc": 3,
"productName": "Merrell Men's Moab 2 Vent Hiking Shoe",
"productDescription": "100% suede leather, mesh\nImported\nSynthetic sole\nPerformance suede leather and mesh upper\nBellows, closed-cell foam tongue keeps moisture and debris out",
"price": 100.00,
"availableStock": 100,
"blockedStock": 20,
"productImageUrl": "https://images-na.ssl-images-amazon.com/images/I/81m9GyEmoRL._AC_UX695_.jpg",
"brand": "Merrell",
"category": "shoe"
},
{
"id": 4,
"sku": 4,
"upc": 4,
"productName": "Nike Women's Training Basketball Shoe",
"productDescription": "Rubber\nBrand New\n100% Authentic\nOriginal Packaging",
"price": 85.00,
"availableStock": 100,
"blockedStock": 20,
"productImageUrl": "https://images-na.ssl-images-amazon.com/images/I/71zKmTHcHUL._AC_UX695_.jpg",
"brand": "Nike",
"category": "shoe"
},
{
"id": 5,
"sku": 5,
"upc": 5,
"productName": "adidas Men's Daily 3.0 Skate Shoe",
"productDescription": "100% Leather\nRubber sole\nadidas Mens Skate Shoe\nThe adidas brand has a long history and deep-rooted connection with sport. Everything we do is rooted in sport",
"price": 85.00,
"availableStock": 100,
"blockedStock": 20,
"productImageUrl": "https://images-na.ssl-images-amazon.com/images/I/71NVcBO0LEL._AC_UX695_.jpg",
"brand": "Adidas",
"category": "shoe"
},
{
"id": 6,
"sku": 6,
"upc": 6,
"productName": "Amazon Basics Lightweight Soft Easy Care Microfiber Pillowcases - 2-Pack, Black",
"productDescription": "100% Polyester\nImported\nIncludes two 20 x 30 inch standard-size pillowcases\nPolyester microfiber offers strength and exceptional softness",
"price": 8.99,
"availableStock": 100,
"blockedStock": 20,
"productImageUrl": "https://images-na.ssl-images-amazon.com/images/I/818vTEo5TPL._AC_SX679_.jpg",
"brand": "Amazon Basics",
"category": "pillow case"
},
{
"id": 7,
"sku": 7,
"upc": 7,
"productName": "Pillowcase Set of 2 Durable Chair Cushion, Chair Pad Filled Cotton",
"productDescription": "Comfortable Thickness: Seat pad with a thickness of 10 cm is sufficient to relieve stress, so if you sit for a long time, you will feel its warmth and softness.",
"price": 42.99,
"availableStock": 100,
"blockedStock": 20,
"productImageUrl": "https://images-na.ssl-images-amazon.com/images/I/61Txdww5uXS._AC_SX679_.jpg",
"brand": "PillowCase",
"category": "pillow case"
},
{
"id": 8,
"sku": 8,
"upc": 8,
"productName": "Amazon Basics Lightweight Soft Easy Care Microfiber Pillowcases - 2-Pack, Navy Blue",
"productDescription": "100% Polyester\nImported\nIncludes two 20 x 30 inch standard-size pillowcases\nPolyester microfiber offers strength and exceptional softness",
"price": 8.99,
"availableStock": 100,
"blockedStock": 20,
"productImageUrl": "https://images-na.ssl-images-amazon.com/images/I/81jZRRyZCfL._AC_SX679_.jpg",
"brand": "Amazon Basics",
"category": "pillow case"
},
{
"id": 9,
"sku": 9,
"upc": 9,
"productName": "Bedsure Bamboo Pillow Cases Queen Set of 2 - Cooling Ultra Soft Pillowcases",
"productDescription": "Bamboo-derived Rayon\nExceptionally Bamboo Texture: Bedsure queen Pillowcases layer your sleep space with an irresistibly sleek sateen finish to transform your bed into a luxurious retreat - Slip in feathery soft pillowcases to have a dreamy rest as if you are sleeping on a cloud and also wake up with cool feelings - Silky smooth to the touch, bamboo pillowcase queen glides over your hair and face to create a beauty sleep.",
"price": 11.04,
"availableStock": 100,
"blockedStock": 20,
"productImageUrl": "https://images-na.ssl-images-amazon.com/images/I/61IdiIz3qML._AC_SX679_.jpg",
"brand": "BedSure",
"category": "pillow case"
},
{
"id": 10,
"sku": 10,
"upc": 10,
"productName": "Amazon Basics Lightweight Soft Easy Care Microfiber Pillowcases - 2-Pack, Taupe",
"productDescription": "100% Polyester\nImported\nIncludes two 20 x 30 inch standard-size pillowcases\nPolyester microfiber offers strength and exceptional softness",
"price": 8.99,
"availableStock": 100,
"blockedStock": 20,
"productImageUrl": "https://images-na.ssl-images-amazon.com/images/I/91GB7gHxSuL._AC_SX679_.jpg",
"brand": "Amazon Basics",
"category": "pillow case"
}
]
)
}, [] )
return (
<div id="shoppingCartContainer">
{/* map each cart item into CartItem component */}
{cartItems.map( (currItem) => {
return (
<CartItem productInfo={currItem} />
)
})}
</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