create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/app/cms/products/ClientNotionEditor.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+export interface EditorProps {
+  initialContent?: any;
+  onUpdate?: (content: any) => void;
+  showAiPrompt?: boolean;
+}
+
+export const ClientNotionEditor = dynamic<EditorProps>(
+  () => import('@nextblock-cms/editor').then((mod) => mod.NotionEditor as any),
+  { ssr: false }
+);
+
+export default ClientNotionEditor;

package/templates/nextblock-template/app/cms/products/ProductFormClientShell.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import React from 'react';
+import { ProductForm } from '@nextblock-cms/ecommerce';
+import MediaPickerDialog from '../media/components/MediaPickerDialog';
+type ProductFormClientShellProps = React.ComponentProps<typeof ProductForm>;
+
+const productFormSkeletonRows = ['details', 'description', 'media', 'inventory'];
+
+export default function ProductFormClientShell(props: ProductFormClientShellProps) {
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return <ProductFormShellSkeleton />;
+  }
+
+  return (
+    <ProductForm
+      {...props}
+      mediaPickerNode={
+        <MediaPickerDialog
+          triggerLabel="+ Add Image"
+          triggerVariant="outline"
+          defaultFolder="uploads/products/"
+        />
+      }
+    />
+  );
+}
+
+function ProductFormShellSkeleton() {
+  return (
+    <div className="space-y-8" aria-hidden="true">
+      <div className="space-y-3">
+        <div className="h-8 w-56 rounded-md bg-muted" />
+        <div className="h-4 w-80 max-w-full rounded-md bg-muted/70" />
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="h-24 rounded-lg border bg-muted/30" />
+        <div className="h-24 rounded-lg border bg-muted/30" />
+      </div>
+
+      {productFormSkeletonRows.map((row) => (
+        <div key={row} className="rounded-lg border p-4">
+          <div className="mb-4 h-5 w-40 rounded-md bg-muted" />
+          <div className="h-32 rounded-md bg-muted/30" />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,292 @@
+import { verifyPackageOnline, getActiveLanguagesServerSide } from '@nextblock-cms/db/server';
+import { redirect, notFound } from 'next/navigation';
+import Link from 'next/link';
+import { ArrowLeft, ChevronDown, ExternalLink } from 'lucide-react';
+import {
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@nextblock-cms/ui';
+import ProductFormClientShell from '../../ProductFormClientShell';
+import DraftStatusActions from '../../../components/DraftStatusActions';
+import {
+  getCmsProduct,
+  getEnabledPaymentProviders,
+  getGlobalProductAttributes,
+  getProductTranslations,
+  getStoreConfigStatus,
+  normalizeCurrencyRecord,
+  updateProductAction,
+  getCategoriesWithCount,
+  getProductCategories,
+} from '@nextblock-cms/ecommerce/server';
+import { createClient } from '@nextblock-cms/db/server';
+import {
+  buildGlobalAttributesForForm,
+  buildProductFormInitialData,
+} from '../../productFormData';
+import { CortexAiPageContextRegistrar } from '../../../components/CortexAiPageContext';
+import BlockEditorArea from '../../../blocks/components/BlockEditorArea';
+
+export default async function EditProductPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ missing_lang_id?: string }>;
+}) {
+  const [
+    { id },
+    { missing_lang_id },
+    isOnline,
+    languages,
+    enabledProviders,
+    configStatus,
+  ] =
+    await Promise.all([
+      params,
+      searchParams,
+      verifyPackageOnline('ecommerce'),
+      getActiveLanguagesServerSide(),
+      getEnabledPaymentProviders(),
+      getStoreConfigStatus(),
+    ]);
+
+  if (!isOnline) {
+    redirect('/cms/settings/packages');
+  }
+
+  const product = await getCmsProduct(id);
+
+  if (!product) {
+    notFound();
+  }
+
+  const [globalAttributesRaw, translations, allCategories, assignedCategories] = await Promise.all([
+    getGlobalProductAttributes(),
+    product.translation_group_id ? getProductTranslations(product.translation_group_id) : Promise.resolve([]),
+    getCategoriesWithCount(),
+    getProductCategories(product.id),
+  ]);
+  const supabase = createClient();
+  const { data: currenciesResult } = await supabase
+    .from('currencies')
+    .select(
+      'code, symbol, exchange_rate, is_default, is_active, auto_sync_product_prices, auto_update_exchange_rate, exchange_rate_source, exchange_rate_updated_at, rounding_mode, rounding_increment, rounding_charm_amount'
+    )
+    .eq('is_active', true)
+    .order('code', { ascending: true });
+  const currencies = (currenciesResult ?? []).map((currency) =>
+    normalizeCurrencyRecord(currency)
+  );
+
+  const missingLanguageId = missing_lang_id ? parseInt(missing_lang_id, 10) : null;
+  const missingLanguage =
+    missingLanguageId && Number.isFinite(missingLanguageId)
+      ? languages.find((language) => language.id === missingLanguageId)
+      : null;
+  const translationByLanguageId = new Map(
+    translations.map((translation: any) => [translation.language_id, translation])
+  );
+  const existingLanguages = languages.filter(
+    (language) => language.id === product.language_id || translationByLanguageId.has(language.id)
+  );
+  const missingLanguages = languages.filter(
+    (language) => language.id !== product.language_id && !translationByLanguageId.has(language.id)
+  );
+  const primaryCreateLanguage =
+    missingLanguage && missingLanguages.some((language) => language.id === missingLanguage.id)
+      ? missingLanguage
+      : missingLanguages.length === 1
+        ? missingLanguages[0]
+        : null;
+  const additionalCreateLanguages = missingLanguages.filter(
+    (language) => language.id !== primaryCreateLanguage?.id
+  );
+  const buildTranslationCreateHref = (languageId: number) =>
+    `/cms/products/new?from_group=${product.translation_group_id}&target_lang_id=${languageId}`;
+  const globalAttributes = buildGlobalAttributesForForm(globalAttributesRaw || []);
+
+  const { data: draftData } = await supabase
+    .from('product_drafts')
+    .select('*')
+    .eq('product_id', product.id)
+    .maybeSingle();
+
+  const hasDraft = draftData !== null;
+  let normalizedInitialData = {
+    ...buildProductFormInitialData(product, languages),
+    category_ids: assignedCategories.map((c: any) => c.id),
+  };
+  if (draftData && draftData.meta && typeof draftData.meta === 'object') {
+    const meta = draftData.meta as any;
+
+    // Drafts store product_media as { media_id } only, so the gallery loses the
+    // file_path/object_key needed to render thumbnails. Re-hydrate from the
+    // media table so the main image (and the rest of the gallery) still loads.
+    let hydratedProductMedia = meta.product_media;
+    if (Array.isArray(meta.product_media) && meta.product_media.length > 0) {
+      const draftMediaIds = meta.product_media
+        .map((pm: any) => pm?.media_id)
+        .filter(Boolean);
+      if (draftMediaIds.length > 0) {
+        const { data: mediaRows } = await supabase
+          .from('media')
+          .select('id, file_path, object_key, file_name, description')
+          .in('id', draftMediaIds);
+        const mediaById = new Map((mediaRows || []).map((m: any) => [m.id, m]));
+        hydratedProductMedia = meta.product_media.map((pm: any, index: number) => {
+          const media = mediaById.get(pm?.media_id);
+          return {
+            media_id: pm?.media_id,
+            sort_order: pm?.sort_order ?? index,
+            media: media
+              ? {
+                  file_path: media.file_path,
+                  object_key: media.object_key,
+                  alt_text: media.description || media.file_name || '',
+                }
+              : pm?.media ?? null,
+          };
+        });
+      }
+    }
+
+    normalizedInitialData = {
+      ...meta,
+      id: product.id,
+      product_media: hydratedProductMedia,
+      category_ids: meta.category_ids ?? assignedCategories.map((c: any) => c.id),
+    };
+  }
+
+  let descriptionBlocks: any[] = [];
+  if (draftData && draftData.blocks && Array.isArray(draftData.blocks)) {
+    descriptionBlocks = draftData.blocks;
+  } else {
+    const { data: liveBlocks } = await supabase
+      .from('blocks')
+      .select('*')
+      .eq('product_id', product.id)
+      .order('order', { ascending: true });
+    descriptionBlocks = liveBlocks || [];
+  }
+
+  return (
+    <div className="space-y-8 w-full max-w-[1400px] mx-auto px-6 py-8">
+      <DraftStatusActions parentId={product.id} parentType="product" hasDraft={hasDraft} />
+      <CortexAiPageContextRegistrar
+        context={{
+          contentType: 'product',
+          entityId: product.id,
+          languageId: product.language_id,
+          slug: product.slug,
+          title: product.title,
+          translationGroupId: product.translation_group_id,
+        }}
+      />
+      <div className="flex justify-between items-center flex-wrap gap-4 w-full">
+        <div className="flex items-center gap-3">
+          <Button variant="outline" size="icon" aria-label="Back to products" asChild>
+            <Link href="/cms/products">
+              <ArrowLeft className="h-4 w-4" />
+            </Link>
+          </Button>
+          <div>
+            <h1 className="text-2xl font-bold">Edit Product</h1>
+            <p className="text-sm text-muted-foreground truncate max-w-md" title={product.title}>
+              {product.title}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 flex-wrap">
+          {existingLanguages.map((language) => {
+            const version = translationByLanguageId.get(language.id);
+            const isCurrent = language.id === product.language_id;
+            const href = version
+              ? `/cms/products/${version.id}/edit`
+              : `/cms/products/${product.id}/edit`;
+
+            return (
+              <Button key={language.id} asChild variant={isCurrent ? 'default' : 'outline'} size="sm">
+                <Link href={href}>
+                  {language.name} ({language.code.toUpperCase()})
+                </Link>
+              </Button>
+            );
+          })}
+
+          {primaryCreateLanguage && product.translation_group_id ? (
+            <Button asChild variant="secondary" size="sm">
+              <Link href={buildTranslationCreateHref(primaryCreateLanguage.id)}>
+                Create {primaryCreateLanguage.name} Translation
+              </Link>
+            </Button>
+          ) : null}
+
+          {additionalCreateLanguages.length > 0 && product.translation_group_id ? (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button id={`create-translation-trigger-${product.id}`} variant="outline" size="sm">
+                  Create Translation
+                  <Badge variant="secondary" className="ml-2 px-1.5 py-0 text-[10px]">
+                    {additionalCreateLanguages.length}
+                  </Badge>
+                  <ChevronDown className="ml-2 h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-64">
+                <DropdownMenuLabel>Missing Languages</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                {additionalCreateLanguages.map((language) => (
+                  <DropdownMenuItem key={language.id} asChild>
+                    <Link href={buildTranslationCreateHref(language.id)}>
+                      Create {language.name}
+                    </Link>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          ) : null}
+
+          {product.slug && product.status === 'active' && (
+            <Button variant="outline" asChild>
+              <Link href={`/product/${product.slug}`} target="_blank">
+                <ExternalLink className="w-4 h-4 mr-2" />
+                View
+              </Link>
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <ProductFormClientShell
+        initialData={normalizedInitialData}
+        isEdit
+        availableLanguagesProp={languages}
+        globalAttributesProp={globalAttributes}
+        currenciesProp={currencies}
+        enabledProviders={enabledProviders}
+        configStatus={configStatus}
+        updateAction={updateProductAction.bind(null, product.id)}
+        availableCategoriesProp={allCategories}
+      />
+
+      <div className="border-t pt-8">
+        <h2 className="text-xl font-bold mb-4">Product Description Blocks</h2>
+        <BlockEditorArea
+          parentId={product.id}
+          parentType="product"
+          initialBlocks={descriptionBlocks}
+          languageId={product.language_id}
+        />
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/products/attributes/page.tsx

@@ -0,0 +1,12 @@
+import { redirect } from 'next/navigation';
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+import { AttributeManagementPage as AttributeManagementPageUI } from '@nextblock-cms/ecommerce/server';
+
+export default async function AttributeManagementPage() {
+  const isOnline = await verifyPackageOnline('ecommerce');
+  if (!isOnline) {
+    redirect('/cms/settings/packages');
+  }
+
+  return <AttributeManagementPageUI />;
+}

package/templates/nextblock-template/app/cms/products/categories/page.tsx

@@ -0,0 +1,12 @@
+import { redirect } from 'next/navigation';
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+import { CategoryManagementPage as CategoryManagementPageUI } from '@nextblock-cms/ecommerce/server';
+
+export default async function CategoryManagementPage() {
+  const isOnline = await verifyPackageOnline('ecommerce');
+  if (!isOnline) {
+    redirect('/cms/settings/packages');
+  }
+
+  return <CategoryManagementPageUI />;
+}

package/templates/nextblock-template/app/cms/products/inventory/page.tsx

@@ -0,0 +1,13 @@
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+import { InventoryPage as InventoryPageUI } from '@nextblock-cms/ecommerce/server';
+import { redirect } from 'next/navigation';
+
+export default async function InventoryPage() {
+  const isOnline = await verifyPackageOnline('ecommerce');
+
+  if (!isOnline) {
+    redirect('/cms/settings/packages');
+  }
+
+  return <InventoryPageUI />;
+}

package/templates/nextblock-template/app/cms/products/new/page.tsx

@@ -0,0 +1,143 @@
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+import { redirect } from 'next/navigation';
+import { getActiveLanguagesServerSide } from '@nextblock-cms/db/server';
+import { createClient } from '@nextblock-cms/db/server';
+import Link from 'next/link';
+import {
+  createProductAction,
+  getGlobalProductAttributes,
+  getEnabledPaymentProviders,
+  getProduct,
+  getStoreConfigStatus,
+  normalizeCurrencyRecord,
+  getCategoriesWithCount,
+} from '@nextblock-cms/ecommerce/server';
+import { ArrowLeft } from 'lucide-react';
+import { Badge, Button } from '@nextblock-cms/ui';
+import ProductFormClientShell from '../ProductFormClientShell';
+import {
+  buildGlobalAttributesForForm,
+  buildProductFormInitialData,
+  buildTranslationSourceInitialData,
+} from '../productFormData';
+
+export default async function NewProductPage({ 
+  searchParams 
+}: { 
+  searchParams: Promise<{ from_group?: string; target_lang_id?: string }> 
+}) {
+  const [
+    isOnline,
+    languages,
+    enabledProviders,
+    configStatus,
+    globalAttributesRaw,
+    currenciesResult,
+    categories,
+    { from_group, target_lang_id },
+  ] = await Promise.all([
+    verifyPackageOnline('ecommerce'),
+    getActiveLanguagesServerSide(),
+    getEnabledPaymentProviders(),
+    getStoreConfigStatus(),
+    getGlobalProductAttributes(),
+    createClient()
+      .from('currencies')
+      .select(
+        'code, symbol, exchange_rate, is_default, is_active, auto_sync_product_prices, auto_update_exchange_rate, exchange_rate_source, exchange_rate_updated_at, rounding_mode, rounding_increment, rounding_charm_amount'
+      )
+      .eq('is_active', true)
+      .order('code', { ascending: true }),
+    getCategoriesWithCount(),
+    searchParams,
+  ]);
+
+  if (!isOnline) {
+      redirect('/cms/settings/packages');
+  }
+
+  let initialData = null;
+  if (from_group) {
+    try {
+      const supabase = createClient();
+      const { data: groupProducts } = await supabase
+        .from('products')
+        .select('id')
+        .eq('translation_group_id', from_group)
+        .limit(1);
+      
+      if (groupProducts && groupProducts[0]) {
+        const { data: sourceProduct, error: fetchError } = await getProduct(supabase, groupProducts[0].id);
+        if (sourceProduct && !fetchError) {
+          initialData = buildTranslationSourceInitialData(
+            sourceProduct,
+            from_group,
+            target_lang_id
+          );
+        }
+      }
+    } catch (e) {
+      console.error('Error pre-filling translation data:', e);
+    }
+  }
+
+  const targetLanguageId = target_lang_id ? Number.parseInt(target_lang_id, 10) : undefined;
+  const targetLanguage =
+    Number.isFinite(targetLanguageId)
+      ? languages.find((language) => language.id === targetLanguageId)
+      : null;
+  const globalAttributes = buildGlobalAttributesForForm(globalAttributesRaw || []);
+  const currencies = (currenciesResult.data ?? []).map((currency) =>
+    normalizeCurrencyRecord(currency)
+  );
+  const normalizedInitialData = buildProductFormInitialData(
+    initialData,
+    languages,
+    targetLanguageId
+  );
+
+  return (
+    <div className="space-y-8 w-full max-w-[1400px] mx-auto px-6 py-8">
+      <div className="flex justify-between items-start flex-wrap gap-4 w-full">
+        <div className="flex items-start gap-3">
+          <Button variant="outline" size="icon" aria-label="Back to products" asChild>
+            <Link href="/cms/products">
+              <ArrowLeft className="h-4 w-4" />
+            </Link>
+          </Button>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h1 className="text-2xl font-bold">
+                {targetLanguage ? `Create ${targetLanguage.name} Translation` : 'Create Product'}
+              </h1>
+              {targetLanguage ? (
+                <Badge variant="secondary">
+                  {targetLanguage.code.toUpperCase()}
+                </Badge>
+              ) : null}
+            </div>
+            <p className="text-sm text-muted-foreground max-w-3xl">
+              {targetLanguage
+                ? 'We prefilled this draft from the source product so you can localize the content and fine-tune pricing, media, and variations faster.'
+                : 'Build a catalog-ready product with structured information, media, pricing, inventory, and optional variations.'}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <ProductFormClientShell
+        availableLanguagesProp={languages}
+        globalAttributesProp={globalAttributes}
+        currenciesProp={currencies}
+        translationGroupId={from_group}
+        targetLanguageId={target_lang_id}
+        initialData={normalizedInitialData}
+        enabledProviders={enabledProviders}
+        configStatus={configStatus}
+        createAction={createProductAction}
+        availableCategoriesProp={categories}
+      />
+    </div>
+  );
+}
+

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

@@ -0,0 +1,42 @@
+import { ProductsPage as ProductsPageUI } from '@nextblock-cms/ecommerce/server';
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+import { redirect } from 'next/navigation';
+
+import { getActiveLanguagesServerSide } from '@nextblock-cms/db/server';
+import LanguageFilterSelect from '../components/LanguageFilterSelect';
+import { ContentTransferControls } from '../import-export/ContentTransferControls';
+
+export default async function ProductsPage({ searchParams }: { searchParams: Promise<{ lang?: string }> }) {
+  const isOnline = await verifyPackageOnline('ecommerce');
+  if (!isOnline) {
+      redirect('/cms/settings/packages');
+  }
+
+  const resolvedSearchParams = await searchParams;
+  const allLanguages = await getActiveLanguagesServerSide();
+  const selectedLangId = resolvedSearchParams?.lang ? parseInt(resolvedSearchParams.lang, 10) : undefined;
+  const isValidLangId = selectedLangId
+    ? allLanguages.some((language) => language.id === selectedLangId)
+    : true;
+  const filterLangId = isValidLangId ? selectedLangId : undefined;
+
+  return (
+    <ProductsPageUI 
+      searchParams={resolvedSearchParams} 
+      transferControlsNode={
+        <ContentTransferControls
+          contentType="products"
+          label="Products"
+          languageId={filterLangId}
+        />
+      }
+      languageFilterNode={
+        <LanguageFilterSelect 
+          allLanguages={allLanguages}
+          currentFilterLangId={filterLangId}
+          basePath="/cms/products"
+        />
+      }
+    />
+  );
+}