Merge pull request #26 from canopas/change-menus-flow

Refactor UI to fix some design
canopas · Jun 4, 2024 · 265f285 · 265f285
2 parents e4a1e50 + bd79aa8
commit 265f285
Show file tree

Hide file tree

Showing 12 changed files with 279 additions and 101 deletions.
diff --git a/admin/pages/settings/index.tsx b/admin/pages/settings/index.tsx
@@ -56,6 +56,11 @@ const Settings = () => {
   const [name, setName] = useState<string>("");
   const [description, setDescription] = useState<string>("");
   const [address, setAddress] = useState<string>("");
+  const [localArea, setLocalArea] = useState<string>("");
+  const [city, setCity] = useState<string>("");
+  const [state, setState] = useState<string>("");
+  const [postalCode, setPostalCode] = useState<number>(0);
+  const [country, setCountry] = useState<string>("India");
   const [phone, setPhone] = useState<string>("");
   const [tags, setTags] = useState<string[]>([]);
   const [images, setImages] = useState<string[]>([]);
@@ -97,7 +102,7 @@ const Settings = () => {
       const { data, error } = await supabase
         .from("restaurants")
         .select(
-          "id, name, description, address, phone, images, tags, week_days, start_time, end_time, is_public"
+          "id, name, description, address, local_area, city, state, postal_code, country, phone, images, tags, week_days, start_time, end_time, is_public"
         )
         .eq("id", user.split("/")[2])
         .single();
@@ -108,12 +113,18 @@ const Settings = () => {
       setName(data.name);
       setDescription(data.description);
       setAddress(data.address);
+      setLocalArea(data.local_area);
+      setCity(data.city);
+      setState(data.state);
+      setPostalCode(data.postal_code);
+      setCountry(data.country);
       setPhone(data.phone);
       setTags(data.tags);
       setWeekDays(data.week_days);
       setStartTime(data.start_time);
       setEndTime(data.end_time);
       setIsPublic(data.is_public);
+
       isSetImages ? await manageAccountImages(data.images) : "";
     } catch (error) {
       console.error("Error while fetching data: ", error);
@@ -222,6 +233,11 @@ const Settings = () => {
         name: z.string().min(3),
         phone: z.number().positive().min(10),
         address: z.string().min(10),
+        local_area: z.string().min(3),
+        city: z.string().min(3),
+        state: z.string().min(3),
+        postal_code: z.number().positive().min(5),
+        country: z.string().min(3),
         tags: z
           .array(z.string().min(3))
           .min(1, { message: "Tags is required" }),
@@ -237,6 +253,11 @@ const Settings = () => {
         name: name,
         phone: parseInt(phone),
         address: address,
+        local_area: localArea,
+        city: city,
+        state: state,
+        postal_code: postalCode,
+        country: country,
         tags: tags,
         description: description,
         // week_days: weekDays,
@@ -261,6 +282,11 @@ const Settings = () => {
         name: name,
         description: description,
         address: address,
+        local_area: localArea,
+        city: city,
+        state: state,
+        postal_code: postalCode,
+        country: country,
         tags: tags.map((tag) => tag.toLowerCase()),
         phone: parseInt(phone),
         // week_days: weekDays,
@@ -603,6 +629,115 @@ const Settings = () => {
                     </div>
                   </div>
 
+                  <div className="flex flex-col gap-5.5 sm:flex-row">
+                    <div className="w-full sm:w-1/2">
+                      <label className="mb-3 block text-sm font-medium text-black dark:text-white">
+                        Local Area <span className="text-meta-1">*</span>
+                      </label>
+                      <div className="relative">
+                        <input
+                          className="w-full rounded border border-stroke px-5 py-3 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
+                          type="text"
+                          placeholder="Katargam"
+                          defaultValue="Katargam"
+                          required
+                          autoComplete="off"
+                          onChange={(e) => setLocalArea(e.target.value)}
+                          value={localArea}
+                        />
+                      </div>
+                      <div className="mt-1 text-xs text-meta-1">
+                        {
+                          errors.find((error) => error.for === "localArea")
+                            ?.message
+                        }
+                      </div>
+                    </div>
+
+                    <div className="w-full sm:w-1/2">
+                      <label className="mb-3 block text-sm font-medium text-black dark:text-white">
+                        City <span className="text-meta-1">*</span>
+                      </label>
+                      <input
+                        className="w-full rounded border border-stroke px-5 py-3 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
+                        type="text"
+                        placeholder="Surat"
+                        required
+                        autoComplete="off"
+                        onChange={(e) => setCity(e.target.value as any)}
+                        value={city}
+                      />
+                      <div className="mt-1 text-xs text-meta-1">
+                        {errors.find((error) => error.for === "city")?.message}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-5.5 sm:flex-row">
+                    <div className="w-full sm:w-1/2">
+                      <label className="mb-3 block text-sm font-medium text-black dark:text-white">
+                        State <span className="text-meta-1">*</span>
+                      </label>
+                      <div className="relative">
+                        <input
+                          className="w-full rounded border border-stroke px-5 py-3 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
+                          type="text"
+                          placeholder="Gujarat"
+                          defaultValue="Gujarat"
+                          required
+                          autoComplete="off"
+                          onChange={(e) => setState(e.target.value)}
+                          value={state}
+                        />
+                      </div>
+                      <div className="mt-1 text-xs text-meta-1">
+                        {errors.find((error) => error.for === "state")?.message}
+                      </div>
+                    </div>
+
+                    <div className="w-full sm:w-1/2">
+                      <label className="mb-3 block text-sm font-medium text-black dark:text-white">
+                        Postal Code <span className="text-meta-1">*</span>
+                      </label>
+                      <input
+                        className="w-full rounded border border-stroke px-5 py-3 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
+                        type="number"
+                        placeholder="395004"
+                        required
+                        autoComplete="off"
+                        onChange={(e) => setPostalCode(parseInt(e.target.value))}
+                        value={postalCode}
+                      />
+                      <div className="mt-1 text-xs text-meta-1">
+                        {
+                          errors.find((error) => error.for === "postalCode")
+                            ?.message
+                        }
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="w-full">
+                    <label className="mb-3 block text-sm font-medium text-black dark:text-white">
+                      Country <span className="text-meta-1">*</span>
+                    </label>
+                    <div className="relative">
+                      <input
+                        className="w-full rounded border border-stroke px-5 py-3 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
+                        type="text"
+                        placeholder="India"
+                        defaultValue="India"
+                        required
+                        autoComplete="off"
+                        onChange={(e) => setCountry(e.target.value)}
+                        value={country}
+                      />
+                    </div>
+                    <div className="mt-1 text-xs text-meta-1">
+                      {errors.find((error) => error.for === "country")?.message}
+                    </div>
+                  </div>
+
                   <div>
                     <label className="mb-3 block text-sm font-medium text-black dark:text-white">
                       Tags <span className="text-meta-1">*</span>

diff --git a/website/components/BottomSheet/index.tsx b/website/components/BottomSheet/index.tsx
@@ -50,7 +50,7 @@ const BottomSheet = ({
         <p className="font-bold text-sm">{name} dishes</p>
       </header>
       <div className="h-full w-full bg-white dark:bg-black">
-        <Reels dishesData={items} isDishesLoading={false} />
+        <Reels dishesData={items} />
       </div>
     </div>
   );

diff --git a/website/components/Reel/index.tsx b/website/components/Reel/index.tsx
@@ -13,16 +13,28 @@ import "swiper/css/effect-fade";
 
 interface ReelProps {
   dishesData: any;
-  isDishesLoading: boolean;
 }
 
-const Reels = ({ dishesData, isDishesLoading }: ReelProps) => {
+const Reels = ({ dishesData }: ReelProps) => {
   const dispatch = useAppDispatch();
   const screenHeight = useAppSelector((state) => state.app.screenHeight);
 
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const carouselRef = useRef<HTMLDivElement>(null);
   const [numDivsToRender, setNumDivsToRender] = useState(2); // Initial number of dish to render
 
+  useEffect(() => {
+    setIsLoading(true);
+
+    if (carouselRef.current) {
+      carouselRef.current.scrollTop = 0;
+
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 500);
+    }
+  }, [dishesData]);
+
   useEffect(() => {
     if (screenHeight == 0) {
       dispatch(setScreenHeightState(window.innerHeight));
@@ -71,19 +83,16 @@ const Reels = ({ dishesData, isDishesLoading }: ReelProps) => {
 
   return (
     <section className="select-none">
-      {isDishesLoading ? (
-        <div className="reelsContainer scrollbar-hidden w-full">
-          <MenuDishSkeleton classes="reel" />
-        </div>
-      ) : dishesData.length > 0 ? (
-        <div
-          ref={carouselRef}
-          className="reelsContainer scrollbar-hidden w-full"
-          style={{
-            height: screenHeight != 0 ? screenHeight + "px" : "100vh",
-          }}
-        >
-          {dishesData.slice(0, numDivsToRender).map((data: any, index: any) => (
+      {isLoading ? <MenuDishSkeleton classes="reel" /> : ""}
+      <div
+        ref={carouselRef}
+        className="reelsContainer scrollbar-hidden w-full"
+        style={{
+          height: screenHeight != 0 ? screenHeight + "px" : "100vh",
+        }}
+      >
+        {dishesData.length > 0 ? (
+          dishesData.slice(0, numDivsToRender).map((data: any, index: any) => (
             <div
               key={"menu-dish-key-" + index}
               id={`menu-dish-${index}`}
@@ -94,43 +103,49 @@ const Reels = ({ dishesData, isDishesLoading }: ReelProps) => {
                 height: screenHeight != 0 ? screenHeight + "px" : "100vh",
               }}
             >
-              {data.video ? (
-                <VideoPlayer
-                  src={data.video}
-                  poster={data.video_thumbnail}
-                  classes={"h-full w-full object-cover"}
-                />
+              {!isLoading ? (
+                <div className="animated-fade">
+                  {data.video ? (
+                    <VideoPlayer
+                      src={data.video}
+                      poster={data.video_thumbnail}
+                      classes={"h-full w-full object-cover"}
+                    />
+                  ) : (
+                    <SwiperComponent images={data.images}></SwiperComponent>
+                  )}
+                  <div className="absolute bottom-0 z-[1] flex h-full w-full flex-col gap-2 bg-gradient-to-t from-black/80 via-transparent to-black/60 p-5 pb-5 text-white">
+                    <div className="flex h-full items-end justify-between gap-5 text-xl font-bold">
+                      <p className="min-w-2/5">{data.name}</p>
+                      <p className="text-lg text-white/70">₹{data.price}</p>
+                    </div>
+                    <p
+                      className={`text-sm pt-2 ${
+                        data.description && data.description != ""
+                          ? "border-t border-gray-300 border-opacity-30"
+                          : ""
+                      }`}
+                    >
+                      {data.description}
+                    </p>
+                  </div>
+                </div>
               ) : (
-                <SwiperComponent images={data.images}></SwiperComponent>
+                ""
               )}
-              <div className="absolute bottom-0 z-[1] flex h-full w-full flex-col gap-2 bg-gradient-to-t from-black/80 via-transparent to-black/60 p-5 pb-5 text-white">
-                <div className="flex h-full items-end justify-between gap-5 text-xl font-bold">
-                  <p className="min-w-2/5">{data.name}</p>
-                  <p className="text-lg text-white/70">₹{data.price}</p>
-                </div>
-                <p
-                  className={`text-sm pt-2 ${
-                    data.description && data.description != ""
-                      ? "border-t border-gray-300 border-opacity-30"
-                      : ""
-                  }`}
-                >
-                  {data.description}
-                </p>
-              </div>
             </div>
-          ))}
-        </div>
-      ) : (
-        <div
-          className="flex items-center justify-center"
-          style={{
-            height: screenHeight != 0 ? screenHeight + "px" : "100vh",
-          }}
-        >
-          <NoDataFound text="😕 Oops, No dishes available at the moment!" />
-        </div>
-      )}
+          ))
+        ) : (
+          <div
+            className="flex items-center justify-center"
+            style={{
+              height: screenHeight != 0 ? screenHeight + "px" : "100vh",
+            }}
+          >
+            <NoDataFound text="😕 Oops, No dishes available at the moment!" />
+          </div>
+        )}
+      </div>
     </section>
   );
 };

diff --git a/website/components/SkeletonPlaceholders/CategorySwiper.tsx b/website/components/SkeletonPlaceholders/CategorySwiper.tsx
@@ -4,16 +4,16 @@ const CategorySwiperSkeleton = ({ classes }: any) => {
       className={`${classes} h-60 animate-pulse grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4`}
     >
       <div className="h-full w-full flex justify-center">
-        <div className="h-full w-[15rem] bg-gray-200 dark:bg-gray-700 rounded-2xl"></div>
+        <div className="h-full w-[15rem] bg-gray-200 dark:bg-white/20 rounded-2xl"></div>
       </div>
       <div className="h-full w-full sm:flex justify-center hidden">
-        <div className="h-full w-[15rem] bg-gray-200 dark:bg-gray-700 rounded-2xl"></div>
+        <div className="h-full w-[15rem] bg-gray-200 dark:bg-white/20 rounded-2xl"></div>
       </div>
       <div className="h-full w-full md:flex justify-center hidden">
-        <div className="h-full w-[15rem] bg-gray-200 dark:bg-gray-700 rounded-2xl"></div>
+        <div className="h-full w-[15rem] bg-gray-200 dark:bg-white/20 rounded-2xl"></div>
       </div>
       <div className="h-full w-full lg:flex justify-center hidden">
-        <div className="h-full w-[15rem] bg-gray-200 dark:bg-gray-700 rounded-2xl"></div>
+        <div className="h-full w-[15rem] bg-gray-200 dark:bg-white/20 rounded-2xl"></div>
       </div>
     </div>
   );

diff --git a/website/components/SkeletonPlaceholders/MenuDish.tsx b/website/components/SkeletonPlaceholders/MenuDish.tsx
@@ -1,13 +1,13 @@
 const MenuDishSkeleton = ({ classes }: any) => {
   return (
     <div
-      className={`${classes} relative animate-pulse w-full bg-gray-200 dark:bg-gray-900 rounded-xl`}
+      className={`${classes} relative animate-pulse w-full bg-gray-200 dark:bg-black rounded-xl`}
     >
       <div className="absolute flex h-full w-full flex-col gap-3 p-5 pb-10">
         <div className="flex flex-col justify-end h-full gap-5">
-          <p className="w-2/5 h-5 bg-gray-300 dark:bg-gray-700 rounded-xl"></p>
-          <p className="h-5 bg-gray-300 dark:bg-gray-700 rounded-xl"></p>
-          <p className="h-5 bg-gray-300 dark:bg-gray-700 rounded-xl"></p>
+          <p className="w-2/5 h-5 bg-gray-300 dark:bg-white/20 rounded-xl"></p>
+          <p className="h-5 bg-gray-300 dark:bg-white/20 rounded-xl"></p>
+          <p className="h-5 bg-gray-300 dark:bg-white/20 rounded-xl"></p>
         </div>
       </div>
     </div>