From fb5bf7c69a8aa01be171a3f57620bdd27f924cb1 Mon Sep 17 00:00:00 2001
From: Akash Shaw <shawakash2003@gmail.com>
Date: Sat, 9 Mar 2024 18:54:05 +0530
Subject: [PATCH] chore(web): writing the onSubmit function

---
 apps/web/app/signup/components/otp.tsx | 37 ++++++++++++---------
 apps/web/app/signup/page.tsx           | 10 +++---
 apps/web/app/users/newuser/page.tsx    | 45 --------------------------
 3 files changed, 28 insertions(+), 64 deletions(-)
 delete mode 100644 apps/web/app/users/newuser/page.tsx

diff --git a/apps/web/app/signup/components/otp.tsx b/apps/web/app/signup/components/otp.tsx
index 8cb8b972..6d81e7ae 100644
--- a/apps/web/app/signup/components/otp.tsx
+++ b/apps/web/app/signup/components/otp.tsx
@@ -22,28 +22,36 @@ import {
 } from "@/components/ui/input-otp"
 import { toast } from "@/components/ui/use-toast"
 import React from "react"
+import { AccountType, BACKEND_URL, OtpValid, responseStatus } from "@paybox/common"
+import { useSession } from "next-auth/react"
 
-const FormSchema = z.object({
-    pin: z.string().min(6, {
-        message: "Your one-time password must be 6 characters.",
-    }),
-})
 
 export function OTPForm() {
-    const form = useForm<z.infer<typeof FormSchema>>({
-        resolver: zodResolver(FormSchema),
+
+    const session = useSession();
+    console.log(session, "session")
+    const form = useForm<z.infer<typeof OtpValid>>({
+        resolver: zodResolver(OtpValid),
         defaultValues: {
-            pin: "",
+            otp: "",
         },
     })
 
-    function onSubmit(data: z.infer<typeof FormSchema>) {
+    const onSubmit = async (data: z.infer<typeof OtpValid>) => {
+        const { status, msg, valid, walletId, account }: { status: responseStatus, msg: string, valid?: boolean, walletId?: string, account?: AccountType } =
+            await fetch(`${BACKEND_URL}/client/valid?otp=${data.otp}`, {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                    //@ts-ignore
+                    "Authorization": `Bearer ${session.data?.user?.jwt}`
+                },
+            }).then((res) => res.json());
+        console.log(status, "valid")
         toast({
-            title: "You submitted the following values:",
+            title: "Otp Validation Status",
             description: (
-                <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-                    <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-                </pre>
+                <h1>{msg}</h1>
             ),
         })
     }
@@ -53,7 +61,7 @@ export function OTPForm() {
             <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
                 <FormField
                     control={form.control}
-                    name="pin"
+                    name="otp"
                     render={({ field }) => (
                         <FormItem>
                             <FormControl>
@@ -79,7 +87,6 @@ export function OTPForm() {
                         </FormItem>
                     )}
                 />
-
                 <Button type="submit">Submit</Button>
             </form>
         </Form>
diff --git a/apps/web/app/signup/page.tsx b/apps/web/app/signup/page.tsx
index 993f3833..5ef47f22 100644
--- a/apps/web/app/signup/page.tsx
+++ b/apps/web/app/signup/page.tsx
@@ -10,6 +10,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { OTPForm } from "./components/otp";
+import { ResendOtp } from "./components/resendOtp";
 
 export const metadata: Metadata = {
   title: "Signup | PayBox",
@@ -35,7 +36,7 @@ export default function AuthenticationPage() {
           className="hidden dark:block"
         />
       </div>
-      <div className="container relative hidden h-[800px] flex-col items-center justify-around md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+      <div className="container relative hidden h-[780px] flex-col items-center justify-around md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
         {/* <Link
           href="/signin"
           className={cn(
@@ -68,7 +69,7 @@ export default function AuthenticationPage() {
                 &ldquo;Introducing PayBox, the ultimate app for tracking and
                 indexing blockchain transactions in real-time.&rdquo;
               </p>
-              <footer className="text-sm">Akash Shaw</footer>
+              <footer className="text-sm font-bold">Shaws</footer>
             </blockquote>
           </div>
         </div>
@@ -130,8 +131,9 @@ export default function AuthenticationPage() {
                 <CardContent className="space-y-2 ">
                   <OTPForm />
                 </CardContent>
-                <CardFooter className="flex flex-col space-y-4">
-                  
+                <CardFooter className="flex flex-row ">
+                  <CardDescription>Haven't Received the OTP?</CardDescription>
+                  <ResendOtp />
                 </CardFooter>
               </Card>
             </TabsContent>
diff --git a/apps/web/app/users/newuser/page.tsx b/apps/web/app/users/newuser/page.tsx
deleted file mode 100644
index 82ea881a..00000000
--- a/apps/web/app/users/newuser/page.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-//server component
-import AddToCart from "@/app/components/Client/AddToCart";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/app/components/Client/Card";
-import Users from "@/app/components/Client/Users";
-import { User } from "@/app/types/interface";
-import React from "react";
-
-export type CardProps = React.ComponentProps<typeof Card>;
-
-const NewUser = async () => {
-  /**
-   * Caching:
-   * by default nextjs renders statically and cached it unless
-   * cache is no-store.
-   * Axios doesn't provides caching so use fetch
-   */
-  const res = await fetch("https://jsonplaceholder.typicode.com/users", {
-    headers: {
-      "Content-Type": "applications/json",
-    },
-    cache: "no-store", // to cache the response from api,
-    // next: { revalidate: 10 }   // fetches the api again in 10 seconds of time in background
-  });
-  const users: User[] = await res.json();
-  return (
-    <>
-      <AddToCart />
-      <h1>Users</h1>
-      <div className="flex justify-center flex-col items-center p-16">
-        <div className="flex flex-wrap gap-14 justify-center items-start">
-          <Users users={users} />
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default NewUser;