@devvistatech/devvista-kit 0.0.1

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

@@ -0,0 +1,571 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { useState, useEffect, useRef } from "react";
+import { EditIconButton, CloseButton, UpdateButton, CancelButton, ActionButton, ReadMoreButton } from "@/components/other/button";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { ArrowRight, X } from "lucide-react";
+import Link from "next/link";
+import { useAuth, useUser } from "@clerk/nextjs";
+import { ABOUT_SECTION } from "./constants/aboutSection";
+
+interface AboutContent {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  about: boolean;
+  image?: { url: string; id: number };
+  createdAt: string;
+}
+
+interface StrapiUser {
+  id: number;
+  username: string;
+  email: string;
+  businessAdminId?: string;
+}
+
+interface AboutSectionProps {
+  user: StrapiUser | null;
+  authLoading: boolean;
+}
+
+export function AboutSection({ user, authLoading }: AboutSectionProps) {
+  const { getToken } = useAuth();
+  const { isSignedIn } = useUser();
+  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 hasFetched = useRef(false);
+
+  useEffect(() => {
+    if (hasFetched.current) return;
+    hasFetched.current = true;
+
+    const fetchAboutData = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/about?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (response.ok) {
+          const result = await response.json();
+          if (result.data) {
+            const aboutData: AboutContent = Array.isArray(result.data)
+              ? result.data[0]
+              : result.data;
+            setTitle(aboutData.title || null);
+            setDescription(aboutData.description || null);
+            setImageUrl(aboutData.image?.url || null);
+            setFormTitle(aboutData.title || "");
+            setFormDescription(aboutData.description || "");
+          } else {
+            throw new Error(ABOUT_SECTION.ERRORS.NO_DATA_FOUND);
+          }
+        } else {
+          const errorData = await response.json();
+          throw new Error(errorData.error || ABOUT_SECTION.ERRORS.FETCH_FAILED.replace("${response.status}", response.status.toString()));
+        }
+      } catch (err) {
+        console.error("Fetch About Error:", err);
+        setError(err instanceof Error ? err.message : ABOUT_SECTION.ERRORS.FETCH_ERROR);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchAboutData();
+  }, []);
+
+  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) {
+      document.body.classList.add("overflow-hidden");
+    } else {
+      document.body.classList.remove("overflow-hidden");
+    }
+    return () => {
+      document.body.classList.remove("overflow-hidden");
+    };
+  }, [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 (!isSignedIn || !user?.businessAdminId) {
+      console.error("No user or businessAdminId:", {
+        user,
+        businessAdminId: user?.businessAdminId,
+      });
+      setError(ABOUT_SECTION.ERRORS.UNAUTHORIZED_UPDATE);
+      return;
+    }
+
+    try {
+      const formData = new FormData();
+      if (formTitle && formTitle !== title) {
+        formData.append("title", formTitle);
+      }
+      if (formDescription && formDescription !== description) {
+        formData.append("description", formDescription);
+      }
+      if (formImage) {
+        if (!["image/jpeg", "image/png", "image/gif"].includes(formImage.type)) {
+          throw new Error(ABOUT_SECTION.ERRORS.INVALID_IMAGE_TYPE);
+        }
+        formData.append("image", formImage);
+      }
+
+      if (!formData.has("title") && !formData.has("description") && !formData.has("image")) {
+        onSuccess();
+        return;
+      }
+
+      const token = await getToken();
+      if (!token) {
+        throw new Error(ABOUT_SECTION.ERRORS.NO_AUTH_TOKEN);
+      }
+
+      const response = await fetch("/api/about", {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || ABOUT_SECTION.ERRORS.UPDATE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const result = await response.json();
+      if (result.data) {
+        const aboutData: AboutContent = Array.isArray(result.data)
+          ? result.data[0]
+          : result.data;
+        setImageUrl(aboutData.image?.url || null);
+        setDescription(aboutData.description || null);
+        setTitle(aboutData.title || null);
+        setFormTitle(aboutData.title || "");
+        setFormDescription(aboutData.description || "");
+        setError(null);
+        onSuccess();
+      }
+    } catch (err) {
+      console.error("Update Error:", err);
+      setError(err instanceof Error ? err.message : ABOUT_SECTION.ERRORS.UPDATE_ERROR);
+    }
+  };
+
+  const isAdmin = isSignedIn && !!user?.businessAdminId;
+
+  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 px-4 sm:px-8 flex-grow relative bg-overlay z-10">
+      <style jsx>{`
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #FFFFFF;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #FF69B4;
+        }
+
+        .about-container {
+          max-width: 1200px;
+          margin: 0 auto;
+          overflow-wrap: break-word;
+          word-break: break-word;
+        }
+        .about-container p {
+          margin-bottom: 1rem;
+          font-size: 1.25rem;
+          line-height: 1.6;
+          color: var(--natural-white);
+        }
+        @media (max-width: 640px) {
+          .about-container p {
+            font-size: 1.125rem;
+          }
+        }
+        .modal-form input,
+        .modal-form textarea {
+          font-size: 0.875rem;
+          padding: 0.5rem;
+          border-radius: 0.375rem;
+          background: #374151;
+          color: #f3f4f6;
+          border: 1px solid #4b5563;
+        }
+        .modal-form input:focus,
+        .modal-form textarea:focus {
+          outline: none;
+          ring: 2px solid #3b82f6;
+        }
+        .modal-form label {
+          font-size: 0.875rem;
+          color: #d1d5db;
+        }
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+        }
+        .glassmorphism:hover {
+          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        }
+        .bg-overlay {
+          position: relative;
+          background: #1E2A44;
+          background-size: cover;
+          background-position: center;
+          background-repeat: no-repeat;
+        }
+        .bg-overlay::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(30, 42, 68, 0.7);
+          z-index: 1;
+        }
+        .bg-overlay > * {
+          position: relative;
+          z-index: 2;
+        }
+        @supports not (backdrop-filter: blur(12px)) {
+          .glassmorphism {
+            background: rgba(255, 255, 255, 0.3);
+          }
+        }
+        @media (max-width: 640px) {
+          .modal-form input,
+          .modal-form textarea {
+            font-size: 0.875rem;
+            padding: 0.5rem;
+            border-radius: 0.375rem;
+          }
+          .modal-form label {
+            font-size: 0.875rem;
+          }
+          .modal-form .flex {
+            flex-direction: column;
+            gap: 0.5rem;
+          }
+          .modal-form textarea {
+            min-height: 80px;
+          }
+          .glassmorphism {
+            padding: 1rem;
+          }
+        }
+        @media (max-width: 320px) {
+          .modal-form input,
+          .modal-form textarea {
+            font-size: 0.75rem;
+            padding: 0.5rem;
+          }
+          .modal-form label {
+            font-size: 0.75rem;
+          }
+        }
+      `}</style>
+      <motion.section
+        variants={sectionVariants}
+        initial="hidden"
+        animate="visible"
+        className="about-container py-20 sm:py-32 mx-auto px-8 sm:px-10"
+      >
+        <motion.blockquote
+          variants={itemVariants}
+          className="text-4xl sm:text-6xl font-bold text-white text-center pb-20 sm:pb-32 tracking-tight"
+        >
+          {ABOUT_SECTION.UI.BLOCKQUOTE_TEXT}
+        </motion.blockquote>
+        <div className="space-y-6 glassmorphism p-10 sm:p-16 rounded-2xl">
+          {isAdmin && (
+            <motion.div variants={itemVariants} className="flex justify-end">
+              <EditIconButton
+                onClick={openEditModal}
+                className="touch-action-manipulation"
+              >
+                {ABOUT_SECTION.BUTTONS.EDIT_BUTTON}
+              </EditIconButton>
+            </motion.div>
+          )}
+          <div className="flex flex-col md:flex-row gap-12 items-start min-h-[fit-content]">
+            <motion.div
+              variants={itemVariants}
+              className="w-full md:w-1/2 max-w-[600px] h-auto mb-12 md:mb-0 relative"
+            >
+              {imageUrl ? (
+                <Image
+                  src={imageUrl}
+                  alt="About DevVista Kit"
+                  width={600}
+                  height={720}
+                  sizes="(max-width: 768px) 100vw, 600px"
+                  className="rounded-2xl w-full h-auto object-cover object-center glassmorphism shadow-lg"
+                  priority
+                  quality={60}
+                />
+              ) : (
+                <div className="w-full h-[720px] bg-gray-200 rounded-2xl flex items-center justify-center">
+                  <p className="text-gray-600">{ABOUT_SECTION.UI.NO_IMAGE_AVAILABLE}</p>
+                </div>
+              )}
+            </motion.div>
+            <motion.div
+              variants={itemVariants}
+              className="about-container space-y-6 min-h-[fit-content] h-auto w-full relative"
+            >
+              {title && (
+                <motion.h2
+                  variants={itemVariants}
+                  className="text-4xl sm:text-5xl font-bold text-white tracking-tight"
+                >
+                  {title}
+                </motion.h2>
+              )}
+              {description ? (
+                <>
+                  {paragraphs.slice(0, isExpanded ? paragraphs.length : 2).map((paragraph, index) => (
+                    <motion.p
+                      key={index}
+                      variants={itemVariants}
+                      className={`text-xl sm:text-2xl text-white font-bold ${index > 0 ? "pt-4" : ""}`}
+                    >
+                      {paragraph}
+                    </motion.p>
+                  ))}
+                  {paragraphs.length > 2 && (
+                    <motion.div variants={itemVariants} className="mt-4">
+                      <ReadMoreButton
+                        size="readMore"
+                        className="text-[#FF69B4]"
+                        onClick={() => setIsExpanded(!isExpanded)}
+                      >
+                        {isExpanded ? ABOUT_SECTION.BUTTONS.READ_LESS_BUTTON : ABOUT_SECTION.BUTTONS.READ_MORE_BUTTON}
+                      </ReadMoreButton>
+                    </motion.div>
+                  )}
+                  <motion.div variants={itemVariants}>
+                    <ActionButton asChild>
+                      <Link href="/contact" className="flex items-center justify-center">
+                        {ABOUT_SECTION.BUTTONS.GET_STARTED_BUTTON}
+                        <ArrowRight className="ml-2 h-5 w-5" />
+                      </Link>
+                    </ActionButton>
+                  </motion.div>
+                </>
+              ) : (
+                <motion.p
+                  variants={itemVariants}
+                  className="text-xl sm:text-2xl text-white font-bold"
+                >
+                  {ABOUT_SECTION.UI.NO_DESCRIPTION_AVAILABLE}
+                </motion.p>
+              )}
+              <div className="mt-4">
+                {authLoading || isLoading ? (
+                  <Spinner />
+                ) : isAdmin ? (
+                  <p className="text-gray-400 text-sm font-medium">
+                    {ABOUT_SECTION.UI.ADMIN_LOGGED_IN_MESSAGE}
+                  </p>
+                ) : user ? (
+                  <p className="text-gray-400 text-sm font-medium"></p>
+                ) : (
+                  <p className="text-gray-400 text-sm font-medium"></p>
+                )}
+              </div>
+            </motion.div>
+          </div>
+          {error && (
+            <p className="text-red-400 text-base sm:text-lg md:text-xl text-center mt-4">{error}</p>
+          )}
+        </div>
+      </motion.section>
+      {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 max-h-[90vh] overflow-y-auto"
+            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">{ABOUT_SECTION.UI.MODAL_HEADING}</h3>
+            <form
+              onSubmit={(e) => {
+                setIsSubmitting(true);
+                handlePatchSubmit(e, formTitle, formDescription, formImage, () => {
+                  setIsEditModalOpen(false);
+                  setIsSubmitting(false);
+                });
+              }}
+              className="space-y-4 modal-form"
+            >
+              <div>
+                <label
+                  htmlFor="aboutTitle"
+                  className="block text-sm font-medium text-gray-300 mb-1"
+                >
+                  {ABOUT_SECTION.UI.TITLE_LABEL}
+                </label>
+                <input
+                  id="aboutTitle"
+                  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={ABOUT_SECTION.UI.TITLE_PLACEHOLDER}
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="aboutImage"
+                  className="block text-sm font-medium text-gray-300 mb-1"
+                >
+                  {ABOUT_SECTION.UI.IMAGE_LABEL}
+                </label>
+                <input
+                  id="aboutImage"
+                  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"
+                />
+                {formImage && (
+                  <p className="mt-2 text-gray-300 text-sm">{ABOUT_SECTION.UI.SELECTED_IMAGE_TEXT.replace("${formImage.name}", formImage.name)}</p>
+                )}
+              </div>
+              <div>
+                <label
+                  htmlFor="aboutDescription"
+                  className="block text-sm font-medium text-gray-300 mb-1"
+                >
+                  {ABOUT_SECTION.UI.DESCRIPTION_LABEL}
+                </label>
+                <textarea
+                  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]"
+                  placeholder={ABOUT_SECTION.UI.DESCRIPTION_PLACEHOLDER}
+                />
+              </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 ? ABOUT_SECTION.BUTTONS.SAVING_BUTTON : ABOUT_SECTION.BUTTONS.UPDATE_BUTTON}
+                </UpdateButton>
+                <CancelButton type="button" onClick={handleCancelEdit}>
+                  {ABOUT_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/aboutSections/constants/aboutSection.ts

@@ -0,0 +1,66 @@
+// components/addOns/functional/aboutSections/constants/aboutSection.ts
+// Constants for hardcoded text in AboutSection.tsx, organized by purpose
+
+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.”",
+    // 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.",
+    // Message when logged in as admin
+    ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
+    // Modal heading
+    MODAL_HEADING: "Edit About",
+    // Form label for title input
+    TITLE_LABEL: "About Title",
+    // Placeholder for title input
+    TITLE_PLACEHOLDER: "Enter the about title",
+    // Form label for image input
+    IMAGE_LABEL: "Update Image (optional)",
+    // Text showing selected image name
+    SELECTED_IMAGE_TEXT: "Selected: ${formImage.name}",
+    // Form label for description textarea
+    DESCRIPTION_LABEL: "Update Description",
+    // Placeholder for description textarea
+    DESCRIPTION_PLACEHOLDER: "Enter the about description",
+  },
+  // Button Text for AboutSection
+  BUTTONS: {
+    // EditButton text
+    EDIT_BUTTON: "Edit About",
+    // ReadMoreButton text when not expanded
+    READ_MORE_BUTTON: "Read More",
+    // ReadMoreButton text when expanded
+    READ_LESS_BUTTON: "Read Less",
+    // ActionButton text
+    GET_STARTED_BUTTON: "Get Started",
+    // UpdateButton text
+    UPDATE_BUTTON: "Update",
+    // UpdateButton text when submitting
+    SAVING_BUTTON: "Saving...",
+    // CancelButton text
+    CANCEL_BUTTON: "Cancel",
+  },
+  // Error Messages for AboutSection
+  ERRORS: {
+    // Error when no about data is returned
+    NO_DATA_FOUND: "About data not found",
+    // Error when fetch fails with status code
+    FETCH_FAILED: "Failed to fetch about data: ${response.status}",
+    // Generic error for fetch failure
+    FETCH_ERROR: "An error occurred while fetching about data",
+    // Error for non-admin update attempt
+    UNAUTHORIZED_UPDATE: "Unauthorized: Only admin can update about data",
+    // Error for invalid image type
+    INVALID_IMAGE_TYPE: "Only JPEG, PNG, or GIF images are allowed",
+    // Error when no authentication token is available
+    NO_AUTH_TOKEN: "No authentication token available",
+    // Error when update fails with status code
+    UPDATE_FAILED: "Failed to update about data: ${response.status}",
+    // Generic error for update failure
+    UPDATE_ERROR: "Failed to update about data",
+  },
+};