feat(client): paypal balance integration

client/.env.local

@@ -0,0 +1,5 @@
+AUTH0_SECRET="cd30f2a7f4385cade972fe29aaccfece5ea3efb5482b1f8c1926894ab4f96e58"
+AUTH0_BASE_URL="http://localhost:3000"
+AUTH0_ISSUER_BASE_URL="dev-p2ee3ykl.us.auth0.com"
+AUTH0_CLIENT_ID="b2YFWRCgpZHZFDSA8F1KN2Z05sGC8wgc"
+AUTH0_CLIENT_SECRET="SCD6CEhPbf-_ls4SK8AohWY0FCPPLwD52hH5Brrbs1ujlH5bUtE2YEl0W6KLTYve"

client/package.json

@@ -12,8 +12,12 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@auth0/nextjs-auth0": "^1.7.0",
     "@reduxjs/toolkit": "^1.8.1",
+    "axios": "^0.26.1",
+    "firebase": "^9.6.11",
     "next": "^12.1.5",
+    "oauth": "^0.9.15",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-redux": "^7.2.8",

client/src/common/components/Auth.js

@@ -0,0 +1,32 @@
+import { useAuth } from "../lib/firebase/authContext";
+import { useRouter } from "next/router";
+import { useState } from "react";
+export default function AuthComponent() {
+  const { signup, signIn } = useAuth();
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    try {
+      await signup(email, password);
+      router.push("/");
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return (
+    <>
+      <h1>Register</h1>
+      <input placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
+      <input
+        placeholder="Password"
+        type="password"
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <button onClick={handleSubmit}>Submit</button>
+    </>
+  );
+}

client/src/common/components/Dashboard/Dashboard.js

@@ -0,0 +1,126 @@
+import { useEffect } from "react";
+import axios from "axios";
+export default function DashboardComponent({ clientID, secretID }) {
+  useEffect(() => {
+    const fetchData = async () => {
+      const bearerResponse = await fetch(
+        "https://api.sandbox.paypal.com/v1/oauth2/token",
+        {
+          method: "POST",
+          headers: {
+            Accept: "application/json",
+            "Accept-Language": "en_US",
+            "Content-Type": "application/x-www-form-urlencoded",
+            Authorization:
+              "Basic " +
+              btoa(
+                "AbA-5-a8nI5NbtAr0lrk2HNeJsc9u8W9TSy0zCWVgQKBkdkGTgRS5FRnpE2EuZge0Wvgzj0nRcgQAayY:EI_hNPlvttB2d8vIpqZC-qhuBGjZW_UOcFRJVs2-Axt8QFh1ZZ6j-jk0XYfrpOk7qgHPV7TubhgmuR3k"
+              ),
+          },
+          body: "grant_type=client_credentials",
+        }
+      );
+      const bearer = await bearerResponse.json();
+      const access_token = bearer.access_token;
+      console.log(access_token);
+      var today = new Date();
+      var date =
+        today.getFullYear() +
+        "-" +
+        (today.getMonth() + 1) +
+        "-" +
+        today.getDate();
+      var time =
+        today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
+      var dateTime = date + "T" + time + "-07:00";
+      const balanceResponse = await fetch(
+        `https://api.sandbox.paypal.com/v1/reporting/balances?currency_code=ALL&as_of_time=${dateTime}`,
+        {
+          method: "GET",
+          headers: {
+            Accept: "application/json",
+            "Accept-Language": "en_US",
+            "Content-Type": "application/json",
+            Authorization: "Bearer " + access_token,
+          },
+        }
+      );
+      const balance = await balanceResponse.json();
+      console.log(balance);
+    };
+    fetchData();
+  }, []);
+
+  let orders = [
+    {
+      id: "1",
+      name: "Order 1",
+      date: "2020-01-01",
+      amount: "100.06",
+      vendor: "Amazon",
+    },
+    {
+      id: "2",
+      name: "Order 2",
+      date: "2020-02-25",
+      amount: "235.21",
+      vendor: "Walmart",
+    },
+    {
+      id: "3",
+      name: "Order 3",
+      date: "2020-04-15",
+      amount: "10.89",
+      vendor: "Ebxay",
+    },
+  ];
+
+  return (
+    <div classNameName="relative overflow-x-auto shadow-md sm:rounded-lg">
+      <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+          <tr>
+            <th scope="col" className="px-6 py-3">
+              Order Name
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Date
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Vendor
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Price
+            </th>
+            <th scope="col" className="px-6 py-3">
+              <span className="sr-only">Edit</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {orders.map((order) => (
+            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+              <th
+                scope="row"
+                className="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap"
+              >
+                {order.name}
+              </th>
+              <td className="px-6 py-4">{order.date}</td>
+              <td className="px-6 py-4">{order.vendor}</td>
+              <td className="px-6 py-4">${order.amount}</td>
+              <td className="px-6 py-4 text-right">
+                <a
+                  href="#"
+                  className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+                >
+                  Round up for charity?
+                </a>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

client/src/pages/_app.js

@@ -1,5 +1,9 @@
 import "../app/globals.css";
-
+import { AuthProvider } from "../common/lib/firebase/authContext";
 export default function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  return (
+    <AuthProvider>
+      <Component {...pageProps} />
+    </AuthProvider>
+  );
 }

client/src/pages/auth.js

@@ -0,0 +1,8 @@
+import AuthComponent from "../common/components/Auth";
+export default function AuthPage() {
+  return (
+    <div>
+      <AuthComponent />
+    </div>
+  );
+}

client/src/pages/dashboard.js

@@ -0,0 +1,12 @@
+import DashboardComponent from "../common/components/Dashboard/Dashboard";
+export default function Dashboard() {
+  return (
+    <div>
+      <h1>This is the dashboard page.</h1>
+      <DashboardComponent
+        clientID="AbA-5-a8nI5NbtAr0lrk2HNeJsc9u8W9TSy0zCWVgQKBkdkGTgRS5FRnpE2EuZge0Wvgzj0nRcgQAayY"
+        secretID="EI_hNPlvttB2d8vIpqZC-qhuBGjZW_UOcFRJVs2-Axt8QFh1ZZ6j-jk0XYfrpOk7qgHPV7TubhgmuR3k"
+      />
+    </div>
+  );
+}

client/src/pages/index.js

@@ -1,7 +1,15 @@
+import { useAuth } from "../common/lib/firebase/authContext";
 export default function HomePage() {
+  const { currentUser } = useAuth();
   return (
     <div>
       <h1>This is HackTJ 2022!</h1>
+      {currentUser ? (
+        <p>You're logged in! Current email: {currentUser.email}</p>
+      ) : (
+        <p>Not logged in</p>
+      )}
+      <a href="/dashboard">Go to Dashboard</a>
     </div>
   );
 }

client/tailwind.config.js

@@ -1,8 +1,5 @@
 module.exports = {
-  content: [
+  content: ["./src/**/*.{html,js}"],
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
-  ],
   theme: {
     extend: {},
   },