@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/functional/bioSections/BioEditor.tsx

@@ -0,0 +1,471 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { useState, useEffect, useRef } from "react";
+import { EditIconButton, ToggleButton, UpdateButton, CancelButton, CloseButton, TrashIconButton } from "@/components/other/button";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { X } from "lucide-react";
+import { useAuth } from "@clerk/nextjs";
+import { BIO_SECTION } from "./constants/bioEditor";
+import { compressImage } from "@/lib/utils/compressImage";
+import { StrapiUser } from "@/lib/types";
+import { isAdminUser } from "@/lib/auth/auth-utils";
+
+interface BioContent {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  bio: boolean;
+  about: boolean;
+  image?: { url: string; id: number };
+  createdAt: string;
+}
+
+interface BioSectionProps {
+  user: StrapiUser | null;
+  isSignedIn: boolean | undefined;
+}
+
+export function BioSection({ user, isSignedIn }: BioSectionProps) {
+  const { getToken } = useAuth();
+  const [isMobile, setIsMobile] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [formTitle, setFormTitle] = useState<string>("");
+  const [formDescription, setFormDescription] = useState<string>("");
+  const [formImage, setFormImage] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [title, setTitle] = useState<string | null>(null);
+  const [description, setDescription] = useState<string | null>(null);
+  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(() => {
+    if (hasFetched.current) return;
+    hasFetched.current = true;
+
+    const fetchBioData = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/bio?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (response.ok) {
+          const result = await response.json();
+          if (result.data) {
+            const bioData: BioContent = Array.isArray(result.data) ? result.data[0] : result.data;
+            setTitle(bioData.title || null);
+            setDescription(bioData.description || null);
+            setImageUrl(bioData.image?.url || null);
+            setFormTitle(bioData.title || "");
+            setFormDescription(bioData.description || "");
+          } else {
+            setTitle(BIO_SECTION.UI.FALLBACK_TITLE);
+            setDescription(BIO_SECTION.UI.FALLBACK_DESCRIPTION);
+            setImageUrl(null);
+          }
+        } else {
+          const errorData = await response.json();
+          throw new Error(errorData.error || BIO_SECTION.ERRORS.FETCH_FAILED.replace("${response.status}", response.status.toString()));
+        }
+      } catch (err) {
+        console.error("Fetch Bio Error:", err);
+        setError(err instanceof Error ? err.message : BIO_SECTION.ERRORS.FETCH_ERROR);
+        setTitle(BIO_SECTION.UI.FALLBACK_TITLE);
+        setDescription(BIO_SECTION.UI.FALLBACK_DESCRIPTION);
+        setImageUrl(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchBioData();
+  }, []);
+
+  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;
+      return () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(fn, delay);
+      };
+    };
+    const checkMobile = debounce(() => {
+      setIsMobile(window.innerWidth < 768);
+    }, 100);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  useEffect(() => {
+    const event = new CustomEvent("modalStateChange", { detail: { isOpen: isEditModalOpen } });
+    window.dispatchEvent(event);
+  }, [isEditModalOpen]);
+
+  useEffect(() => {
+    if (isEditModalOpen) {
+      const scrollY = window.scrollY;
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.width = "100%";
+      document.body.classList.add("overflow-hidden");
+      return () => {
+        const scrollYRestored = document.body.style.top ? parseInt(document.body.style.top, 10) * -1 : 0;
+        document.body.style.position = "";
+        document.body.style.top = "";
+        document.body.style.width = "";
+        document.body.classList.remove("overflow-hidden");
+        window.scrollTo(0, scrollYRestored);
+      };
+    }
+  }, [isEditModalOpen]);
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isEditModalOpen) {
+        handleCancelEdit();
+      }
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [isEditModalOpen]);
+
+  const openEditModal = () => {
+    setFormTitle(title || "");
+    setFormDescription(description || "");
+    setFormImage(null);
+    setIsEditModalOpen(true);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditModalOpen(false);
+    setFormTitle(title || "");
+    setFormDescription(description || "");
+    setFormImage(null);
+  };
+
+  const handlePatchSubmit = async (
+    e: React.FormEvent,
+    formTitle: string,
+    formDescription: string,
+    formImage: File | null,
+    onSuccess: () => void
+  ) => {
+    e.preventDefault();
+    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(BIO_SECTION.ERRORS.UNAUTHORIZED_UPDATE);
+      return;
+    }
+
+    if (!formTitle.trim() || !formDescription.trim()) {
+      setError(BIO_SECTION.ERRORS.REQUIRED_FIELDS);
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const formData = new FormData();
+      if (formTitle && formTitle !== title) formData.append("title", formTitle);
+      if (formDescription && formDescription !== description) formData.append("description", formDescription);
+      if (formImage) {
+        const compressedImage = await compressImage(formImage);
+        if (!["image/jpeg", "image/png", "image/gif"].includes(compressedImage.type)) {
+          throw new Error(BIO_SECTION.ERRORS.INVALID_IMAGE_TYPE);
+        }
+        formData.append("image", compressedImage);
+      }
+
+      if (!formData.has("title") && !formData.has("description") && !formData.has("image")) {
+        onSuccess();
+        return;
+      }
+
+      const token = await getToken();
+      if (!token) throw new Error(BIO_SECTION.ERRORS.NO_AUTH_TOKEN);
+
+      const response = await fetch("/api/bio", {
+        method: "PUT",
+        headers: { Authorization: `Bearer ${token}` },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || BIO_SECTION.ERRORS.UPDATE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const result = await response.json();
+      if (result.data) {
+        const bioData: BioContent = Array.isArray(result.data) ? result.data[0] : result.data;
+        setImageUrl(bioData.image?.url || null);
+        setDescription(bioData.description || null);
+        setTitle(bioData.title || null);
+        setFormTitle(bioData.title || "");
+        setFormDescription(bioData.description || "");
+        setError(null);
+        onSuccess();
+      }
+    } catch (err) {
+      console.error("Update Error:", err);
+      setError(err instanceof Error ? err.message : BIO_SECTION.ERRORS.UPDATE_ERROR);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" } },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: { opacity: 1, y: 0, transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" } },
+  };
+
+  const modalVariants = {
+    hidden: { opacity: 0, y: "100vh" },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+    exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
+  };
+
+  const paragraphs = description
+    ? description.split("\n").filter((paragraph) => paragraph.trim() !== "")
+    : [];
+
+  return (
+    <div className="w-full">
+      <motion.div
+        variants={sectionVariants}
+        initial="hidden"
+        animate="visible"
+        className="mb-24 max-w-[200rem] mx-auto px-8 sm:px-10"
+      >
+        <div className="flex flex-col md:flow-row gap-10 items-start min-h-[fit-content]">
+          <motion.div
+            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"
+          >
+            {isLoading ? (
+              <div className="w-reports full h-full flex items-center justify-center">
+                <Spinner />
+              </div>
+            ) : imageUrl ? (
+              <div className="relative w-full h-full">
+                <Image
+                  src={imageUrl}
+                  alt="Portrait of Kathy Caiello"
+                  fill
+                  className="object-cover rounded-[1rem] transition-transform duration-700 hover:scale-110"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                  loading="lazy"
+                  quality={85}
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-500"></div>
+                {isAdmin && (
+                  <div className="absolute top-2 right-0 flex">
+                    <EditIconButton
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openEditModal();
+                      }}
+                    />
+                    <TrashIconButton
+                      disabled
+                      className="disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-400"
+                      title="Cannot delete this image"
+                    />
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="w-full h-full flex items-center justify-center">
+                <p className="text-gray-600 text-lg">{BIO_SECTION.UI.NO_IMAGE_AVAILABLE}</p>
+              </div>
+            )}
+          </motion.div>
+          <motion.div
+            variants={itemVariants}
+            className="space-y-6 min-h-[fit-content] h-auto w-full relative"
+          >
+            {isLoading ? (
+              <Spinner />
+            ) : (
+              <>
+                {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 ? BIO_SECTION.BUTTONS.READ_LESS_BUTTON : BIO_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"
+                  >
+                    {BIO_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">
+                    {BIO_SECTION.UI.ADMIN_LOGGED_IN_MESSAGE}
+                  </p>
+                )}
+              </>
+            )}
+          </motion.div>
+        </div>
+      </motion.div>
+      {isEditModalOpen && (
+        <motion.div
+          variants={modalVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
+          onClick={handleCancelEdit}
+          aria-modal="true"
+          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 modal-form"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton onClick={handleCancelEdit}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8" />
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">{BIO_SECTION.UI.MODAL_HEADING}</h3>
+            <form
+              onSubmit={(e) => handlePatchSubmit(e, formTitle, formDescription, formImage, () => setIsEditModalOpen(false))}
+              className="space-y-4 modal-form"
+            >
+              <div>
+                <label htmlFor="bioTitle" className="block text-sm font-medium text-gray-300 mb-1">
+                  {BIO_SECTION.UI.TITLE_LABEL}
+                </label>
+                <input
+                  id="bioTitle"
+                  type="text"
+                  value={formTitle}
+                  onChange={(e) => setFormTitle(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"
+                  placeholder={BIO_SECTION.UI.TITLE_PLACEHOLDER}
+                  aria-label={BIO_SECTION.UI.TITLE_LABEL}
+                />
+              </div>
+              <div>
+                <label htmlFor="bioImage" className="block text-sm font-medium text-gray-300 mb-1">
+                  {BIO_SECTION.UI.IMAGE_LABEL}
+                </label>
+                <input
+                  id="bioImage"
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif"
+                  onChange={(e) => setFormImage(e.target.files?.[0] || null)}
+                  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"
+                  aria-label={BIO_SECTION.UI.IMAGE_LABEL}
+                />
+                {formImage && (
+                  <div className="mttv-2 mt-2">
+                    <p className="text-gray-300 text-sm">{BIO_SECTION.UI.SELECTED_IMAGE_TEXT.replace("${formImage.name}", formImage.name)}</p>
+                    <img
+                      src={URL.createObjectURL(formImage)}
+                      alt="Preview"
+                      className="mt-2 max-w-xs rounded"
+                    />
+                  </div>
+                )}
+              </div>
+              <div>
+                <label htmlFor="bioDescription" className="block text-sm font-medium text-gray-300 mb-1">
+                  {BIO_SECTION.UI.DESCRIPTION_LABEL}
+                </label>
+                <textarea
+                  id="bioDescription"
+                  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]"
+                  placeholder={BIO_SECTION.UI.DESCRIPTION_PLACEHOLDER}
+                  aria-label={BIO_SECTION.UI.DESCRIPTION_LABEL}
+                />
+              </div>
+              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                <UpdateButton type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? (
+                    <span className="flex items-center">
+                      <Spinner /> {BIO_SECTION.BUTTONS.SAVING_BUTTON}
+                    </span>
+                  ) : (
+                    BIO_SECTION.BUTTONS.UPDATE_BUTTON
+                  )}
+                </UpdateButton>
+                <CancelButton type="button" onClick={handleCancelEdit}>
+                  {BIO_SECTION.BUTTONS.CANCEL_BUTTON}
+                </CancelButton>
+              </div>
+              {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
+            </form>
+          </div>
+        </motion.div>
+      )}
+    </div>
+  );
+}

package/components/addOns/functional/bioSections/constants/bioEditor.ts

@@ -0,0 +1,36 @@
+export const BIO_SECTION = {
+  UI: {
+    BLOCKQUOTE_TEXT: "“Family Owned & Operated Since 1954.”",
+    NO_IMAGE_AVAILABLE: "No image available",
+    NO_DESCRIPTION_AVAILABLE: "No bio description available.",
+    FALLBACK_TITLE: "About Kathy Caiello",
+    FALLBACK_DESCRIPTION: "Learn more about Kathy Caiello, a key member of Milton Supply Co.",
+    ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
+    MODAL_HEADING: "Edit Bio Section",
+    TITLE_LABEL: "Bio Title",
+    TITLE_PLACEHOLDER: "Enter the bio title",
+    IMAGE_LABEL: "Update Image (optional)",
+    SELECTED_IMAGE_TEXT: "Selected: ${formImage.name}",
+    DESCRIPTION_LABEL: "Bio Description",
+    DESCRIPTION_PLACEHOLDER: "Enter the bio description",
+  },
+  BUTTONS: {
+    EDIT_BUTTON: "Edit",
+    READ_MORE_BUTTON: "Read More",
+    READ_LESS_BUTTON: "Read Less",
+    UPDATE_BUTTON: "Update",
+    SAVING_BUTTON: "Saving...",
+    CANCEL_BUTTON: "Cancel",
+  },
+  ERRORS: {
+    NO_DATA_FOUND: "Bio data not found",
+    FETCH_FAILED: "Failed to fetch bio data: ${response.status}",
+    FETCH_ERROR: "An error occurred while fetching bio data",
+    UNAUTHORIZED_UPDATE: "Unauthorized: Only admin can update bio data",
+    INVALID_IMAGE_TYPE: "Only JPEG, PNG, or GIF images are allowed",
+    NO_AUTH_TOKEN: "No authentication token available",
+    UPDATE_FAILED: "Failed to update bio data: ${response.status}",
+    UPDATE_ERROR: "Failed to update bio data",
+    REQUIRED_FIELDS: "Title and description are required.",
+  },
+};