Merge pull request #48 from Praashh/types-and-zod-schema

cashfree integration

apps/client/app/(lobby)/auth/signin/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 import React from 'react';
-import { Login } from '../../../../components/landing/Singin';
+import { Login } from '../../../../components/landing/Auth/Singin';
 
 const Page = () => {
   return (

apps/client/app/(lobby)/wallet/deposit/page.tsx

@@ -1,12 +1,16 @@
 "use client";
-
 import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { cashfree } from "@/lib/cashfree";
+import {toast} from "react-hot-toast"
 
 const Page = () => {
   const [amount, setAmount] = useState<string>("");
   const [gst, setGst] = useState<number>(0);
   const [showSummary, setShowSummary] = useState<boolean>(false);
-
+  const paymentUrl = process.env.NEXT_PUBLIC_BASE_URL as string + 
+                     process.env.NEXT_PUBLIC_PAYMENT_INITIATE_URL_ENDPOINT as string;
+
   useEffect(() => {
     const numAmount = parseFloat(amount);
     if (!isNaN(numAmount) && numAmount > 0) {
@@ -17,13 +21,27 @@ const Page = () => {
     setShowSummary(!isNaN(numAmount) && numAmount >= 5);
   }, [amount]);
 
-  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setAmount(e.target.value);
-  };
+  async function handleRechargeClick() {
+    const res = await axios.post(paymentUrl, {
+      order_id: "order_id_random" + Date.now(),
+      customer_id: "customer_id_random" + Date.now(),
+      customer_phone: "9876543210",
+      order_amount: amount,
+    });
 
-  const handleQuickAmount = (value: number) => {
-    setAmount(value.toString());
-  };
+    const checkoutOptions = {
+      paymentSessionId: res.data.payment_session_id,
+      returnUrl: process.env.BASE_URL,
+    };
+    cashfree.checkout(checkoutOptions).then(function (result: {
+      error: string;
+      redirect: string;
+    }) {
+      if (result.error) {
+        toast.error("Error in depositing money! please try again")
+      }
+    });
+  }
 
   return (
     <>
@@ -37,7 +55,7 @@ const Page = () => {
               <input
                 type="number"
                 value={amount}
-                onChange={handleAmountChange}
+                onChange={(e) => setAmount(e.target.value)}
                 className="border border-blue-400 w-full rounded-md h-10 px-3"
               />
             </div>
@@ -48,19 +66,19 @@ const Page = () => {
             )}
             <div className="flex gap-3 mt-5">
               <button
-                onClick={() => handleQuickAmount(250)}
+                onClick={() => setAmount("250")}
                 className="border rounded font-bold text-xs px-3 py-1"
               >
                 +250
               </button>
               <button
-                onClick={() => handleQuickAmount(500)}
+                onClick={() =>setAmount("500")}
                 className="border rounded font-bold text-xs px-3 py-1"
               >
                 +500
               </button>
               <button
-                onClick={() => handleQuickAmount(1000)}
+                onClick={() => setAmount("1000")}
                 className="border rounded font-bold text-xs px-3 py-1"
               >
                 +1000
@@ -70,6 +88,7 @@ const Page = () => {
               <button
                 className={`${showSummary ? "bg-black" : "bg-gray-400"} text-white w-full rounded-md py-2 font-bold`}
                 disabled={!showSummary}
+                onClick={handleRechargeClick}
               >
                 Recharge
               </button>

apps/client/app/(lobby)/wallet/withdraw/page.tsx

@@ -1,19 +1,9 @@
 "use client";
-
-import { useState, ChangeEvent } from "react";
+import { useState } from "react";
 
 const Page = () => {
   const [amount, setAmount] = useState<number>(0);
   const [account, setAccount] = useState<string>("");
-
-  const handleAmountChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setAmount(Number(e.target.value));
-  };
-
-  const handleAccountChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setAccount(e.target.value);
-  };
-
   return (
     <>
       <div className="w-full sm:w-3/4 md:w-2/3 lg:w-1/2 mx-auto mt-10 px-4 sm:px-0">
@@ -31,7 +21,7 @@ const Page = () => {
                 type="number"
                 id="amount"
                 value={amount}
-                onChange={handleAmountChange}
+                onChange={(e) => setAmount(Number(e.target.value))}
                 className="border border-blue-400 w-full rounded-md h-10 px-3"
               />
               <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
@@ -54,7 +44,7 @@ const Page = () => {
               type="text"
               id="account"
               value={account}
-              onChange={handleAccountChange}
+              onChange={(e) => setAccount(e.target.value)}
               className="border w-full rounded-md h-10 px-3"
             />
           </div>

apps/client/app/api/payment/initiate/route.ts

@@ -4,7 +4,7 @@ export async function POST(req: NextRequest) {
   try {
     const body = await req.json();
 
-    const response = await fetch("https://sandbox.cashfree.com/pg/orders", {
+    const response = await fetch(process.env.CASHFREE_URL!, {
       method: "POST",
       headers: {
         accept: "application/json",
@@ -22,7 +22,7 @@ export async function POST(req: NextRequest) {
         order_amount: body.order_amount,
         order_currency: "INR",
         order_meta: {
-          notify_url: "https://webhook.site/41583a44-713e-4ba7-a4f1-4a954d84cf08", // TODO: add a webhook
+          notify_url: process.env.CASHFREE_WEBHOOK_URL, // TODO: add a webhook
           payment_methods: "cc,dc,upi",
         },
       }),

apps/client/app/api/payment/status/[order_id]/route.ts

@@ -5,19 +5,16 @@ export async function GET(
   { params }: { params: { order_id: string } }
 ) {
   const { order_id } = params;
-  const response = await fetch(
-    `https://sandbox.cashfree.com/pg/orders/${order_id}`,
-    {
-      method: "GET",
-      headers: {
-        accept: "application/json",
-        "content-type": "application/json",
-        "x-api-version": "2023-08-01",
-        "x-client-id": process.env.CASHFREE_CLIENT_ID as string,
-        "x-client-secret": process.env.CASHFREE_CLIENT_SECRET as string,
-      },
-    }
-  );
+  const response = await fetch(process.env.CASHFREE_URL + order_id, {
+    method: "GET",
+    headers: {
+      accept: "application/json",
+      "content-type": "application/json",
+      "x-api-version": "2023-08-01",
+      "x-client-id": process.env.CASHFREE_CLIENT_ID as string,
+      "x-client-secret": process.env.CASHFREE_CLIENT_SECRET as string,
+    },
+  });
   const data = await response.json();
   if (data.order_status === "PAID") {
     return NextResponse.redirect(new URL("/", req.url));

apps/client/app/components/Home.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import {Hero} from '../../components/landing/Hero'
-import TakesCareWrapper from "../../components/landing/TakesCare"
-import FAQS from "../../components/landing/FAQs"
+import {Hero} from '../../components/landing/Home/Hero'
+import TakesCareWrapper from "../../components/landing/Home/TakesCare"
+import FAQS from "../../components/landing/Home/FAQs"
 
 export const HomeComponent = () => {
   return (

apps/client/app/globals.css

@@ -125,7 +125,9 @@ body {
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+body{
+  overflow-x: hidden
+}
 html {
   @apply bg-gray-100;
 }

apps/client/app/layout.tsx

@@ -2,7 +2,8 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 import { SessionProviders } from "./_provider";
-import Navbar from "@/components/Navbar";
+import Navbar from "@/components/landing/Appbar/Navbar";
+import { Toaster } from "react-hot-toast";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -25,14 +26,14 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-
   return (
     <html lang="en">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <Navbar/>
+        <Navbar />
         <SessionProviders>{children}</SessionProviders>
+        <Toaster position="top-center" reverseOrder={false} />
       </body>
     </html>
   );

apps/client/app/page.tsx

@@ -1,41 +1,33 @@
-import { Navbar } from "@/components/Navbar";
+import { Navbar } from "@/components/landing/Appbar/Navbar";
 import { HeroComp } from "@/components/HeroComp";
 import ToggleSections from "@/components/ToogleSections";
 import { TradeComp } from "@/components/TradeComp";
 import { DownloadBanner } from "@/components/DownloadBanner";
 import TradingNewsComponent from "@/components/TradingNewsComponent";
-import FeatureComponent from "@/components/Features";
-import ProboCare from "@/components/ProboCare";
+import FeatureComponent from "@/components/landing/Home/Features";
+import ProboCare from "@/components/landing/Home/ProboCare";
 
 export default function Page() {
   return (
     <div className="w-screen">
-
-
       <main className="container mx-auto">
         <HeroComp />
       </main>
-
       <div >
         <ToggleSections />
       </div>
-
       <div>
         <TradeComp />
       </div>
-
       <div>
         <FeatureComponent />
       </div>
-
       <div>
         <ProboCare />
       </div>
-
       <div>
         <TradingNewsComponent />
       </div>
-
       <div>
         <DownloadBanner />
       </div>

apps/client/components/ToogleSections.tsx

@@ -26,7 +26,7 @@ const ToggleSections = () => {
   };
 
   return (
-    <div className="flex flex-col lg:flex-row items-center justify-between p-4 py-20 bg-black text-white">
+    <div className="flex flex-col lg:flex-row items-center justify-between p-28 py-20 bg-black text-white">
       <div className="w-full lg:w-1/2 mb-8 lg:mb-0">
         {/* Toggle buttons */}
         <div className="flex space-x-4 mb-6">

apps/client/components/Navbar.tsx → apps/client/components/landing/Appbar/Navbar.tsx

@@ -1,44 +1,45 @@
 "use client";
-
 import { useState } from "react";
 import { Menu, X } from "lucide-react";
+import Link from "next/link";
 import { WhiteBtn } from "@/components/WhiteBtn";
 import { BlackBtn } from "@/components/BlackBtn";
 
 export const Navbar = () => {
-  const [isMenuOpen, setIsMenuOpen] = useState(false); 
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
 
   const navItems = [
     { name: "Events", path: "/events" },
     { name: "Portfolio", path: "/portfolio" },
-    { name: "Recharge", path: "/recharge" },
+    { name: "Recharge", path: "/wallet/deposit" },
   ];
 
-  const NavButton = ({ children, onClick }: any) => (
-    <button
-      onClick={onClick}
-      className=" font-medium p-2 rounded transition duration-300"
-    >
-      {children}
-    </button>
+  const NavButton = ({ children, path }:any) => (
+    <Link href={path}>
+      <button className="font-medium p-2 rounded transition duration-300">
+        {children}
+      </button>
+    </Link>
   );
 
   return (
     <nav className="py-3 px-2 border">
       <div className="container mx-auto flex items-center justify-between">
         {/* Logo */}
         <div className="flex items-center">
+          <Link href={"/"}>
           <button onClick={() => {}}>
             <div className="text-2xl font-semibold mr-5">OpiniX</div>
           </button>
+          </Link>
         </div>
 
         {/* Desktop Navigation */}
         <div className="hidden md:flex items-center space-x-4">
           {navItems.map((item) => (
-            <NavButton key={item.name} onClick={() => {}}>
+            <NavButton key={item.name} path={item.path}>
               {item.name}
             </NavButton>
           ))}
@@ -70,9 +71,8 @@ export const Navbar = () => {
             {navItems.map((item) => (
               <NavButton
                 key={item.name}
-                onClick={() => {
-                  toggleMenu();
-                }}
+                path={item.path}
+                onClick={toggleMenu}
               >
                 {item.name}
               </NavButton>

apps/client/components/landing/ProfileHeader.tsx → apps/client/components/landing/Appbar/ProfileHeader.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { Button } from "../ui/button";
+import { Button } from "../../ui/button";
 import Link from "next/link";
 import { useSession } from "next-auth/react";
 

apps/client/components/ui/OtpVerificationForm.tsx

@@ -17,7 +17,7 @@ import {
 } from "@/components/ui/input-otp";
 import { verifySMSOTPAction } from "@/actions/OTP/validateOtp";
 import { signIn } from "next-auth/react";
-import { Toaster, toast } from "react-hot-toast";
+import { toast } from "react-hot-toast";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { Loader2 } from "lucide-react";
@@ -93,7 +93,6 @@ export function InputOTPForm({ phoneNumber }: InputOTPFormProps) {
           {!isLoading ? "Submit" : <Loader2 className="animate-spin" />}
         </Button>
       </form>
-      <Toaster position="top-center" reverseOrder={false} />
     </Form>
   );
 }

apps/client/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@cashfreepayments/cashfree-js": "^1.0.5",
     "@hookform/resolvers": "^3.9.0",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@prisma/client": "^5.20.0",