create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/app/profile/orders/CustomerOrdersPageClient.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { formatInvoiceCurrency, formatInvoiceDate, translateOrderStatus, translateOrFallback, getInvoiceLocale } from '@nextblock-cms/ecommerce';
+import { useTranslations } from '@nextblock-cms/utils';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@nextblock-cms/ui';
+import Link from 'next/link';
+
+import type { ProfileAccountSummary, ProfileAccountUser } from '../account-types';
+import { ProfileAccountSidebar } from '../ProfileAccountSidebar';
+
+interface CustomerOrdersPageClientProps {
+  orders: Array<{
+    id: string;
+    invoice_number: string | null;
+    paid_at: string | null;
+    created_at: string | null;
+    currency: string | null;
+    status: string;
+    total: number;
+  }>;
+  profile: ProfileAccountSummary;
+  user: ProfileAccountUser;
+}
+
+export function CustomerOrdersPageClient({
+  orders,
+  profile,
+  user,
+}: CustomerOrdersPageClientProps) {
+  const { t, lang } = useTranslations();
+  const locale = getInvoiceLocale(lang);
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-12 md:px-6">
+      <div className="grid gap-6 md:grid-cols-12">
+        <div className="md:col-span-4">
+          <ProfileAccountSidebar profile={profile} user={user} />
+        </div>
+
+        <Card className="md:col-span-8">
+          <CardHeader>
+            <CardTitle>
+              {translateOrFallback(t, 'profile_orders_title', 'My orders')}
+            </CardTitle>
+            <CardDescription>
+              {translateOrFallback(
+                t,
+                'profile_orders_description',
+                'Review your recent purchases and open printable invoices.'
+              )}
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent className="space-y-4">
+            {orders.length ? (
+              orders.map((order) => (
+                <div
+                  key={order.id}
+                  className="flex flex-col gap-4 rounded-xl border px-4 py-4 md:flex-row md:items-center md:justify-between"
+                >
+                  <div className="space-y-2">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <p className="font-semibold">
+                        {translateOrFallback(t, 'order_number', 'Order #')} {order.id}
+                      </p>
+                      <Badge variant="secondary" className="capitalize">
+                        {translateOrderStatus(order.status, t)}
+                      </Badge>
+                    </div>
+
+                    <div className="space-y-1 text-sm text-muted-foreground">
+                      <p>
+                        {translateOrFallback(t, 'invoice_number', 'Invoice #')}:{' '}
+                        {order.invoice_number || '--'}
+                      </p>
+                      <p>
+                        {translateOrFallback(t, 'order_date', 'Date')}:{' '}
+                        {formatInvoiceDate(order.created_at, locale) || '--'}
+                      </p>
+                      <p>
+                        {translateOrFallback(t, 'ecommerce.total', 'Total')}:{' '}
+                        {formatInvoiceCurrency(
+                          order.total,
+                          order.currency || 'usd',
+                          locale
+                        )}
+                      </p>
+                    </div>
+                  </div>
+
+                  <Button asChild>
+                    <Link href={`/profile/orders/${order.id}`}>
+                      {translateOrFallback(
+                        t,
+                        'ecommerce.view_details',
+                        'View Details'
+                      )}
+                    </Link>
+                  </Button>
+                </div>
+              ))
+            ) : (
+              <div className="rounded-xl border border-dashed px-6 py-12 text-center text-muted-foreground">
+                {translateOrFallback(
+                  t,
+                  'profile_orders_empty',
+                  'You do not have any orders yet.'
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/profile/orders/[id]/CustomerOrderDetailPageClient.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import {
+  InvoiceViewerShell,
+  type InvoicePresentationData,
+  buildInvoiceDocumentLabels,
+  getInvoiceLocale,
+  localizeInvoicePresentationData,
+  translateOrFallback,
+} from '@nextblock-cms/ecommerce';
+import { useTranslations } from '@nextblock-cms/utils';
+
+import type { ProfileAccountSummary, ProfileAccountUser } from '../../account-types';
+import { ProfileAccountSidebar } from '../../ProfileAccountSidebar';
+
+interface CustomerOrderDetailPageClientProps {
+  order: {
+    id: string;
+    invoice_number: string | null;
+  };
+  invoice: InvoicePresentationData | null;
+  profile: ProfileAccountSummary;
+  user: ProfileAccountUser;
+}
+
+export function CustomerOrderDetailPageClient({
+  order,
+  invoice,
+  profile,
+  user,
+}: CustomerOrderDetailPageClientProps) {
+  const { t, lang } = useTranslations();
+  const localizedInvoice = localizeInvoicePresentationData(invoice, t);
+
+  return (
+    <div className="grid gap-6 md:grid-cols-12">
+      <div className="md:col-span-4">
+        <ProfileAccountSidebar profile={profile} user={user} />
+      </div>
+
+      <div className="md:col-span-8">
+        <InvoiceViewerShell
+          invoice={localizedInvoice}
+          labels={buildInvoiceDocumentLabels(t)}
+          locale={getInvoiceLocale(lang)}
+          title={
+            order.invoice_number ||
+            translateOrFallback(t, 'profile_order_detail_title', 'Order invoice')
+          }
+          description={translateOrFallback(
+            t,
+            'profile_order_detail_description',
+            'Review and print your finalized invoice.'
+          )}
+          printLabel={translateOrFallback(
+            t,
+            'print_invoice',
+            'Print / Save as PDF'
+          )}
+          action={{
+            href: '/profile/orders',
+            label: translateOrFallback(
+              t,
+              'back_to_orders',
+              'Back to orders'
+            ),
+            variant: 'default',
+          }}
+          emptyMessage={translateOrFallback(
+            t,
+            'profile_order_invoice_pending',
+            'The printable invoice will appear here once this order has been finalized.'
+          )}
+          className="max-w-none px-0 py-0"
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { getCurrentCustomerOrderInvoice } from '@nextblock-cms/ecommerce/server';
+import { notFound } from 'next/navigation';
+
+import { requireProfileAccountContext } from '../../account-data';
+import { CustomerOrderDetailPageClient } from './CustomerOrderDetailPageClient';
+
+export default async function ProfileOrderDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const { supabase, profile, user } = await requireProfileAccountContext(
+    `/profile/orders/${id}`
+  );
+  const result = await getCurrentCustomerOrderInvoice(id, supabase as any);
+
+  if (!result) {
+    notFound();
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-12 md:px-6">
+      <CustomerOrderDetailPageClient
+        order={result.order}
+        invoice={result.invoice}
+        profile={profile}
+        user={user}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { getCurrentCustomerOrders } from '@nextblock-cms/ecommerce/server';
+
+import { requireProfileAccountContext } from '../account-data';
+import { CustomerOrdersPageClient } from './CustomerOrdersPageClient';
+
+export default async function ProfileOrdersPage() {
+  const { supabase, profile, user } = await requireProfileAccountContext(
+    '/profile/orders'
+  );
+  const orders = await getCurrentCustomerOrders(supabase as any);
+
+  return (
+    <CustomerOrdersPageClient
+      orders={orders}
+      profile={profile}
+      user={user}
+    />
+  );
+}

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

@@ -0,0 +1,51 @@
+import { createClient } from "@nextblock-cms/db/server";
+import { redirect } from "next/navigation";
+import { CustomerProfileForm, addressesMatch } from "@nextblock-cms/ecommerce";
+import { getDefaultUserAddresses } from "@nextblock-cms/ecommerce/server";
+import MediaPickerDialog from "../cms/media/components/MediaPickerDialog";
+import { ProfilePageHeader } from "./ProfilePageHeader";
+import { ProfilePageMissingState } from "./ProfilePageMissingState";
+import { profileAccountLinks } from "./account-links";
+
+export default async function ProfilePage() {
+  const supabase = createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return redirect("/sign-in");
+  }
+
+  const [{ data: profile }, { billingAddress, shippingAddress }] = await Promise.all([
+    supabase.from("profiles").select("*").eq("id", user.id).single(),
+    getDefaultUserAddresses(user.id, supabase),
+  ]);
+
+  if (!profile) {
+    return <ProfilePageMissingState />;
+  }
+
+  return (
+    <div className="w-full max-w-6xl mx-auto py-12 px-4 md:px-6">
+      <ProfilePageHeader />
+      
+      <CustomerProfileForm 
+        initialData={{
+            full_name: profile.full_name || '',
+            avatar_url: profile.avatar_url || '',
+            website: profile.website || '',
+            github_username: profile.github_username || '',
+            phone: profile.phone || '',
+            billing_address: billingAddress,
+            shipping_address: shippingAddress,
+            use_billing_for_shipping: !shippingAddress || addressesMatch(billingAddress, shippingAddress),
+        }} 
+        MediaPickerComponent={MediaPickerDialog}
+        email={user.email}
+        accountLinks={profileAccountLinks}
+      />
+    </div>
+  );
+}

package/templates/nextblock-template/app/profile/password/PasswordSettingsPageClient.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useTranslations } from '@nextblock-cms/utils';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+} from '@nextblock-cms/ui';
+
+import type { ProfileAccountSummary, ProfileAccountUser } from '../account-types';
+import { ProfileAccountSidebar } from '../ProfileAccountSidebar';
+import { changePasswordAction } from './actions';
+
+interface PasswordSettingsPageClientProps {
+  profile: ProfileAccountSummary;
+  user: ProfileAccountUser;
+  successMessage?: string | null;
+  errorMessage?: string | null;
+}
+
+function translateMessage(
+  t: (key: string, params?: Record<string, string | number>) => string,
+  value?: string | null
+) {
+  if (!value) {
+    return null;
+  }
+
+  const translated = t(value);
+  return translated === value ? value : translated;
+}
+
+export function PasswordSettingsPageClient({
+  profile,
+  user,
+  successMessage,
+  errorMessage,
+}: PasswordSettingsPageClientProps) {
+  const { t } = useTranslations();
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-12 md:px-6">
+      <div className="grid gap-6 md:grid-cols-12">
+        <div className="md:col-span-4">
+          <ProfileAccountSidebar profile={profile} user={user} />
+        </div>
+
+        <Card className="md:col-span-8">
+          <form action={changePasswordAction}>
+            <CardHeader>
+              <CardTitle>
+                {t('profile_password_title') === 'profile_password_title'
+                  ? 'Change your password'
+                  : t('profile_password_title')}
+              </CardTitle>
+              <CardDescription>
+                {t('profile_password_description') ===
+                'profile_password_description'
+                  ? 'Update your account password without leaving your profile.'
+                  : t('profile_password_description')}
+              </CardDescription>
+            </CardHeader>
+
+            <CardContent className="space-y-6">
+              <div className="grid gap-4 md:grid-cols-2">
+                <div className="space-y-2">
+                  <Label htmlFor="password">
+                    {t('new_password') === 'new_password'
+                      ? 'New password'
+                      : t('new_password')}
+                  </Label>
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    autoComplete="new-password"
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="confirmPassword">
+                    {t('confirm_new_password') === 'confirm_new_password'
+                      ? 'Confirm new password'
+                      : t('confirm_new_password')}
+                  </Label>
+                  <Input
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    autoComplete="new-password"
+                    required
+                  />
+                </div>
+              </div>
+
+              {successMessage ? (
+                <div className="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
+                  {translateMessage(t, successMessage)}
+                </div>
+              ) : null}
+
+              {errorMessage ? (
+                <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                  {translateMessage(t, errorMessage)}
+                </div>
+              ) : null}
+            </CardContent>
+
+            <CardFooter className="flex justify-end">
+              <Button type="submit" size="lg">
+                {t('save_changes') === 'save_changes'
+                  ? 'Save changes'
+                  : t('save_changes')}
+              </Button>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/profile/password/actions.ts

@@ -0,0 +1,59 @@
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import { encodedRedirect } from '@nextblock-cms/utils/server';
+import { redirect } from 'next/navigation';
+
+export async function changePasswordAction(formData: FormData) {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    redirect('/profile');
+  }
+
+  const supabase = createClient();
+  const {
+    data: { user },
+    error: authError,
+  } = await supabase.auth.getUser();
+
+  if (authError || !user) {
+    redirect('/sign-in?redirect=%2Fprofile%2Fpassword');
+  }
+
+  const password = formData.get('password')?.toString() || '';
+  const confirmPassword =
+    formData.get('confirmPassword')?.toString() || '';
+
+  if (!password || !confirmPassword) {
+    return encodedRedirect(
+      'error',
+      '/profile/password',
+      'password_update_failed'
+    );
+  }
+
+  if (password !== confirmPassword) {
+    return encodedRedirect(
+      'error',
+      '/profile/password',
+      'passwords_do_not_match'
+    );
+  }
+
+  const { error } = await supabase.auth.updateUser({
+    password,
+  });
+
+  if (error) {
+    return encodedRedirect(
+      'error',
+      '/profile/password',
+      'password_update_failed'
+    );
+  }
+
+  return encodedRedirect(
+    'success',
+    '/profile/password',
+    'password_updated_success'
+  );
+}

package/templates/nextblock-template/app/profile/password/page.tsx

@@ -0,0 +1,27 @@
+import { requireProfileAccountContext } from '../account-data';
+import { PasswordSettingsPageClient } from './PasswordSettingsPageClient';
+import { notFound } from 'next/navigation';
+
+export default async function ProfilePasswordPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ success?: string; error?: string }>;
+}) {
+  if (process.env.NEXT_PUBLIC_IS_SANDBOX === 'true') {
+    notFound();
+  }
+
+  const { profile, user } = await requireProfileAccountContext(
+    '/profile/password'
+  );
+  const params = await searchParams;
+
+  return (
+    <PasswordSettingsPageClient
+      profile={profile}
+      user={user}
+      successMessage={params.success || null}
+      errorMessage={params.error || null}
+    />
+  );
+}

package/templates/nextblock-template/app/providers.tsx

@@ -1,16 +1,47 @@
 "use client";
 
 import { ThemeProvider } from "next-themes";
-import { AuthProvider } from "@/context/AuthContext";
-import { LanguageProvider } from "@/context/LanguageContext";
-import { CurrentContentProvider } from "@/context/CurrentContentContext";
+
+// Suppress the React 19 warning for the <script> tag generated by next-themes in development
+if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+  const orig = console.error;
+  console.error = (...args: any[]) => {
+    if (typeof args[0] === 'string' && args[0].includes('Encountered a script tag')) {
+      return;
+    }
+    orig.apply(console, args);
+  };
+}
+import { AuthProvider } from '../context/AuthContext';
+import { LanguageProvider, useLanguage } from '../context/LanguageContext';
+import { CurrentContentProvider } from '../context/CurrentContentContext';
+import { DeferredCartTranslator } from '../components/DeferredCartTranslator';
+import { CurrencyProvider } from '@nextblock-cms/ecommerce/CurrencyProvider';
 import { TranslationsProvider } from '@nextblock-cms/utils';
 
+function TranslationBridge({
+  children,
+  translations,
+}: {
+  children: React.ReactNode;
+  translations: { key: string; translations: Record<string, string> }[];
+}) {
+  const { currentLocale } = useLanguage();
+
+  return (
+    <TranslationsProvider translations={translations} lang={currentLocale}>
+      {children}
+    </TranslationsProvider>
+  );
+}
+
 export function Providers({ children, ...props }: { children: React.ReactNode;[key: string]: any; }) {
   const {
     serverUser,
     serverProfile,
     serverLocale,
+    initialCurrencies,
+    initialCurrencyCode,
     initialAvailableLanguages,
     initialDefaultLanguage,
     translations,
@@ -24,20 +55,27 @@ export function Providers({ children, ...props }: { children: React.ReactNode;[k
         initialAvailableLanguages={initialAvailableLanguages}
         initialDefaultLanguage={initialDefaultLanguage}
       >
-        <CurrentContentProvider>
-          <TranslationsProvider translations={translations} lang={serverLocale}>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="system"
-              enableSystem
-              disableTransitionOnChange
-              nonce={nonce}
-              themes={['light', 'dark', 'vibrant']}
-            >
-              {children}
-            </ThemeProvider>
-          </TranslationsProvider>
-        </CurrentContentProvider>
+        <CurrencyProvider
+          initialCurrencies={initialCurrencies}
+          initialCurrencyCode={initialCurrencyCode}
+          locale={serverLocale}
+        >
+          <CurrentContentProvider>
+            <DeferredCartTranslator />
+            <TranslationBridge translations={translations}>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+                nonce={nonce}
+                themes={['light', 'dark', 'vibrant']}
+              >
+                {children}
+              </ThemeProvider>
+            </TranslationBridge>
+          </CurrentContentProvider>
+        </CurrencyProvider>
       </LanguageProvider>
     </AuthProvider>
   );

package/templates/nextblock-template/app/robots.txt/route.ts

@@ -7,7 +7,17 @@ export async function GET() {
     );
   }
 
-  const robotsTxtContent = `User-agent: *
+  const isSandbox = process.env.NEXT_PUBLIC_IS_SANDBOX === 'true';
+  // Sandbox: ALLOW crawling so Googlebot can actually see the `noindex` we send
+  // on every response (the X-Robots-Tag header in next.config.js + the robots
+  // meta in layout.tsx) and drop the pages from its index. `Disallow: /` would
+  // block crawling, so Google could never read that noindex and might leave
+  // URL-only entries in the index — the opposite of what we want. The Sitemap
+  // line is intentionally omitted here (the sandbox sitemap is empty).
+  const robotsTxtContent = isSandbox
+    ? `User-agent: *
+Allow: /`
+    : `User-agent: *
 Allow: /
 Sitemap: ${siteUrl}/sitemap.xml`;