Skip to content

E
ecommerce-maven
Commit e01ef5cd authored by Xiyang Lu's avatar Xiyang Lu
Browse files
Options

resolve pull conflict

parents 815d53c2 1f99e20f
Show whitespace changes
Inline Side-by-side
Showing with 20863 additions and 105 deletions
ecom-service/src/main/java/com/nisum/ecomservice/model/UserRequestBody.java
View file @ e01ef5cd
...@@ -2,11 +2,13 @@ package com.nisum.ecomservice.model; ...@@ -2,11 +2,13 @@ package com.nisum.ecomservice.model;
import lombok.AllArgsConstructor; import lombok.AllArgsConstructor;
import lombok.Getter; import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter; import lombok.Setter;
@Getter @Getter
@Setter @Setter
@AllArgsConstructor @AllArgsConstructor
@NoArgsConstructor
public class UserRequestBody { public class UserRequestBody {
String idToken; String idToken;
String userId; String userId;
......
ecom-web/package-lock.json
View file @ e01ef5cd
This source diff could not be displayed because it is too large. You can view the blob instead.
ecom-web/public/index.html
View file @ e01ef5cd
...@@ -5,7 +5,11 @@ ...@@ -5,7 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- allow ajax calls --> <!-- allow ajax calls -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- css animations -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Ecommerce App</title> <title>Ecommerce App</title>
</head> </head>
<body> <body>
......
ecom-web/src/actions/cart_actions.js
View file @ e01ef5cd
<<<<<<< HEAD
import {postCart} from '../util/cart_api_util' import {postCart} from '../util/cart_api_util'
export const ADD_NEW_CART = "ADD_NEW_CART" export const ADD_NEW_CART = "ADD_NEW_CART"
...@@ -13,3 +14,27 @@ export const receieveCart = cart => ({ ...@@ -13,3 +14,27 @@ export const receieveCart = cart => ({
cart cart
}) })
=======
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
})
export const clearUserCart = () => ({
type: CLEAR_USER_CART
})
export const fetchUserCart = userEmail => dispatch => ApiUtil.fetchUserCart(userEmail)
.then(cart => dispatch(receiveUserCart(cart)));
export const updateUserCart = (updatedCart, userEmail) => dispatch => ApiUtil.updateCart(updatedCart, userEmail)
.then(cart => dispatch(receiveUserCart(cart)));
export const createUserCart = newCart => dispatch => ApiUtil.createCart(newCart)
.then(res => res.json)
>>>>>>> 1f99e20fa13caaa629b4886d2be1b9d96bb9aa82
ecom-web/src/components/Header/header.css
View file @ e01ef5cd
.order-history-nav { .order-history-nav,
.products-nav,
#nav-bar-text,
.cart-nav {
padding-left: 10px; padding-left: 10px;
padding-top: 11px;
padding-bottom: 10px;
color: white; color: white;
} }
.nav-home {
color: white;
font-size: 20px;
margin-left: 10px;
}
#nav-home-link {
margin-bottom: 3px;
}
#nav-bar-text {
opacity: 0.6;
cursor: default;
}
\ No newline at end of file
ecom-web/src/components/Header/header.js
View file @ e01ef5cd
import React, { Component } from 'react' import React, { Component } from 'react'
import Nav from 'react-bootstrap/Nav' import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar' import Navbar from 'react-bootstrap/Navbar'
import NavDropdown from 'react-bootstrap/NavDropdown' // import NavDropdown from 'react-bootstrap/NavDropdown'
import {NavLink} from 'react-router-dom' import {NavLink} from 'react-router-dom'
import Session from '../session/session-container' import Session from '../session/session-container'
...@@ -17,21 +17,19 @@ export default class Header extends Component { ...@@ -17,21 +17,19 @@ export default class Header extends Component {
return ( return (
<div> <div>
<Navbar collapseOnSelect expand="lg" bg="primary" variant="dark"> <Navbar collapseOnSelect expand="lg" bg="primary" variant="dark">
<Navbar.Brand href="#home">Ascend Ecommerce</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Toggle aria-controls="responsive-navbar-nav" />
<NavLink to="/product-market" id="nav-home-link"><span className="nav-home">Ascend Ecommerce</span></NavLink>
<Navbar.Collapse id="responsive-navbar-nav"> <Navbar.Collapse id="responsive-navbar-nav">
<Nav > <Nav >
<Navbar.Text> <Navbar.Text id="nav-bar-text">
Hello Guest! Hello Guest!
</Navbar.Text> </Navbar.Text>
</Nav> </Nav>
<NavLink to="/product-market"><span className="order-history-nav">Products</span></NavLink> <NavLink to="/product-market"><span className="products-nav">Products</span></NavLink>
<NavLink to="/orders"><span className="order-history-nav">Order History</span></NavLink> <NavLink to="/orders"><span className="order-history-nav">Order History</span></NavLink>
<NavLink to="/cart"><span className="cart-nav">Cart</span></NavLink>
<Nav className="ms-auto"> <Nav className="ms-auto">
<Session /> <Session />
<Nav.Link>
Cart
</Nav.Link>
</Nav> </Nav>
</Navbar.Collapse> </Navbar.Collapse>
</Navbar> </Navbar>
......
ecom-web/src/components/checkout/PaymentMethod.js
View file @ e01ef5cd
import React, {useState, useEffect} from 'react' // import React, {useState, useEffect} from 'react'
export default function PaymentMethod() { export default function PaymentMethod() {
return ( return (
......
ecom-web/src/components/checkout/ReviewOrder.js
View file @ e01ef5cd
import React, {useState, useEffect} from 'react' // import React, {useState, useEffect} from 'react'
export default function ReviewOrder() { export default function ReviewOrder() {
return ( return (
......
ecom-web/src/components/checkout/ShippingAddress.js
View file @ e01ef5cd
import React, {useState, useEffect} from 'react' // import React, {useState, useEffect} from 'react'
export default function ShippingAddress() { export default function ShippingAddress() {
return ( return (
......
ecom-web/src/components/checkout/SubmitOrder.js
View file @ e01ef5cd
import React, {useState, useEffect} from 'react' // import React, {useState, useEffect} from 'react'
export default function SubmitOrder() { export default function SubmitOrder() {
return ( return (
......
ecom-web/src/components/checkout/checkout.jsx
View file @ e01ef5cd
import React, {useState, useEffect} from 'react' // import React, {useState, useEffect} from 'react'
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'
export default function checkout() { export default function checkout() {
......
ecom-web/src/components/product-market/product-details.jsx
View file @ e01ef5cd
...@@ -3,7 +3,43 @@ import React, { Component } from 'react' ...@@ -3,7 +3,43 @@ import React, { Component } from 'react'
export default class ProductDetails extends Component { export default class ProductDetails extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = {} this.state = {
orderItemQuantity: 1,
}
}
handleChange(type) {
return e => {
this.setState({ [type]: e.target.value })
}
}
handleSubmit(e, product) {
e.preventDefault();
const newCart = Object.assign({}, {
userId: this.props.user.currentUser.email,
cartItems: JSON.parse(JSON.stringify(this.props.cart)) // JSON.parse/stringify will deep-dup the object
})
for (let i = 0; i < newCart.cartItems.length; i++) {
let item = newCart.cartItems[i];
if(item.productRef.sku === product.sku) {
item.quantity += parseInt(this.state.orderItemQuantity)
this.props.addToCart(newCart, this.props.user.currentUser.email)
.then(() => this.props.closeModal(e))
return;
}
}
const newCartItem = {
productRef: {
id: product.sku,
sku: product.sku,
upc: product.upc,
},
quantity: parseInt(this.state.orderItemQuantity)
}
newCart.cartItems.push(newCartItem);
this.props.addToCart(newCart, this.props.user.currentUser.email)
.then(() => this.props.closeModal(e))
} }
render() { render() {
...@@ -11,7 +47,14 @@ export default class ProductDetails extends Component { ...@@ -11,7 +47,14 @@ export default class ProductDetails extends Component {
<div className="product-details-container"> <div className="product-details-container">
<div id="product-details-left"> <div id="product-details-left">
<div id="prod-details-container"> <div id="prod-details-container">
{
this.props.product.productImageUrl ?
<img alt="" src={ this.props.product.productImageUrl } id="prod-details-img" /> <img alt="" src={ this.props.product.productImageUrl } id="prod-details-img" />
:
<div id="prod-details-no-img">
<p id="prod-details-no-image-display">- No Photo Available -</p>
</div>
}
<div id="prod-details-box"> <div id="prod-details-box">
<div id="details-brand-and-sku-box"> <div id="details-brand-and-sku-box">
<p id="details-brand">{ this.props.product.brand }</p> <p id="details-brand">{ this.props.product.brand }</p>
...@@ -26,8 +69,8 @@ export default class ProductDetails extends Component { ...@@ -26,8 +69,8 @@ export default class ProductDetails extends Component {
<div id="product-details-condenser"> <div id="product-details-condenser">
<div id="prod-details-shipping"> <div id="prod-details-shipping">
<p id="express-shipping">Express shipping & free returns</p> <p id="express-shipping">Express shipping & free returns</p>
<p>Free Delivery: <span>Everywhere!</span></p> <p id="free-delivery">Free Delivery: <span>Everywhere!</span></p>
<p>Get it by: <span>Never!</span></p> <p id="get-it-by">Get it by: <span>Never!</span></p>
</div> </div>
{ {
this.props.product.promo ? this.props.product.promo ?
...@@ -37,12 +80,22 @@ export default class ProductDetails extends Component { ...@@ -37,12 +80,22 @@ export default class ProductDetails extends Component {
<p id="prod-details-promo-original-price">Normally: ${ this.props.product.price }</p> <p id="prod-details-promo-original-price">Normally: ${ this.props.product.price }</p>
</div> </div>
: :
"" <p id="prod-details-original-price">Price: ${ this.props.product.price }</p>
} }
<input type="number" id="prod-details-quantity" placeholder="Quantity" /> <form className="details-add-cart-and-quantity" onSubmit={ e => this.handleSubmit(e, this.props.product) }>
<button id="prod-details-add-to-cart"> <input
type="number"
className="prod-details-quantity"
disabled={ !this.props.user?.currentUser }
onChange={this.handleChange("orderItemQuantity")}
placeholder="Quantity"
value={ this.state.orderItemQuantity }
/>
<button className="prod-details-add-to-cart" disabled={ !this.props.user?.currentUser }>
Add to Cart Add to Cart
</button> </button>
{ this.props.user?.currentUser ? "" :<p id="details-please-log-in-notice">Log in to Add to Cart</p>}
</form>
</div> </div>
</div> </div>
</div> </div>
......
ecom-web/src/components/product-market/product-item.jsx
View file @ e01ef5cd
...@@ -7,8 +7,10 @@ export default class ProductItem extends Component { ...@@ -7,8 +7,10 @@ export default class ProductItem extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
orderItemQuantity: 1,
showDetailsModal: false showDetailsModal: false
} }
this.handleSubmit = this.handleSubmit.bind(this);
this.toggleDetailsModal = this.toggleDetailsModal.bind(this); this.toggleDetailsModal = this.toggleDetailsModal.bind(this);
} }
...@@ -17,22 +19,68 @@ export default class ProductItem extends Component { ...@@ -17,22 +19,68 @@ export default class ProductItem extends Component {
this.setState({ showDetailsModal: !prevState }); this.setState({ showDetailsModal: !prevState });
} }
handleChange(type) {
return e => {
this.setState({ [type]: e.target.value })
}
}
calculateDiscount(price, discount) { calculateDiscount(price, discount) {
return (price * ((100 - discount) / 100)).toFixed(2); return (price * ((100 - discount) / 100)).toFixed(2);
} }
handleSubmit(e, product) {
e.preventDefault();
const newCart = Object.assign({}, {
userId: this.props.user.currentUser.email,
cartItems: JSON.parse(JSON.stringify(this.props.cart)) // JSON.parse/stringify will deep-dup the object
})
for (let i = 0; i < newCart.cartItems.length; i++) {
let item = newCart.cartItems[i];
if(item.productRef.sku === product.sku) {
item.quantity += parseInt(this.state.orderItemQuantity)
this.props.addToCart(newCart, this.props.user.currentUser.email);
return;
}
}
const newCartItem = {
productRef: {
id: product.sku,
sku: product.sku,
upc: product.upc,
},
quantity: parseInt(this.state.orderItemQuantity)
}
newCart.cartItems.push(newCartItem);
this.props.addToCart(newCart, this.props.user.currentUser.email);
}
render() { render() {
let discount = this.calculateDiscount(this.props.item.price, this.props.item.promo) let discount = this.calculateDiscount(this.props.item.price, this.props.item.promo)
return ( return (
<div className="product-item"> <div className="product-item">
<div id="more-details-img-box"> <div id="more-details-img-box">
{
this.props.item.productImageUrl ?
<img <img
id="prod-img" id="prod-img"
alt="" alt=""
src={ this.props.item.productImageUrl ? this.props.item.productImageUrl : "-no photo-" } src={ this.props.item.productImageUrl }
onClick={ this.toggleDetailsModal } onClick={ this.toggleDetailsModal }
/> />
:
<div
id="no-image-found"
onClick={ this.toggleDetailsModal }
>
<p id="no-image-display">- No Photo Available -</p>
</div>
}
{
this.props.item.productImageUrl ?
<p onClick={ this.toggleDetailsModal } id="more-details-text">More Details</p> <p onClick={ this.toggleDetailsModal } id="more-details-text">More Details</p>
: ""
}
</div> </div>
<p id="prod-name">{ this.props.item.productName }</p> <p id="prod-name">{ this.props.item.productName }</p>
<div id="prod-price"> <div id="prod-price">
...@@ -50,10 +98,18 @@ export default class ProductItem extends Component { ...@@ -50,10 +98,18 @@ export default class ProductItem extends Component {
<p id="prod-promotion"> <p id="prod-promotion">
{ "Save " + this.props.item.promo + "% on this item!"} { "Save " + this.props.item.promo + "% on this item!"}
</p> : ""} </p> : ""}
<div className="add-cart-and-quantity"> <form onSubmit={ e => this.handleSubmit(e, this.props.item) } className="add-cart-and-quantity">
<input id="order-quantity" type="number" placeholder="Qty" /> { this.props.user?.currentUser ? "" :<p id="please-log-in-notice">Log in to Add to Cart</p>}
<span id="add-to-cart-button">Add to Cart</span> <input
</div> className="order-quantity"
type="number"
placeholder="Qty"
disabled={ !this.props.user?.currentUser }
onChange={ this.handleChange("orderItemQuantity") }
value = { this.state.orderItemQuantity }
/>
<button disabled={ !this.props.user?.currentUser } className="add-to-cart-button">Add to Cart</button>
</form>
<Modal <Modal
id="product-details-modal" id="product-details-modal"
...@@ -66,8 +122,8 @@ export default class ProductItem extends Component { ...@@ -66,8 +122,8 @@ export default class ProductItem extends Component {
left: '50%', left: '50%',
right: '0', right: '0',
bottom: '0', bottom: '0',
marginLeft: "-346px", marginLeft: "-325px",
marginTop: "-372px", marginTop: "-320px",
width: '650px', width: '650px',
height: '600px', height: '600px',
background: 'white', background: 'white',
...@@ -80,7 +136,14 @@ export default class ProductItem extends Component { ...@@ -80,7 +136,14 @@ export default class ProductItem extends Component {
} }
}} }}
> >
<ProductDetails product={ this.props.item } discount={ discount } /> <ProductDetails
product={ this.props.item }
discount={ discount }
user={ this.props.user }
addToCart={ this.props.addToCart }
cart={ this.props.cart }
closeModal={ this.toggleDetailsModal }
/>
</Modal> </Modal>
</div> </div>
) )
......
ecom-web/src/components/product-market/product-market-container.jsx
View file @ e01ef5cd
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ProductMarket from './product-market'; import ProductMarket from './product-market';
import { fetchProducts, fetchPromotions } from '../../actions/product_actions'; import { fetchProducts, fetchPromotions } from '../../actions/product_actions';
import { fetchUserCart, updateUserCart } from '../../actions/cart_actions';
const mSTP = state => ({ const mSTP = state => ({
products: state.market.products, products: state.market.products,
promotions: state.market.promotions, promotions: state.market.promotions,
user: state.user,
cart: state.cart
}); });
const mDTP = dispatch => ({ const mDTP = dispatch => ({
getProducts: () => dispatch(fetchProducts()), getProducts: () => dispatch(fetchProducts()),
getPromotions: () => dispatch(fetchPromotions()) getPromotions: () => dispatch(fetchPromotions()),
getUserCart: userId => dispatch(fetchUserCart(userId)),
addCartItem: (updatedCart, userEmail) => dispatch(updateUserCart(updatedCart, userEmail))
}); });
export default connect(mSTP, mDTP)(ProductMarket); export default connect(mSTP, mDTP)(ProductMarket);
\ No newline at end of file
ecom-web/src/components/product-market/product-market.jsx
View file @ e01ef5cd
...@@ -23,20 +23,29 @@ export default class ProductMarket extends Component { ...@@ -23,20 +23,29 @@ export default class ProductMarket extends Component {
products.forEach(prod => { products.forEach(prod => {
promotions.forEach(promo => { promotions.forEach(promo => {
if (prod.sku === promo.productSku) { if (prod.sku === promo.productSku) {
prod.promo = (promo.discountPercentage * 100); prod.promo = (promo.discountPercentage);
} }
}); });
}); });
return ( return (
<div className="product-market-container"> <div className="product-market-container">
<h1 id="product-market-title">Product Market</h1> <div id="product-market-title">
<p>
Product Market
</p>
</div>
<div className="products-container"> <div className="products-container">
{this.props.products.map(prod => { {this.props.products.map(prod => {
return ( return (
<div className={prod.productName ? "product-item-container" : "no-item"} key={ prod.sku }> <div className={prod.productName ? "product-item-container" : "no-item"} key={ prod.sku }>
{ prod.productName ? { prod.productName ?
<ProductItem item={ prod }/> <ProductItem
item={ prod }
cart={ this.props.cart }
user={ this.props.user }
addToCart={ this.props.addCartItem }
/>
: :
<div className="product-item"> <div className="product-item">
<p id="prod-not-available">This Product is No Longer Available</p> <p id="prod-not-available">This Product is No Longer Available</p>
......
ecom-web/src/components/root.js
View file @ e01ef5cd
...@@ -16,11 +16,7 @@ const Root = ({ store }) => ( ...@@ -16,11 +16,7 @@ const Root = ({ store }) => (
<Route <Route
exact path="/" exact path="/"
render={() => { render={() => {
return ( return ( <Redirect to="/product-market" /> )
// this.state.isUserAuthenticated ? // This can be changed for however our frontend user auth will operate
// <Redirect to="/product-market" /> :
<Redirect to="/product-market" />
)
}} }}
/> />
<Route path="/session" component={ SessionContainer } /> { /* this can be removed if never used */ } <Route path="/session" component={ SessionContainer } /> { /* this can be removed if never used */ }
......
ecom-web/src/components/session/session-container.jsx
View file @ e01ef5cd
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Session from './session'; import Session from './session';
import {login, logOut} from '../../actions/session_actions' import {login, logOut} from '../../actions/session_actions';
import { fetchUserCart, createUserCart, clearUserCart } from '../../actions/cart_actions';
const mSTP = state => ({ const mSTP = state => ({
currentUser: state.user currentUser: state.user
...@@ -8,7 +9,10 @@ const mSTP = state => ({ ...@@ -8,7 +9,10 @@ const mSTP = state => ({
const mDTP = dispatch => ({ const mDTP = dispatch => ({
login: (userResponse) => dispatch(login(userResponse)), login: (userResponse) => dispatch(login(userResponse)),
logOut: () => dispatch(logOut()) logOut: () => dispatch(logOut()),
getUserCart: userId => dispatch(fetchUserCart(userId)),
createCart: newCart => dispatch(createUserCart(newCart)),
clearCart: () => dispatch(clearUserCart())
}); });
export default connect(mSTP, mDTP)(Session); export default connect(mSTP, mDTP)(Session);
\ No newline at end of file
ecom-web/src/components/session/session.jsx
View file @ e01ef5cd
import React, { Component } from 'react' import React, { Component } from 'react'
import { GoogleLogin, GoogleLogout } from 'react-google-login'; import { GoogleLogin, GoogleLogout } from 'react-google-login';
import '../../resources/stylesheets/session.css'
const clientId = `${process.env.REACT_APP_GOOGLE_CLIENT_ID}.apps.googleusercontent.com`; const clientId = `${process.env.REACT_APP_GOOGLE_CLIENT_ID}.apps.googleusercontent.com`;
...@@ -22,6 +23,17 @@ export default class Session extends Component { ...@@ -22,6 +23,17 @@ export default class Session extends Component {
const userResponse = {idToken: tokenId, userId, email, firstName, lastName, accessToken} const userResponse = {idToken: tokenId, userId, email, firstName, lastName, accessToken}
this.props.login(userResponse) this.props.login(userResponse)
this.setState({logIn: true}) this.setState({logIn: true})
// try grabbing user cart
this.props.getUserCart(email)
.then(res => res.json)
.catch(err => {
const newCart = {
userId: email,
cartItems: []
}
this.props.createCart(newCart)
})
} }
loginFailed = (response) => { loginFailed = (response) => {
...@@ -30,12 +42,13 @@ export default class Session extends Component { ...@@ -30,12 +42,13 @@ export default class Session extends Component {
logOutSuccess = (response) => { logOutSuccess = (response) => {
this.props.logOut() this.props.logOut()
this.props.clearCart()
this.setState({logIn: false}) this.setState({logIn: false})
} }
render() { render() {
return ( return (
<div> <div className="google-login-button">
{!this.state.logIn ? {!this.state.logIn ?
<GoogleLogin <GoogleLogin
clientId={clientId} clientId={clientId}
......
ecom-web/src/reducers/cart_reducer.js
View file @ e01ef5cd
<<<<<<< HEAD
import {ADD_NEW_CART, RECEIVE_CART} from '../actions/cart_actions' import {ADD_NEW_CART, RECEIVE_CART} from '../actions/cart_actions'
const initialState = { const initialState = {
...@@ -27,3 +28,23 @@ const cartReducer = (prevState = initialState, action) => { ...@@ -27,3 +28,23 @@ const cartReducer = (prevState = initialState, action) => {
export default cartReducer; export default cartReducer;
=======
import { RECEIVE_USER_CART, CLEAR_USER_CART } from '../actions/cart_actions';
const initialState = []
const cartReducer = (state = initialState, action) => {
Object.freeze(state);
let newState = Object.assign({}, state);
switch (action.type) {
case RECEIVE_USER_CART:
return newState.cart = action.cart.data.cartItems
case CLEAR_USER_CART:
return []
default:
return state;
}
}
export default cartReducer;
>>>>>>> 1f99e20fa13caaa629b4886d2be1b9d96bb9aa82
ecom-web/src/reducers/root_reducer.js
View file @ e01ef5cd
import { combineReducers } from 'redux'; import { combineReducers } from 'redux';
import productsReducer from './products_reducer'; import productsReducer from './products_reducer';
import userReducer from './user_reducer' import userReducer from './user_reducer'
import cartReducer from './cart_reducer';
const rootReducer = combineReducers({ const rootReducer = combineReducers({
market: productsReducer, market: productsReducer,
user: userReducer, user: userReducer,
cart: cartReducer
}); });
export default rootReducer; export default rootReducer;
\ No newline at end of file
ecom-web/src/reducers/user_reducer.js
View file @ e01ef5cd
import {SET_CURRENT_USER, LOGOUT_USER} from '../actions/session_actions' import {SET_CURRENT_USER, LOGOUT_USER} from '../actions/session_actions'
const initialState = {currentUser: null} const initialState = {
currentUser: null,
}
const userReducer = (state = initialState, action) => { const userReducer = (state = initialState, action) => {
Object.freeze(state); Object.freeze(state);
let newState = Object.assign({}, state); let newState = Object.assign({}, state);
switch (action.type) { switch (action.type) {
case SET_CURRENT_USER: case SET_CURRENT_USER:
return newState.currentUser = action.user.data; newState.currentUser = action.user.data;
return newState;
case LOGOUT_USER: case LOGOUT_USER:
return newState.currentUser = null; return newState.currentUser = null;
default: default:
return state; return state;
} }
......
ecom-web/src/resources/stylesheets/product-market.css
View file @ e01ef5cd
...@@ -7,12 +7,17 @@ ...@@ -7,12 +7,17 @@
#product-market-title { #product-market-title {
width: 100%; width: 100%;
display: flex;
justify-content: center;
text-align: center; text-align: center;
font-size: 30px; font-size: 30px;
margin: 15px 0px 10px; margin: 15px 0px 10px;
cursor: default; cursor: default;
border-bottom: 1px solid black; padding: 15px 0px;
padding-bottom: 15px; }
#product-market-title p {
width: 30%;
} }
.products-container { .products-container {
...@@ -52,6 +57,15 @@ ...@@ -52,6 +57,15 @@
transition: all 0.3s; transition: all 0.3s;
} }
#no-image-found {
height: 200px;
width: 100%;
transition: all 0.3s;
display: flex;
justify-content: center;
align-items: center;
}
#more-details-img-box { #more-details-img-box {
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -101,7 +115,7 @@ ...@@ -101,7 +115,7 @@
color: red; color: red;
} }
#add-to-cart-button { .add-to-cart-button {
cursor: pointer; cursor: pointer;
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px 40px; padding: 5px 40px;
...@@ -112,7 +126,7 @@ ...@@ -112,7 +126,7 @@
transition: all 0.3s; transition: all 0.3s;
} }
#add-to-cart-button:hover { .add-to-cart-button:hover {
background-color: rgb(207, 205, 205); background-color: rgb(207, 205, 205);
} }
...@@ -143,26 +157,42 @@ ...@@ -143,26 +157,42 @@
padding-top: 2px; padding-top: 2px;
} }
#order-quantity { .order-quantity {
width: 23px; border: 1px dotted rgba(0,0,0,0.3);
height: 13px; color: rgb(29, 29, 29);
border-radius: 5px; border-radius: 5px;
margin-top: 2px;
margin: 1px 5px; margin: 1px 5px;
padding: 6px;
}
#order-quantity {
border: 1px dotted rgba(0,0,0,0.3);
outline: none; outline: none;
color: rgb(29, 29, 29); height: 30px;
padding: 6px;
width: 42px;
transition: all 0.5s; transition: all 0.5s;
} }
#order-quantity:focus { .order-quantity:focus {
border: 1px solid black; border: 1px solid black;
} }
.add-cart-and-quantity { .add-cart-and-quantity {
display: flex; display: flex;
position: relative;
}
#please-log-in-notice {
display: none;
position: absolute;
bottom: 47px;
left: 22px;
padding: 3px 10px;
border-radius: 5px;
background-color: rgb(248, 76, 76);
animation: fadeInUp;
animation-duration: 0.5s;
}
.add-cart-and-quantity:hover #please-log-in-notice {
display: block;
} }
#product-details-modal { #product-details-modal {
...@@ -237,6 +267,25 @@ ...@@ -237,6 +267,25 @@
height: 65%; height: 65%;
} }
#no-image-display {
font-size: 20px;
opacity: 0.6;
}
#prod-details-no-image-display {
font-size: 28px;
opacity: 0.5;
cursor: default;
}
#prod-details-no-img {
width: 100%;
height: 65%;
display: flex;
justify-content: center;
align-items: center;
}
#prod-info-container { #prod-info-container {
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -247,9 +296,29 @@ ...@@ -247,9 +296,29 @@
} }
#product-details-condenser { #product-details-condenser {
height: 28%; position: relative;
height: 48%;
width: 100%; width: 100%;
margin: 185px 0px 0px 20px; margin: 148px 0px 0px 20px;
}
#details-please-log-in-notice {
display: none;
position: absolute;
text-align: center;
width: 190px;
bottom: 86px;
left: 3px;
padding: 3px 10px;
border-radius: 5px;
background-color: rgb(248, 76, 76);
animation: fadeInUp;
animation-duration: 0.5s;
}
.details-add-cart-and-quantity:hover #details-please-log-in-notice {
display: block;
} }
#prod-details-shipping { #prod-details-shipping {
...@@ -272,26 +341,40 @@ ...@@ -272,26 +341,40 @@
} }
#express-shipping { #express-shipping {
font-size: 14.3px; font-size: 13.8px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#prod-details-quantity { #free-delivery {
font-size: 15.5px;
}
#get-it-by {
text-align: left;
width: 100%;
}
.details-add-to-cart-and-quantity {
position: relative;
}
.prod-details-quantity {
border: 1px dotted rgba(0,0,0,0.3); border: 1px dotted rgba(0,0,0,0.3);
border-radius: 5px;
outline: none; outline: none;
margin-left: 3px; margin-left: 3px;
color: rgb(29, 29, 29); color: rgb(29, 29, 29);
transition: all 0.5s; transition: all 0.5s;
} }
#prod-details-quantity:focus { .prod-details-quantity:focus {
border: 1px solid black; border: 1px solid black;
} }
#prod-details-add-to-cart { .prod-details-add-to-cart {
cursor: pointer; cursor: pointer;
padding: 5px 40px; padding: 5px 40px;
margin: 10px 2px; margin: 10px 3px;
width: 98%; width: 98%;
border-radius: 5px; border-radius: 5px;
border: 1px solid black; border: 1px solid black;
...@@ -300,7 +383,7 @@ ...@@ -300,7 +383,7 @@
transition: all 0.3s; transition: all 0.3s;
} }
#prod-details-add-to-cart:hover { .prod-details-add-to-cart:hover {
background-color: rgb(207, 205, 205); background-color: rgb(207, 205, 205);
} }
...@@ -318,6 +401,13 @@ ...@@ -318,6 +401,13 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
#prod-details-original-price {
text-align: center;
font-size: 17px;
margin-bottom: 10px;
color: red;
}
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
......
ecom-web/src/resources/stylesheets/session.css 0 → 100644
View file @ e01ef5cd
.google-login-button {
margin-right: 20px;
}
.google-login-button button {
border-radius: 25px;
}
\ No newline at end of file
ecom-web/src/util/cart_api_util.js
View file @ e01ef5cd
import axios from 'axios'; import axios from 'axios';
<<<<<<< HEAD
export const postCart = (data) => { export const postCart = (data) => {
return axios.post("http://localhost:8080/api/carts", data) return axios.post("http://localhost:8080/api/carts", data)
} }
...@@ -10,4 +11,17 @@ export const getCartById = (id) => { ...@@ -10,4 +11,17 @@ export const getCartById = (id) => {
userId: id userId: id
} }
}) })
=======
export const fetchUserCart = userEmail => {
return axios.get(`http://localhost:8080/api/carts/${userEmail}`)
}
export const createCart = newCart => {
return axios.post(`http://localhost:8080/api/carts`, newCart)
}
export const updateCart = (updatedCart, userEmail) => {
// debugger
return axios.put(`http://localhost:8080/api/carts/${userEmail}`, updatedCart)
>>>>>>> 1f99e20fa13caaa629b4886d2be1b9d96bb9aa82
} }
\ No newline at end of file
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