create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/app/product/[slug]/page.tsx

@@ -0,0 +1,433 @@
+import { getProductBySlug, getProducts } from '@nextblock-cms/ecommerce/server';
+import {
+  ProductProvider,
+  mapRawVariantRelations,
+  getVariantEffectivePriceRange,
+  normalizePriceMap,
+  normalizeSalePriceMap,
+  resolveTranslatedText,
+} from '@nextblock-cms/ecommerce';
+import { getSsgSupabaseClient, verifyPackageOnline } from '@nextblock-cms/db/server';
+import { notFound } from 'next/navigation';
+import { Metadata } from 'next';
+import { draftMode, cookies, headers } from 'next/headers';
+import { getPageDataBySlug } from "../../[slug]/page.utils";
+import BlockRenderer from "../../../components/BlockRenderer";
+import { CurrentContentSetter } from "../../../components/CurrentContentSetter";
+import {
+  applyProductDraftToProductRecord,
+  getProductDraft,
+} from "../../../lib/visual-editing/product-drafts";
+import { getRequestOrigin } from "../../../lib/visual-editing/edit-info";
+import {
+  resolveMetaTitle,
+  resolveProductMetaDescription,
+  stringifyJsonLd,
+  buildSocialMetadata,
+  toOpenGraphLocale,
+} from "../../lib/seo";
+import { getSiteSettings } from "../../lib/site-settings";
+// Ensure BlockType is imported or compatible with BlockRenderer props
+import type { Database } from "@nextblock-cms/db";
+type BlockType = Database['public']['Tables']['blocks']['Row'];
+
+export const dynamicParams = true;
+export const revalidate = 360;
+export const dynamic = 'force-dynamic'; // keeps per-request locale; paired with short revalidate
+export const fetchCache = 'force-no-store';
+
+interface ProductPageProps {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+function formatMinorUnitAmount(amount: unknown) {
+  const numericAmount = typeof amount === 'number' ? amount : Number(amount);
+  if (!Number.isFinite(numericAmount)) {
+    return undefined;
+  }
+
+  return (numericAmount / 100).toFixed(2);
+}
+
+function resolveOfferAvailability(productRecord: any) {
+  if (productRecord.product_type === 'digital') {
+    return 'https://schema.org/InStock';
+  }
+
+  return typeof productRecord.stock === 'number' && productRecord.stock <= 0
+    ? 'https://schema.org/OutOfStock'
+    : 'https://schema.org/InStock';
+}
+
+function resolveCategoryName(category: any, languageCode?: string | null) {
+  if (!category || typeof category.name !== 'string') {
+    return null;
+  }
+
+  return resolveTranslatedText(
+    category.name,
+    category.name_translations,
+    languageCode
+  );
+}
+
+export async function generateStaticParams() {
+  const supabase = getSsgSupabaseClient();
+  const { data: products } = await getProducts(supabase);
+  const productRows = ((products || []) as any[]).filter(
+    (product) => product.status === 'active'
+  );
+  if (productRows.length === 0) return [];
+  return productRows.map((product: any) => ({
+    slug: product.slug,
+  }));
+}
+
+export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const supabase = getSsgSupabaseClient();
+  let preferredLocale: string | undefined;
+  try {
+    const store = await cookies();
+    preferredLocale = store.get("NEXT_USER_LOCALE")?.value || store.get("NEXT_LOCALE")?.value;
+  } catch {
+    preferredLocale = undefined;
+  }
+  if (!preferredLocale) {
+    try {
+      const hdrs = await headers();
+      const al = hdrs.get("accept-language");
+      if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
+    } catch {
+      // ignore
+    }
+  }
+  const { data: product } = await getProductBySlug(supabase, slug, preferredLocale);
+  const productRecord = product as any;
+
+  if (!productRecord || productRecord.status !== 'active') return { title: 'Product Not Found' };
+  
+  // Resolve image URL for OG Image
+  let imageUrl = undefined;
+  const mediaItem = productRecord.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 siteUrl = process.env.NEXT_PUBLIC_URL || "";
+  const [languagesResult, productTranslationsResult] = await Promise.all([
+    supabase.from('languages').select('id, code'),
+    supabase
+      .from('products')
+      .select('language_id, slug')
+      .eq('translation_group_id', productRecord.translation_group_id)
+      .eq('status', 'active')
+  ]);
+
+  const { data: languages } = languagesResult;
+  const { data: productTranslations } = productTranslationsResult;
+
+  const alternates: { [key: string]: string } = {};
+  if (languages && productTranslations) {
+    productTranslations.forEach(pt => {
+      const langInfo = languages.find(l => l.id === pt.language_id);
+      if (langInfo) {
+        alternates[langInfo.code] = `${siteUrl}/product/${pt.slug}`;
+      }
+    });
+  }
+
+  const title = resolveMetaTitle(productRecord.meta_title, productRecord.title);
+  const description = resolveProductMetaDescription(
+    productRecord.meta_description,
+    productRecord.short_description
+  );
+  const { siteTitle } = await getSiteSettings();
+
+  return {
+    title,
+    description,
+    ...buildSocialMetadata({
+      title,
+      description,
+      url: `${siteUrl}/product/${slug}`,
+      siteTitle,
+      imageUrl,
+      type: 'website',
+      locale: toOpenGraphLocale(productRecord.language_code),
+    }),
+    alternates: {
+      canonical: `${siteUrl}/product/${slug}`,
+      languages: Object.keys(alternates).length > 0 ? alternates : undefined,
+    },
+  };
+}
+
+export default async function ProductPage({ params }: ProductPageProps) {
+  const { slug } = await params;
+  const supabase = getSsgSupabaseClient();
+
+  // 0. Verify License
+  const isOnline = await verifyPackageOnline('ecommerce');
+  if (!isOnline) {
+      notFound();
+  }
+
+  let preferredLocale: string | undefined;
+  try {
+    const store = await cookies();
+    preferredLocale = store.get("NEXT_USER_LOCALE")?.value || store.get("NEXT_LOCALE")?.value;
+  } catch {
+    preferredLocale = undefined;
+  }
+  if (!preferredLocale) {
+    try {
+      const hdrs = await headers();
+      const al = hdrs.get("accept-language");
+      if (al) preferredLocale = al.split(",")[0]?.split("-")[0];
+    } catch {
+      // ignore
+    }
+  }
+
+  // 1. Fetch Product Data
+  const { data: product } = await getProductBySlug(supabase, slug, preferredLocale);
+  let productRecord = product as any;
+
+  if (!productRecord || productRecord.status !== 'active') {
+    notFound();
+  }
+
+  const draft = await draftMode();
+  const visualEditingEnabled =
+    draft.isEnabled || process.env.NEXTBLOCK_VISUAL_EDITING_ENABLED === 'true';
+
+  if (visualEditingEnabled) {
+    const productDraft = await getProductDraft(productRecord.id);
+    productRecord = applyProductDraftToProductRecord(productRecord, productDraft);
+  }
+
+  // 2. Fetch Template Page
+  const templatePage = await getPageDataBySlug('product-template');
+
+  // 3. Fallback or Use Template
+  let blocks: BlockType[] = [];
+  let languageId = 1; // Default to 1 if not found
+
+  if (templatePage) {
+    blocks = templatePage.blocks;
+    languageId = templatePage.language_id;
+  } else {
+    // Fallback Layout if no template exists
+    // We cast to any to avoid strict DB type matching for fallback mocks, specifically for UUID/Dates
+    blocks = [
+      {
+        id: 'fallback-product-details',
+        block_type: 'product_details',
+        content: {},
+        page_id: 'temp',
+        order: 0,
+        language_id: 1,
+        created_at: new Date().toISOString(),
+        updated_at: new Date().toISOString()
+      },
+      {
+         id: 'fallback-product-grid',
+         block_type: 'product_grid',
+         content: { type: 'latest', limit: 4, title: "You might also like" },
+         page_id: 'temp',
+         order: 1,
+         language_id: 1,
+         created_at: new Date().toISOString(),
+         updated_at: new Date().toISOString()
+      }
+    ] as any as BlockType[];
+  }
+
+  const requestOrigin = await getRequestOrigin();
+  const productTemplateVisualEditing = templatePage
+    ? {
+        enabled: visualEditingEnabled,
+        documentType: "page" as const,
+        documentId: templatePage.id,
+        slug: templatePage.slug,
+        languageId: templatePage.language_id,
+        draftId: templatePage.draft_id ?? null,
+        pageOrigin: requestOrigin,
+      }
+    : undefined;
+
+  // 4. Transform Product Data for Context
+  // Value Mapping
+  // Image URL resolution
+  let imageUrl: string | undefined = undefined;
+  const images: { url: string; alt?: string }[] = [];
+  
+  if (productRecord.product_media && productRecord.product_media.length > 0) {
+      // Sort by sort_order
+      const sortedMedia = [...productRecord.product_media].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0));
+      
+      sortedMedia.forEach(pm => {
+          if (pm.media?.file_path) {
+              let url = '';
+              if (pm.media.file_path.startsWith('http')) {
+                  url = pm.media.file_path;
+              } else if (process.env.NEXT_PUBLIC_R2_BASE_URL) {
+                  url = `${process.env.NEXT_PUBLIC_R2_BASE_URL}/${pm.media.file_path}`;
+              } else {
+                  url = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/media/${pm.media.file_path}`;
+              }
+              
+              images.push({ url, alt: productRecord.title });
+              
+              // Set primary image if it's the first one
+              if (!imageUrl) imageUrl = url;
+          }
+      });
+  }
+
+  const languageCode = Array.isArray(productRecord.languages)
+    ? productRecord.languages[0]?.code
+    : productRecord.languages?.code;
+  const { attributes, variants } = mapRawVariantRelations(
+    productRecord.product_variants || [],
+    languageCode
+  );
+  const variantPriceRange = getVariantEffectivePriceRange(variants);
+  const productCategories = (productRecord.product_categories || [])
+    .map((pc: any) => pc.category)
+    .filter(Boolean);
+  const productCategoryNames = productCategories
+    .map((category: any) => resolveCategoryName(category, languageCode))
+    .filter((name: string | null): name is string => Boolean(name));
+
+  const contextProduct = {
+    id: productRecord.id,
+    title: productRecord.title,
+    slug: productRecord.slug,
+    sku: productRecord.sku,
+    upc: productRecord.upc || undefined,
+    price: productRecord.price,
+    prices: normalizePriceMap(productRecord.prices),
+    sale_price: productRecord.sale_price || null,
+    sale_prices: normalizeSalePriceMap(productRecord.sale_prices),
+    sale_start_at: productRecord.sale_start_at ?? null,
+    sale_end_at: productRecord.sale_end_at ?? null,
+    scheduled_price:
+      typeof productRecord.scheduled_price === 'number' ? productRecord.scheduled_price : undefined,
+    scheduled_prices: normalizePriceMap(productRecord.scheduled_prices),
+    scheduled_price_at: productRecord.scheduled_price_at ?? null,
+    is_taxable: productRecord.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,
+    images: images,
+    short_description: productRecord.short_description || undefined,
+    description_json: productRecord.description_json,
+    stock:
+      productRecord.stock !== undefined && productRecord.stock !== null
+        ? productRecord.stock
+        : undefined,
+    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,
+    language_id: productRecord.language_id,
+    translation_group_id: productRecord.translation_group_id || "",
+    has_variants: variants.length > 0,
+    attributes,
+    variants,
+    categories: productCategories,
+    product_variants: (productRecord.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,
+    })),
+  };
+  const siteUrl = process.env.NEXT_PUBLIC_URL || "";
+  const nonce = (await headers()).get('x-nonce') || undefined;
+  const title = resolveMetaTitle(productRecord.meta_title, productRecord.title);
+  const description = resolveProductMetaDescription(
+    productRecord.meta_description,
+    productRecord.short_description
+  );
+  const { data: defaultCurrency } = await supabase
+    .from('currencies')
+    .select('code')
+    .eq('is_default', true)
+    .maybeSingle();
+  const price = formatMinorUnitAmount(productRecord.sale_price ?? productRecord.price);
+  const productJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: title,
+    description,
+    image: images.map((image) => image.url),
+    category:
+      productCategoryNames.length > 1
+        ? productCategoryNames
+        : productCategoryNames[0] ?? undefined,
+    sku: productRecord.sku || undefined,
+    gtin: productRecord.upc || undefined,
+    url: `${siteUrl}/product/${productRecord.slug}`,
+    offers: price
+      ? {
+          '@type': 'Offer',
+          url: `${siteUrl}/product/${productRecord.slug}`,
+          price,
+          priceCurrency: defaultCurrency?.code || 'USD',
+          availability: resolveOfferAvailability(productRecord),
+          itemCondition: 'https://schema.org/NewCondition',
+        }
+      : undefined,
+  };
+
+  return (
+    <div className="min-h-screen bg-background pb-12">
+        <script
+          type="application/ld+json"
+          nonce={nonce}
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: stringifyJsonLd(productJsonLd) }}
+        />
+        <ProductProvider product={contextProduct}>
+            {/* 
+              BlockRenderer expects languageId property. 
+              If templatePage is null, we defaulted languageId to 1.
+            */}
+            <CurrentContentSetter
+              id={productRecord.id}
+              type="product"
+              slug={productRecord.slug}
+              translation_group_id={productRecord.translation_group_id}
+            />
+            <BlockRenderer 
+              blocks={blocks} 
+              languageId={languageId} 
+              excludeProductId={productRecord.id}
+              excludeTranslationGroupId={productRecord.translation_group_id}
+              visualEditing={productTemplateVisualEditing}
+              productVisualEditingEnabled={visualEditingEnabled}
+            />
+        </ProductProvider>
+    </div>
+  );
+}

package/templates/nextblock-template/app/profile/ProfileAccountSidebar.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { AccountNavigationMenu } from '@nextblock-cms/ecommerce';
+import { useTranslations } from '@nextblock-cms/utils';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@nextblock-cms/ui';
+import { User as UserIcon } from 'lucide-react';
+
+import type { ProfileAccountSummary, ProfileAccountUser } from './account-types';
+import { profileAccountLinks } from './account-links';
+
+interface ProfileAccountSidebarProps {
+  profile: ProfileAccountSummary;
+  user: ProfileAccountUser;
+}
+
+export function ProfileAccountSidebar({
+  profile,
+  user,
+}: ProfileAccountSidebarProps) {
+  const { t } = useTranslations();
+  const displayName =
+    profile.full_name || profile.github_username || user.email || 'User';
+
+  return (
+    <Card className="h-fit">
+      <CardHeader>
+        <CardTitle className="text-xl">
+          {t('public_profile') === 'public_profile'
+            ? 'Public Profile'
+            : t('public_profile')}
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent className="flex flex-col items-center space-y-4 text-center">
+        <Avatar className="h-28 w-28 border-4 border-muted">
+          <AvatarImage
+            src={profile.avatar_url || undefined}
+            alt={displayName}
+            className="object-cover"
+          />
+          <AvatarFallback className="bg-secondary text-3xl">
+            {displayName?.charAt(0)?.toUpperCase() || (
+              <UserIcon className="h-10 w-10" />
+            )}
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="w-full space-y-1 text-left">
+          <div className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
+            {t('identity') === 'identity' ? 'Identity' : t('identity')}
+          </div>
+          <p className="text-lg font-semibold">{displayName}</p>
+          {user.email ? (
+            <p className="text-sm text-muted-foreground">{user.email}</p>
+          ) : null}
+        </div>
+
+        <AccountNavigationMenu
+          links={profileAccountLinks}
+          className="text-left"
+        />
+      </CardContent>
+    </Card>
+  );
+}

package/templates/nextblock-template/app/profile/ProfilePageHeader.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { useTranslations } from '@nextblock-cms/utils';
+
+export function ProfilePageHeader() {
+  const { t } = useTranslations();
+
+  return (
+    <div className="mb-8">
+      <h1 className="text-3xl font-bold tracking-tight">{t('profile_settings_title')}</h1>
+      <p className="text-muted-foreground mt-2">
+        {t('profile_settings_description')}
+      </p>
+    </div>
+  );
+}

package/templates/nextblock-template/app/profile/ProfilePageMissingState.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import { useTranslations } from '@nextblock-cms/utils';
+
+export function ProfilePageMissingState() {
+  const { t } = useTranslations();
+
+  return <div>{t('profile_not_found')}</div>;
+}

package/templates/nextblock-template/app/profile/account-data.ts

@@ -0,0 +1,37 @@
+import { createClient } from '@nextblock-cms/db/server';
+import { redirect } from 'next/navigation';
+
+import type {
+  ProfileAccountSummary,
+  ProfileAccountUser,
+} from './account-types';
+
+export async function requireProfileAccountContext(redirectTo: string) {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    redirect(`/sign-in?redirect=${encodeURIComponent(redirectTo)}`);
+  }
+
+  const { data: profile } = await supabase
+    .from('profiles')
+    .select('id, avatar_url, full_name, github_username')
+    .eq('id', user.id)
+    .maybeSingle();
+
+  if (!profile) {
+    redirect('/profile');
+  }
+
+  return {
+    supabase,
+    user: {
+      id: user.id,
+      email: user.email,
+    } satisfies ProfileAccountUser,
+    profile: profile satisfies ProfileAccountSummary,
+  };
+}

package/templates/nextblock-template/app/profile/account-links.ts

@@ -0,0 +1,22 @@
+import type { AccountNavigationLink } from '@nextblock-cms/ecommerce';
+
+const isSandbox = process.env.NEXT_PUBLIC_IS_SANDBOX === 'true';
+
+export const profileAccountLinks: AccountNavigationLink[] = [
+  {
+    href: '/profile/orders',
+    labelKey: 'account_orders',
+    fallbackLabel: 'Orders',
+    icon: 'orders',
+  },
+  ...(!isSandbox
+    ? [
+        {
+          href: '/profile/password',
+          labelKey: 'change_my_password',
+          fallbackLabel: 'Change my password',
+          icon: 'password' as const,
+        },
+      ]
+    : []),
+];

package/templates/nextblock-template/app/profile/account-types.ts

@@ -0,0 +1,11 @@
+export interface ProfileAccountUser {
+  id: string;
+  email: string | undefined;
+}
+
+export interface ProfileAccountSummary {
+  id: string;
+  avatar_url: string | null;
+  full_name: string | null;
+  github_username: string | null;
+}