From decb7542156036d3bb78dd1d8829f60ac98ba32b Mon Sep 17 00:00:00 2001 From: brainyellow Date: Tue, 23 Nov 2021 17:21:16 -0500 Subject: [PATCH] UPD: Send invoice to orders api --- src/components/mainPage/index.js | 3 +- src/components/mainPage/invoice.jsx | 24 ---------- src/components/mainPage/landing.jsx | 6 +-- src/components/mainPage/paypal.jsx | 12 ++--- src/components/orders/orders.jsx | 71 ++++++++++++++++++++--------- 5 files changed, 57 insertions(+), 59 deletions(-) delete mode 100644 src/components/mainPage/invoice.jsx diff --git a/src/components/mainPage/index.js b/src/components/mainPage/index.js index 0476e58..22a708d 100644 --- a/src/components/mainPage/index.js +++ b/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'; \ No newline at end of file +export {default as Landing} from './landing'; \ No newline at end of file diff --git a/src/components/mainPage/invoice.jsx b/src/components/mainPage/invoice.jsx deleted file mode 100644 index e8bd3e9..0000000 --- a/src/components/mainPage/invoice.jsx +++ /dev/null @@ -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 ( -
- Date Purchased: {invoiceDetails.create_time} -
- Item: {invoiceDetails.purchase_units[0].description} -
- Amount Paid: ${invoiceDetails.purchase_units[0].amount.value} -
- Ship to: {invoiceDetails.purchase_units[0].shipping.name.full_name} -
- {/* Shipping address: {streetAddr} {city}, {state} {postalCode} */} - Shpping address: {address} -
- ); -} - -export default Invoice; \ No newline at end of file diff --git a/src/components/mainPage/landing.jsx b/src/components/mainPage/landing.jsx index 4522791..4f0f7cc 100644 --- a/src/components/mainPage/landing.jsx +++ b/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 = () => { <> {/* you can try 600011 in orderID */} - + - - + ); }; diff --git a/src/components/mainPage/paypal.jsx b/src/components/mainPage/paypal.jsx index 5035626..2f76e11 100644 --- a/src/components/mainPage/paypal.jsx +++ b/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}) => { - {showInvoice && } ); }; diff --git a/src/components/orders/orders.jsx b/src/components/orders/orders.jsx index 8b2f4b4..6056b04 100644 --- a/src/components/orders/orders.jsx +++ b/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");