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 React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import ShippingAddress from './ShippingAddress.js' import ShippingAddress from './ShippingAddress.js'
import PaymentMethod from './PaymentMethod.js' import PaymentMethod from './PaymentMethod.js'
import ReviewOrder from './ReviewOrder.js' import ReviewOrder from './ReviewOrder.js'
import SubmitOrder from './SubmitOrder.js' import SubmitOrder from './SubmitOrder.js'
import './checkout.css' import './checkout.css'
import { dispatchOrderInfo } from './../../actions/checkout_actions' import { dispatchOrderInfo } from './../../actions/checkout_actions'
import { updateUserCart } from './../../actions/cart_actions' import { updateUserCart } from './../../actions/cart_actions'
import { calcTotalPrice, calcNumItems, storeCartItemsInProcessing } from './../../actions/cart_processing_actions' import { calcTotalPrice, calcNumItems, storeCartItemsInProcessing } from './../../actions/cart_processing_actions'
export default function Checkout() { export default function Checkout() {
const dispatch = useDispatch() const dispatch = useDispatch()
/////////////////////// ///////////////////////
// Shipping Info State // Shipping Info State
/////////////////////// ///////////////////////
...@@ -27,7 +20,6 @@ export default function Checkout() { ...@@ -27,7 +20,6 @@ export default function Checkout() {
// const [city, setCity] = useState("Santa Rosa") // const [city, setCity] = useState("Santa Rosa")
// const [state, setState] = useState("California") // const [state, setState] = useState("California")
// const [zipCode, setZipCode] = useState("90210") // const [zipCode, setZipCode] = useState("90210")
const [firstName, setFirstName] = useState("") const [firstName, setFirstName] = useState("")
const [lastName, setLastName] = useState("") const [lastName, setLastName] = useState("")
const [shippingAddress, setShippingAddress] = useState("") const [shippingAddress, setShippingAddress] = useState("")
...@@ -35,9 +27,6 @@ export default function Checkout() { ...@@ -35,9 +27,6 @@ export default function Checkout() {
const [city, setCity] = useState("") const [city, setCity] = useState("")
const [state, setState] = useState("") const [state, setState] = useState("")
const [zipCode, setZipCode] = useState("") const [zipCode, setZipCode] = useState("")
/////////////////////// ///////////////////////
// Billing Info State // Billing Info State
/////////////////////// ///////////////////////
...@@ -45,57 +34,43 @@ export default function Checkout() { ...@@ -45,57 +34,43 @@ export default function Checkout() {
const [cardHolderName, setCardHolderName] = useState(["Guy Fieri"]) const [cardHolderName, setCardHolderName] = useState(["Guy Fieri"])
const [expirationDate, setExpirationDate] = useState(["05/20206"]) const [expirationDate, setExpirationDate] = useState(["05/20206"])
const [cvv, setCVV] = useState(["123"]) const [cvv, setCVV] = useState(["123"])
/////////////////////// ///////////////////////
// Order Review / Summary State // Order Review / Summary State
/////////////////////// ///////////////////////
const numCartItems = useSelector(state => state.cartProcessing.numItems) const numCartItems = useSelector(state => state.cartProcessing.numItems)
const itemsTotal = useSelector(state => state.cartProcessing.totalPrice) const itemsTotal = useSelector(state => state.cartProcessing.totalPrice)
const taxRate = 0.0725 const taxRate = 0.0725
const shippingHandling = 9.00 const shippingHandling = 9.00
/////////////////////// ///////////////////////
// Submit Button State // Submit Button State
/////////////////////// ///////////////////////
const [submitButtonActive, setSubmitButtonActive] = useState(0) const [submitButtonActive, setSubmitButtonActive] = useState(0)
const [allFieldsValidated, setAllFieldsValidated] = useState(0) const [allFieldsValidated, setAllFieldsValidated] = useState(0)
const [errorWhileValidating, setErrorWhileValidating] = useState(0) const [errorWhileValidating, setErrorWhileValidating] = useState(0)
/////////////////////// ///////////////////////
// Form Submission State // Form Submission State
/////////////////////// ///////////////////////
const user = useSelector(state => state.user.currentUser) const user = useSelector(state => state.user.currentUser)
const cart = useSelector(state => state.cart) const cart = useSelector(state => state.cart)
useEffect(() => { useEffect(() => {
if (firstName && lastName && shippingAddress && city && state && zipCode) { if (firstName && lastName && shippingAddress && city && state && zipCode) {
console.log("All Fields Validated!") console.log("All Fields Validated!")
setAllFieldsValidated(1) setAllFieldsValidated(1)
} }
}, [firstName, lastName, shippingAddress, city, state, zipCode]) }, [firstName, lastName, shippingAddress, city, state, zipCode])
useEffect(() => { useEffect(() => {
if (submitButtonActive === 1) { if (submitButtonActive === 1) {
if (allFieldsValidated) { if (allFieldsValidated) {
setErrorWhileValidating(0) setErrorWhileValidating(0)
handleSubmit() handleSubmit()
console.log("Successful submission request") console.log("Successful submission request")
setSubmitButtonActive(0) setSubmitButtonActive(0)
const cartUpdateObj = { const cartUpdateObj = {
userId: user.email, userId: user.email,
cartItems: [] cartItems: []
} }
// clear user cart now that order has been placed // clear user cart now that order has been placed
dispatch(updateUserCart(cartUpdateObj, cartUpdateObj.userId)) dispatch(updateUserCart(cartUpdateObj, cartUpdateObj.userId))
dispatch(storeCartItemsInProcessing([])) dispatch(storeCartItemsInProcessing([]))
...@@ -108,28 +83,9 @@ export default function Checkout() { ...@@ -108,28 +83,9 @@ export default function Checkout() {
} }
} }
else { ; } else { ; }
}, [submitButtonActive]) }, [submitButtonActive])
let handleSubmit = () => { let handleSubmit = () => {
console.log("Submitting Order!") 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 = { let orderInfo = {
"user": { "user": {
"userId": user.userId, "userId": user.userId,
...@@ -150,41 +106,11 @@ export default function Checkout() { ...@@ -150,41 +106,11 @@ export default function Checkout() {
"cartItems": cart "cartItems": cart
} }
} }
console.log(orderInfo) console.log(orderInfo)
dispatch(dispatchOrderInfo(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 ( return (
<div id="checkout-container"> <div id="checkout-container">
{/* Collects User's shipping info */} {/* Collects User's shipping info */}
<ShippingAddress <ShippingAddress
captureFirstName={setFirstName} captureFirstName={setFirstName}
...@@ -195,7 +121,6 @@ export default function Checkout() { ...@@ -195,7 +121,6 @@ export default function Checkout() {
captureState={setState} captureState={setState}
captureZipCode={setZipCode} captureZipCode={setZipCode}
/> />
{/* Collects User's payment info */} {/* Collects User's payment info */}
<PaymentMethod <PaymentMethod
cardNumber={cardNumber} cardNumber={cardNumber}
...@@ -207,7 +132,6 @@ export default function Checkout() { ...@@ -207,7 +132,6 @@ export default function Checkout() {
captureExpirationDate={setExpirationDate} captureExpirationDate={setExpirationDate}
captureCVV={setCVV} captureCVV={setCVV}
/> />
{/* Displays info about order. Calculates price with tax / shipping applied */} {/* Displays info about order. Calculates price with tax / shipping applied */}
<ReviewOrder <ReviewOrder
numCartItems={numCartItems} numCartItems={numCartItems}
...@@ -215,7 +139,6 @@ export default function Checkout() { ...@@ -215,7 +139,6 @@ export default function Checkout() {
shippingHandling={shippingHandling} shippingHandling={shippingHandling}
taxRate={taxRate} taxRate={taxRate}
/> />
{/* Request to submit happens here, initiates input validation and sends if success */} {/* Request to submit happens here, initiates input validation and sends if success */}
<SubmitOrder <SubmitOrder
submitButtonActive={submitButtonActive} submitButtonActive={submitButtonActive}
...@@ -223,9 +146,6 @@ export default function Checkout() { ...@@ -223,9 +146,6 @@ export default function Checkout() {
errorWhileValidating={errorWhileValidating} errorWhileValidating={errorWhileValidating}
allFieldsValidated={allFieldsValidated} allFieldsValidated={allFieldsValidated}
/> />
</div> </div>
) )
} }
\ No newline at end of file
ecom-web/src/components/shopping-cart/CartItem.js
View file @ ebab7434
import React from 'react' import React from 'react'
import './shopping-cart.css' import './shopping-cart.css'
export default function CartItem(props) { export default function CartItem(props) {
return ( return (
<div className="shoppingCartItem" > <div className="shoppingCartItem" >
{console.log(props.productInfo)}
{/* This is based on amazon's style */} {/* This is based on amazon's style */}
{/* Flex-Direction: Row */} {/* Flex-Direction: Row */}
{/* Left image div */} {/* Left image div */}
<div id="productImageContainer"> <div className="productImageContainer">
<img className="productImage" alt="" src={props.productInfo.productImageUrl} /> <img className="productImage" alt="Product" src={props.productInfo.productImageUrl} />
</div> </div>
{/* Name and Product details */} {/* Name and Product details */}
<div id="nameAndDetails"> <div className="nameAndDetails">
<div id="productName">{props.productInfo.productName}</div> <div className="productName">{props.productInfo.productName}</div>
<div id="productStock">{props.productInfo.availableStock} left in stock</div> <div className="productStock">{props.productInfo.availableStock} left in stock</div>
<div className="quantityControls"> <div className="quantityControls">
<input <input
className="productQuantitySelect" className="productQuantitySelect"
type="number" type="number"
...@@ -32,37 +22,13 @@ export default function CartItem(props) { ...@@ -32,37 +22,13 @@ export default function CartItem(props) {
max="99" max="99"
onChange={(e) => {props.handleQuantityUpdate(props.productInfo.sku, parseInt( e.target.value) )}} onChange={(e) => {props.handleQuantityUpdate(props.productInfo.sku, parseInt( e.target.value) )}}
/> />
<button onClick={() => { props.handleDelete(props.productInfo.sku) }}>Delete</button> <button onClick={() => { props.handleDelete(props.productInfo.sku) }}>Delete</button>
</div> </div>
</div> </div>
{/* Price and promotions */} {/* Price and promotions */}
<div id="priceAndPromotions"> <div className="priceAndPromotions">
<div id="productPrice">${props.productInfo.price.toFixed(2)}</div> <div className="productPrice">${props.productInfo.price.toFixed(2)}</div>
</div> </div>
</div> </div>
) )
} }
\ No newline at end of file
/*
brand
name
price
*/
\ 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 { connect } from 'react-redux';
import ShoppingCart from './shopping-cart'; import ShoppingCart from './shopping-cart.js';
const mSTP = state => ({ const mSTP = state => ({
......
ecom-web/src/components/shopping-cart/shopping-cart.css
View file @ ebab7434
* { * {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
#shoppingCartContainer { #shoppingCartContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -11,11 +9,17 @@ ...@@ -11,11 +9,17 @@
height: 100vh; height: 100vh;
width: 100%; width: 100%;
} }
#cartItemList {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 100px;
}
.shoppingCartItem { .shoppingCartItem {
width: 80%; width: 80%;
min-height: 250px; min-height: 200px;
border-top: 2px solid black; border-top: 2px solid black;
display: flex; display: flex;
background-color: white; background-color: white;
...@@ -24,31 +28,33 @@ ...@@ -24,31 +28,33 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.productName {
#productImageContainer { padding-top: 25px;
margin-bottom: 15px;
font-size: 125%;
}
.productImageContainer {
display: flex; display: flex;
width: 30%; width: 30%;
margin-right: 20px; margin-right: 20px;
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
} }
.productImage { .productImage {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 15px;
/* height: auto; */ /* height: auto; */
/* max-height: 100%; */ /* max-height: 100%; */
} }
.nameAndDetails {
#nameAndDetails {
display: flex; display: flex;
width: 45%; width: 45%;
height: 200px; height: 200px;
flex-direction: column; flex-direction: column;
text-align: left; text-align: left;
} }
.priceAndPromotions {
#priceAndPromotions {
display: flex; display: flex;
width: 10%; width: 10%;
height: 200px; height: 200px;
...@@ -56,11 +62,33 @@ ...@@ -56,11 +62,33 @@
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
} }
.productPrice {
#productQuantitySelect { 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; 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' ...@@ -5,26 +5,17 @@ import { useSelector, useDispatch } from 'react-redux'
import { Link, Redirect } from 'react-router-dom' 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' import { calcTotalPrice, calcNumItems, storeCartItemsInProcessing } from './../../actions/cart_processing_actions'
export default function ShoppingCart() { export default function ShoppingCart() {
const dispatch = useDispatch() const dispatch = useDispatch()
const userSession = useSelector(state => state.user.currentUser) const userSession = useSelector(state => state.user.currentUser)
const allProducts = useSelector(state => state.market.products) const allProducts = useSelector(state => state.market.products)
const [cartRefs, setCartRefs] = useState(useSelector(state => state.cart)) const [cartRefs, setCartRefs] = useState(useSelector(state => state.cart))
const [cartItems, setCartItems] = useState([]) const [cartItems, setCartItems] = useState([])
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
// Map Product Refs to Products that exist in redux global state // Map Product Refs to Products that exist in redux global state
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
useEffect(() => { useEffect(() => {
const productsFromRefs = [] const productsFromRefs = []
cartRefs.map((cartRef) => { cartRefs.map((cartRef) => {
productsFromRefs.push(( productsFromRefs.push((
{ {
...@@ -32,31 +23,22 @@ export default function ShoppingCart() { ...@@ -32,31 +23,22 @@ export default function ShoppingCart() {
quantity: cartRef.quantity quantity: cartRef.quantity
})) }))
}) })
console.log("NEW PRODUCTS FROM REFS YO") console.log("NEW PRODUCTS FROM REFS YO")
console.log(productsFromRefs) console.log(productsFromRefs)
setCartItems(productsFromRefs) setCartItems(productsFromRefs)
}, [cartRefs]) }, [cartRefs])
//////////////////////////////// ////////////////////////////////
// Delete Item from Cart // Delete Item from Cart
//////////////////////////////// ////////////////////////////////
let handleDelete = (skuToBeDeleted) => { let handleDelete = (skuToBeDeleted) => {
const newCartRefs = cartRefs.filter((cartRef) => !(cartRef.productRef.sku === skuToBeDeleted)) const newCartRefs = cartRefs.filter((cartRef) => !(cartRef.productRef.sku === skuToBeDeleted))
setCartRefs(newCartRefs) setCartRefs(newCartRefs)
} }
//////////////////////////////// ////////////////////////////////
// Update Quantity of an item // Update Quantity of an item
//////////////////////////////// ////////////////////////////////
let handleQuantityUpdate = (skuToBeUpdated, newQuantity) => { let handleQuantityUpdate = (skuToBeUpdated, newQuantity) => {
const newCartRefs = [] const newCartRefs = []
cartRefs.map( (cartRef) => { cartRefs.map( (cartRef) => {
if (cartRef.productRef.sku === skuToBeUpdated) { if (cartRef.productRef.sku === skuToBeUpdated) {
let temp = cartRef let temp = cartRef
...@@ -67,35 +49,26 @@ export default function ShoppingCart() { ...@@ -67,35 +49,26 @@ export default function ShoppingCart() {
newCartRefs.push(cartRef) newCartRefs.push(cartRef)
} }
}) })
setCartRefs(newCartRefs) setCartRefs(newCartRefs)
} }
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
// Sync Cart with backend and redux global state // Sync Cart with backend and redux global state
//////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////
useEffect(() => { useEffect(() => {
if (!userSession) return; if (!userSession) return;
const cartUpdateObj = { const cartUpdateObj = {
userId: userSession.email, userId: userSession.email,
cartItems: cartRefs cartItems: cartRefs
} }
dispatch(updateUserCart(cartUpdateObj, cartUpdateObj.userId)) dispatch(updateUserCart(cartUpdateObj, cartUpdateObj.userId))
dispatch(storeCartItemsInProcessing(cartItems)) dispatch(storeCartItemsInProcessing(cartItems))
dispatch(calcTotalPrice(cartItems)) dispatch(calcTotalPrice(cartItems))
dispatch(calcNumItems(cartItems)) dispatch(calcNumItems(cartItems))
}, [cartItems]) }, [cartItems])
if (!userSession) return <Redirect to="/product-market" /> if (!userSession) return <Redirect to="/product-market" />
return ( return (
<div id="shoppingCartContainer"> <div id="shoppingCartContainer">
{/* map each cart item into CartItem component */} {/* map each cart item into CartItem component */}
<div id="cartItemList"> <div id="cartItemList">
{cartItems.map((currItem) => { {cartItems.map((currItem) => {
return ( return (
...@@ -109,12 +82,9 @@ export default function ShoppingCart() { ...@@ -109,12 +82,9 @@ export default function ShoppingCart() {
) )
})} })}
</div> </div>
<Link id="checkoutButtonContainer" to="/checkout"> <Link id="checkoutButtonContainer" to="/checkout">
<button id="checkoutButton">Proceed To Checkout</button> <button id="checkoutButton">Proceed To Checkout</button>
</Link> </Link>
</div> </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