create-nextblock 0.13.8 → 0.13.10

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

@@ -0,0 +1,27 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+
+const EcommerceActiveContext = createContext<boolean>(false);
+
+export function EcommerceActiveProvider({
+  children,
+  isActive,
+}: {
+  children: React.ReactNode;
+  isActive: boolean;
+}) {
+  return (
+    <EcommerceActiveContext.Provider value={isActive}>
+      {children}
+    </EcommerceActiveContext.Provider>
+  );
+}
+
+/**
+ * Whether the premium `ecommerce` package is activated for this install.
+ * Defaults to `false` outside the provider so any UI gated on it fails closed.
+ */
+export function useEcommerceActive() {
+  return useContext(EcommerceActiveContext);
+}

package/templates/nextblock-template/components/blocks/ProductGridClient.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import React from 'react';
+import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+import { Button } from '@nextblock-cms/ui';
+import { ProductGrid } from '@nextblock-cms/ecommerce/components/ProductGrid';
+import type { Product } from '@nextblock-cms/ecommerce/types';
+import { cn } from '@nextblock-cms/utils';
+
+import { fetchProductGridPage } from '../../app/actions/productGridActions';
+import type { ProductGridQuery } from '../../lib/blocks/product-grid-data';
+
+interface ProductGridClientProps {
+  initialProducts: Product[];
+  totalCount: number;
+  /** The block's resolved query, replayed by the server action for later pages. */
+  query: ProductGridQuery;
+  showPagination: boolean;
+}
+
+export default function ProductGridClient({
+  initialProducts,
+  totalCount,
+  query,
+  showPagination,
+}: ProductGridClientProps) {
+  const [products, setProducts] = React.useState(initialProducts);
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const gridRef = React.useRef<HTMLDivElement>(null);
+
+  // Re-sync when the server sends a new first page (e.g. a live draft edit).
+  React.useEffect(() => {
+    setProducts(initialProducts);
+    setCurrentPage(1);
+  }, [initialProducts]);
+
+  const perPage = query.limit > 0 ? query.limit : products.length || 1;
+  const totalPages = showPagination ? Math.max(1, Math.ceil(totalCount / perPage)) : 1;
+
+  const goToPage = async (nextPage: number) => {
+    if (isLoading || nextPage < 1 || nextPage > totalPages || nextPage === currentPage) return;
+
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await fetchProductGridPage({ ...query, page: nextPage });
+      if (result.error) {
+        setError(result.error);
+      } else {
+        setProducts(result.products);
+        setCurrentPage(nextPage);
+        // Keep the top of the grid in view rather than leaving the reader
+        // stranded at the bottom of the previous page.
+        gridRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    } catch {
+      setError('Failed to load products.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div ref={gridRef} className="scroll-mt-24">
+      <div
+        aria-busy={isLoading}
+        className={cn('transition-opacity duration-200', isLoading && 'pointer-events-none opacity-50')}
+      >
+        <ProductGrid products={products} />
+      </div>
+
+      {error && (
+        <p role="alert" className="mt-6 text-center text-sm text-destructive">
+          {error}
+        </p>
+      )}
+
+      {showPagination && totalPages > 1 && (
+        <nav
+          aria-label="Product grid pagination"
+          className="mt-10 flex items-center justify-center gap-3"
+        >
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1 || isLoading}
+          >
+            <ChevronLeft className="h-4 w-4" />
+            Previous
+          </Button>
+          <span
+            aria-live="polite"
+            className="flex min-w-[7rem] items-center justify-center gap-1.5 text-sm text-muted-foreground"
+          >
+            {isLoading && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+            Page {currentPage} of {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages || isLoading}
+          >
+            Next
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </nav>
+      )}
+    </div>
+  );
+}

package/templates/nextblock-template/lib/blocks/ProductGridBlock.tsx

@@ -1,139 +1,78 @@
-import { ProductGrid } from '@nextblock-cms/ecommerce/components/ProductGrid';
-import { getProducts } from '@nextblock-cms/ecommerce/server';
-import { normalizePriceMap, normalizeSalePriceMap } from '@nextblock-cms/ecommerce/currency';
-import { getVariantEffectivePriceRange } from '@nextblock-cms/ecommerce/variation-utils';
-
-
-import type { ProductGridBlockContent } from './ecommerce-block-schemas';
-
-import { getSsgSupabaseClient } from '@nextblock-cms/db/server';
-
-interface ProductGridBlockProps {
-  content: ProductGridBlockContent;
-  languageId?: number;
-  excludeProductId?: string;
-  excludeTranslationGroupId?: string | null;
-}
-
-// Component (Server Component)
-export const ProductGridBlock = async ({ 
-  content, 
-  languageId,
-  excludeProductId,
-  excludeTranslationGroupId,
-}: ProductGridBlockProps) => {
-  const supabase = getSsgSupabaseClient();
-  // Fetch products filtered by language
-  // We fetch more to ensure we have enough after manual checks
-  const { data: products } = await getProducts(supabase, {
-    languageId,
-    categoryId: content.type === 'category' ? content.categoryId : undefined,
-    limit: content.limit + 2, 
-  }); 
-  
-  const productRows = (products || []) as any[];
-
-  if (productRows.length === 0) {
-      return null; // Silent fail if no products
-  }
-
-  // 1. Filter out current product and its translations
-  const filteredProducts = productRows.filter((p) => {
-    if (excludeProductId && p.id === excludeProductId) return false;
-    if (excludeTranslationGroupId && p.translation_group_id === excludeTranslationGroupId) return false;
-    return true;
-  });
-
-  // 2. Hide if no products remain
-  if (filteredProducts.length === 0) {
-      return null;
-  }
-
-  // 3. Transform DB products to UI products
-  const uiProducts = filteredProducts.slice(0, content.limit).map(p => {
-      const productRecord = p as any;
-      let imageUrl = undefined;
-      // Accessing the nested media object correctly (array of objects with media property)
-      // The type from getProducts select is: product_media: { media: { file_path: string | null } | null }[]
-      const mediaItem = p.product_media?.[0]?.media;
-      if (mediaItem?.file_path) {
-         if (mediaItem.file_path.startsWith('http')) {
-           imageUrl = mediaItem.file_path;
-         } else if (process.env.NEXT_PUBLIC_R2_BASE_URL) {
-           imageUrl = `${process.env.NEXT_PUBLIC_R2_BASE_URL}/${mediaItem.file_path}`;
-         } else {
-           imageUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL ?? ''}/storage/v1/object/public/media/${mediaItem.file_path}`;
-         }
-      }
-
-      const variantPriceRange = getVariantEffectivePriceRange(
-        (p.product_variants || []).map((variant: any) => ({
-          price: variant.price,
-          sale_price: variant.sale_price,
-          sale_start_at: variant.sale_start_at ?? null,
-          sale_end_at: variant.sale_end_at ?? null,
-        }))
-      );
-
-      return {
-        id: p.id,
-        title: p.title,
-        slug: p.slug,
-        sku: p.sku,
-        average_rating: p.average_rating,
-        total_reviews: p.total_reviews,
-        upc: p.upc || undefined,
-        price: p.price,
-        prices: normalizePriceMap(p.prices),
-        sale_price: typeof p.sale_price === 'number' ? p.sale_price : undefined,
-        sale_prices: normalizeSalePriceMap(p.sale_prices),
-        sale_start_at: p.sale_start_at ?? null,
-        sale_end_at: p.sale_end_at ?? null,
-        scheduled_price: typeof p.scheduled_price === 'number' ? p.scheduled_price : undefined,
-        scheduled_prices: normalizePriceMap(p.scheduled_prices),
-        scheduled_price_at: p.scheduled_price_at ?? null,
-        is_taxable: p.is_taxable ?? true,
-        product_type: productRecord.product_type ?? undefined,
-        payment_provider: productRecord.payment_provider ?? undefined,
-        price_range_min: variantPriceRange?.min ?? null,
-        price_range_max: variantPriceRange?.max ?? null,
-        image_url: imageUrl,
-        short_description: p.short_description || undefined,
-        categories: (p.product_categories || []).map((pc: any) => pc.category).filter(Boolean),
-        language_id: p.language_id as number,
-        translation_group_id: p.translation_group_id || "",
-        freemius_product_id: productRecord.freemius_product_id || undefined,
-        freemius_plan_id: productRecord.freemius_plan_id || undefined,
-        trial_period_days: productRecord.trial_period_days ?? 0,
-        trial_requires_payment_method:
-          productRecord.trial_requires_payment_method ?? false,
-        freemius_plans: productRecord.freemius_plans,
-        has_variants: (p.product_variants?.length || 0) > 0,
-        product_variants: (p.product_variants || []).map((variant: any) => ({
-          id: variant.id,
-          price: variant.price,
-          prices: normalizePriceMap(variant.prices),
-          sale_price: variant.sale_price,
-          sale_prices: normalizeSalePriceMap(variant.sale_prices),
-          sale_start_at: variant.sale_start_at ?? null,
-          sale_end_at: variant.sale_end_at ?? null,
-          scheduled_price: variant.scheduled_price ?? null,
-          scheduled_prices: normalizePriceMap(variant.scheduled_prices),
-          scheduled_price_at: variant.scheduled_price_at ?? null,
-        })),
-      };
-  });
-
-  return (
-    <section className="py-12">
-       {content.title && (
-         <div className="container mb-8">
-            <h2 className="text-3xl font-bold tracking-tight">{content.title}</h2>
-         </div>
-       )}
-       <div className="container">
-          <ProductGrid products={uiProducts} />
-       </div>
-    </section>
-  );
-};
+import ProductGridClient from '../../components/blocks/ProductGridClient';
+
+import {
+  PRODUCT_GRID_UNLIMITED,
+  resolveProductGridCategoryIds,
+  resolveProductGridLimit,
+  resolveProductGridProductIds,
+  resolveProductGridShowPagination,
+  type ProductGridBlockContent,
+} from './ecommerce-block-schemas';
+import { loadProductGridPage, type ProductGridQuery } from './product-grid-data';
+
+interface ProductGridBlockProps {
+  content: ProductGridBlockContent;
+  languageId?: number;
+  excludeProductId?: string;
+  excludeTranslationGroupId?: string | null;
+}
+
+// Component (Server Component)
+export const ProductGridBlock = async ({
+  content,
+  languageId,
+  excludeProductId,
+  excludeTranslationGroupId,
+}: ProductGridBlockProps) => {
+  const isManual = content.type === 'manual';
+  const handPickedIds = isManual ? resolveProductGridProductIds(content) : [];
+
+  // A hand-picked grid with nothing picked has nothing to say — render nothing
+  // rather than silently falling back to unrelated products.
+  if (isManual && handPickedIds.length === 0) {
+    return null;
+  }
+
+  const paginate = resolveProductGridShowPagination(content);
+  // A hand-picked list is already exactly what the author asked for, so `limit`
+  // acts purely as a page size there — never as a cap.
+  const limit = isManual && !paginate ? PRODUCT_GRID_UNLIMITED : resolveProductGridLimit(content);
+
+  const query: ProductGridQuery = {
+    type: content.type ?? 'latest',
+    // With no category selected this resolves to an empty filter, i.e. latest products.
+    categoryIds: content.type === 'category' ? resolveProductGridCategoryIds(content) : undefined,
+    productIds: isManual ? handPickedIds : undefined,
+    limit,
+    page: 1,
+    languageId,
+    excludeProductId,
+    excludeTranslationGroupId,
+  };
+
+  const { products, totalCount } = await loadProductGridPage(query);
+
+  if (products.length === 0) {
+    return null; // Silent fail if no products
+  }
+
+  const showPagination = paginate && totalCount > limit;
+
+  return (
+    <section className="py-12">
+      {content.title && (
+        <div className="container mb-8">
+          <h2 className="text-3xl font-bold tracking-tight">{content.title}</h2>
+        </div>
+      )}
+      <div className="container">
+        <ProductGridClient
+          initialProducts={products}
+          totalCount={totalCount}
+          query={query}
+          showPagination={showPagination}
+        />
+      </div>
+    </section>
+  );
+};

package/templates/nextblock-template/lib/blocks/blockRegistry.ts

@@ -491,13 +491,13 @@ export const blockRegistry: Record<BlockType, BlockDefinition> = {
     type: "product_grid",
     label: "Product Grid",
     icon: "ShoppingBag", // Lucide icon
-    initialContent: { type: 'latest', limit: 6 } as ProductGridBlockContent,
+    initialContent: { type: 'latest', limit: 6, showPagination: false } as ProductGridBlockContent,
     editorComponentFilename: "ProductGridBlockEditor.tsx", // Assuming standard naming
     rendererComponentFilename: "ProductGridBlockRenderer.tsx", // Assuming mapping to ProductGridBlock.tsx handled by renderer map not shown here, or we need to ensure the renderer map uses the file we created. The prompt implies creating the file in `lib/blocks` serves as the component. I will assume the system maps it.
     schema: ProductGridBlockSchema,
     documentation: {
-        description: 'Displays a grid of products.',
-        useCases: ['Homepage featured products', 'Category pages']
+        description: 'Displays a grid of products: the latest ones, everything in one or more categories, or a hand-picked list.',
+        useCases: ['Homepage featured products', 'Category pages', 'Curated collections']
     }
   },
 
@@ -572,9 +572,29 @@ export function getBlockDefinition(blockType: string): BlockDefinition | undefin
   return undefined;
 }
 
+/**
+ * Whether a block type has anything for an author to configure.
+ *
+ * `cart`, `checkout` and `product_details` are context-driven: they declare an
+ * empty schema and ship no editor file at all, so opening an editor for them
+ * would show an empty dialog (and fail on the missing module). Used to decide
+ * whether adding a block should jump straight into its editor.
+ *
+ * @param blockType - The block type or custom-block slug
+ * @returns true when the block exposes editable fields
+ */
+export function blockHasEditableContent(blockType: string): boolean {
+  const definition = getBlockDefinition(blockType);
+  // Custom blocks are not in the registry; they always render a field editor.
+  if (!definition) return true;
+  const shape = (definition.schema as unknown as { shape?: Record<string, unknown> })?.shape;
+  if (!shape) return true;
+  return Object.keys(shape).length > 0;
+}
+
 /**
  * Get the initial content for a specific block type
- * 
+ *
  * @param blockType - The type of block to get initial content for
  * @returns The initial content object or undefined if block type not found
  */

package/templates/nextblock-template/lib/blocks/blockTypes.ts

@@ -16,3 +16,22 @@ export const availableBlockTypes = [
 ] as const;
 
 export type BlockType = (typeof availableBlockTypes)[number];
+
+/**
+ * Block types provided by the premium `ecommerce` package. They are hidden from
+ * the block picker when the package is not activated — see
+ * `app/cms/blocks/components/BlockTypeSelector.tsx`.
+ */
+export const ecommerceBlockTypes = [
+  "product_grid",
+  "featured_product",
+  "cart",
+  "checkout",
+  "product_details",
+] as const satisfies readonly BlockType[];
+
+export type EcommerceBlockType = (typeof ecommerceBlockTypes)[number];
+
+export function isEcommerceBlockType(type: string): type is EcommerceBlockType {
+  return (ecommerceBlockTypes as readonly string[]).includes(type);
+}

package/templates/nextblock-template/lib/blocks/ecommerce-block-schemas.ts

@@ -1,14 +1,73 @@
 import { z } from '../zod-config';
 
+/** Upper bound for how many categories / products a single grid can reference. */
+export const PRODUCT_GRID_MAX_CATEGORIES = 20;
+export const PRODUCT_GRID_MAX_PRODUCTS = 24;
+export const PRODUCT_GRID_MAX_LIMIT = 48;
+/** `limit: 0` means "no cap" — show every matching product on one page. */
+export const PRODUCT_GRID_UNLIMITED = 0;
+/** Page size applied when pagination is switched on from an unlimited grid. */
+export const PRODUCT_GRID_DEFAULT_PAGE_SIZE = 12;
+
 // Product Grid Block Schema
 export const ProductGridBlockSchema = z.object({
-  type: z.enum(['latest', 'category']).default('latest'),
+  /**
+   * Where the grid gets its products:
+   * - `latest`   newest active products
+   * - `category` every product in any of `categoryIds`
+   * - `manual`   exactly the products in `productIds`, in that order
+   */
+  type: z.enum(['latest', 'category', 'manual']).default('latest'),
+  /** Legacy single-category field, superseded by `categoryIds`. Still read so blocks saved before multi-select keep working. */
   categoryId: z.string().optional(),
-  limit: z.number().min(1).max(20).default(6),
+  categoryIds: z.array(z.string()).max(PRODUCT_GRID_MAX_CATEGORIES).optional(),
+  productIds: z.array(z.string()).max(PRODUCT_GRID_MAX_PRODUCTS).optional(),
+  /** Products per page when paginating, otherwise the display cap. `0` means unlimited. */
+  limit: z.number().min(PRODUCT_GRID_UNLIMITED).max(PRODUCT_GRID_MAX_LIMIT).default(6),
+  /** Page through everything that matches instead of stopping at `limit`. */
+  showPagination: z.boolean().default(false),
   title: z.string().optional(),
 });
 export type ProductGridBlockContent = z.infer<typeof ProductGridBlockSchema>;
 
+/**
+ * Selected categories, reading the legacy single `categoryId` when a block was
+ * saved before multi-select existed.
+ */
+export function resolveProductGridCategoryIds(
+  content: Partial<ProductGridBlockContent>
+): string[] {
+  const ids = (content.categoryIds ?? []).filter(Boolean);
+  if (ids.length > 0) return Array.from(new Set(ids));
+  return content.categoryId ? [content.categoryId] : [];
+}
+
+/** Hand-picked products, in the order the author chose them. */
+export function resolveProductGridProductIds(
+  content: Partial<ProductGridBlockContent>
+): string[] {
+  return Array.from(new Set((content.productIds ?? []).filter(Boolean)));
+}
+
+/**
+ * Page size / display cap, clamped to the supported range. Returns
+ * `PRODUCT_GRID_UNLIMITED` (0) when the author asked for every match.
+ */
+export function resolveProductGridLimit(
+  content: Partial<ProductGridBlockContent>
+): number {
+  const raw = typeof content.limit === 'number' ? content.limit : 6;
+  if (!Number.isFinite(raw) || raw < 0) return 6;
+  return Math.min(Math.floor(raw), PRODUCT_GRID_MAX_LIMIT);
+}
+
+/** Pagination needs a page size, so an unlimited grid is always a single page. */
+export function resolveProductGridShowPagination(
+  content: Partial<ProductGridBlockContent>
+): boolean {
+  return Boolean(content.showPagination) && resolveProductGridLimit(content) > 0;
+}
+
 // Featured Product Block Schema
 export const FeaturedProductBlockSchema = z.object({
   productId: z.string().min(1, 'Product is required'),