diff --git a/src/components/mainPage/landing.jsx b/src/components/mainPage/landing.jsx
index 7460073..10d5a18 100644
--- a/src/components/mainPage/landing.jsx
+++ b/src/components/mainPage/landing.jsx
@@ -11,6 +11,7 @@ const Details = () => {
const [orderID, setOrderID] = useState(null);
const [total, setTotal] = useState(0);
const [invoice, setInvoice] = useState(null);
+ const [clearCart, setClearCart] = useState(false);
// refresh the cart logo and amount of the cart
useEffect(() => {
@@ -27,10 +28,10 @@ const Details = () => {
{/* you can try 600011 in orderID */}
-
+
-
+
>
);
};
diff --git a/src/components/mainPage/paypal.jsx b/src/components/mainPage/paypal.jsx
index 2f76e11..151504b 100644
--- a/src/components/mainPage/paypal.jsx
+++ b/src/components/mainPage/paypal.jsx
@@ -9,7 +9,7 @@ const initialOptions = {
// buyer account: dev01@oemautomation.com, pwd: 3Deerhead
// merchant account: biz01@oemautomation.com, pwd 3Deerhead
-const PayPal = ({cart, setInvoice}) => {
+const PayPal = ({cart, setClearCart, setInvoice}) => {
const createOrder = (data, actions) => {
return actions.order.create({
@@ -29,6 +29,7 @@ const PayPal = ({cart, setInvoice}) => {
const onApprove = (data, actions) => {
return actions.order.capture().then(function(details) {
setInvoice(details);
+ setClearCart(true);
});
}
diff --git a/src/components/orders/orders.jsx b/src/components/orders/orders.jsx
index 88c2a08..78fd980 100644
--- a/src/components/orders/orders.jsx
+++ b/src/components/orders/orders.jsx
@@ -16,8 +16,8 @@ const sampleOrder = {
// constructs paypal order details into correct shape for db
const invoiceShape = (order) => {
- // let addressInfo = order.purchase_units[0].shipping.address;
- // let address = `${addressInfo.address_line_1} ${addressInfo.admin_area_2}, ${addressInfo.admin_area_1} ${addressInfo.postal_code}`;
+ let addressInfo = order.purchase_units[0].shipping.address;
+ let address = `${addressInfo.address_line_1} ${addressInfo.admin_area_2}, ${addressInfo.admin_area_1} ${addressInfo.postal_code}`;
return {
items: order.purchase_units.map((item) => {
return {
@@ -29,10 +29,13 @@ const invoiceShape = (order) => {
return a + +b.amount.value;
}, 0),
orderDate: order.create_time,
- // email: order.payer.email_address,
+ email: order.payer.email_address,
orderByFirstName: order.payer.name.given_name,
orderByLastName: order.payer.name.surname,
- // address: address
+ shipping: {
+ shipTo: `${order.payer.name.given_name} ${order.payer.name.surname}`,
+ address: address
+ }
}
}
@@ -50,13 +53,11 @@ const Orders = ({ orderID, setOrderID, invoice, setInvoice }) => {
}, [results, setOrderID]); //didUpdate
useEffect(() => {
- console.log("Invoice: ", invoice && invoiceShape(invoice));
if (invoice) {
- // console.log("Invoice: ", invoiceShape(invoice));
setOrder(invoiceShape(invoice));
setInvoice(null);
}
- }, [invoice, setOrder, setInvoice]); //missing dep warning
+ }, [invoice, setOrder, setInvoice]);
const onClick = (event) => {
setOrder(sampleOrder);
diff --git a/src/components/products/allProducts.jsx b/src/components/products/allProducts.jsx
index 0a63936..f91a52b 100644
--- a/src/components/products/allProducts.jsx
+++ b/src/components/products/allProducts.jsx
@@ -2,19 +2,23 @@ import React, { useState, useEffect } from 'react';
import { useGetProd } from '../api';
import './allProducts.css';
-const AllProducts = ({ setCart }) => {
+const AllProducts = ({ setCart, clearCart, setClearCart }) => {
const allProducts = useGetProd();
const [productState, setProductState] = useState([]);
// adds "selected" property to each product for checkbox functionality
useEffect(() => {
- if (allProducts) {
+ if (allProducts || clearCart) {
setProductState(allProducts.map(p => ({
selected: false,
...p
})));
+ if (clearCart) {
+ setClearCart(false); //reset flag after clearing cart / unchecking items
+ setCart([]);
+ }
}
- }, [allProducts])
+ }, [allProducts, clearCart, setClearCart, setCart])
// when checkbox is changed, the corresponding product "selected" value is inversed
// cart state is filled with products that have TRUE "selected" value