@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/addOns/functional/aboutSections/AboutSection.tsx

@@ -3,11 +3,14 @@
 import { motion } from "framer-motion";
 import Image from "next/image";
 import { useState, useEffect, useRef } from "react";
-import { EditIconButton, CloseButton, UpdateButton, CancelButton, ToggleButton } from "@/components/other/button";
+import { EditIconButton, CloseButton, UpdateButton, CancelButton, ToggleButton, TrashIconButton } from "@/components/other/button";
 import Spinner from "@/components/addOns/non-functional/spinner";
 import { X } from "lucide-react";
-import { useAuth, useUser } from "@clerk/nextjs";
+import { useAuth } from "@clerk/nextjs";
 import { ABOUT_SECTION } from "./constants/aboutSection";
+import { compressImage } from "@/lib/utils/compressImage";
+import { StrapiUser } from "@/lib/types";
+import { isAdminUser } from "@/lib/auth/auth-utils";
 
 interface AboutContent {
   id: number;
@@ -19,21 +22,13 @@ interface AboutContent {
   createdAt: string;
 }
 
-interface StrapiUser {
-  id: number;
-  username: string;
-  email: string;
-  businessAdminId?: string;
-}
-
 interface AboutSectionProps {
   user: StrapiUser | null;
-  authLoading: boolean;
+  isSignedIn: boolean | undefined;
 }
 
-export function AboutSection({ user, authLoading }: AboutSectionProps) {
+export function AboutSection({ user, isSignedIn }: AboutSectionProps) {
   const { getToken } = useAuth();
-  const { isSignedIn } = useUser();
   const [isMobile, setIsMobile] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [formTitle, setFormTitle] = useState<string>("");
@@ -46,6 +41,7 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
   const [imageUrl, setImageUrl] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [isAdmin, setIsAdmin] = useState(false);
   const hasFetched = useRef(false);
 
   useEffect(() => {
@@ -71,7 +67,9 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
             setFormTitle(aboutData.title || "");
             setFormDescription(aboutData.description || "");
           } else {
-            throw new Error(ABOUT_SECTION.ERRORS.NO_DATA_FOUND);
+            setTitle(ABOUT_SECTION.UI.FALLBACK_TITLE);
+            setDescription(ABOUT_SECTION.UI.FALLBACK_DESCRIPTION);
+            setImageUrl(null);
           }
         } else {
           const errorData = await response.json();
@@ -80,6 +78,9 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
       } catch (err) {
         console.error("Fetch About Error:", err);
         setError(err instanceof Error ? err.message : ABOUT_SECTION.ERRORS.FETCH_ERROR);
+        setTitle(ABOUT_SECTION.UI.FALLBACK_TITLE);
+        setDescription(ABOUT_SECTION.UI.FALLBACK_DESCRIPTION);
+        setImageUrl(null);
       } finally {
         setIsLoading(false);
       }
@@ -87,6 +88,27 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
     fetchAboutData();
   }, []);
 
+  useEffect(() => {
+    let isMounted = true;
+    const checkAdmin = async () => {
+      if (!isSignedIn || !user?.authId) {
+
+        if (isMounted) setIsAdmin(false);
+        return;
+      }
+
+      const adminStatus = await isAdminUser(isSignedIn, user);
+      if (isMounted) {
+
+        setIsAdmin(adminStatus);
+      }
+    };
+    checkAdmin();
+    return () => {
+      isMounted = false;
+    };
+  }, [isSignedIn, user]);
+
   useEffect(() => {
     const debounce = (fn: () => void, delay: number) => {
       let timeout: NodeJS.Timeout;
@@ -163,10 +185,13 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
     onSuccess: () => void
   ) => {
     e.preventDefault();
-    if (!isSignedIn || !user?.businessAdminId) {
-      console.error("No user or businessAdminId:", {
-        user,
+    if (!(await isAdminUser(isSignedIn, user))) {
+      console.error("Unauthorized: User is not an admin", {
+        isSignedIn,
+        authId: user?.authId,
         businessAdminId: user?.businessAdminId,
+        userRole: user?.userRole,
+        businessOwner: user?.businessOwner,
       });
       setError(ABOUT_SECTION.ERRORS.UNAUTHORIZED_UPDATE);
       return;
@@ -181,10 +206,11 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
         formData.append("description", formDescription);
       }
       if (formImage) {
-        if (!["image/jpeg", "image/png", "image/gif"].includes(formImage.type)) {
+        const compressedImage = await compressImage(formImage);
+        if (!["image/jpeg", "image/png", "image/gif"].includes(compressedImage.type)) {
           throw new Error(ABOUT_SECTION.ERRORS.INVALID_IMAGE_TYPE);
         }
-        formData.append("image", formImage);
+        formData.append("image", compressedImage);
       }
 
       if (!formData.has("title") && !formData.has("description") && !formData.has("image")) {
@@ -229,8 +255,6 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
     }
   };
 
-  const isAdmin = isSignedIn && !!user?.businessAdminId;
-
   const sectionVariants = {
     hidden: { opacity: 0, y: 20 },
     visible: {
@@ -364,11 +388,15 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
             variants={itemVariants}
             className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-[1.5rem] overflow-hidden glassmorphism w-full mx-auto max-w-3xl md:max-w-none md:mx-0"
           >
-            {imageUrl ? (
+            {isLoading ? (
+              <div className="w-full h-full flex items-center justify-center">
+                <Spinner />
+              </div>
+            ) : imageUrl ? (
               <div className="relative w-full h-full">
                 <Image
                   src={imageUrl}
-                  alt="About DevVista Kit"
+                  alt="About Milton Supply Co"
                   fill
                   className="object-cover rounded-[1rem] transition-transform duration-700 hover:scale-110"
                   sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
@@ -384,6 +412,11 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
                         openEditModal();
                       }}
                     />
+                    <TrashIconButton
+                      disabled
+                      className="disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-400"
+                      title="Cannot delete this image"
+                    />
                   </div>
                 )}
               </div>
@@ -397,55 +430,59 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
             variants={itemVariants}
             className="space-y-6 min-h-[fit-content] h-auto w-full relative"
           >
-            {title && (
-              <motion.h2
-                variants={itemVariants}
-                className="text-2xl sm:text-3xl font-bold text-gray-800"
-              >
-                {title}
-              </motion.h2>
-            )}
-            {paragraphs.length > 0 ? (
+            {isLoading ? (
+              <Spinner />
+            ) : (
               <>
-                {paragraphs
-                  .slice(0, isExpanded ? paragraphs.length : 3)
-                  .map((paragraph, index) => (
-                    <motion.p
-                      key={index}
-                      variants={itemVariants}
-                      className="text-gray-800 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
-                    >
-                      {paragraph}
-                    </motion.p>
-                  ))}
-                {paragraphs.length > 3 && (
-                  <motion.div variants={itemVariants} className="mt-4">
-                    <ToggleButton
-                      variant="toggle-bio"
-                      onClick={() => setIsExpanded(!isExpanded)}
-                    >
-                      {isExpanded ? ABOUT_SECTION.BUTTONS.READ_LESS_BUTTON : ABOUT_SECTION.BUTTONS.READ_MORE_BUTTON}
-                    </ToggleButton>
-                  </motion.div>
+                {title && (
+                  <motion.h2
+                    variants={itemVariants}
+                    className="text-2xl sm:text-3xl font-bold text-gray-800"
+                  >
+                    {title}
+                  </motion.h2>
+                )}
+                {paragraphs.length > 0 ? (
+                  <>
+                    {paragraphs
+                      .slice(0, isExpanded ? paragraphs.length : 3)
+                      .map((paragraph, index) => (
+                        <motion.p
+                          key={index}
+                          variants={itemVariants}
+                          className="text-gray-800 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
+                        >
+                          {paragraph}
+                        </motion.p>
+                      ))}
+                    {paragraphs.length > 3 && (
+                      <motion.div variants={itemVariants} className="mt-4">
+                        <ToggleButton
+                          variant="toggle-bio"
+                          onClick={() => setIsExpanded(!isExpanded)}
+                        >
+                          {isExpanded ? ABOUT_SECTION.BUTTONS.READ_LESS_BUTTON : ABOUT_SECTION.BUTTONS.READ_MORE_BUTTON}
+                        </ToggleButton>
+                      </motion.div>
+                    )}
+                  </>
+                ) : (
+                  <motion.p
+                    variants={itemVariants}
+                    className="text-gray-600 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
+                  >
+                    {ABOUT_SECTION.UI.NO_DESCRIPTION_AVAILABLE}
+                  </motion.p>
+                )}
+                {error && (
+                  <p className="text-red-400 text-base sm:text-lg md:text-xl text-center mt-4">{error}</p>
+                )}
+                {isAdmin && (
+                  <p className="text-gray-400 text-sm font-medium">
+                    {ABOUT_SECTION.UI.ADMIN_LOGGED_IN_MESSAGE}
+                  </p>
                 )}
               </>
-            ) : (
-              <motion.p
-                variants={itemVariants}
-                className="text-gray-600 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
-              >
-                {ABOUT_SECTION.UI.NO_DESCRIPTION_AVAILABLE}
-              </motion.p>
-            )}
-            {authLoading || isLoading ? (
-              <Spinner />
-            ) : isAdmin ? (
-              <p className="text-gray-400 text-sm font-medium">
-                {ABOUT_SECTION.UI.ADMIN_LOGGED_IN_MESSAGE}
-              </p>
-            ) : null}
-            {error && (
-              <p className="text-red-400 text-base sm:text-lg md:text-xl text-center mt-4">{error}</p>
             )}
           </motion.div>
         </div>
@@ -462,7 +499,7 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
           role="dialog"
         >
           <div
-            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto modal-form"
+            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg modal-form"
             onClick={(e) => e.stopPropagation()}
           >
             <CloseButton onClick={handleCancelEdit}>
@@ -523,7 +560,7 @@ export function AboutSection({ user, authLoading }: AboutSectionProps) {
                   id="aboutDescription"
                   value={formDescription}
                   onChange={(e) => setFormDescription(e.target.value)}
-                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px]"
+                  className="modal-form w-full"
                   placeholder={ABOUT_SECTION.UI.DESCRIPTION_PLACEHOLDER}
                 />
               </div>

package/components/addOns/functional/aboutSections/constants/aboutSection.ts

@@ -5,15 +5,20 @@ export const ABOUT_SECTION = {
   // UI Text for AboutSection
   UI: {
     // Blockquote text
-    BLOCKQUOTE_TEXT: "“DevVista Kit is a modern, well-equipped facility with a friendly and vibrant atmosphere.”",
+    BLOCKQUOTE_TEXT: "“Family Owned & Operated Since 1954.”",
     // Placeholder text when no image is available
     NO_IMAGE_AVAILABLE: "No image available",
     // Text when no description is available
     NO_DESCRIPTION_AVAILABLE: "No about description available.",
+    // Fallback title when no data is available
+    FALLBACK_TITLE: "About Milton Supply Co",
+    // Fallback description when no data is available
+    FALLBACK_DESCRIPTION:
+      "Welcome to Milton Supply Co, your one-stop source for masonry supplies near Syracuse, NY.",
     // Message when logged in as admin
     ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
-    // Modal heading
-    MODAL_HEADING: "Edit About",
+    // Modal heading for edit form
+    MODAL_HEADING: "Edit About Section",
     // Form label for title input
     TITLE_LABEL: "About Title",
     // Placeholder for title input
@@ -23,7 +28,7 @@ export const ABOUT_SECTION = {
     // Text showing selected image name
     SELECTED_IMAGE_TEXT: "Selected: ${formImage.name}",
     // Form label for description textarea
-    DESCRIPTION_LABEL: "Update Description",
+    DESCRIPTION_LABEL: "About Description",
     // Placeholder for description textarea
     DESCRIPTION_PLACEHOLDER: "Enter the about description",
   },

package/components/addOns/functional/banner/Banner.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import { X } from "lucide-react";
+import { UploadedImage } from "@/lib/types";
+import Spinner from "@/components/addOns/non-functional/spinner";
+
+export default function Banner() {
+  const [bannerData, setBannerData] = useState<UploadedImage | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+  const bannerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const fetchBanner = async () => {
+      setIsLoading(true);
+      console.log("Fetching banner from /api/gallery-data...");
+      try {
+        const response = await fetch(`/api/gallery-data?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        console.log("API Response Status:", response.status);
+        if (response.ok) {
+          const result = await response.json();
+          console.log("API Response Data:", result);
+          const images = Array.isArray(result.data)
+            ? result.data.map((item: any) => ({
+                id: Number(item.id) || 0,
+                documentId: item.documentId || "",
+                title: item.title || "Untitled",
+                description: item.description || "",
+                url: item.image?.url
+                  ? item.image.url.startsWith("http")
+                    ? item.image.url
+                    : `${process.env.STRAPI_API_URL}${item.image.url}`
+                  : "",
+                createdAt: item.createdAt || new Date().toISOString(),
+                category: item.category || "none",
+                subCategory: item.subCategory || "",
+                favorite: item.favorite || false,
+                banner: item.banner || false,
+                startDate: item.startDate || undefined,
+                endDate: item.endDate || undefined,
+              }))
+            : [];
+          console.log("Mapped Images:", images);
+
+          const currentDate = new Date();
+          const banner = images.find((image: UploadedImage) => {
+            if (!image.banner) return false;
+            if (!image.startDate || !image.endDate) return false;
+            const start = new Date(image.startDate);
+            const end = new Date(image.endDate);
+            return start <= currentDate && currentDate <= end;
+          });
+          console.log("Selected Banner Data:", banner);
+          setBannerData(banner || null);
+        } else {
+          console.error("Banner: Gallery API Error", {
+            status: response.status,
+            statusText: response.statusText,
+          });
+        }
+      } catch (err) {
+        console.error("Banner: Fetch Error", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchBanner();
+  }, []);
+
+  // Handle click outside to close the banner
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        bannerRef.current &&
+        !bannerRef.current.contains(event.target as Node) &&
+        isVisible
+      ) {
+        setIsVisible(false);
+        console.log("Banner: Closed by clicking outside");
+      }
+    };
+
+    if (isVisible) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isVisible]);
+
+  if (isLoading) {
+    console.log("Banner: Showing Spinner");
+    return <Spinner />;
+  }
+
+  if (!isVisible || !bannerData) {
+    console.log("Banner: Not rendering", { isVisible, bannerData });
+    return null;
+  }
+
+  console.log("Banner: Rendering with data", bannerData);
+
+  return (
+    <motion.div
+      ref={bannerRef}
+      className="fixed top-0 left-0 right-0 bg-blue-500/80 backdrop-blur-sm text-white py-3 sm:py-6 z-[1200] shadow-md"
+      style={{
+        maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)",
+      }}
+      initial={{ y: -100, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      exit={{ y: -100, opacity: 0 }}
+      transition={{ duration: 0.5, ease: "easeOut" }}
+    >
+      <div className="max-w-7xl mx-auto flex items-center justify-between relative pr-10 sm:pr-14">
+        <div className="p-4 sm:p-6">
+          <h3 className="text-sm sm:text-base md:text-lg font-bold text-center">
+            {bannerData.title?.trim() &&
+            !bannerData.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+              ? bannerData.title
+              : "Banner"}
+          </h3>
+          {bannerData.description && (
+            <p className="text-xs sm:text-sm text-center mt-2">
+              {bannerData.description.length > 100
+                ? bannerData.description.slice(0, 100) + "..."
+                : bannerData.description}
+            </p>
+          )}
+        </div>
+        <button
+          onClick={() => setIsVisible(false)}
+          className="absolute right-2 sm:right-4 bg-blue-600/50 hover:bg-blue-700/70 text-white rounded-full p-1.5 sm:p-2 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-colors"
+          aria-label="Close banner"
+        >
+          <X className="w-5 h-5 sm:w-8 sm:h-8" />
+        </button>
+      </div>
+    </motion.div>
+  );
+}