ADD: Display invoice after purchase success

src/App.js

@@ -2,14 +2,14 @@ import React from 'react';
 import './App.css';
 import { Nav } from './components/header';
 import { Footer } from './components/footer';
-import { Landding } from './components/mainPage';
+import { Landing } from './components/mainPage';
 
 function App() {
   return (
     <div className="page-container">
       <div className="content-wrap">
         <Nav />
-        <Landding />
+        <Landing />
       </div>
       <Footer />
     </div>

src/components/mainPage/index.js

@@ -2,4 +2,5 @@ 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 Landding} from './landing';
+export {default as Landing} from './landing';
+export {default as Invoice} from './invoice';

src/components/mainPage/invoice.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Invoice = (props) => {
+
+    return (
+        <div className="container">
+            Date Purchased: {props.date}
+            <br />
+            Item: {props.itemName}
+            <br />
+            Amount Paid: ${props.itemValue}
+            <br />
+            Ship to: {props.buyerName}
+            <br />
+            Shipping address: {props.streetAddr} {props.city}, {props.state} {props.postalCode}
+        </div>
+    );
+}
+
+export default Invoice;

src/components/mainPage/paypal.jsx

@@ -1,15 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import { PayPalScriptProvider, PayPalButtons, FUNDING } from "@paypal/react-paypal-js";
+import { Invoice } from '.';
 
 const initialOptions = {
   "client-id": "AQBhJiIcG8lS4K5UoTo_-G5it85lbFpxEcA-WWBb1A-_Nq6YfKUdn05oyg-SgpxzXTyjfpdMceWskq7G",
   currency: "USD",
   intent: "capture"
 }
-// buyer account: dev01.oemautomation.com, pwd: 3Deerhead
-// merchant account: biz01.oemautomation.com, pwd 3Deerhead
+// buyer account: dev01@oemautomation.com, pwd: 3Deerhead
+// merchant account: biz01@oemautomation.com, pwd 3Deerhead
 
 const PayPal = () => {
+  const [showInvoice, setShowInvoice] = useState(false);
+  const [invoiceDetails, setInvoiceDetails] = useState({});
+  
 
   const createOrder = (data, actions) => {
     return actions.order.create({
@@ -25,8 +29,8 @@ const PayPal = () => {
   
   const onApprove = (data, actions) => {
     return actions.order.capture().then(function(details) {
-      console.dir(details);
-      alert('Transaction completed by ' + details.payer.name.given_name);
+      setInvoiceDetails(details);
+      setShowInvoice(true);
     });
   }
 
@@ -44,6 +48,18 @@ const PayPal = () => {
           </div>
         </PayPalScriptProvider>
       </div>
+      {showInvoice && 
+        <Invoice 
+          date={invoiceDetails.create_time}
+          itemName={invoiceDetails.purchase_units[0].description}
+          itemValue={invoiceDetails.purchase_units[0].amount.value}
+          buyerName={invoiceDetails.purchase_units[0].shipping.name.full_name}
+          streetAddr={invoiceDetails.purchase_units[0].shipping.address.address_line_1}
+          city={invoiceDetails.purchase_units[0].shipping.address.admin_area_2}
+          state={invoiceDetails.purchase_units[0].shipping.address.admin_area_1}
+          postalCode={invoiceDetails.purchase_units[0].shipping.address.postal_code}
+        />
+      }
     </>
   );
 };