ADD: Clear cart and deselect after purchase

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 = () => {
       <ShowCase />
       {/* you can try 600011 in orderID */}
       <Orders orderID={orderID} setOrderID={setOrderID} invoice={invoice} setInvoice={setInvoice}  />
-      <AllProducts setCart={setCart} />
+      <AllProducts setCart={setCart} clearCart={clearCart} setClearCart={setClearCart} />
       <CartIcon count={cart?.length} total={total}   />
       <Purchase />
-      <PayPal cart={cart} setInvoice={setInvoice} />
+      <PayPal cart={cart} setInvoice={setInvoice} setClearCart={setClearCart} />
     </>
   );
 };

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);
     });
   }
 

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 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 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);

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