create-nextblock 0.14.2 → 0.14.5

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

@@ -1,7 +1,7 @@
 import { verifyPackageOnline, getActiveLanguagesServerSide } from '@nextblock-cms/db/server';
 import { redirect, notFound } from 'next/navigation';
 import Link from 'next/link';
-import { ArrowLeft, ChevronDown } from 'lucide-react';
+import { ArrowLeft, ChevronDown, Eye, FilePenLine } from 'lucide-react';
 import {
   Badge,
   Button,
@@ -11,7 +11,6 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuButtonTrigger,
-  ViewLiveButton,
 } from '@nextblock-cms/ui';
 import ProductFormClientShell from '../../ProductFormClientShell';
 import {
@@ -22,7 +21,6 @@ import {
   getStoreConfigStatus,
   normalizeCurrencyRecord,
   updateProductAction,
-  publishProductAction,
   getCategoriesWithCount,
   getProductCategories,
 } from '@nextblock-cms/ecommerce/server';
@@ -33,6 +31,9 @@ import {
 } from '../../productFormData';
 import { CortexAiPageContextRegistrar } from '../../../components/CortexAiPageContext';
 import BlockEditorArea from '../../../blocks/components/BlockEditorArea';
+import VisibilityControl from '../../../components/VisibilityControl';
+import RevisionHistoryButton from '../../../revisions/RevisionHistoryButton';
+import { buildViewUrl } from '../../../../../lib/publishing/viewUrl';
 
 export default async function EditProductPage({
   params,
@@ -112,6 +113,17 @@ export default async function EditProductPage({
   const buildTranslationCreateHref = (languageId: number) =>
     `/cms/products/new?from_group=${product.translation_group_id}&target_lang_id=${languageId}`;
   const globalAttributes = buildGlobalAttributesForForm(globalAttributesRaw || []);
+  const productLanguage = languages.find((language) => language.id === product.language_id);
+
+  // The Status select used to sit inside ProductForm, where submitting with
+  // status "active" was blocked unless the payment provider was enabled and
+  // configured. Publishing now happens outside the form, so that guard has to
+  // travel with it — a product nobody can pay for should not reach the storefront.
+  const productProvider = product.payment_provider as 'stripe' | 'freemius' | undefined;
+  const publishBlockedReason =
+    productProvider && (!enabledProviders[productProvider] || !configStatus[productProvider].hasKeys)
+      ? `${productProvider === 'stripe' ? 'Stripe' : 'Freemius'} must be enabled and fully configured before this product can be published.`
+      : null;
 
   const { data: draftData } = await supabase
     .from('product_drafts')
@@ -270,13 +282,55 @@ export default async function EditProductPage({
           ) : null}
 
           {product.slug ? (
-            <ViewLiveButton
-              href={`/product/${product.slug}`}
-              isLive={product.status === 'active'}
-              label="product"
-              publishAction={publishProductAction.bind(null, product.id)}
-            />
+            <>
+              <Button variant="secondary" asChild>
+                <a
+                  href={buildViewUrl({
+                    path: `/product/${product.slug}`,
+                    languageCode: productLanguage?.code ?? null,
+                    draft: true,
+                  })}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FilePenLine className="mr-2 h-4 w-4" /> Preview
+                </a>
+              </Button>
+              {product.status === 'active' ? (
+                <Button variant="outline" asChild>
+                  <a
+                    href={buildViewUrl({
+                      path: `/product/${product.slug}`,
+                      languageCode: productLanguage?.code ?? null,
+                    })}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Eye className="mr-2 h-4 w-4" /> View Live
+                  </a>
+                </Button>
+              ) : null}
+            </>
           ) : null}
+
+          <RevisionHistoryButton parentType="product" parentId={product.id} />
+
+          <VisibilityControl
+            type="product"
+            id={product.id}
+            status={product.status}
+            publishedAt={(product as { published_at?: string | null }).published_at ?? null}
+            publicPath={`/product/${product.slug}`}
+            languageName={
+              productLanguage
+                ? `${productLanguage.name} (${productLanguage.code.toUpperCase()})`
+                : undefined
+            }
+            translationGroupId={product.translation_group_id}
+            languages={languages}
+            hasDraft={hasDraft}
+            publishBlockedReason={publishBlockedReason}
+          />
         </div>
       </div>
 

package/templates/nextblock-template/app/cms/revisions/RevisionHistoryButton.tsx

@@ -12,17 +12,28 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@nextblock-cms/ui";
-import { listPageRevisions, listPostRevisions, restorePageVersion, restorePostVersion, comparePageVersion, comparePostVersion } from './actions';
+import {
+  listPageRevisions,
+  listPostRevisions,
+  listProductRevisions,
+  restorePageVersion,
+  restorePostVersion,
+  restoreProductVersion,
+  comparePageVersion,
+  comparePostVersion,
+  compareProductVersion,
+} from './actions';
 import { useRouter } from 'next/navigation';
 import JsonDiffView from './JsonDiffView';
 import { formatDistanceToNow } from 'date-fns';
 import { toast } from 'react-hot-toast';
 
-type ParentType = 'page' | 'post';
+type ParentType = 'page' | 'post' | 'product';
 
 interface RevisionHistoryButtonProps {
   parentType: ParentType;
-  parentId: number;
+  /** Pages and posts are keyed by bigint; products by uuid. */
+  parentId: number | string;
 }
 
 type RevisionItem = {
@@ -32,6 +43,28 @@ type RevisionItem = {
   created_at: string;
   author_id: string | null;
   author?: { full_name?: string | null } | null;
+  has_changes?: boolean;
+};
+
+type ListResult = { error: string } | { revisions: unknown[]; currentVersion: number | null; totalPages: number };
+type RestoreResult = { error: string } | { success: true; version: number };
+type CompareResult = { success: true; current: unknown; target: unknown } | { error: string };
+
+/**
+ * Exhaustive dispatch, one entry per parent type.
+ *
+ * Deliberately a lookup rather than an `if page / else` chain: with three parent types a
+ * bare `else` silently routes products into the post actions, which type-checks cleanly
+ * because both take an id and a version.
+ */
+const REVISION_API: Record<ParentType, {
+  list: (id: any, page: number, start?: string, end?: string) => Promise<ListResult>;
+  restore: (id: any, version: number) => Promise<RestoreResult>;
+  compare: (id: any, version: number) => Promise<CompareResult>;
+}> = {
+  page: { list: listPageRevisions, restore: restorePageVersion, compare: comparePageVersion },
+  post: { list: listPostRevisions, restore: restorePostVersion, compare: comparePostVersion },
+  product: { list: listProductRevisions, restore: restoreProductVersion, compare: compareProductVersion },
 };
 
 import { Input } from "@nextblock-cms/ui";
@@ -53,20 +86,17 @@ export default function RevisionHistoryButton({ parentType, parentId }: Revision
   const router = useRouter();
   const [compareLoading, setCompareLoading] = useState(false);
   const [activeCompareVersion, setActiveCompareVersion] = useState<number | null>(null);
+  const [restoringVersion, setRestoringVersion] = useState<number | null>(null);
   const [leftText, setLeftText] = useState<string | null>(null);
   const [rightText, setRightText] = useState<string | null>(null);
 
+  const api = REVISION_API[parentType];
+
   const loadRevisions = async (pageToLoad: number, start?: string, end?: string) => {
     setLoading(true);
     setError(null);
     try {
-      let res;
-      // Pass date range to actions
-      if (parentType === 'page') {
-        res = await listPageRevisions(parentId, pageToLoad, start, end);
-      } else {
-        res = await listPostRevisions(parentId, pageToLoad, start, end);
-      }
+      const res = await api.list(parentId, pageToLoad, start, end);
 
       if ('error' in res) {
         setError(res.error ?? 'Unknown error');
@@ -122,37 +152,35 @@ export default function RevisionHistoryButton({ parentType, parentId }: Revision
   const handleRestore = (version: number) => {
     setMessage(null);
     setError(null);
+    setRestoringVersion(version);
     startTransition(async () => {
       try {
-        const res = parentType === 'page'
-          ? await restorePageVersion(parentId, version)
-          : await restorePostVersion(parentId, version);
+        const res = await api.restore(parentId, version);
         if ('error' in res) {
           setError(res.error ?? 'Unknown error');
           toast.error(res.error ?? 'Failed to restore version');
           return;
         }
-        setMessage('Version restored successfully.');
+        setMessage(`Version ${version} restored as version ${res.version}.`);
         toast.success('Version restored successfully');
         router.refresh();
         setTimeout(() => setOpen(false), 800);
       } catch (e: unknown) {
         setError(e instanceof Error ? e.message : 'Failed to restore version');
         toast.error(e instanceof Error ? e.message : 'Failed to restore version');
+      } finally {
+        setRestoringVersion(null);
       }
     });
   };
 
-  type CompareResult = { success: true; current: unknown; target: unknown } | { error: string };
   const handleCompare = async (version: number) => {
     setError(null);
     setMessage(null);
     setActiveCompareVersion(version);
     setCompareLoading(true);
     try {
-      const res: CompareResult = parentType === 'page'
-        ? await comparePageVersion(parentId, version)
-        : await comparePostVersion(parentId, version);
+      const res = await api.compare(parentId, version);
       if ('error' in res) {
         setError(res.error);
         setLeftText(null);
@@ -245,25 +273,31 @@ export default function RevisionHistoryButton({ parentType, parentId }: Revision
                      </div>
 
                     <div className="flex gap-2">
-                      {!isCurrent && (
+                      {/* A row with no differences against the live content is labelled, not
+                          hidden: `invisible` left an interactive-looking blank where the
+                          buttons should be, which reads as a broken dialog. */}
+                      {!isCurrent && rev.has_changes === false && (
+                        <span className="text-xs text-muted-foreground italic px-2 self-center">Identical to current</span>
+                      )}
+                      {!isCurrent && rev.has_changes !== false && (
                         <>
-                          <Button 
-                            variant="outline" 
-                            size="sm" 
-                            onClick={() => handleCompare(rev.version)} 
-                            disabled={compareLoading && activeCompareVersion === rev.version || (rev as any).has_changes === false} 
-                            className={cn("h-8 px-2 text-xs text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700", (rev as any).has_changes === false && "invisible pointer-events-none")}
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleCompare(rev.version)}
+                            disabled={compareLoading && activeCompareVersion === rev.version}
+                            className="h-8 px-2 text-xs text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700"
                           >
                             {compareLoading && activeCompareVersion === rev.version ? <><Spinner className="mr-1 h-3 w-3" /> compare</> : 'Compare'}
                           </Button>
-                          <Button 
-                            variant="destructive" 
-                            size="sm" 
-                            onClick={() => handleRestore(rev.version)} 
-                            disabled={isPending || (rev as any).has_changes === false} 
-                            className={cn("h-8 px-2 text-xs", (rev as any).has_changes === false && "invisible pointer-events-none")}
+                          <Button
+                            variant="destructive"
+                            size="sm"
+                            onClick={() => handleRestore(rev.version)}
+                            disabled={isPending}
+                            className="h-8 px-2 text-xs"
                           >
-                            {isPending ? <Spinner className="h-3 w-3" /> : 'Restore'}
+                            {isPending && restoringVersion === rev.version ? <Spinner className="h-3 w-3" /> : 'Restore'}
                           </Button>
                         </>
                       )}