create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/app/cms/components/DraftStatusActions.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "@nextblock-cms/ui";
+import { toast } from "react-hot-toast";
+import { useRouter } from "next/navigation";
+import { CloudLightning, Trash2, Loader2 } from "lucide-react";
+import {
+  publishVisualEditingDraft,
+  discardVisualEditingDraft,
+  publishVisualEditingProductDraft,
+  discardVisualEditingProductDraft,
+} from "../../actions/visualEditingActions";
+
+interface DraftStatusActionsProps {
+  parentId: string | number;
+  parentType: "page" | "post" | "product";
+  hasDraft: boolean;
+}
+
+export default function DraftStatusActions({
+  parentId,
+  parentType,
+  hasDraft,
+}: DraftStatusActionsProps) {
+  const router = useRouter();
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [isDiscarding, setIsDiscarding] = useState(false);
+
+  if (!hasDraft) {
+    return null;
+  }
+
+  const handlePublish = async () => {
+    setIsPublishing(true);
+    const toastId = toast.loading("Publishing changes live...");
+    try {
+      let res;
+      if (parentType === "product") {
+        res = await publishVisualEditingProductDraft(String(parentId));
+      } else {
+        res = await publishVisualEditingDraft(
+          parentType as "page" | "post",
+          Number(parentId)
+        );
+      }
+
+      if (res && "error" in res && res.error) {
+        toast.error(`Publish failed: ${res.error}`, { id: toastId });
+      } else {
+        toast.success("Changes published live successfully!", { id: toastId });
+        router.refresh();
+        // Give NextJS server components a tiny bit of time to refresh, then reload the page
+        setTimeout(() => {
+          window.location.reload();
+        }, 800);
+      }
+    } catch (err: any) {
+      toast.error(`Error publishing: ${err.message || err}`, { id: toastId });
+    } finally {
+      setIsPublishing(false);
+    }
+  };
+
+  const handleDiscard = async () => {
+    if (!window.confirm("Are you sure you want to discard all draft changes? This action cannot be undone.")) {
+      return;
+    }
+    setIsDiscarding(true);
+    const toastId = toast.loading("Discarding draft changes...");
+    try {
+      let res;
+      if (parentType === "product") {
+        res = await discardVisualEditingProductDraft(String(parentId));
+      } else {
+        res = await discardVisualEditingDraft(
+          parentType as "page" | "post",
+          Number(parentId)
+        );
+      }
+
+      if (res && "error" in res && res.error) {
+        toast.error(`Discard failed: ${res.error}`, { id: toastId });
+      } else {
+        toast.success("Draft changes discarded successfully.", { id: toastId });
+        router.refresh();
+        setTimeout(() => {
+          window.location.reload();
+        }, 800);
+      }
+    } catch (err: any) {
+      toast.error(`Error discarding: ${err.message || err}`, { id: toastId });
+    } finally {
+      setIsDiscarding(false);
+    }
+  };
+
+  return (
+    <div
+      data-nextblock-draft-toolbar
+      className="fixed bottom-6 left-1/2 z-[1000] flex -translate-x-1/2 items-center gap-3.5 rounded-full border border-amber-500/30 bg-background/95 px-4 py-2 text-sm shadow-xl backdrop-blur-md transition-all duration-300 ease-in-out animate-in fade-in slide-in-from-bottom-5"
+    >
+      <div className="flex items-center gap-2 px-1">
+        <div className="relative flex h-2.5 w-2.5">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
+          <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-amber-500"></span>
+        </div>
+        <span className="font-semibold text-amber-800 dark:text-amber-300 text-[11px] uppercase tracking-wider select-none">
+          Unpublished Draft
+        </span>
+      </div>
+      <div className="h-4 w-[1px] bg-border" />
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 rounded-full border-amber-500/20 text-amber-800 dark:text-amber-300 hover:bg-amber-500/10 hover:text-amber-900 dark:hover:text-amber-200 px-3.5 text-xs"
+          onClick={handleDiscard}
+          disabled={isDiscarding || isPublishing}
+        >
+          {isDiscarding ? (
+            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <Trash2 className="mr-1.5 h-3.5 w-3.5" />
+          )}
+          Discard
+        </Button>
+        <Button
+          variant="default"
+          size="sm"
+          className="h-8 rounded-full bg-amber-600 hover:bg-amber-500 text-white border-0 shadow-md shadow-amber-600/10 px-4 text-xs font-medium"
+          onClick={handlePublish}
+          disabled={isDiscarding || isPublishing}
+        >
+          {isPublishing ? (
+            <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+          ) : (
+            <CloudLightning className="mr-1.5 h-3.5 w-3.5" />
+          )}
+          Publish
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/components/FeatureImageField.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { type KeyboardEvent, useCallback, useEffect, useState } from "react";
+import Image from "next/image";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Label,
+  Separator,
+  Spinner,
+} from "@nextblock-cms/ui";
+import type { Database } from "@nextblock-cms/db";
+
+import { resolveMediaUrl } from "../../../lib/media/resolveMediaUrl";
+import { getMediaItems } from "../media/actions";
+import MediaImage from "../media/components/MediaImage";
+import MediaUploadForm from "../media/components/MediaUploadForm";
+
+type Media = Database["public"]["Tables"]["media"]["Row"];
+
+interface FeatureImageFieldProps {
+  initialImageId?: string | null;
+  initialImageUrl?: string | null;
+  onImageIdChange?: (imageId: string | null) => void;
+  uploadFolder: string;
+}
+
+export default function FeatureImageField({
+  initialImageId,
+  initialImageUrl,
+  onImageIdChange,
+  uploadFolder,
+}: FeatureImageFieldProps) {
+  const [selectedFeatureImage, setSelectedFeatureImage] = useState<{
+    id: string | null;
+    url: string | null;
+  }>({
+    id: initialImageId || null,
+    url: initialImageUrl || null,
+  });
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [mediaItems, setMediaItems] = useState<Media[]>([]);
+  const [mediaLoading, setMediaLoading] = useState(false);
+  const [mediaError, setMediaError] = useState<string | null>(null);
+  const [mediaPage, setMediaPage] = useState(1);
+  const [hasMoreMedia, setHasMoreMedia] = useState(true);
+
+  useEffect(() => {
+    setSelectedFeatureImage({
+      id: initialImageId || null,
+      url: initialImageUrl || null,
+    });
+  }, [initialImageId, initialImageUrl]);
+
+  const loadMedia = useCallback(
+    async (pageToLoad = 1, append = false) => {
+      setMediaLoading(true);
+      setMediaError(null);
+
+      try {
+        const result = await getMediaItems(pageToLoad, 20);
+        if (result.error) {
+          setMediaError(result.error);
+          if (!append) setMediaItems([]);
+        } else if (result.data) {
+          setMediaItems((prev) =>
+            append ? [...prev, ...(result.data || [])] : result.data || []
+          );
+          setHasMoreMedia(result.hasMore !== undefined ? result.hasMore : false);
+          setMediaPage(pageToLoad);
+        }
+      } catch {
+        setMediaError("An unexpected error occurred while fetching media.");
+        if (!append) setMediaItems([]);
+      } finally {
+        setMediaLoading(false);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (isModalOpen) {
+      setMediaPage(1);
+      setHasMoreMedia(true);
+      loadMedia(1, false);
+    }
+  }, [isModalOpen, loadMedia]);
+
+  const handleImageSelectInModal = (image: Media) => {
+    const imageUrl = resolveMediaUrl(image.file_path || image.object_key);
+
+    if (!imageUrl) {
+      setMediaError("Selected image is missing a valid path.");
+      return;
+    }
+
+    setSelectedFeatureImage({ id: image.id, url: imageUrl });
+    onImageIdChange?.(image.id);
+    setIsModalOpen(false);
+  };
+
+  const handleRemoveImage = () => {
+    setSelectedFeatureImage({ id: null, url: null });
+    onImageIdChange?.(null);
+  };
+
+  const handleImageSelectKeyDown = (event: KeyboardEvent<HTMLDivElement>, image: Media) => {
+    if (event.key !== "Enter" && event.key !== " ") {
+      return;
+    }
+
+    event.preventDefault();
+    handleImageSelectInModal(image);
+  };
+
+  return (
+    <div>
+      <Label htmlFor="feature_image_id">Feature Image</Label>
+      <Input type="hidden" id="feature_image_id" name="feature_image_id" value={selectedFeatureImage.id || ""} />
+      <div className="mt-2">
+        {selectedFeatureImage.url && (
+          <div className="mb-4">
+            <Image
+              src={selectedFeatureImage.url}
+              alt="Selected feature image"
+              width={200}
+              height={200}
+              className="rounded-md object-cover"
+            />
+            <Button
+              type="button"
+              variant="link"
+              className="mt-2 px-0 text-red-600"
+              onClick={handleRemoveImage}
+            >
+              Remove Image
+            </Button>
+          </div>
+        )}
+        <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+          <DialogTrigger asChild>
+            <Button type="button" variant="outline">
+              {selectedFeatureImage.id ? "Change Feature Image" : "Select Feature Image"}
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="flex max-h-[90vh] flex-col sm:max-w-[90vw]">
+            <DialogHeader>
+              <DialogTitle>Select Feature Image</DialogTitle>
+            </DialogHeader>
+            <div className="p-1">
+              <MediaUploadForm
+                returnJustData={true}
+                defaultFolder={uploadFolder}
+                onUploadSuccess={(newlyUploadedMedia) => {
+                  setMediaItems((prevItems) => [
+                    newlyUploadedMedia,
+                    ...prevItems.filter((item) => item.id !== newlyUploadedMedia.id),
+                  ]);
+                  handleImageSelectInModal(newlyUploadedMedia);
+                }}
+              />
+            </div>
+            <Separator className="my-4" />
+            <div className="flex-grow overflow-y-auto py-4" id="media-modal-scroll-area">
+              {mediaLoading && mediaItems.length === 0 && (
+                <p className="text-center text-muted-foreground">Loading media...</p>
+              )}
+              {mediaError && <p className="text-center text-red-600">{mediaError}</p>}
+              {!mediaLoading && !mediaError && mediaItems.length === 0 && (
+                <p className="text-center text-muted-foreground">No media items found. Try uploading some first.</p>
+              )}
+
+              {mediaItems.length > 0 && (
+                <div className="grid grid-cols-[repeat(auto-fill,minmax(0,150px))] gap-3">
+                  {mediaItems.map((item) => {
+                    const imageUrl = resolveMediaUrl(item.file_path || item.object_key);
+
+                    if (!item.file_type?.startsWith("image/") || !imageUrl) {
+                      return null;
+                    }
+
+                    return (
+                      <div
+                        key={item.id}
+                        className="group relative aspect-square cursor-pointer overflow-hidden rounded-lg border bg-muted/20 shadow-sm transition-all hover:ring-2 hover:ring-primary"
+                        onClick={() => handleImageSelectInModal(item)}
+                        onKeyDown={(event) => handleImageSelectKeyDown(event, item)}
+                        tabIndex={0}
+                        role="button"
+                        aria-label={`Select ${item.file_name}`}
+                      >
+                        <MediaImage
+                          src={imageUrl}
+                          alt={item.description || item.file_name}
+                          width={item.width || 300}
+                          height={item.height || 300}
+                          blurDataURL={item.blur_data_url}
+                          className="h-full w-full object-cover transition-transform group-hover:scale-105"
+                        />
+                        <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/60 via-black/10 to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100">
+                          <p className="truncate text-xs text-white" title={item.file_name}>
+                            {item.file_name}
+                          </p>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+              {!mediaLoading && hasMoreMedia && mediaItems.length > 0 && (
+                <div className="mt-6 text-center">
+                  <Button type="button" onClick={() => loadMedia(mediaPage + 1, true)} variant="outline" disabled={mediaLoading}>
+                    {mediaLoading ? (
+                      <>
+                        <Spinner className="mr-2 h-4 w-4" /> Loading...
+                      </>
+                    ) : (
+                      "Load More"
+                    )}
+                  </Button>
+                </div>
+              )}
+            </div>
+            <DialogFooter className="mt-auto border-t pt-4">
+              <DialogClose asChild>
+                <Button type="button" variant="outline" onClick={() => setMediaError(null)}>
+                  Cancel
+                </Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/components/FeedbackModal.tsx

@@ -1,10 +1,10 @@
 "use client"
 
-import { useState } from "react"
-import { useAuth } from "@/context/AuthContext"
+import { useEffect, useState } from "react"
+import { useAuth } from '../../../context/AuthContext';
 import { usePathname } from "next/navigation"
 import { toast } from "react-hot-toast"
-import { submitFeedback } from "@/app/actions/feedback"
+import { submitFeedback } from '../../actions/feedback';
 import {
   Dialog,
   DialogContent,
@@ -29,13 +29,18 @@ interface FeedbackModalProps {
   sidebarOpen?: boolean
 }
 
-export function FeedbackModal({ sidebarOpen = true }: FeedbackModalProps) {
-  const [open, setOpen] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const [subject, setSubject] = useState("suggestion")
+export function FeedbackModal({ sidebarOpen = true }: FeedbackModalProps) {
+  const [mounted, setMounted] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [subject, setSubject] = useState("suggestion")
   const [message, setMessage] = useState("")
-  const { user, profile } = useAuth()
-  const pathname = usePathname()
+  const { user, profile } = useAuth()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -68,21 +73,30 @@ export function FeedbackModal({ sidebarOpen = true }: FeedbackModalProps) {
     } finally {
       setLoading(false)
     }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <button
-          className={cn(
-            "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all w-full text-left",
-            "text-slate-600 hover:text-primary hover:bg-primary/5 dark:text-slate-300 dark:hover:bg-primary/10"
-          )}
-        >
-          <MessageSquarePlus className="h-5 w-5" />
-          {sidebarOpen && <span>Feedback</span>}
-        </button>
-      </DialogTrigger>
+  }
+
+  const trigger = (
+    <button
+      className={cn(
+        "flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all w-full text-left",
+        "text-slate-600 hover:text-primary hover:bg-primary/5 dark:text-slate-300 dark:hover:bg-primary/10"
+      )}
+      type="button"
+    >
+      <MessageSquarePlus className="h-5 w-5" />
+      {sidebarOpen && <span>Feedback</span>}
+    </button>
+  )
+
+  if (!mounted) {
+    return trigger
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger}
+      </DialogTrigger>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle>Send Feedback</DialogTitle>

package/templates/nextblock-template/app/cms/coupons/[id]/edit/page.tsx

@@ -0,0 +1,16 @@
+import { EditCouponPage as EditCouponPageUI } from '@nextblock-cms/ecommerce/server';
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+import { redirect } from 'next/navigation';
+
+export default async function EditCouponPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const isOnline = await verifyPackageOnline('ecommerce');
+  if (!isOnline) {
+    redirect('/cms/settings/packages');
+  }
+
+  return <EditCouponPageUI params={params} />;
+}

package/templates/nextblock-template/app/cms/coupons/page.tsx

@@ -0,0 +1,16 @@
+import { CouponsPage as CouponsPageUI } from '@nextblock-cms/ecommerce/server';
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+import { redirect } from 'next/navigation';
+
+export default async function CouponsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ status?: string; q?: string }>;
+}) {
+  const isOnline = await verifyPackageOnline('ecommerce');
+  if (!isOnline) {
+    redirect('/cms/settings/packages');
+  }
+
+  return <CouponsPageUI searchParams={await searchParams} />;
+}

package/templates/nextblock-template/app/cms/custom-blocks/[id]/edit/page.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import Link from "next/link";
+import { ArrowLeft, AlertCircle } from "lucide-react";
+import { Button } from "@nextblock-cms/ui";
+import { BlockComposer } from "../../components/BlockComposer";
+import { getCustomBlockDefinition } from "../../actions";
+
+interface EditCustomBlockPageProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+export const dynamic = "force-dynamic";
+
+export default async function EditCustomBlockPage(props: EditCustomBlockPageProps) {
+  const params = await props.params;
+  const blockId = params.id;
+
+  try {
+    const res = await getCustomBlockDefinition(blockId);
+
+    if (!res.success || !res.data) {
+      return (
+        <div className="flex flex-col items-center justify-center text-center py-16 px-4 max-w-md mx-auto">
+          <div className="h-12 w-12 rounded-full bg-destructive/10 flex items-center justify-center text-destructive mb-4">
+            <AlertCircle className="h-6 w-6" />
+          </div>
+          <h3 className="text-lg font-semibold">Block Not Found</h3>
+          <p className="text-sm text-muted-foreground mt-2">
+            The custom block definition you are trying to edit could not be loaded. It may have been deleted or does not exist.
+          </p>
+          <Button asChild className="mt-6" variant="outline">
+            <Link href="/cms/custom-blocks">
+              <ArrowLeft className="mr-2 h-4 w-4" /> Back to Blocks
+            </Link>
+          </Button>
+        </div>
+      );
+    }
+
+    return (
+      <div className="w-full">
+        <BlockComposer initialData={res.data} mode="edit" />
+      </div>
+    );
+  } catch (err) {
+    console.error("Error loading custom block definition for edit:", err);
+    return (
+      <div className="flex flex-col items-center justify-center text-center py-16 px-4 max-w-md mx-auto">
+        <div className="h-12 w-12 rounded-full bg-destructive/10 flex items-center justify-center text-destructive mb-4">
+          <AlertCircle className="h-6 w-6" />
+        </div>
+        <h3 className="text-lg font-semibold">Unexpected Error</h3>
+        <p className="text-sm text-muted-foreground mt-2">
+          An error occurred while trying to load the custom block definition. Please try again.
+        </p>
+        <Button asChild className="mt-6" variant="outline">
+          <Link href="/cms/custom-blocks">
+            <ArrowLeft className="mr-2 h-4 w-4" /> Back to Blocks
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+}