create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/app/cms/navigation/components/NavigationItemForm.tsx

@@ -16,8 +16,8 @@ import {
   SelectValue,
 } from "@nextblock-cms/ui";
 import type { Database } from "@nextblock-cms/db";
-import { useAuth } from "@/context/AuthContext";
-import { useHotkeys } from "@/hooks/use-hotkeys";
+import { useAuth } from '../../../../context/AuthContext';
+import { useHotkeys } from '../../../../hooks/use-hotkeys';
 
 type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
 type MenuLocation = Database['public']['Enums']['menu_location'];

package/templates/nextblock-template/app/cms/orders/[id]/MarkPaidButton.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { markOrderAsPaid } from '../actions';
+import { useRouter } from 'next/navigation';
+
+export default function MarkPaidButton({ orderId }: { orderId: string }) {
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+
+  const handleMarkPaid = async () => {
+    setError(null);
+    startTransition(async () => {
+      try {
+        const result = await markOrderAsPaid(orderId);
+        if (!result.success) {
+          setError(result.error || 'Failed to update order');
+          alert(`Error: ${result.error || 'Failed to update order'}`);
+        } else {
+           // Success
+           router.refresh(); 
+        }
+      } catch (e) {
+        setError('Unexpected error');
+        console.error(e);
+        alert('Unexpected error occurred');
+      }
+    });
+  };
+
+  return (
+    <div>
+      <button
+        onClick={handleMarkPaid}
+        disabled={isPending}
+        className="px-4 py-2 text-sm bg-black text-white rounded hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {isPending ? 'Updating...' : 'Mark as Paid'}
+      </button>
+      {error && <p className="text-red-500 text-xs mt-1 absolute">{error}</p>}
+    </div>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { OrderDetailPage as OrderDetailPageUI } from '@nextblock-cms/ecommerce/server';
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+import { redirect } from 'next/navigation';
+
+export const metadata = {
+  title: 'Order Details | NextBlock™ CMS',
+};
+
+export default async function OrderDetailPageWrapper({ params }: { params: Promise<{ id: string }> }) {
+  const isOnline = await verifyPackageOnline('ecommerce');
+  if (!isOnline) {
+      redirect('/cms/settings/packages');
+  }
+
+  return <OrderDetailPageUI params={params} />;
+}

package/templates/nextblock-template/app/cms/orders/actions.ts

@@ -0,0 +1,201 @@
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import {
+  applyOrderInventoryDeduction,
+  assignInvoiceMetadata,
+} from '@nextblock-cms/ecommerce/server';
+import { createClient as createSupabaseClient } from '@supabase/supabase-js';
+import { OrderWithDetails } from './types';
+
+const ITEMS_PER_PAGE = 20;
+
+export async function getOrders(
+  page = 1,
+  status?: string,
+  search?: string
+): Promise<{ data: OrderWithDetails[]; total: number; totalPages: number }> {
+  const supabase = createClient();
+  const from = (page - 1) * ITEMS_PER_PAGE;
+  const to = from + ITEMS_PER_PAGE - 1;
+
+  // 1. Fetch Orders first
+  let query = supabase
+    .from('orders')
+    .select(
+      `
+      *,
+      order_items (*)
+    `,
+      { count: 'exact' }
+    )
+    .order('created_at', { ascending: false })
+    .range(from, to);
+
+  if (status && status !== 'all') {
+    query = query.eq('status', status);
+  }
+
+  if (search) {
+      query = query.or(`id.eq.${search},user_id.eq.${search}`);
+  }
+
+  const { data: ordersData, error: ordersError, count } = await query;
+
+  if (ordersError) {
+    console.error('Error fetching orders:', ordersError);
+    throw new Error('Failed to fetch orders');
+  }
+
+  const orders = (ordersData as any[]) || [];
+
+  // 2. Extract User IDs
+  const userIds = Array.from(new Set(orders.map(o => o.user_id).filter(Boolean)));
+
+  // 3. Fetch Profiles if needed
+  const profilesMap = new Map();
+  if (userIds.length > 0) {
+      const { data: profilesData, error: profilesError } = await supabase
+          .from('profiles')
+          .select('*')
+          .in('id', userIds);
+      
+      if (!profilesError && profilesData) {
+          profilesData.forEach(p => profilesMap.set(p.id, p));
+      }
+  }
+
+  // 4. Merge Data
+  const data = orders.map(order => ({
+      ...order,
+      customer: order.user_id ? profilesMap.get(order.user_id) : null
+  })) as OrderWithDetails[];
+
+  return {
+    data,
+    total: count || 0,
+    totalPages: count ? Math.ceil(count / ITEMS_PER_PAGE) : 0,
+  };
+}
+
+export async function getOrderDetails(orderId: string): Promise<OrderWithDetails | null> {
+  const supabase = createClient();
+
+  // 1. Fetch Order
+  const { data: orderData, error: orderError } = await supabase
+    .from('orders')
+    .select(
+      `
+      *,
+      order_items (*)
+    `
+    )
+    .eq('id', orderId)
+    .single();
+
+  if (orderError || !orderData) {
+    console.error(`Error fetching order ${orderId}:`, orderError);
+    return null;
+  }
+
+  const order = orderData as any;
+
+  // 2. Fetch Customer if user_id exists
+  let customer = null;
+  if (order.user_id) {
+      const { data: profile } = await supabase
+          .from('profiles')
+          .select('*')
+          .eq('id', order.user_id)
+          .single();
+      customer = profile;
+  }
+
+  // 3. Fetch Products for Items
+  const productIds = order.order_items.map((i: any) => i.product_id).filter(Boolean);
+  const productsMap = new Map();
+  
+  if (productIds.length > 0) {
+      const { data: products } = await supabase
+          .from('products')
+          .select('id, title, slug, product_media(media(file_path))')
+          .in('id', productIds);
+      
+      if (products) {
+          products.forEach((p: any) => {
+             // Extract first image
+             let imageUrl = null;
+             if (p.product_media && p.product_media.length > 0 && p.product_media[0].media) {
+                 imageUrl = p.product_media[0].media.file_path; 
+             }
+             // DEBUG LOG REMOVED
+             productsMap.set(p.id, {
+                 title: p.title,
+                 slug: p.slug,
+                 image_url: imageUrl
+             });
+          });
+      }
+  }
+
+  const orderItemsWithProduct = order.order_items.map((item: any) => ({
+      ...item,
+      product: item.product_id ? productsMap.get(item.product_id) : null
+  }));
+
+  return {
+      ...order,
+      order_items: orderItemsWithProduct,
+      customer
+  } as OrderWithDetails;
+}
+
+export async function markOrderAsPaid(orderId: string): Promise<{ success: boolean; error?: string }> {
+    const supabase = createClient();
+    
+    // 1. Verify Authentication (using user session)
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    
+    if (authError || !user) {
+        return { success: false, error: 'Unauthorized' };
+    }
+
+    // 2. Perform Update using Service Role (Bypass RLS)
+    
+    const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+
+    if (!serviceRoleKey || !supabaseUrl) {
+         return { success: false, error: 'Server configuration error' };
+    }
+
+    const adminSupabase = createSupabaseClient(supabaseUrl, serviceRoleKey, {
+        auth: {
+            autoRefreshToken: false,
+            persistSession: false
+        }
+    });
+
+    const { data: updatedData, error } = await adminSupabase
+        .from('orders')
+        .update({ status: 'paid' })
+        .eq('id', orderId)
+        .select();
+
+    if (error) {
+        console.error('Mark Paid DB Error:', error);
+        return { success: false, error: error.message };
+    }
+
+    if (!updatedData || updatedData.length === 0) {
+        return { success: false, error: 'Order not found or update failed.' };
+    }
+
+    await assignInvoiceMetadata({
+        orderId,
+        client: adminSupabase as any,
+    });
+    await applyOrderInventoryDeduction(adminSupabase as any, orderId);
+
+    return { success: true };
+}

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

@@ -0,0 +1,20 @@
+import { OrdersPage as OrdersPageUI } from '@nextblock-cms/ecommerce/server';
+import { verifyPackageOnline } from '@nextblock-cms/db/server';
+import { redirect } from 'next/navigation';
+
+export const metadata = {
+  title: 'Orders | NextBlock™ CMS',
+};
+
+export default async function OrdersPageWrapper({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string; status?: string }>;
+}) {
+  const isOnline = await verifyPackageOnline('ecommerce');
+  if (!isOnline) {
+      redirect('/cms/settings/packages');
+  }
+
+  return <OrdersPageUI searchParams={searchParams} />;
+}

package/templates/nextblock-template/app/cms/orders/types.ts

@@ -0,0 +1,20 @@
+import { Database } from '@nextblock-cms/db';
+
+export type Order = Database['public']['Tables']['orders']['Row'];
+export type OrderItem = Database['public']['Tables']['order_items']['Row'];
+export type Profile = Database['public']['Tables']['profiles']['Row'];
+
+export interface OrderItemWithProduct extends OrderItem {
+    product?: {
+        title: string;
+        image_url?: string | null;
+        slug?: string;
+    } | null;
+}
+
+export interface OrderWithDetails extends Order {
+  order_items: OrderItemWithProduct[];
+  customer?: Profile | null; // Joined from profiles table if user_id exists
+  // We can also compute a display name/email helper if needed, 
+  // but for now we'll use the raw data + customer_details
+}

package/templates/nextblock-template/app/cms/pages/[id]/edit/EditPageClient.tsx

@@ -1,121 +1,156 @@
-"use client";
-
-import Link from "next/link";
-import React from "react";
-import { Separator } from "@nextblock-cms/ui";
-import { Button } from "@nextblock-cms/ui";
-import { Eye, ArrowLeft } from "lucide-react";
-import PageForm from "../../components/PageForm";
-import BlockEditorArea from "@/app/cms/blocks/components/BlockEditorArea";
-import ContentLanguageSwitcher from "@/app/cms/components/ContentLanguageSwitcher";
-import CopyContentFromLanguage from "@/app/cms/components/CopyContentFromLanguage";
-import RevisionHistoryButton from "@/app/cms/revisions/RevisionHistoryButton";
-import { UploadFolderProvider } from "@/app/cms/media/UploadFolderContext";
-import type { Database } from "@nextblock-cms/db";
-
-type Page = Database["public"]["Tables"]["pages"]["Row"];
-type Block = Database["public"]["Tables"]["blocks"]["Row"];
-type Language = Database["public"]["Tables"]["languages"]["Row"];
-
-interface PageWithBlocks extends Page {
-  blocks: Block[];
-  language_code?: string;
-  translation_group_id: string;
-}
-
-interface EditPageClientProps {
-  page: PageWithBlocks;
-  pageId: number;
-  allSiteLanguages: Language[];
-  updatePageAction: (formData: FormData) => Promise<{ error?: string } | void>;
-  publicPageUrl: string;
-}
-
-export default function EditPageClient({
-  page,
-  pageId,
-  allSiteLanguages,
-  updatePageAction,
-  publicPageUrl,
-}: EditPageClientProps) {
-  return (
-    <UploadFolderProvider defaultFolder={`pages/${page.slug}/`}>
-      <div className="space-y-8 w-full mx-auto px-6">
-        <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 pages"
-              asChild
-            >
-              <Link href="/cms/pages">
-                <ArrowLeft className="h-4 w-4" />
-              </Link>
-            </Button>
-            <div>
-              <h1 className="text-2xl font-bold">Edit Page</h1>
-              <p
-                className="text-sm text-muted-foreground truncate max-w-md"
-                title={page.title}
-              >
-                {page.title}
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center gap-3 flex-wrap">
-            {allSiteLanguages.length > 0 && (
-              <ContentLanguageSwitcher
-                currentItem={{
-                  ...page,
-                  translation_group_id: page.translation_group_id ?? "",
-                }}
-                itemType="page"
-                allSiteLanguages={allSiteLanguages}
-              />
-            )}
-            {page.translation_group_id && allSiteLanguages.length > 1 && (
-              <CopyContentFromLanguage
-                parentId={pageId}
-                parentType="page"
-                currentLanguageId={page.language_id}
-                translationGroupId={page.translation_group_id}
-                allSiteLanguages={allSiteLanguages}
-              />
-            )}
-            <Button variant="outline" asChild>
-              <Link
-                href={publicPageUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <Eye className="mr-2 h-4 w-4" /> View Live
-              </Link>
-            </Button>
-            <RevisionHistoryButton parentType="page" parentId={pageId} />
-          </div>
-        </div>
-
-        <PageForm
-          page={page}
-          formAction={updatePageAction}
-          actionButtonText="Update Page Metadata"
-          isEditing={true}
-          availableLanguagesProp={allSiteLanguages}
-        />
-
-        <Separator className="my-8" />
-
-        <div className="w-full mx-auto px-6">
-          <h2 className="text-xl font-semibold mb-4">Page Content Blocks</h2>
-          <BlockEditorArea
-            parentId={page.id}
-            parentType="page"
-            initialBlocks={page.blocks}
-            languageId={page.language_id}
-          />
-        </div>
-      </div>
-    </UploadFolderProvider>
-  );
-}
+"use client";
+
+import Link from "next/link";
+import React from "react";
+import { Separator } from "@nextblock-cms/ui";
+import { Button } from "@nextblock-cms/ui";
+import { ArrowLeft, Eye, FilePenLine } from "lucide-react";
+import PageForm from "../../components/PageForm";
+import BlockEditorArea from "../../../blocks/components/BlockEditorArea";
+import ContentLanguageSwitcher from "../../../components/ContentLanguageSwitcher";
+import CopyContentFromLanguage from "../../../components/CopyContentFromLanguage";
+import RevisionHistoryButton from "../../../revisions/RevisionHistoryButton";
+import { UploadFolderProvider } from '../../../media/UploadFolderContext';
+import { CortexAiPageContextRegistrar } from "../../../components/CortexAiPageContext";
+import type { Database } from "@nextblock-cms/db";
+import DraftStatusActions from "../../../components/DraftStatusActions";
+
+type Page = Database["public"]["Tables"]["pages"]["Row"];
+type Block = Database["public"]["Tables"]["blocks"]["Row"];
+type Language = Database["public"]["Tables"]["languages"]["Row"];
+
+interface PageWithBlocks extends Page {
+  blocks: Block[];
+  language_code?: string;
+  translation_group_id: string;
+}
+
+interface EditPageClientProps {
+  page: PageWithBlocks;
+  pageId: number;
+  allSiteLanguages: Language[];
+  updatePageAction: (formData: FormData) => Promise<{ error?: string } | void>;
+  publicPageUrl: string;
+  isDraftModeEnabled: boolean;
+  initialFeatureImageUrl?: string | null;
+  initialFeatureImageId?: string | null;
+  hasDraft: boolean;
+}
+
+export default function EditPageClient({
+  page,
+  pageId,
+  allSiteLanguages,
+  updatePageAction,
+  publicPageUrl,
+  isDraftModeEnabled,
+  initialFeatureImageUrl,
+  initialFeatureImageId,
+  hasDraft,
+}: EditPageClientProps) {
+  const draftModeUrl = `/api/draft/start?path=${encodeURIComponent(publicPageUrl)}`;
+
+  return (
+    <UploadFolderProvider defaultFolder={`pages/${page.slug}/`}>
+      <CortexAiPageContextRegistrar
+        context={{
+          contentType: "page",
+          entityId: page.id,
+          languageId: page.language_id,
+          slug: page.slug,
+          title: page.title,
+          translationGroupId: page.translation_group_id,
+        }}
+      />
+      <div className="space-y-8 w-full mx-auto px-6">
+        <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 pages"
+              asChild
+            >
+              <Link href="/cms/pages">
+                <ArrowLeft className="h-4 w-3.5" />
+              </Link>
+            </Button>
+            <div>
+              <h1 className="text-2xl font-bold">Edit Page</h1>
+              <p
+                className="text-sm text-muted-foreground truncate max-w-md"
+                title={page.title}
+              >
+                {page.title}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3 flex-wrap">
+            {allSiteLanguages.length > 0 && (
+              <ContentLanguageSwitcher
+                currentItem={{
+                  ...page,
+                  translation_group_id: page.translation_group_id ?? "",
+                }}
+                itemType="page"
+                allSiteLanguages={allSiteLanguages}
+              />
+            )}
+            {page.translation_group_id && allSiteLanguages.length > 1 && (
+              <CopyContentFromLanguage
+                parentId={pageId}
+                parentType="page"
+                currentLanguageId={page.language_id}
+                translationGroupId={page.translation_group_id}
+                allSiteLanguages={allSiteLanguages}
+              />
+            )}
+            <Button variant="outline" asChild>
+              <Link
+                href={publicPageUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Eye className="mr-2 h-4 w-4" /> View Live
+              </Link>
+            </Button>
+            <Button variant="secondary" asChild>
+              <a
+                href={draftModeUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <FilePenLine className="mr-2 h-4 w-4" /> Preview
+              </a>
+            </Button>
+            <RevisionHistoryButton parentType="page" parentId={pageId} />
+          </div>
+        </div>
+
+        <DraftStatusActions parentId={pageId} parentType="page" hasDraft={hasDraft} />
+
+        <PageForm
+          page={page}
+          formAction={updatePageAction}
+        actionButtonText="Update Page Metadata"
+        isEditing={true}
+        availableLanguagesProp={allSiteLanguages}
+        initialFeatureImageUrl={initialFeatureImageUrl}
+        initialFeatureImageId={initialFeatureImageId}
+      />
+
+        <Separator className="my-8" />
+
+        <div className="w-full mx-auto px-6">
+          <h2 className="text-xl font-semibold mb-4">Page Content Blocks</h2>
+          <BlockEditorArea
+            parentId={page.id}
+            parentType="page"
+            initialBlocks={page.blocks}
+            languageId={page.language_id}
+          />
+        </div>
+      </div>
+    </UploadFolderProvider>
+  );
+}