Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
E
ecommerce-maven
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Ascend
ecommerce-maven
Commits
a0363409
Commit
a0363409
authored
4 years ago
by
Christopher Cottier
Browse files
Options
Browse Files
Download
Plain Diff
settled merge conflicts
parents
f0176d4a
91cbb5a3
Changes
11
Show whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
20655 additions
and
129 deletions
+20655
-129
package-lock.json
ecom-web/package-lock.json
+20469
-24
cart_actions.js
ecom-web/src/actions/cart_actions.js
+3
-0
cart_processing_actions.js
ecom-web/src/actions/cart_processing_actions.js
+39
-0
SubmitOrder.js
ecom-web/src/components/checkout/SubmitOrder.js
+3
-3
checkout.js
ecom-web/src/components/checkout/checkout.js
+83
-96
CartItem.js
ecom-web/src/components/shopping-cart/CartItem.js
+1
-1
shopping-cart.js
ecom-web/src/components/shopping-cart/shopping-cart.js
+6
-1
cart_processing_reducer.js
ecom-web/src/reducers/cart_processing_reducer.js
+35
-0
root_reducer.js
ecom-web/src/reducers/root_reducer.js
+3
-2
cart_api_util.js
ecom-web/src/util/cart_api_util.js
+1
-2
cart_processing_util.js
ecom-web/src/util/cart_processing_util.js
+12
-0
No files found.
ecom-web/package-lock.json
View file @
a0363409
This source diff could not be displayed because it is too large. You can
view the blob
instead.
This diff is collapsed.
Click to expand it.
ecom-web/src/actions/cart_actions.js
View file @
a0363409
...
@@ -3,6 +3,7 @@ import * as ApiUtil from '../util/cart_api_util';
...
@@ -3,6 +3,7 @@ import * as ApiUtil from '../util/cart_api_util';
export
const
RECEIVE_USER_CART
=
"RECEIVE_USER_CART"
;
export
const
RECEIVE_USER_CART
=
"RECEIVE_USER_CART"
;
export
const
CLEAR_USER_CART
=
"CLEAR_USER_CART"
;
export
const
CLEAR_USER_CART
=
"CLEAR_USER_CART"
;
const
receiveUserCart
=
cart
=>
({
const
receiveUserCart
=
cart
=>
({
type
:
RECEIVE_USER_CART
,
type
:
RECEIVE_USER_CART
,
cart
cart
...
@@ -12,6 +13,7 @@ export const clearUserCart = () => ({
...
@@ -12,6 +13,7 @@ export const clearUserCart = () => ({
type
:
CLEAR_USER_CART
type
:
CLEAR_USER_CART
})
})
export
const
fetchUserCart
=
userEmail
=>
dispatch
=>
ApiUtil
.
fetchUserCart
(
userEmail
)
export
const
fetchUserCart
=
userEmail
=>
dispatch
=>
ApiUtil
.
fetchUserCart
(
userEmail
)
.
then
(
cart
=>
dispatch
(
receiveUserCart
(
cart
)));
.
then
(
cart
=>
dispatch
(
receiveUserCart
(
cart
)));
...
@@ -20,3 +22,4 @@ export const updateUserCart = (updatedCart, userEmail) => dispatch => ApiUtil.up
...
@@ -20,3 +22,4 @@ export const updateUserCart = (updatedCart, userEmail) => dispatch => ApiUtil.up
export
const
createUserCart
=
newCart
=>
dispatch
=>
ApiUtil
.
createCart
(
newCart
)
export
const
createUserCart
=
newCart
=>
dispatch
=>
ApiUtil
.
createCart
(
newCart
)
.
then
(
res
=>
res
.
json
)
.
then
(
res
=>
res
.
json
)
This diff is collapsed.
Click to expand it.
ecom-web/src/actions/cart_processing_actions.js
0 → 100644
View file @
a0363409
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
This diff is collapsed.
Click to expand it.
ecom-web/src/components/checkout/SubmitOrder.js
View file @
a0363409
...
@@ -5,7 +5,7 @@ export default function SubmitOrder(props) {
...
@@ -5,7 +5,7 @@ export default function SubmitOrder(props) {
const
{
currentUser
}
=
useSelector
(
state
=>
state
);
const
{
currentUser
}
=
useSelector
(
state
=>
state
);
let
handleSubmitClick
=
(
e
)
=>
{
let
handleSubmitClick
=
()
=>
{
console
.
log
(
"Submit Button Clicked"
)
console
.
log
(
"Submit Button Clicked"
)
props
.
setSubmitButtonActive
(
1
)
props
.
setSubmitButtonActive
(
1
)
...
@@ -20,7 +20,7 @@ export default function SubmitOrder(props) {
...
@@ -20,7 +20,7 @@ export default function SubmitOrder(props) {
<
/div
>
<
/div
>
<
div
id
=
"SubmitButtonContainer"
>
<
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
<
button
id
=
"SubmitButtonInput"
id
=
"SubmitButtonInput"
onClick
=
{()
=>
{
handleSubmitClick
()}}
onClick
=
{()
=>
{
handleSubmitClick
()}}
...
...
This diff is collapsed.
Click to expand it.
ecom-web/src/components/checkout/checkout.js
View file @
a0363409
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'
...
@@ -9,40 +9,41 @@ import './checkout.css'
...
@@ -9,40 +9,41 @@ import './checkout.css'
import
{
dispatchOrderInfo
}
from
'./../../actions/checkout_actions'
import
{
dispatchOrderInfo
}
from
'./../../actions/checkout_actions'
import
{
Redirect
}
from
'react-router'
import
{
Redirect
}
from
'react-router'
import
{
updateUserCart
}
from
'./../../actions/cart_actions'
import
{
calcTotalPrice
,
calcNumItems
,
storeCartItemsInProcessing
}
from
'./../../actions/cart_processing_actions'
export
default
function
Checkout
()
{
export
default
function
Checkout
()
{
///////////////////////
// REDUX Global State
///////////////////////
// const {currentUser} = useSelector(state => state)
// const {cart} = useSelector(state => state)
///////////////////////
// Submit Action State
///////////////////////
const
dispatch
=
useDispatch
()
const
dispatch
=
useDispatch
()
///////////////////////
///////////////////////
// Shipping Info State
// Shipping Info State
///////////////////////
///////////////////////
const
[
firstName
,
setFirstName
]
=
useState
([])
// const [firstName, setFirstName] = useState("Guy")
const
[
lastName
,
setLastName
]
=
useState
([])
// const [lastName, setLastName] = useState("Fieri")
const
[
shippingAddress
,
setShippingAddress
]
=
useState
([])
// const [shippingAddress, setShippingAddress] = useState("1234 Flavortown Dr")
const
[
aptSuiteNo
,
setAptSuiteNo
]
=
useState
([])
// const [aptSuiteNo, setAptSuiteNo] = useState("Apt 317")
const
[
city
,
setCity
]
=
useState
([])
// const [city, setCity] = useState("Santa Rosa")
const
[
state
,
setState
]
=
useState
([])
// const [state, setState] = useState("California")
const
[
zipCode
,
setZipCode
]
=
useState
([])
// 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
// Billing Info State
///////////////////////
///////////////////////
const
[
cardNumber
,
setCardNumber
]
=
useState
([
"123456789"
])
const
[
cardNumber
,
setCardNumber
]
=
useState
([
"123456789"
])
const
[
cardHolderName
,
setCardHolderName
]
=
useState
([
"
Jane Doe
"
])
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"
])
...
@@ -50,110 +51,96 @@ export default function Checkout() {
...
@@ -50,110 +51,96 @@ export default function Checkout() {
///////////////////////
///////////////////////
// Order Review / Summary State
// Order Review / Summary State
///////////////////////
///////////////////////
const
[
numCartItems
,
setNumCartItems
]
=
useState
([
3
])
const
[
itemsTotal
,
setItemsTotal
]
=
useState
([
87.65
])
// arbitrary cart total
const
numCartItems
=
useSelector
(
state
=>
state
.
cartProcessing
.
numItems
)
const
[
shippingHandling
,
setShippingHandling
]
=
useState
([
8.00
])
// arbitraty shipping and handling amount
const
itemsTotal
=
useSelector
(
state
=>
state
.
cartProcessing
.
totalPrice
)
const
[
taxRate
,
setTaxRate
]
=
useState
([
0.0725
])
// california tax rate
const
taxRate
=
0.0725
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
)
// 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
// Form Submission State
useEffect
(
()
=>
{
///////////////////////
const
user
=
useSelector
(
state
=>
state
.
user
.
currentUser
)
const
cart
=
useSelector
(
state
=>
state
.
cart
)
// when submit button clicked after being inactive
if
(
submitButtonActive
===
1
)
{
// fields to make sure are non-empty
useEffect
(()
=>
{
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 validated, propogate to component state that all fields were validated
if
(
firstName
&&
lastName
&&
shippingAddress
&&
city
&&
state
&&
zipCode
)
{
if
(
validated
===
1
)
{
console
.
log
(
"All Fields Validated!"
)
setAllFieldsValidated
(
1
)
setAllFieldsValidated
(
1
)
}
}
// if invalid, propogate to component state
},
[
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
([]))
dispatch
(
calcTotalPrice
([]))
dispatch
(
calcNumItems
([]))
}
else
{
else
{
console
.
log
(
"Failed to validate"
)
setErrorWhileValidating
(
1
)
setErrorWhileValidating
(
1
)
setSubmitButtonActive
(
0
)
setSubmitButtonActive
(
0
)
}
}
}
}
else
{
;
}
// when submit button gets reset from active to inactive
else
if
(
submitButtonActive
===
0
)
{
;
}
},
[
submitButtonActive
])
},
[
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
=
()
=>
{
let
handleSubmit
=
()
=>
{
console
.
log
(
"Submitting Order!"
)
console
.
log
(
"Submitting Order!"
)
let
chrisSpec
=
{
let
orderInfo
=
{
"user"
:
{
"user"
:
{
"userId"
:
"e-com-test-id"
,
"userId"
:
user
.
userId
,
"email"
:
"test@test.test"
,
"email"
:
user
.
email
,
"firstName"
:
"ecom"
,
"firstName"
:
user
.
firstName
,
"lastName"
:
"test"
"lastName"
:
user
.
lastName
,
"accessToken"
:
user
.
accessToken
},
},
"address"
:
{
"address"
:
{
"state"
:
"IL"
,
"state"
:
state
,
"city"
:
"chicago"
,
"city"
:
city
,
"zip"
:
"90210"
,
"zip"
:
zipCode
,
"street"
:
"Grand"
"street"
:
shippingAddress
},
},
"cart"
:
{
"cart"
:
{
"id"
:
"something"
,
"id"
:
"something"
,
"userId"
:
"e-com-test-id"
,
"userId"
:
user
.
userId
,
"cartItems"
:[
"cartItems"
:
cart
{
"quantity"
:
2
,
"productRef"
:
{
"id"
:
"something"
,
"sku"
:
"AFP-1"
,
"upc"
:
"00002"
}
}
]
}
}
}
}
dispatch
(
dispatchOrderInfo
(
chrisSpec
))
console
.
log
(
orderInfo
)
dispatch
(
dispatchOrderInfo
(
orderInfo
))
}
}
...
...
This diff is collapsed.
Click to expand it.
ecom-web/src/components/shopping-cart/CartItem.js
View file @
a0363409
...
@@ -27,7 +27,7 @@ export default function CartItem(props) {
...
@@ -27,7 +27,7 @@ export default function CartItem(props) {
value
=
{
props
.
quantity
}
value
=
{
props
.
quantity
}
min
=
"1"
min
=
"1"
max
=
"99"
max
=
"99"
onChange
=
{(
e
)
=>
{
props
.
handleQuantityUpdate
(
props
.
productInfo
.
sku
,
e
.
target
.
value
)}}
onChange
=
{(
e
)
=>
{
props
.
handleQuantityUpdate
(
props
.
productInfo
.
sku
,
parseInt
(
e
.
target
.
value
)
)}}
/
>
/
>
...
...
This diff is collapsed.
Click to expand it.
ecom-web/src/components/shopping-cart/shopping-cart.js
View file @
a0363409
...
@@ -3,7 +3,8 @@ import CartItem from './CartItem.js'
...
@@ -3,7 +3,8 @@ import CartItem from './CartItem.js'
import
'./shopping-cart.css'
import
'./shopping-cart.css'
import
{
useSelector
,
useDispatch
}
from
'react-redux'
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'
export
default
function
ShoppingCart
()
{
export
default
function
ShoppingCart
()
{
...
@@ -75,12 +76,16 @@ export default function ShoppingCart() {
...
@@ -75,12 +76,16 @@ export default function ShoppingCart() {
////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
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
(
calcTotalPrice
(
cartItems
))
dispatch
(
calcNumItems
(
cartItems
))
},
[
cartItems
])
},
[
cartItems
])
...
...
This diff is collapsed.
Click to expand it.
ecom-web/src/reducers/cart_processing_reducer.js
0 → 100644
View file @
a0363409
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
This diff is collapsed.
Click to expand it.
ecom-web/src/reducers/root_reducer.js
View file @
a0363409
...
@@ -3,14 +3,15 @@ import productsReducer from './products_reducer';
...
@@ -3,14 +3,15 @@ import productsReducer from './products_reducer';
import
orderReducer
from
'./order_reducer'
import
orderReducer
from
'./order_reducer'
import
userReducer
from
'./user_reducer'
import
userReducer
from
'./user_reducer'
import
cartReducer
from
'./cart_reducer'
;
import
cartReducer
from
'./cart_reducer'
;
import
cartProcessingReducer
from
'./cart_processing_reducer'
const
rootReducer
=
combineReducers
({
const
rootReducer
=
combineReducers
({
market
:
productsReducer
,
market
:
productsReducer
,
user
:
userReducer
,
user
:
userReducer
,
cart
:
cartReducer
,
cart
:
cartReducer
,
orderStatus
:
orderReducer
orderStatus
:
orderReducer
,
cartProcessing
:
cartProcessingReducer
});
});
export
default
rootReducer
;
export
default
rootReducer
;
\ No newline at end of file
This diff is collapsed.
Click to expand it.
ecom-web/src/util/cart_api_util.js
View file @
a0363409
...
@@ -9,6 +9,5 @@ export const createCart = newCart => {
...
@@ -9,6 +9,5 @@ export const createCart = newCart => {
}
}
export
const
updateCart
=
(
updatedCart
,
userEmail
)
=>
{
export
const
updateCart
=
(
updatedCart
,
userEmail
)
=>
{
// debugger
return
axios
.
put
(
`http://localhost:8080/api/carts/
${
userEmail
}
`
,
updatedCart
)
return
axios
.
put
(
`http://localhost:8080/api/carts/
${
userEmail
}
`
,
updatedCart
)
}
}
This diff is collapsed.
Click to expand it.
ecom-web/src/util/cart_processing_util.js
0 → 100644
View file @
a0363409
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
}
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment