create-nextblock 0.2.78 → 0.8.0

package/templates/nextblock-template/app/cms/pages/components/PageForm.tsx

@@ -1,7 +1,7 @@
 // app/cms/pages/components/PageForm.tsx
 "use client";
 
-import { useEffect, useState, useTransition } from "react";
+import { useEffect, useRef, useState, useTransition } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@nextblock-cms/ui";
 import { Spinner, Alert, AlertDescription } from "@nextblock-cms/ui";
@@ -16,9 +16,9 @@ import {
 } from "@nextblock-cms/ui";
 import { Textarea } from "@nextblock-cms/ui";
 import type { Database } from "@nextblock-cms/db";
-import { useAuth } from "@/context/AuthContext";
-import { useRef } from "react";
-import { useHotkeys } from "@/hooks/use-hotkeys";
+import { useAuth } from '../../../../context/AuthContext';
+import { useHotkeys } from '../../../../hooks/use-hotkeys';
+import FeatureImageField from "../../components/FeatureImageField";
 
 type Page = Database['public']['Tables']['pages']['Row'];
 type PageStatus = Database['public']['Enums']['page_status'];
@@ -26,13 +26,15 @@ type Language = Database['public']['Tables']['languages']['Row'];
 // Remove: import { getActiveLanguagesClientSide } from "@nextblock-cms/db";
 
 interface PageFormProps {
-  page?: Page | null;
+  page?: (Page & { feature_image_id?: string | null }) | null;
   formAction: (formData: FormData) => Promise<{ error?: string } | void>;
   actionButtonText?: string;
   isEditing?: boolean;
   availableLanguagesProp: Language[]; // New prop
   translationGroupId?: string;
   target_lang_id?: string;
+  initialFeatureImageUrl?: string | null;
+  initialFeatureImageId?: string | null;
 }
 
 export default function PageForm({
@@ -43,6 +45,8 @@ export default function PageForm({
   availableLanguagesProp, // Use the new prop
   translationGroupId,
   target_lang_id,
+  initialFeatureImageUrl,
+  initialFeatureImageId,
 }: PageFormProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -77,6 +81,9 @@ export default function PageForm({
   const [metaDescription, setMetaDescription] = useState(
     page?.meta_description || ""
   );
+  const [featureImageId, setFeatureImageId] = useState<string | null>(
+    initialFeatureImageId || page?.feature_image_id || null
+  );
 
   // Use the passed-in languages
   const [availableLanguages] = useState<Language[]>(availableLanguagesProp);
@@ -84,6 +91,13 @@ export default function PageForm({
   // const [languagesLoading, setLanguagesLoading] = useState(true); // Remove or set to false initially
 
   const [formMessage, setFormMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [lastSaved, setLastSaved] = useState<Date | null>(null);
+  const isFirstRender = useRef(true);
+
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
 
   useEffect(() => {
     const successMessage = searchParams.get('success');
@@ -95,7 +109,29 @@ export default function PageForm({
     }
   }, [searchParams]);
 
+  useEffect(() => {
+    if (!page) {
+      return;
+    }
 
+    setTitle(page.title || "");
+    setSlug(page.slug || "");
+    setLanguageId(page.language_id?.toString() || "");
+    setStatus(page.status || "draft");
+    setMetaTitle(page.meta_title || "");
+    setMetaDescription(page.meta_description || "");
+    setFeatureImageId(initialFeatureImageId || page.feature_image_id || null);
+  }, [
+    initialFeatureImageId,
+    page?.id,
+    page?.language_id,
+    page?.meta_description,
+    page?.meta_title,
+    page?.slug,
+    page?.status,
+    page?.title,
+    page?.updated_at,
+  ]);
 
   const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newTitle = e.target.value;
@@ -105,19 +141,89 @@ export default function PageForm({
     }
   };
 
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setFormMessage(null);
-    const formData = new FormData(event.currentTarget);
+  const saveDraft = async (customFormData?: FormData) => {
+    if (!title.trim() || !slug.trim()) {
+      return;
+    }
+    setIsSaving(true);
+    setSaveError(null);
+
+    const formData = customFormData || (formRef.current ? new FormData(formRef.current) : new FormData());
+    if (!customFormData && !formRef.current) {
+      formData.append("title", title);
+      formData.append("slug", slug);
+      formData.append("language_id", languageId);
+      formData.append("status", status);
+      formData.append("meta_title", metaTitle);
+      formData.append("meta_description", metaDescription);
+      formData.append("feature_image_id", featureImageId || "");
+      if (translationGroupId) {
+        formData.append("translation_group_id", translationGroupId);
+      }
+    }
 
-    startTransition(async () => {
+    try {
       const result = await formAction(formData);
-      if (result?.error) {
+      if (result && 'error' in result && result.error) {
+        setSaveError(result.error);
         setFormMessage({ type: 'error', text: result.error });
+      } else {
+        setLastSaved(new Date());
+        setFormMessage(null);
+        router.refresh();
       }
-    });
+    } catch (err: any) {
+      const msg = err.message || "Failed to save draft";
+      setSaveError(msg);
+      setFormMessage({ type: 'error', text: msg });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!isEditing) {
+      setFormMessage(null);
+      const formData = new FormData(event.currentTarget);
+
+      startTransition(async () => {
+        const result = await formAction(formData);
+        if (result?.error) {
+          setFormMessage({ type: 'error', text: result.error });
+        }
+      });
+    } else {
+      await saveDraft();
+    }
   };
 
+  useEffect(() => {
+    if (!isEditing) return;
+
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    const hasChanges =
+      title !== (page?.title || "") ||
+      slug !== (page?.slug || "") ||
+      languageId !== (page?.language_id?.toString() || "") ||
+      status !== (page?.status || "draft") ||
+      metaTitle !== (page?.meta_title || "") ||
+      metaDescription !== (page?.meta_description || "") ||
+      featureImageId !== (page?.feature_image_id || null);
+
+    if (!hasChanges) return;
+
+    const timer = setTimeout(() => {
+      saveDraft();
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [title, slug, languageId, status, metaTitle, metaDescription, featureImageId, page, isEditing]);
+
   // Removed languagesLoading from this condition
   if (authLoading) {
     return <div>Loading form...</div>;
@@ -127,12 +233,32 @@ export default function PageForm({
     return <div>Please log in to manage pages.</div>;
   }
 
-  const formRef = useRef<HTMLFormElement>(null);
-  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
-
   return (
-    <form ref={formRef} onSubmit={handleSubmit} className="space-y-6 w-full mx-auto px-6">
-      {/* ... (rest of the form remains the same, but `availableLanguages` is now populated by the prop) ... */}
+    <form ref={formRef} onSubmit={handleSubmit} className="space-y-4 w-full mx-auto px-6">
+      {isEditing && (
+        <div className="flex items-center justify-between text-xs text-muted-foreground pb-2 border-b border-border/40 mb-2">
+          <span className="font-semibold text-[11px] uppercase tracking-wider text-muted-foreground/80">Page Settings</span>
+          <div className="flex items-center gap-1.5 min-h-[16px]">
+            {isSaving ? (
+              <>
+                <div className="relative flex h-2 w-2">
+                  <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 w-2 bg-amber-500"></span>
+                </div>
+                <span className="text-amber-600 dark:text-amber-400 font-medium">Autosaving settings...</span>
+              </>
+            ) : saveError ? (
+              <span className="text-red-500 font-medium">Error saving settings: {saveError}</span>
+            ) : lastSaved ? (
+              <span className="text-emerald-600 dark:text-emerald-400 font-medium">
+                Settings autosaved at {lastSaved.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+              </span>
+            ) : (
+              <span className="text-muted-foreground/60">Settings autosave in draft mode</span>
+            )}
+          </div>
+        </div>
+      )}
       {formMessage && (
         <Alert variant={formMessage.type === 'success' ? 'success' : 'destructive'} className="mb-4">
            <AlertDescription>{formMessage.text}</AlertDescription>
@@ -141,119 +267,144 @@ export default function PageForm({
       {translationGroupId && (
         <input type="hidden" name="translation_group_id" value={translationGroupId} />
       )}
-      <div>
-        <Label htmlFor="title">Title</Label>
-        <Input
-          id="title"
-          name="title"
-          value={title}
-          onChange={handleTitleChange}
-          required
-          className="mt-1"
-        />
-      </div>
 
-      <div>
-        <Label htmlFor="slug">Slug</Label>
-        <Input
-          id="slug"
-          name="slug"
-          value={slug}
-          onChange={(e) => setSlug(e.target.value)}
-          required
-          className="mt-1"
-        />
-        <p className="text-xs text-muted-foreground mt-1">URL-friendly identifier. Auto-generated from title if left empty on creation.</p>
-      </div>
+      {/* Row 1: Basic Page Information */}
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
+        {/* Title */}
+        <div className="md:col-span-4 flex flex-col gap-1">
+          <Label htmlFor="title" className="text-xs font-medium">Title</Label>
+          <Input
+            id="title"
+            name="title"
+            value={title}
+            onChange={handleTitleChange}
+            required
+            className="h-9"
+          />
+        </div>
+
+        {/* Slug */}
+        <div className="md:col-span-4 flex flex-col gap-1">
+          <Label htmlFor="slug" className="text-xs font-medium">Slug</Label>
+          <Input
+            id="slug"
+            name="slug"
+            value={slug}
+            onChange={(e) => setSlug(e.target.value)}
+            required
+            className="h-9"
+          />
+          <p className="text-[10px] text-muted-foreground mt-0.5 leading-tight truncate" title="URL-friendly identifier. Auto-generated from title if left empty on creation.">
+            URL-friendly identifier. Auto-generated from title if left empty.
+          </p>
+        </div>
 
-      <div>
-        <Label htmlFor="language_id">Language</Label>
-        {availableLanguages.length > 0 ? (
+        {/* Language */}
+        <div className="md:col-span-2 flex flex-col gap-1">
+          <Label htmlFor="language_id" className="text-xs font-medium">Language</Label>
+          {availableLanguages.length > 0 ? (
+            <Select
+              name="language_id"
+              defaultValue={target_lang_id}
+              value={languageId}
+              onValueChange={setLanguageId}
+              required
+            >
+              <SelectTrigger className="h-9">
+                <SelectValue placeholder="Select language" />
+              </SelectTrigger>
+              <SelectContent>
+                {availableLanguages.map((lang) => (
+                  <SelectItem key={lang.id} value={lang.id.toString()}>
+                    {lang.name} ({lang.code})
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <p className="text-xs text-muted-foreground py-2 leading-none">No languages available.</p>
+          )}
+        </div>
+
+        {/* Status */}
+        <div className="md:col-span-2 flex flex-col gap-1">
+          <Label htmlFor="status" className="text-xs font-medium">Status</Label>
           <Select
-            name="language_id"
-            defaultValue={target_lang_id}
-            value={languageId}
-            onValueChange={setLanguageId}
+            name="status"
+            value={status}
+            onValueChange={(value) => setStatus(value as PageStatus)}
             required
           >
-            <SelectTrigger className="mt-1">
-              <SelectValue placeholder="Select language" />
+            <SelectTrigger className="h-9">
+              <SelectValue placeholder="Select status" />
             </SelectTrigger>
             <SelectContent>
-              {availableLanguages.map((lang) => (
-                <SelectItem key={lang.id} value={lang.id.toString()}>
-                  {lang.name} ({lang.code})
-                </SelectItem>
-              ))}
+              <SelectItem value="draft">Draft</SelectItem>
+              <SelectItem value="published">Published</SelectItem>
+              <SelectItem value="archived">Archived</SelectItem>
             </SelectContent>
           </Select>
-        ) : (
-          <p className="text-sm text-muted-foreground mt-1">No languages available. Please add languages in CMS settings.</p>
-        )}
+        </div>
       </div>
 
-      <div>
-        <Label htmlFor="status">Status</Label>
-        <Select
-          name="status"
-          value={status}
-          onValueChange={(value) => setStatus(value as PageStatus)}
-          required
-        >
-          <SelectTrigger className="mt-1">
-            <SelectValue placeholder="Select status" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="draft">Draft</SelectItem>
-            <SelectItem value="published">Published</SelectItem>
-            <SelectItem value="archived">Archived</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+      {/* Row 2: SEO Settings */}
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
+        {/* Meta Title */}
+        <div className="md:col-span-4 flex flex-col gap-1">
+          <Label htmlFor="meta_title" className="text-xs font-medium">Meta Title (SEO)</Label>
+          <Input
+            id="meta_title"
+            name="meta_title"
+            value={metaTitle}
+            onChange={(e) => setMetaTitle(e.target.value)}
+            className="h-9"
+          />
+        </div>
 
-      <div>
-        <Label htmlFor="meta_title">Meta Title (SEO)</Label>
-        <Input
-          id="meta_title"
-          name="meta_title"
-          value={metaTitle}
-          onChange={(e) => setMetaTitle(e.target.value)}
-          className="mt-1"
-        />
+        {/* Meta Description */}
+        <div className="md:col-span-8 flex flex-col gap-1">
+          <Label htmlFor="meta_description" className="text-xs font-medium">Meta Description (SEO)</Label>
+          <Textarea
+            id="meta_description"
+            name="meta_description"
+            value={metaDescription}
+            onChange={(e) => setMetaDescription(e.target.value)}
+            className="min-h-[36px] h-9 py-1.5 resize-y text-sm leading-normal"
+            rows={1}
+            placeholder="Meta description for search engines..."
+          />
+        </div>
       </div>
 
-      <div>
-        <Label htmlFor="meta_description">Meta Description (SEO)</Label>
-        <Textarea
-          id="meta_description"
-          name="meta_description"
-          value={metaDescription}
-          onChange={(e) => setMetaDescription(e.target.value)}
-          className="mt-1"
-          rows={3}
-        />
-      </div>
+      <FeatureImageField
+        initialImageId={initialFeatureImageId || page?.feature_image_id || null}
+        initialImageUrl={initialFeatureImageUrl || null}
+        onImageIdChange={setFeatureImageId}
+        uploadFolder={`pages/${(slug || 'untitled').toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-_]/g, '')}/`}
+      />
 
-      <div className="flex justify-end space-x-3">
-        <Button
-          type="button"
-          variant="outline"
-          onClick={() => router.push("/cms/pages")}
-          disabled={isPending}
-        >
-          Cancel
-        </Button>
-        {/* Ensure button is not disabled due to removed languagesLoading */}
-        <Button type="submit" disabled={isPending || authLoading || availableLanguages.length === 0}>
-          {isPending ? (
-            <>
-              <Spinner className="mr-2 h-4 w-4" /> Saving...
-            </>
-          ) : (
-            actionButtonText
-          )}
-        </Button>
-      </div>
+      {!isEditing && (
+        <div className="flex justify-end space-x-3">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => router.push("/cms/pages")}
+            disabled={isPending}
+          >
+            Cancel
+          </Button>
+          {/* Ensure button is not disabled due to removed languagesLoading */}
+          <Button type="submit" disabled={isPending || authLoading || availableLanguages.length === 0}>
+            {isPending ? (
+              <>
+                <Spinner className="mr-2 h-4 w-4" /> Saving...
+              </>
+            ) : (
+              actionButtonText
+            )}
+          </Button>
+        </div>
+      )}
     </form>
   );
-}
+}

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

@@ -27,12 +27,13 @@ import {
   DropdownMenuSeparator,
 } from "@nextblock-cms/ui";
 // Server action `deletePage` is used by DeletePageButtonClient
-import type { Database } from "@nextblock-cms/db";
-import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
-
-type Page = Database["public"]["Tables"]["pages"]["Row"];
-import LanguageFilterSelect from "@/app/cms/components/LanguageFilterSelect";
-import DeletePageButtonClient from "./components/DeletePageButtonClient"; // Import the client component
+import type { Database } from "@nextblock-cms/db";
+import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
+
+type Page = Database["public"]["Tables"]["pages"]["Row"];
+import LanguageFilterSelect from "../components/LanguageFilterSelect";
+import DeletePageButtonClient from "./components/DeletePageButtonClient"; // Import the client component
+import { ContentTransferControls } from "../import-export/ContentTransferControls";
 
 async function getPagesWithDetails(
   filterLanguageId?: number
@@ -95,11 +96,16 @@ export default async function CmsPagesListPage(props: CmsPagesListPageProps) {
   return (
     <div className="w-full">
       <div className="flex justify-between items-center mb-6 flex-wrap gap-4">
-        <h1 className="text-2xl font-semibold">Manage Pages</h1>
-        <div className="flex items-center gap-3">
-          <LanguageFilterSelect
-            allLanguages={allLanguages}
-            currentFilterLangId={filterLangId}
+        <h1 className="text-2xl font-semibold">Manage Pages</h1>
+        <div className="flex items-center gap-3">
+          <ContentTransferControls
+            contentType="pages"
+            label="Pages"
+            languageId={filterLangId}
+          />
+          <LanguageFilterSelect
+            allLanguages={allLanguages}
+            currentFilterLangId={filterLangId}
             basePath="/cms/pages"
           />
           <Button variant="default" asChild>
@@ -198,13 +204,14 @@ export default async function CmsPagesListPage(props: CmsPagesListPageProps) {
                   </TableCell>
                   <TableCell className="text-right">
                     <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon">
-                          <MoreHorizontal className="h-4 w-4" />
-                          <span className="sr-only">
-                            Page actions for {page.title}
-                          </span>
-                        </Button>
+                      <DropdownMenuTrigger
+                        id={`page-trigger-${page.id}`}
+                        className="inline-flex h-10 w-10 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+                      >
+                        <MoreHorizontal className="h-4 w-4" />
+                        <span className="sr-only">
+                          Page actions for {page.title}
+                        </span>
                       </DropdownMenuTrigger>
                       <DropdownMenuContent align="end">
                         <DropdownMenuItem asChild>

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

@@ -0,0 +1,16 @@
+import { PaymentsPage as PaymentsPageUI } from '@nextblock-cms/ecommerce/server';
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+import { redirect } from 'next/navigation';
+
+export const metadata = {
+  title: 'Payments Settings | NextBlock™ CMS',
+};
+
+export default async function PaymentsPageWrapper() {
+  const isOnline = await verifyPackageOnline('ecommerce');
+  if (!isOnline) {
+      redirect('/cms/settings/packages');
+  }
+
+  return <PaymentsPageUI />;
+}