shop creation api added

.env

@@ -15,4 +15,4 @@ NEXT_PUBLIC_API_BASE_URL=https://www.universal-tutorial.com
 NEXT_PUBLIC_PAYSTACK_TEST_API_KEY=pk_test_12a8875d58c10847ca4e7bf615c420b01e53b0ec
 PAYSTACK_SECRET_KEY=sk_test_080e692d746b701ed7cfd89c6b03ab250eff92f4
 TRANSACTION_COLLECTION=6723d0aa00145d84ce95
-VENDOR_ID=6729aebb002a31853e4b
+VENDOR_ID=672f517c0011bcfa83bc

app/(seller)/become-vendor/page.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 
 const BecomeVendorPage = () => {
     return (
-        <div className='flex h-screen max-h-screen items-center'>
+        <div className='grid grid-cols-1 md:grid-cols-1  h-screen max-h-screen items-center'>
             <section className='remove-scrollbar container hidden md:block my-auto'>
                 <div className="sub-container max-w-[496px]">
                     <Image src={"/images/sell.svg"} alt='sell image' width={1000} height={1000} className='w-full' />

app/(seller)/become-vendor/success/page.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui/button'
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+const TransactionSuccessful = () => {
+    return (
+        <div className='flex flex-col h-screen items-center justify-center space-y-4'>
+            <Image src="/icons/success.gif" alt='success gif' width={100} height={100} className="w-60" />
+            <h3 className="text-xl font-semibold">Shop created successfully!</h3>
+            <Link href="/accounts">
+                <Button variant={"ghost"} size={"lg"} className='bg-secondary-green-60 hover:bg-secondary-green-50 rounded-full text-white hover:text-white'>
+                    Check status
+                </Button>
+            </Link>
+        </div>
+    )
+}
+
+export default TransactionSuccessful

appwrite/vendor.actions.ts

@@ -1,15 +1,36 @@
 "use server"
 
 import { becomeVendorFormProps } from "@/types"
+import { cookies } from "next/headers"
+import { createSessionClient } from "./config"
+import { ID } from "node-appwrite"
 
 const { DATABASE_ID, VENDOR_ID } = process.env
 
-const createVendorAccount = async (data: becomeVendorFormProps) => {
+export const createVendorAccount = async (data: becomeVendorFormProps) => {
+    const cookieStore = await cookies()
     try {
+        const userId = cookieStore.get("userId")?.value
+        const session = cookieStore.get("session")?.value
 
+        const { databases } = await createSessionClient(session)
+
+        const result = await databases.createDocument(
+            DATABASE_ID!,
+            VENDOR_ID!,
+            ID.unique(), 
+            {
+                user: userId,
+                ...data
+            }
+        )
+
+        await cookieStore.set("vendorId", result.$id)
+        return result
     } catch (error) {
         if (error instanceof Error) {
-            console.log(error.message);
+            // console.log(error.message);
+            console.log(error)
         }
     }
 }

components/forms/BecomeVendorForm.tsx

@@ -7,9 +7,15 @@ import { z } from 'zod'
 import CustomInput from '../CustomInput'
 import { FormFieldTypes } from '@/lib/utils'
 import { SelectItem } from '../ui/select'
-import { Form } from '../ui/form'
+import { Form, FormControl, FormMessage } from '../ui/form'
 import { Button } from '../ui/button'
 import SubmitButton from '../SubmitButton'
+import { toast } from 'sonner'
+import { createVendorAccount } from '@/appwrite/vendor.actions'
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Label } from "@/components/ui/label"
+import {useRouter} from "next/navigation"
+import { decryptKey, encryptKey } from "@/lib/utils"
 
 const BecomeVendorForm = () => {
     const form = useForm<z.infer<typeof becomeVendorFormSchema>>({
@@ -20,16 +26,52 @@ const BecomeVendorForm = () => {
             email: "",
             country: "",
             accountType: "",
-            password: ''
+            password: '',
+            phone_number: ""
         }
     })
 
+    const [isLoading, setIsLoading] = useState(false)
+    const [steps, setSteps] = useState("none")
+
+    const router = useRouter()
+
 
     const onSubmit = async (values: z.infer<typeof becomeVendorFormSchema>) => {
-        console.log(values);
+        setIsLoading(true)
+        try {
+
+            const data = {
+                ...values,
+                password: encryptKey(values.password)
+            }
+            const result = await createVendorAccount(values)
+
+            if(result?.$id){
+                router.push("/become-vendor/success")
+                return;
+            }
+
+        } catch (error) {
+            if (error instanceof Error) {
+                console.log(error);
+                toast.error(error.message)
+            }
+        } finally {
+            setIsLoading(false)
+        }
     }
 
-    const [steps, setSteps] = useState("none")
+    const accountTypeOptions = [
+        {
+            title: "Individual",
+            value: "individual"
+        },
+        {
+            title: "Organization",
+            value: "organization"
+        }
+    ]
 
     return (
         <Form {...form}>
@@ -73,6 +115,34 @@ const BecomeVendorForm = () => {
                         </div>
 
                         <div className='bg-white rounded-md space-y-7'>
+                        <CustomInput
+                        control={form.control}
+                        fieldType={FormFieldTypes.SKELETON}
+                        name="accountType"
+                        label="Account Type"
+                        renderSkeleton={(field) => {
+                            return (
+                                <FormControl>
+                                    <RadioGroup className="flex h-11 gap-6"
+                                        onValueChange={field.onChange}
+                                        defaultValue={field.value}
+                                    >
+                                        {accountTypeOptions.map((type, index) => (
+                                            <div key={index} className="flex h-full flex-1 items-center gap-2 rounded-md border border-dashed border-secondary-green-50 p-3">
+                                                <RadioGroupItem value={type.value}
+                                                    id={type.value}
+                                                />
+                                                <Label htmlFor={type.value} className="cursor-pointer">
+                                                    {type.title}
+                                                </Label>
+                                            </div>
+                                        ))}
+                                    </RadioGroup>
+                                </FormControl>
+                            )
+                        }}
+                    />
+
                             <CustomInput
                                 name="email"
                                 control={form.control}
@@ -81,7 +151,7 @@ const BecomeVendorForm = () => {
                                 label="Email address"
                             />
                             <CustomInput
-                                name="email"
+                                name="phone_number"
                                 control={form.control}
                                 fieldType={FormFieldTypes.PHONE_INPUT}
                                 placeholder='Enter your phone number'
@@ -132,7 +202,7 @@ const BecomeVendorForm = () => {
                                 })}
                             </CustomInput>
 
-                            <PrevAndNextButton nextStep={setSteps} next='submit' prev='email' />
+                            <PrevAndNextButton nextStep={setSteps} isLoading={isLoading} next='submit' prev='email' />
 
                         </div>
                     </div>
@@ -146,10 +216,11 @@ const BecomeVendorForm = () => {
 
 export default BecomeVendorForm
 
-const PrevAndNextButton = ({ nextStep, next, prev }: {
+const PrevAndNextButton = ({ nextStep, next, prev, isLoading }: {
     nextStep: (steps: string) => void,
     next: string,
-    prev: string
+    prev: string,
+    isLoading?: boolean
 }) => {
     return (
         <div className='flex justify-between items-center gap-10'>
@@ -158,7 +229,7 @@ const PrevAndNextButton = ({ nextStep, next, prev }: {
                 <Button type="button" className='bg-secondary-green-60 hover:bg-secondary-green-50 w-full text-white hover:text-white font-semibold' variant={"ghost"} size={"lg"} onClick={() => nextStep(next)}>Next</Button>
             )}
             {next === "submit" && (
-                 <Button type="submit" className='bg-secondary-green-60 hover:bg-secondary-green-50 w-full text-white hover:text-white font-semibold' variant={"ghost"} size={"lg"}>Submit</Button>
+                <SubmitButton className='bg-secondary-green-60 hover:bg-secondary-green-50 w-full text-white hover:text-white font-semibold' isLoading={isLoading}>Submit</SubmitButton>
             )}
         </div>
     )

components/ui/radio-group.tsx

@@ -34,7 +34,7 @@ const RadioGroupItem = React.forwardRef<
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+        <Circle className="h-2.5 w-2.5 fill-secondary-green-50 text-current" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )

constants/validations.ts

@@ -135,6 +135,8 @@ export const becomeVendorFormSchema = z.object({
   }),
   country: z.string({
     message: "Vendor country is required!"
+  }).min(1, {
+    message: "Vendor country is required!"
   }),
   email: z.string({
     message: "Email address is required!"
@@ -143,17 +145,22 @@ export const becomeVendorFormSchema = z.object({
   }),
   accountType: z.string({
     message: "Account type is required!"
+  }).min(1, {
+    message: "Account Type is required!"
   }),
   shippingZone: z.string({
     message: "Shipping zone is required!"
+  }).min(1,{
+    message: 'Shipping zone is required!'
   }),
   password: z.string().min(6, {
     message: "Enter minimun of 6 character"
   }).max(16, {
     message: "Password must not be more than 16 character"
   }).regex(passwordRegex, {
     message: "Password must contain atleast a lowercase letter, uppercase, number and special characters"
-  })
+  }),
+  phone_number: z.string().optional(),
 })
 
 export const loginToVendorCenterSchema = becomeVendorFormSchema.pick({

middleware.ts

@@ -1,11 +1,9 @@
 "use server"
 import { cookies } from "next/headers";
 import { NextRequest, NextResponse } from "next/server";
-import { createSessionClient } from "./appwrite/config";
 import { decryptKey } from "./lib/utils";
 
 export async function middleware(request: NextRequest) {
-    // const user = await auth.getUser()
     const cookieStore = await cookies()
 
     const user = cookieStore.get("userId")?.value