+
+
Shopping Cart
@@ -122,12 +119,10 @@ class ShoppingCart extends Component {
}
-
-
-
-
+
+
+
+
)
diff --git a/app/components/confirmation.jsx b/app/components/confirmation.jsx
new file mode 100644
index 0000000..4d0ec9f
--- /dev/null
+++ b/app/components/confirmation.jsx
@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import store from '../store.jsx'
+import Promise from 'bluebird';
+import axios from 'axios';
+// this is the component
+
+class Confirmation extends Component {
+// const Confirmation = (props) => {
+ constructor(){
+ super();
+ }
+
+
+ render(){
+ const order = this.props.orderFromPreviousPage.shoppingCart.order;
+ const user = this.props.orderFromPreviousPage.auth;
+ console.log(this.props.orderFromPreviousPage)
+
+ return(
+
+
+
Dear {user ? user.name : 'Anonymous'},
+
Thank you for your purchase. Your confirmation number is:
+
{order.orderNumber}
+
A copy of your order has been sent to {order.email}
+
+
+
+ )
+}
+
+}
+
+export default Confirmation;
+
+
+// this is the container
+// const mapStateToProps = (state) => {
+// return {
+// shoppingCart: state.shoppingCart,
+// auth: state.auth,
+// order: state.order
+// };
+// };
+
+
+
+// export default connect(
+// mapStateToProps,
+// )(Confirmation);
+
diff --git a/app/components/proceedToCheckout.jsx b/app/components/proceedToCheckout.jsx
new file mode 100644
index 0000000..bc10960
--- /dev/null
+++ b/app/components/proceedToCheckout.jsx
@@ -0,0 +1,173 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import store from '../store.jsx'
+import Promise from 'bluebird';
+import axios from 'axios';
+import { Link } from 'react-router';
+import { purchase } from '../reducers/ShoppingCart_reducer';
+import crypto from 'crypto';
+import Confirmation from './confirmation'
+
+// this is the component
+
+class Checkout extends Component {
+ constructor(){
+ super();
+ this.state = {
+ currentuser:{},
+ order:{},
+ emailValid: false,
+ goToConfirmation: false,
+ error: false
+ }
+
+
+ this.updateAddress = this.updateAddress.bind(this);
+ this.sendToPurchase = this.sendToPurchase.bind(this);
+ this.emailValidation = this.emailValidation.bind(this);
+
+ }
+
+ componentDidMount(){
+ const id = this.props.auth ? this.props.auth.id : 'anonymous'
+ const order = {user_id: id, quantity: [], products: this.props.shoppingCart.shoppingCart}
+ this.setState({currentuser: this.props.auth, order: order})
+ }
+
+
+ updateAddress(event){
+ const order = this.state.order;
+ order.deliveryAddress = event.target.value;
+ this.setState({order: order})
+ }
+
+ sendToPurchase(event){
+ event.preventDefault();
+ const emailToPass = event.target.email.value;
+ const order = this.state.order;
+ order.email = emailToPass;
+
+ if(!this.state.currentuser){
+ order.orderNumber = crypto.randomBytes(5).toString('hex').toUpperCase();
+ this.setState({order: order})
+ axios.post('/api/sendmail', this.state.order)
+
+ } else{
+ // console.log(this.state.order)
+ axios.post('/api/orders', this.state.order)
+ .then((res) => {
+ if(res === 'error'){this.setState({error: true})}
+ else{
+ order.orderNumber = res.data.orderNumber;
+ this.setState({order:order})
+ this.setState({goToConfirmation: true})
+ this.props.purchase_func(this.state.order)
+
+ }
+ })
+
+ }
+
+ }
+
+ emailValidation(event){
+ event.preventDefault();
+ var validEmail = false;
+ const email = event.target.value;
+ const atpos = email.indexOf("@");
+ const dotpos = email.lastIndexOf(".");
+ if (atpos<1 || dotpos
=email.length) {
+ this.setState({emailValid: false})
+ } else this.setState({emailValid: true})
+
+ }
+
+ render(){
+ // console.log(this.state)
+ return(
+
+ {!this.state.goToConfirmation
+ ?
+
+ Welcome {this.props.auth ? this.props.auth.name : 'Unknown user'}
+
+
+
+ :
+ {!this.state.error
+ ?
+ :
+ Sorry, one of your items is no longer available
+
+ }
+
+
+
+ }
+