v1 shipping for testing

git-create-devben · Aug 2, 2024 · cff0934 · cff0934
1 parent 715044d
commit cff0934
Showing 1 changed file with 109 additions and 113 deletions.
diff --git a/components/bookingForm.tsx b/components/bookingForm.tsx
@@ -1,139 +1,135 @@
 "use client";
-import { Fieldset, TextInput, Textarea, Drawer } from "@mantine/core";
-import { Button } from "./ui/button";
-import { zodResolver } from "mantine-form-zod-resolver";
-import { z } from "zod";
-import { useForm } from "@mantine/form";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
 import { db } from "@/lib/firebase";
 import { collection, addDoc } from "firebase/firestore";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
 
 export function BookingForm() {
   const router = useRouter();
-  const [opened, setOpened] = useState(false);
-  const schema = z.object({
-    name: z.string().min(2, { message: "Name is required" }),
-    email: z.string().email({ message: "Invalid email" }),
-    message: z.string().min(2, { message: "Message is required" }),
+  const [isOpen, setIsOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    message: "",
   });
-
-  const form = useForm({
-    initialValues: {
-      name: "",
-      email: "",
-      message: "",
-    },
-    validate: zodResolver(schema),
+  const [errors, setErrors] = useState({
+    name: "",
+    email: "",
+    message: "",
   });
 
-  const handleSubmit = async (values: {
-    name: string;
-    email: string;
-    message: string;
-  }) => {
-    try {
-      if (form.validate()) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+    setErrors(prev => ({ ...prev, [name]: "" }));
+  };
+
+  const validate = () => {
+    let isValid = true;
+    const newErrors = { name: "", email: "", message: "" };
+
+    if (formData.name.length < 2) {
+      newErrors.name = "Name is required";
+      isValid = false;
+    }
+    if (!/^\S+@\S+$/.test(formData.email)) {
+      newErrors.email = "Invalid email";
+      isValid = false;
+    }
+    if (formData.message.length < 2) {
+      newErrors.message = "Message is required";
+      isValid = false;
+    }
+
+    setErrors(newErrors);
+    return isValid;
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (validate()) {
+      try {
         const docRef = await addDoc(collection(db, "bookings"), {
-          name: values.name,
-          email: values.email,
-          message: values.message,
+          ...formData,
           createdAt: new Date(),
         });
-        alert("Submitted successfully ");
+        alert("Submitted successfully");
         console.log("Document written with ID: ", docRef.id);
         router.push("/chat");
-      } else {
-        alert("Wrong credential");
+        setIsOpen(false);
+        setFormData({ name: "", email: "", message: "" });
+      } catch (e) {
+        console.error("Error adding document: ", e);
+        alert("An error occurred while submitting the form");
       }
-
-      form.reset();
-    } catch (e) {
-      console.error("Error adding document: ", e);
     }
   };
 
   return (
     <>
-      <Button
-        onClick={() => setOpened(true)}
+      <button
+        onClick={() => setIsOpen(true)}
         className="bg-blue-400 rounded-full p-6 hover:bg-blue-300 text-black border-none outline-none mt-8 w-full"
       >
         Book by Loca
-      </Button>
-      <Drawer
-        opened={opened}
-        onClose={() => setOpened(false)}
-        title="Booking Form"
-        padding="xl"
-        // size="25%"
-        styles={{
-          content: {
-            backgroundColor: '#000'
-          },
-          header: {
-            backgroundColor: '#000'
-          }
-        }}
-
-        transitionProps={{
-          transition: "rotate-left",
-          duration: 150,
-          timingFunction: "linear",
-        }}
-        className=" text-white"
-        overlayProps={{ backgroundOpacity: 0.5, blur: 4 }}
-      >
-        <div className="">
-          <form onSubmit={form.onSubmit(handleSubmit)}>
-            <Fieldset
-              legend="Please fill in the form"
-              styles={{
-                root: { backgroundColor: "black", borderColor: "white" },
-                legend: { color: "white" },
-              }}
-            >
-              <TextInput
-                withAsterisk
-                label="Your name"
-                placeholder="Your name"
-                {...form.getInputProps("name")}
-                styles={{ label: { color: "white" }, input: { color: "white", backgroundColor: "#333" } }}
-              />
-              <TextInput
-                withAsterisk
-                label="Email"
-                placeholder="Email"
-                mt="md"
-                {...form.getInputProps("email")}
-                styles={{ label: { color: "white" }, input: { color: "white", backgroundColor: "#333" } }}
-              />
-              <Textarea
-                withAsterisk
-                label="Description"
-                description="Describe the type of services you want"
-                placeholder="Describe your services here"
-                autosize
-                minRows={2}
-                maxRows={4}
-                {...form.getInputProps("message")}
-                styles={{
-                  label: { color: "white" },
-                  description: { color: "white" },
-                  input: { color: "white", backgroundColor: "#333" }
-                }}
-              />
-            </Fieldset>
-            <Button
-              type="submit"
-              className="bg-blue-400 rounded-full p-8 hover:bg-blue-300 text-black border-none outline-none mt-8 w-full"
-            >
-              Submit
-            </Button>
-          </form>
-
+      </button>
+      {isOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
+          <div className="bg-gray-800 rounded-lg p-6 w-full max-w-md">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-white text-xl font-bold">Booking Form</h2>
+              <button onClick={() => setIsOpen(false)} className="text-white">&times;</button>
+            </div>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div>
+                <label htmlFor="name" className="block text-white text-sm font-bold mb-2">Your name</label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 text-white bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400"
+                  placeholder="Your name"
+                />
+                {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name}</p>}
+              </div>
+              <div>
+                <label htmlFor="email" className="block text-white text-sm font-bold mb-2">Email</label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 text-white bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400"
+                  placeholder="Email"
+                />
+                {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
+              </div>
+              <div>
+                <label htmlFor="message" className="block text-white text-sm font-bold mb-2">Description</label>
+                <textarea
+                  id="message"
+                  name="message"
+                  value={formData.message}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 text-white bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400"
+                  placeholder="Describe your services here"
+                  rows={4}
+                />
+                {errors.message && <p className="text-red-500 text-xs mt-1">{errors.message}</p>}
+              </div>
+              <button
+                type="submit"
+                className="w-full bg-blue-400 text-black font-bold py-2 px-4 rounded-full hover:bg-blue-300 focus:outline-none focus:shadow-outline"
+              >
+                Submit
+              </button>
+            </form>
+          </div>
         </div>
-      </Drawer >
+      )}
     </>
   );
-}
+}