Hotfix/jack/paypal credentials

backend/src/services/paypal.ts

@@ -1,9 +1,8 @@
 const PAYPAL_CLIENT_ID = process.env.PAYPAL_CLIENT_ID;
 const PAYPAL_CLIENT_SECRET = process.env.PAYPAL_CLIENT_SECRET;
+const ORIGIN_URL = process.env.FRONTEND_ORIGIN;
 
-console.log("CLIENT ID: ", PAYPAL_CLIENT_ID, " SECRET: ", PAYPAL_CLIENT_SECRET);
-
-const base = "https://api-m.sandbox.paypal.com";
+const base = "https://api-m.paypal.com";
 
 /**
  * Types the CartItem and Cart objects which gets used in a createOrder request
@@ -26,17 +25,21 @@ const generateAccessToken = async () => {
       throw new Error("MISSING_PAYPAL_API_CREDENTIALS");
     }
     const auth = Buffer.from(PAYPAL_CLIENT_ID + ":" + PAYPAL_CLIENT_SECRET).toString("base64");
-    console.log("auth: ", auth);
+
+    const headersList = {
+      Accept: "*/*",
+      "User-Agent": `4 Future Leaders Of Tomorrow Web App (${ORIGIN_URL})`,
+      "Content-Type": "application/x-www-form-urlencoded",
+      Authorization: `Basic ${auth}`,
+    };
+
     const response = await fetch(`${base}/v1/oauth2/token`, {
       method: "POST",
       body: "grant_type=client_credentials",
-      headers: {
-        Authorization: `Basic ${auth}`,
-      },
+      headers: headersList,
     });
 
     const data = await response.json();
-    console.log("ACCESS TOKEN RESPONSE: ", data);
     return data.access_token;
   } catch (error) {
     console.error("Failed to generate PayPal Access Token: ", error);
@@ -60,7 +63,6 @@ export async function createOrder(cart: Cart) {
   const accessToken = await generateAccessToken();
   console.log("creating order with ", accessToken);
   const url = `${base}/v2/checkout/orders`;
-  console.log("shopping cart info", cart);
 
   const payload = {
     intent: "CAPTURE",

frontend/src/app/(web app)/donations/page.tsx

@@ -1,23 +1,18 @@
-"use client";
-
-import Image from "next/image";
-
-import DonateApp from "@/components/payment/DonateApp";
+import DonateApp from "../../../components/payment/DonateApp";
 
 export default function App() {
   return (
-    <>
-      <div className="relative">
-        <Image
-          src="https://i.imgur.com/YTP7cfp.png"
-          alt="Background"
-          width={1920}
-          height={1080}
-          priority
-        />
-        <div className="absolute top-0 left-0 w-full h-full bg-black opacity-40"></div>
-      </div>
-      <DonateApp className="absolute left-1/3 top-48 transform -translate-x-1/2" />
-    </>
+    <div
+      className="w-full h-[100vh] flex justify-center items-center"
+      style={{
+        backgroundImage:
+          "url(https://firebasestorage.googleapis.com/v0/b/flot-dev.appspot.com/o/static-uploads%2Fimage.png?alt=media&token=44407612-8c8e-492a-988a-2c211d2926bb)",
+        backgroundPosition: "center",
+        backgroundSize: "cover",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
+      <DonateApp />
+    </div>
   );
 }

frontend/src/components/payment/DonateApp.tsx

@@ -11,7 +11,7 @@ import PhysicalDonationForm from "./PhysicalDonationForm";
 import SuccessCard from "./SuccessCard";
 
 type DonateAppProps = {
-  className: string;
+  className?: string;
 };
 
 export default function DonateApp({ className }: DonateAppProps) {

frontend/src/components/payment/DonateCardText.tsx

@@ -3,9 +3,8 @@ export default function DonateCardText() {
     <>
       <h1 className="text-2xl md:text-3xl font-bold card-title pb-2">Donate</h1>
       <p className="text-left font-sans">
-        Your donations will help feed and clothes our underprivileged and underserved communities.
-        Lorem ipsum dolor sit amet consectetur. Et vestibulum enim nunc ultrices. Donec blandit
-        sollicitudin vitae integer mauris sed.
+        Your support and contributions will enable us to meet our goals and improve conditions. Your
+        generous donation will fund our mission.
       </p>
     </>
   );