diff --git a/pages/checkout/index.jsx b/pages/checkout/index.jsx index c9afd53..00290e0 100644 --- a/pages/checkout/index.jsx +++ b/pages/checkout/index.jsx @@ -1,75 +1,78 @@ -import Head from 'next/head'; -import { useEffect } from 'react'; -import Link from 'next/link'; -import { connect } from 'react-redux'; -import store2 from 'store2'; -import Router from 'next/router'; -import axios from '../../src/services/axios'; -import { emptyCart } from '../../src/services/cart/actions'; -import { resetCartTotal } from '../../src/services/total/actions'; -import './style.scss'; +import Head from "next/head"; +import { useEffect } from "react"; +import Link from "next/link"; +import { connect } from "react-redux"; +import store2 from "store2"; +import Router from "next/router"; +import axios from "../../src/services/axios"; +import { emptyCart } from "../../src/services/cart/actions"; +import { resetCartTotal } from "../../src/services/total/actions"; +import "./style.scss"; const CheckOut = ({ cartTotal, cartProducts, emptyCart, resetCartTotal }) => { - let userName = store2.session.get('username'); + let userName = store2.session.get("username"); - const handleFormSubmit = e => { + const handleFormSubmit = (e) => { e.preventDefault(); - userName = store2.session.get('username'); - axios.post('/api/checkout', { - userName - }).then((data) => { - let userOrders = store2.session.get('userOrders') || []; - store2.session.set('confirmationProducts', cartProducts); - store2.session.set('confirmationTotal', cartTotal); - emptyCart(); - resetCartTotal(); - const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' }; - const today = new Date(); - userOrders.push({ - "id": Math.floor(Math.random() * 1000) + 1, - "orderDate": today.toLocaleDateString("en-US", dateOptions), - "total": cartTotal.totalPrice, - "deliveryDate": today.toLocaleDateString("en-US", dateOptions), - "items": cartProducts.map((cartProduct, index) => ({ - "sku": cartProduct.sku, - "title": cartProduct.title, - "id": index + 10, - "price": cartProduct.price * cartProduct.quantity, - "description": cartProduct.title - })) + userName = store2.session.get("username"); + axios + .post("/api/checkout", { + userName, + }) + .then((data) => { + let userOrders = store2.session.get("userOrders") || []; + store2.session.set("confirmationProducts", cartProducts); + store2.session.set("confirmationTotal", cartTotal); + emptyCart(); + resetCartTotal(); + const dateOptions = { year: "numeric", month: "long", day: "numeric" }; + const today = new Date(); + userOrders.push({ + id: Math.floor(Math.random() * 1000) + 1, + orderDate: today.toLocaleDateString("en-US", dateOptions), + total: cartTotal.totalPrice, + deliveryDate: today.toLocaleDateString("en-US", dateOptions), + items: cartProducts.map((cartProduct, index) => ({ + sku: cartProduct.sku, + title: cartProduct.title, + id: index + 10, + price: cartProduct.price * cartProduct.quantity, + description: cartProduct.title, + })), + }); + store2.session.set("userOrders", userOrders); + Router.replace("/confirmation"); + }) + .catch((err) => { + console.log(err); + Router.replace({ + pathname: "/signin", + query: { checkout: "true" }, + }); }); - store2.session.set('userOrders', userOrders); - Router.replace('/confirmation'); - }).catch((err) => { - console.log(err); - Router.replace({ - pathname: '/signin', - query: { checkout: 'true' }, - }); - }); }; - useEffect(() => { - userName = store2.session.get('username'); + useEffect(() => { + userName = store2.session.get("username"); if (!userName) { Router.replace({ - pathname: '/signin', - query: { checkout: 'true' }, + pathname: "/signin", + query: { checkout: "true" }, }); - } else if(cartProducts.length === 0) { - Router.replace('/'); + } else if (cartProducts.length === 0) { + Router.replace("/"); } }, []); if (cartProducts.length === 0) { return <>; - }; + } return ( <> - StackDemo - + StackDemo Change +
@@ -90,43 +93,111 @@ const CheckOut = ({ cartTotal, cartProducts, emptyCart, resetCartTotal }) => {
- Shipping Address + + Shipping Address +
-
+
- - + +
- - + +
- - + +
- - + +
- - + +
@@ -135,7 +206,13 @@ const CheckOut = ({ cartTotal, cartProducts, emptyCart, resetCartTotal }) => {
- +
@@ -145,7 +222,10 @@ const CheckOut = ({ cartTotal, cartProducts, emptyCart, resetCartTotal }) => {