create-nextblock 0.16.1 → 0.16.3

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

@@ -1,16 +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>
-  );
-}
+'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

@@ -1,9 +1,9 @@
-'use client';
-
-import { useTranslations } from '@nextblock-cms/utils';
-
-export function ProfilePageMissingState() {
-  const { t } = useTranslations();
-
-  return <div>{t('profile_not_found')}</div>;
-}
+'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-links.ts

@@ -1,22 +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,
-        },
-      ]
-    : []),
-];
+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/orders/CustomerOrdersPageClient.tsx

@@ -1,124 +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>
-  );
-}
+'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/page.tsx

@@ -1,19 +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}
-    />
-  );
-}
+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/password/PasswordSettingsPageClient.tsx

@@ -1,128 +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>
-  );
-}
+'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>
+  );
+}