UPD: Send invoice to orders api

src/components/mainPage/index.js

@@ -2,5 +2,4 @@ export {default as PayPal} from './paypal';
 export {default as Purchase} from './purchase';
 export {default as ShowCase} from './showCase';
 export {default as Home} from './home'; 
-export {default as Landing} from './landing';
-export {default as Invoice} from './invoice';
+export {default as Landing} from './landing';

src/components/mainPage/invoice.jsx

@@ -1,24 +0,0 @@
-import React from "react";
-
-// re-arrange to make invoice detail a self-contained element
-const Invoice = ( {invoiceDetails} ) => {
-    let addressInfo = invoiceDetails.purchase_units[0].shipping.address;
-    let address = `${addressInfo.address_line_1} ${addressInfo.admin_area_2}, ${addressInfo.admin_area_1} ${addressInfo.postal_code}`;
-
-    return (
-        <div className="container">
-            Date Purchased: {invoiceDetails.create_time}
-            <br />
-            Item: {invoiceDetails.purchase_units[0].description}
-            <br />
-            Amount Paid: ${invoiceDetails.purchase_units[0].amount.value}
-            <br />
-            Ship to: {invoiceDetails.purchase_units[0].shipping.name.full_name}
-            <br />
-            {/* Shipping address: {streetAddr} {city}, {state} {postalCode} */}
-            Shpping address: {address}
-        </div>
-    );
-}
-
-export default Invoice;

src/components/mainPage/landing.jsx

@@ -10,6 +10,7 @@ const Details = () => {
   const [cart, setCart] = useState([]);
   const [orderID, setOrderID] = useState(null);
   const [total, setTotal] = useState(0);
+  const [invoice, setInvoice] = useState(null);
 
   // refresh the cart logo and amount of the cart
   useEffect(() => {
@@ -28,12 +29,11 @@ const Details = () => {
     <>
       <ShowCase />
       {/* you can try 600011 in orderID */}
-      <Orders orderID={orderID} setOrderID={setOrderID} />
+      <Orders orderID={orderID} setOrderID={setOrderID} invoice={invoice} />
       <AllProducts setCart={setCart} />
       <CartIcon count={cart?.length} total={total}   />
       <Purchase />
-      <PayPal cart={cart} />
-
+      <PayPal cart={cart} setInvoice={setInvoice} />
     </>
   );
 };

src/components/mainPage/paypal.jsx

@@ -1,6 +1,5 @@
-import React, { useState } from "react";
+import React from "react";
 import { PayPalScriptProvider, PayPalButtons, FUNDING } from "@paypal/react-paypal-js";
-import { Invoice } from '.';
 
 const initialOptions = {
   "client-id": "AQBhJiIcG8lS4K5UoTo_-G5it85lbFpxEcA-WWBb1A-_Nq6YfKUdn05oyg-SgpxzXTyjfpdMceWskq7G",
@@ -10,10 +9,7 @@ const initialOptions = {
 // buyer account: dev01@oemautomation.com, pwd: 3Deerhead
 // merchant account: biz01@oemautomation.com, pwd 3Deerhead
 
-const PayPal = ({cart}) => {
-  const [showInvoice, setShowInvoice] = useState(false);
-  const [invoiceDetails, setInvoiceDetails] = useState({});
-  
+const PayPal = ({cart, setInvoice}) => {
 
   const createOrder = (data, actions) => {
     return actions.order.create({
@@ -32,8 +28,7 @@ const PayPal = ({cart}) => {
   
   const onApprove = (data, actions) => {
     return actions.order.capture().then(function(details) {
-      setInvoiceDetails(details);
-      setShowInvoice(true);
+      setInvoice(details);
     });
   }
 
@@ -53,7 +48,6 @@ const PayPal = ({cart}) => {
           </div>
         </PayPalScriptProvider>
       </div>
-      {showInvoice && <Invoice invoiceDetails={invoiceDetails} />}
     </>
   );
 };

src/components/orders/orders.jsx

@@ -1,32 +1,61 @@
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
 import { useGetOrders, useSetOrder } from "../api";
 
-const sampleOrder =  {
-    items: [
-      { productName: "B1-14MR", price: 129.99 },
-      { productName: "W2C", price: 29.99 },
-      { productName: "PSU-24VDC", price: 19.99}
-    ],
-    totalAmount: 1779.97,
-    orderDate: "2021-11-22",
-    email: "pocketooth@gmail.com",
-    orderByFirstName: "John",
-    orderByLastName: "Huang",
-  };
-  
-// re-arrange to make invoice detail a self-contained element
-const Orders = ({ orderID, setOrderID }) => {
+const sampleOrder = {
+  items: [
+    { productName: "B1-14MR", price: 129.99 },
+    { productName: "W2C", price: 29.99 },
+    { productName: "PSU-24VDC", price: 19.99 }
+  ],
+  totalAmount: 1779.97,
+  orderDate: "2021-11-22",
+  email: "pocketooth@gmail.com",
+  orderByFirstName: "John",
+  orderByLastName: "Huang",
+};
+
+// 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}`;
+  return {
+    items: order.purchase_units.map((item) => {
+      return {
+        productName: item.description,
+        price: +item.amount.value
+      };
+    }),
+    totalAmount: order.purchase_units.reduce((a,b) => {
+      return a + +b.amount.value;
+    }, 0),
+    orderDate: order.create_time,
+    // email: order.payer.email_address,
+    orderByFirstName: order.payer.name.given_name,
+    orderByLastName: order.payer.name.surname,
+    // address: address
+  }
+}
+
+
+const Orders = ({ orderID, setOrderID, invoice }) => {
   const orders = useGetOrders(orderID);
   const [results, setOrder] = useSetOrder();
 
   useEffect(() => {
-      if (results.data) {
-          let orderID = results.data.setOrderInfo.split(':').pop();
-          setOrderID(orderID);
-        console.log("results:",orderID)
-      }
+    if (results.data) {
+      let orderID = results.data.setOrderInfo.split(':').pop();
+      setOrderID(orderID);
+      console.log("results:", orderID)
+    }
   }, [results, setOrderID]); //didUpdate
 
+  useEffect(() => {
+    if (invoice) {
+      console.log("Invoice: ", invoiceShape(invoice));
+      setOrder(invoiceShape(invoice));
+    }
+  }, [invoice]); //missing dep warning
+
   const onClick = (event) => {
     setOrder(sampleOrder);
     console.log("sample order button clicked");