Added checkout form and functionality for session and session persist…

…ence as an order and user cart to user order
1710-most-graceful-shoppers · Jan 16, 2018 · 12d8eac · 12d8eac
1 parent e961567
commit 12d8eac
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 47 deletions.
diff --git a/client/components/Cart.js b/client/components/Cart.js
@@ -1,40 +1,54 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {Link} from 'react-router-dom';
 import {updateCart, updateSessionCart, deleteFromCart, deleteFromSessionCart} from '../store';
 import CheckoutForm from './CheckoutForm';
 
-const Cart = (props) => {
-  const {userId, sessionCart, userCart, addMe, subtractMe, deleteMe} = props;
-  const cart = userId ? userCart : sessionCart;
-  let totalCost = 0;
-  return cart.products ? (
-    <div className="cart">
-    {cart.products.map(product => {
-      totalCost = totalCost + product.product_order.quantity * product.price;
-      return (
-        <div key={product.id} className="cart-product">
-          <Link to={`/products/${product.id}`}><h4>Name: {product.title}</h4></Link>
-          <h4>Quantity: {product.product_order.quantity}
-            <button onClick={() => addMe(userId, product.id)}>+</button>
-            <button
-              onClick={() => subtractMe(userId, product.id)}
-              disabled={(product.product_order.quantity === 1)}>
-              -
-            </button>
-            <button onClick={() => deleteMe(userId, product.id)}>Remove Product</button>
-          </h4>
-          <h4>Current Price: {product.price} coins ; Subtotal: {product.price * product.product_order.quantity} coins</h4>
-        </div>
-      )
-    })}
-    {/* USE STRIPE for payment processing */}
-    <h3>Total Cost: {totalCost} coins</h3>
-    <button>Checkout!</button>
-    <CheckoutForm />
-    </div>
-  ) : null;
-};
+class Cart extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      coreyPromo: false
+    }
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange (e) {
+    (e.target.value === 'CoreyRulezOmriDroolz') ? this.setState({coreyPromo: true}) : this.setState({coreyPromo: false});
+  }
+
+  render() {
+    const {userId, sessionCart, userCart, addMe, subtractMe, deleteMe} = this.props;
+    const cart = userId ? userCart : sessionCart;
+    let totalCost = 0;
+    return cart.products ? (
+      <div className="cart">
+      {cart.products.map(product => {
+        totalCost = totalCost + product.product_order.quantity * product.price;
+        return (
+          <div key={product.id} className="cart-product">
+            <Link to={`/products/${product.id}`}><h4>Name: {product.title}</h4></Link>
+            <h4>Quantity: {product.product_order.quantity}
+              <button onClick={() => addMe(userId, product.id)}>+</button>
+              <button
+                onClick={() => subtractMe(userId, product.id)}
+                disabled={(product.product_order.quantity === 1)}>
+                -
+              </button>
+              <button onClick={() => deleteMe(userId, product.id)}>Remove Product</button>
+            </h4>
+            <h4>Current Price: {product.price} coins ; Subtotal: {product.price * product.product_order.quantity} coins</h4>
+          </div>
+        )
+      })}
+      {/* USE STRIPE for payment processing */}
+      <h3>Total Cost: {this.state.coreyPromo ? totalCost / 2 : totalCost} coins {this.state.coreyPromo ? 'Heck yes, you said it, not me! You save 50%!' : 'You can do better.'}</h3>
+      <button>Checkout!</button>
+      <CheckoutForm promoChange={this.handleChange} />
+      </div>
+    ) : null;
+  }
+}
 
 const mapState = (state) => ({
   userId: state.user.id,

diff --git a/client/components/CheckoutForm.js b/client/components/CheckoutForm.js
@@ -11,7 +11,7 @@ class CheckoutForm extends Component {
   }
 
   render() {
-    const {user, sessionCart, submitUserOrder, submitCartOrder} = this.props;
+    const {user, sessionCart, submitUserOrder, submitCartOrder, promoChange} = this.props;
     const onSubmit = user.id ? (e) =>  submitUserOrder(e, user.id) : (e) => submitCartOrder(e, sessionCart);
 
     return (
@@ -43,6 +43,14 @@ class CheckoutForm extends Component {
                 name="payment"
               />
             </label>
+            <label className="form-group-label">Promo Code?
+            <input
+              onChange={promoChange}
+              className="form-group-label-input"
+              placeholder="Rhymes with schoolz"
+              name="coreyPromo"
+            />
+          </label>
           </div>
           <div className="form-group">
             <button
@@ -58,26 +66,35 @@ class CheckoutForm extends Component {
   }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
   return {
     user: state.user,
     sessionCart: state.sessionCart,
-    userCart: state.userCart
+    userCart: state.userCart,
+    promoChange: ownProps.promoChange
   }
 };
 
 const mapDispatchToProps = (dispatch) => {
   return {
     submitUserOrder: (e, userId) => {
       e.preventDefault();
-      // dispatch(placeUserOrder({address: e.target.address.value, email: e.target.email.value, payment: e.target.payment.value}, userId));
+      dispatch(placeUserOrder({
+        address: e.target.address.value,
+        email: e.target.email.value,
+        payment: e.target.payment.value,
+        coreyPromo: e.target.coreyPromo.value === 'CoreyRulezOmriDroolz',
+        isSold: true
+      }, userId));
     },
     submitCartOrder: (e, sessionCart) => {
       e.preventDefault();
       dispatch(placeSessionOrder({
         address: e.target.address.value,
         email: e.target.email.value,
-        payment: e.target.payment.value
+        payment: e.target.payment.value,
+        coreyPromo: e.target.coreyPromo.value === 'CoreyRulezOmriDroolz',
+        isSold: true
       }, sessionCart));
     }
   }

diff --git a/client/store/sessionCart.js b/client/store/sessionCart.js
@@ -30,7 +30,11 @@ export function deleteFromSessionCart(productId) {
 }
 
 export function placeSessionOrder(checkoutInfo, sessionCart) {
-  console.log(sessionCart);
+  return (dispatch) => {
+    axios.post('/api/sessions/order', {checkoutInfo, sessionCart})
+    .then(cart => dispatch(gotSessionCart(cart)))
+    .catch(console.error);
+  }
 }
 
 export function fetchSessionCart() {

diff --git a/client/store/user.js b/client/store/user.js
@@ -37,6 +37,7 @@ export const auth = (email, password, method) =>
       .then(res => {
         dispatch(getUser(res.data));
         dispatch(fetchCart(res.data.id));
+        dispatch(deleteFromSessionCart());
         history.push('/home')
       }, authError => { // rare example: a good use case for parallel (non-catch) error handler
         dispatch(getUser({error: authError}))

diff --git a/client/store/userCart.js b/client/store/userCart.js
@@ -18,7 +18,9 @@ export function updateCart(userId, productId, quantity) {
       productId,
       quantity
     })
-    .then(() => dispatch(fetchCart(userId)))
+    .then(() => {
+      dispatch(fetchCart(userId));
+    })
     .catch(console.error);
   }
 }
@@ -30,13 +32,21 @@ export function deleteFromCart(userId, productId) {
         productId
       }
     })
-    .then(() => dispatch(fetchCart(userId)))
+    .then(() => {
+      dispatch(fetchCart(userId));
+    })
     .catch(console.error);
   }
 }
 
 export function placeUserOrder(checkoutInfo, userId) {
-  console.log(userId)
+  return (dispatch) => {
+    axios.post(`/api/users/${userId}/orders`, checkoutInfo)
+    .then(() => {
+      dispatch(clearCart());
+    })
+    .catch(console.error);
+  }
 }
 
 function gotCart(userCart) {

diff --git a/server/api/sessions.js b/server/api/sessions.js
@@ -44,6 +44,26 @@ router.delete('/cart', (req, res, next) => {
   res.json(req.session.cart);
 })
 
+router.post('/order', (req, res, next) => {
+  const {checkoutInfo, sessionCart} = req.body;
+  Order.create(checkoutInfo)
+  .then(order => Promise.all(sessionCart.products.map(product => {
+    return Product.findById(product.id)
+    .then(foundProduct => order.addProduct(foundProduct, {
+      through: {
+        quantity: product.product_order.quantity,
+        price: foundProduct.price
+      }
+    }))
+    .catch(next);
+  })))
+  .then(() => {
+    req.session.cart = {products: []};
+    res.json(req.session.cart);
+  })
+  .catch(next);
+})
+
 module.exports = router;
 
 // /api/users/:id/cart

diff --git a/server/api/users.js b/server/api/users.js
@@ -73,6 +73,12 @@ router.get('/:id/orders', (req, res, next) => {
   .catch(next);
 });
 
+router.post('/:id/orders', cartHelper, (req, res, next) => {
+  req.user.cart.update(req.body)
+  .then(newOrder => res.json(newOrder))
+  .catch(next);
+})
+
 //getting a logged-in user cart.
 router.get('/:id/cart', cartHelper, (req, res, next) => {
   res.json(req.user.cart)
@@ -101,7 +107,7 @@ router.put('/:id/cart', cartHelper, (req, res, next) => {
 
   Product.findById(productId)
   .then(product => {
-    let productFinder = req.user.cart.products.findIndex(prod => Number(prod.id) === Number(product.id))
+    let productFinder = (req.user.cart.products) ? req.user.cart.products.findIndex(prod => Number(prod.id) === Number(product.id)) : -1;
     if (productFinder !== -1) {
       return req.user.cart.addProduct(product, {
         through: {

diff --git a/server/auth/index.js b/server/auth/index.js
@@ -68,17 +68,15 @@ function addToCart(req, res, next) {
         return Promise.all(productsArr.map((product, index) => {
           let productFinder = (req.user.cart.products) ? req.user.cart.products.findIndex(prod => Number(prod.id) === Number(product.id)) : -1;
           if (productFinder !== -1) {
-            //return
-            req.user.cart.addProduct(product, {
+            return req.user.cart.addProduct(product, {
               through: {
                 quantity: req.session.cart.products[index].product_order.quantity + req.user.cart.products[productFinder].product_order.quantity,
                 price: product.price
               }
             })
           }
           else {
-            //return
-            req.user.cart.addProduct(product, {
+            return req.user.cart.addProduct(product, {
               through: {
                 quantity: req.session.cart.products[index].product_order.quantity,
                 price: product.price
@@ -87,6 +85,9 @@ function addToCart(req, res, next) {
           }
         }))
       })
+    })
+    .then(() => {
+      req.session.cart = {products: []};
       res.json(req.user);
     })
     .catch(next)

diff --git a/server/db/models/order.js b/server/db/models/order.js
@@ -14,7 +14,6 @@ const Order = db.define('order', {
   },
   email: {
     type: Sequelize.STRING,
-    unique: true,
     validate: {
       isEmail: true
     }

diff --git a/server/socket/index.js b/server/socket/index.js
@@ -5,5 +5,6 @@ module.exports = (io) => {
     socket.on('disconnect', () => {
       console.log(`Connection ${socket.id} has left the building`)
     })
+
   })
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,5 +5,6 @@ module.exports = (io) => { @@
         socket.on('disconnect', () => {
           console.log(`Connection ${socket.id} has left the building`)
         })
       })
     }