npm - create-brainerce-store - Versions diffs - 1.84.0 → 1.86.0 - Mend

create-brainerce-store 1.84.0 → 1.86.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/templates/nextjs/base/src/app/forgot-password/page.tsx CHANGED Viewed

@@ -21,8 +21,9 @@ export default function ForgotPasswordPage() {
       setLoading(true);
       setError(null);
       const client = getClient();
-      const resetUrl = `${window.location.origin}/api/auth/reset-callback`;
-      await client.forgotPassword(email, { resetUrl });
+      // The reset link's host is chosen by the server (the channel's domain),
+      // never by this page; the email lands on /reset-password?token=...
+      await client.forgotPassword(email);
       setSent(true);
     } catch (err) {
       const message =

package/templates/nextjs/base/src/app/icon.svg ADDED Viewed

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="7" fill="#71717a" />
+  <path
+    d="M11 13V10.5a5 5 0 0 1 10 0V13M8.5 13h15l-1.1 12.1a2 2 0 0 1-2 1.9h-8.8a2 2 0 0 1-2-1.9L8.5 13Z"
+    fill="none"
+    stroke="#fafafa"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/templates/nextjs/base/src/app/layout.tsx.ejs CHANGED Viewed

@@ -13,6 +13,8 @@ import { resolveRegion } from '@/core/lib/region.server';
 import { getDirection, getMessages, supportedLocales } from '@/i18n';
 import { getNonce } from '@/core/lib/nonce';
 import { getCanonicalSiteUrl } from '@/core/lib/site-url';
+import { resolveStoreName, buildTitleTemplate } from '@/core/lib/store-name';
+import { buildMetaDescription } from '@/core/lib/seo';
 import '../globals.css';
 <%- fontVariable %>
@@ -20,20 +22,32 @@ import '../globals.css';
 // Resolved per request rather than read from a hardcoded env default: the
 // scaffolder cannot know the deploy domain, so `metadataBase` is the one
 // value that must never be guessed. See core/lib/site-url.ts.
-export async function generateMetadata(): Promise<Metadata> {
-  const baseUrl = await getCanonicalSiteUrl();
+//
+// The store NAME is resolved the same way, and for the same reason: under
+// `--defer-connection` the scaffolder only knew the directory name. Live
+// `storeInfo.name` wins (`fetchStoreInfo` is `cache()`-wrapped, so this shares
+// the layout's fetch), then the build-time NEXT_PUBLIC_STORE_NAME, then the
+// scaffold literal — see core/lib/store-name.ts.
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const [baseUrl, storeInfo] = await Promise.all([getCanonicalSiteUrl(), fetchStoreInfo(locale)]);
+  const storeName = resolveStoreName(storeInfo);
   return {
   metadataBase: new URL(baseUrl),
   title: {
-    default: <%- storeNameJs %>,
-    template: <%- titleTemplateJs %>,
+    default: storeName,
+    template: buildTitleTemplate(storeName),
   },
-  description: <%- storeNameJs %>,
+  description: buildMetaDescription(storeInfo?.metaDescription) || storeName,
   alternates: {
     canonical: '/',
   },
   openGraph: {
-    siteName: <%- storeNameJs %>,
+    siteName: storeName,
     type: 'website',
   },
   robots: {
@@ -43,11 +57,11 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
-function buildOrganizationJsonLd(baseUrl: string) {
+function buildOrganizationJsonLd(baseUrl: string, storeName: string) {
   return {
     '@context': 'https://schema.org',
     '@type': 'Organization',
-    name: <%- storeNameJs %>,
+    name: storeName,
     url: baseUrl,
   };
 }
@@ -99,6 +113,9 @@ export default async function RootLayout({
     // `regionId`, which is what this storefront did before regions existed.
     resolveRegion(),
   ]);
+  // One resolved name for the JSON-LD, the header and the footer. Live data
+  // first; the scaffold-time literal is only the last fallback.
+  const storeName = resolveStoreName(storeInfo);
   return (
     <html lang={locale} dir={dir}>
@@ -108,7 +125,7 @@ export default async function RootLayout({
           nonce={nonce}
           suppressHydrationWarning
           dangerouslySetInnerHTML={{
-            __html: JSON.stringify(buildOrganizationJsonLd(baseUrl))
+            __html: JSON.stringify(buildOrganizationJsonLd(baseUrl, storeName))
               .replace(/</g, '\\u003c')
               .replace(/>/g, '\\u003e')
               .replace(/&/g, '\\u0026'),
@@ -152,10 +169,10 @@ export default async function RootLayout({
           <TrackingBootstrap />
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
-            <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
+            <SiteHeader header={siteHeader} storeName={storeName} />
             <DiscountBannerStrip banners={discountBanners} />
             <main className="flex-1">{children}</main>
-            <SiteFooter footer={siteFooter} storeName={<%- storeNameJs %>} />
+            <SiteFooter footer={siteFooter} storeName={storeName} />
           </div>
           <BrainerceBotWidget />
         </StoreProvider>
@@ -177,6 +194,8 @@ import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
 import { resolveRegion } from '@/core/lib/region.server';
 import { getNonce } from '@/core/lib/nonce';
 import { getCanonicalSiteUrl } from '@/core/lib/site-url';
+import { resolveStoreName, buildTitleTemplate } from '@/core/lib/store-name';
+import { buildMetaDescription } from '@/core/lib/seo';
 import './globals.css';
 <%- fontVariable %>
@@ -184,20 +203,27 @@ import './globals.css';
 // Resolved per request rather than read from a hardcoded env default: the
 // scaffolder cannot know the deploy domain, so `metadataBase` is the one
 // value that must never be guessed. See core/lib/site-url.ts.
+//
+// The store NAME is resolved the same way, and for the same reason: under
+// `--defer-connection` the scaffolder only knew the directory name. Live
+// `storeInfo.name` wins (`fetchStoreInfo` is `cache()`-wrapped, so this shares
+// the layout's fetch), then the build-time NEXT_PUBLIC_STORE_NAME, then the
+// scaffold literal — see core/lib/store-name.ts.
 export async function generateMetadata(): Promise<Metadata> {
-  const baseUrl = await getCanonicalSiteUrl();
+  const [baseUrl, storeInfo] = await Promise.all([getCanonicalSiteUrl(), fetchStoreInfo()]);
+  const storeName = resolveStoreName(storeInfo);
   return {
   metadataBase: new URL(baseUrl),
   title: {
-    default: <%- storeNameJs %>,
-    template: <%- titleTemplateJs %>,
+    default: storeName,
+    template: buildTitleTemplate(storeName),
   },
-  description: <%- storeNameJs %>,
+  description: buildMetaDescription(storeInfo?.metaDescription) || storeName,
   alternates: {
     canonical: '/',
   },
   openGraph: {
-    siteName: <%- storeNameJs %>,
+    siteName: storeName,
     locale: '<%= ogLocale %>',
     type: 'website',
   },
@@ -208,11 +234,11 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
-function buildOrganizationJsonLd(baseUrl: string) {
+function buildOrganizationJsonLd(baseUrl: string, storeName: string) {
   return {
     '@context': 'https://schema.org',
     '@type': 'Organization',
-    name: <%- storeNameJs %>,
+    name: storeName,
     url: baseUrl,
   };
 }
@@ -252,6 +278,9 @@ export default async function RootLayout({
     // `regionId`, which is what this storefront did before regions existed.
     resolveRegion(),
   ]);
+  // One resolved name for the JSON-LD, the header and the footer. Live data
+  // first; the scaffold-time literal is only the last fallback.
+  const storeName = resolveStoreName(storeInfo);
   return (
     <html lang="<%= language %>" dir="<%= direction %>">
@@ -261,7 +290,7 @@ export default async function RootLayout({
           nonce={nonce}
           suppressHydrationWarning
           dangerouslySetInnerHTML={{
-            __html: JSON.stringify(buildOrganizationJsonLd(baseUrl))
+            __html: JSON.stringify(buildOrganizationJsonLd(baseUrl, storeName))
               .replace(/</g, '\\u003c')
               .replace(/>/g, '\\u003e')
               .replace(/&/g, '\\u0026'),
@@ -303,10 +332,10 @@ export default async function RootLayout({
           <TrackingBootstrap />
           <div className="min-h-screen flex flex-col">
             <AnnouncementBar announcements={announcements} />
-            <SiteHeader header={siteHeader} storeName={<%- storeNameJs %>} />
+            <SiteHeader header={siteHeader} storeName={storeName} />
             <DiscountBannerStrip banners={discountBanners} />
             <main className="flex-1">{children}</main>
-            <SiteFooter footer={siteFooter} storeName={<%- storeNameJs %>} />
+            <SiteFooter footer={siteFooter} storeName={storeName} />
           </div>
           <BrainerceBotWidget />
         </StoreProvider>

package/templates/nextjs/base/src/app/opengraph-image.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { ImageResponse } from 'next/og';
 import { fetchStoreInfo } from '@/core/lib/brainerce.server';
+import { resolveStoreName } from '@/core/lib/store-name';
 /**
  * Default Open Graph card for every page that doesn't set its own og:image
@@ -41,7 +42,10 @@ const LATIN_ONLY = /^[ -ɏ\s\p{P}\p{N}]*$/u;
 export default async function OpenGraphImage() {
   const info = await fetchStoreInfo();
-  const name = info?.name?.trim() || '';
+  // Live name first, then the build-time NEXT_PUBLIC_STORE_NAME, then the
+  // scaffold literal — the card must never read a stale baked name while the
+  // <title> next to it reads the live one.
+  const name = resolveStoreName(info);
   const description = info?.metaDescription?.trim() || '';
   const logo = info?.logo || null;

package/templates/nextjs/base/src/app/reset-password/page.tsx CHANGED Viewed

@@ -1,138 +1,25 @@
-'use client';
-import { useState } from 'react';
-import { useRouter, Link } from '@/core/lib/navigation';
-import { proxyResetPassword } from '@/core/lib/auth';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { useTranslations } from '@/core/lib/translations';
-import { getPasswordError } from '@/core/lib/validation';
-export default function ResetPasswordPage() {
-  const router = useRouter();
-  const t = useTranslations('auth');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (loading) return;
-    const pwCode = getPasswordError(newPassword);
-    if (pwCode) {
-      setError(t(pwCode));
-      return;
-    }
-    if (newPassword !== confirmPassword) {
-      setError(t('passwordsMustMatch'));
-      return;
-    }
-    try {
-      setLoading(true);
-      setError(null);
-      await proxyResetPassword(newPassword);
-      setSuccess(true);
-      setTimeout(() => router.push('/login'), 2000);
-    } catch (err) {
-      const message =
-        err instanceof Error ? err.message : 'Something went wrong. Please try again.';
-      setError(message);
-    } finally {
-      setLoading(false);
-    }
-  }
-  return (
-    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-      <div className="w-full max-w-md space-y-6">
-        <div className="text-center">
-          <h1 className="text-foreground text-2xl font-bold">{t('resetPasswordTitle')}</h1>
-          <p className="text-muted-foreground mt-1 text-sm">{t('resetPasswordSubtitle')}</p>
-        </div>
-        {error && (
-          <div className="bg-destructive/10 border-destructive/20 text-destructive space-y-2 rounded-lg border px-4 py-3 text-sm">
-            <p>{error}</p>
-            <Link
-              href="/forgot-password"
-              className="text-primary block font-medium hover:underline"
-            >
-              {t('sendResetLink')}
-            </Link>
-          </div>
-        )}
-        {success ? (
-          <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
-            {t('passwordResetSuccess')}
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label
-                htmlFor="new-password"
-                className="text-foreground mb-1.5 block text-sm font-medium"
-              >
-                {t('newPassword')}
-              </label>
-              <input
-                id="new-password"
-                type="password"
-                required
-                minLength={8}
-                value={newPassword}
-                onChange={(e) => setNewPassword(e.target.value)}
-                placeholder={t('newPasswordPlaceholder')}
-                autoComplete="new-password"
-                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
-              />
-            </div>
-            <div>
-              <label
-                htmlFor="confirm-password"
-                className="text-foreground mb-1.5 block text-sm font-medium"
-              >
-                {t('confirmPassword')}
-              </label>
-              <input
-                id="confirm-password"
-                type="password"
-                required
-                minLength={8}
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                placeholder={t('confirmPasswordPlaceholder')}
-                autoComplete="new-password"
-                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
-              />
-            </div>
-            <button
-              type="submit"
-              disabled={loading}
-              className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
-            >
-              {loading ? (
-                <>
-                  <LoadingSpinner
-                    size="sm"
-                    className="border-primary-foreground/30 border-t-primary-foreground"
-                  />
-                  {t('resettingPassword')}
-                </>
-              ) : (
-                t('resetPassword')
-              )}
-            </button>
-          </form>
-        )}
-      </div>
-    </div>
-  );
-}
+import { redirect } from 'next/navigation';
+import { ResetPasswordForm } from './reset-password-form';
+/**
+ * The email Brainerce sends links to `<store domain>/reset-password?token=...`.
+ * That token must never reach client JavaScript, so this server component hands
+ * it to `/api/auth/reset-callback`, which stores it in an httpOnly cookie and
+ * returns here with a clean URL. The form then posts the new password through
+ * `/api/auth/reset-password`, which reads the cookie server-side.
+ *
+ * Without this hop the page rendered with no cookie and every reset failed with
+ * "No reset token found", because the callback route was only ever reached by a
+ * `resetUrl` option the SDK does not send.
+ */
+export default async function ResetPasswordPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ token?: string }>;
+}) {
+  const { token } = await searchParams;
+  if (token) {
+    redirect(`/api/auth/reset-callback?token=${encodeURIComponent(token)}`);
+  }
+  return <ResetPasswordForm />;
+}

package/templates/nextjs/base/src/app/reset-password/reset-password-form.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+'use client';
+import { useState } from 'react';
+import { useRouter, Link } from '@/core/lib/navigation';
+import { proxyResetPassword } from '@/core/lib/auth';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+import { getPasswordError } from '@/core/lib/validation';
+export function ResetPasswordForm() {
+  const router = useRouter();
+  const t = useTranslations('auth');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading) return;
+    const pwCode = getPasswordError(newPassword);
+    if (pwCode) {
+      setError(t(pwCode));
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setError(t('passwordsMustMatch'));
+      return;
+    }
+    try {
+      setLoading(true);
+      setError(null);
+      await proxyResetPassword(newPassword);
+      setSuccess(true);
+      setTimeout(() => router.push('/login'), 2000);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : 'Something went wrong. Please try again.';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('resetPasswordTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('resetPasswordSubtitle')}</p>
+        </div>
+        {error && (
+          <div className="bg-destructive/10 border-destructive/20 text-destructive space-y-2 rounded-lg border px-4 py-3 text-sm">
+            <p>{error}</p>
+            <Link
+              href="/forgot-password"
+              className="text-primary block font-medium hover:underline"
+            >
+              {t('sendResetLink')}
+            </Link>
+          </div>
+        )}
+        {success ? (
+          <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
+            {t('passwordResetSuccess')}
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label
+                htmlFor="new-password"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('newPassword')}
+              </label>
+              <input
+                id="new-password"
+                type="password"
+                required
+                minLength={8}
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                placeholder={t('newPasswordPlaceholder')}
+                autoComplete="new-password"
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+              />
+            </div>
+            <div>
+              <label
+                htmlFor="confirm-password"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('confirmPassword')}
+              </label>
+              <input
+                id="confirm-password"
+                type="password"
+                required
+                minLength={8}
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder={t('confirmPasswordPlaceholder')}
+                autoComplete="new-password"
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {loading ? (
+                <>
+                  <LoadingSpinner
+                    size="sm"
+                    className="border-primary-foreground/30 border-t-primary-foreground"
+                  />
+                  {t('resettingPassword')}
+                </>
+              ) : (
+                t('resetPassword')
+              )}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/account/order-payment-block.tsx CHANGED Viewed

@@ -29,7 +29,7 @@ const FINANCIAL_STATUS_COLOR: Record<string, string> = {
 export function OrderPaymentBlock({ order, className }: OrderPaymentBlockProps) {
   const t = useTranslations('account');
-  if (!order.paymentMethod && !order.financialStatus) return null;
+  if (!order.paymentMethod && !order.financialStatus && !order.invoiceUrl) return null;
   const statusKey = order.financialStatus ? FINANCIAL_STATUS_KEY[order.financialStatus] : null;
   const statusLabel = statusKey ? t(statusKey) : order.financialStatus || '';
@@ -38,7 +38,7 @@ export function OrderPaymentBlock({ order, className }: OrderPaymentBlockProps)
     : '';
   return (
-    <div className={cn('border-border flex items-center gap-3 border-t pt-2 text-xs', className)}>
+    <div className={cn('border-border flex flex-wrap items-center gap-3 border-t pt-2 text-xs', className)}>
       <p className="text-foreground text-sm font-medium">{t('paymentMethod')}</p>
       {order.paymentMethod && (
         <span className="text-foreground capitalize">{order.paymentMethod.replace(/_/g, ' ')}</span>
@@ -53,6 +53,21 @@ export function OrderPaymentBlock({ order, className }: OrderPaymentBlockProps)
           {statusLabel}
         </span>
       )}
+      {/* `invoiceUrl` is null until the connected payment provider (e.g.
+          Cardcom) generates the document, and stays null when the store has
+          no invoicing-capable provider connected — render nothing then,
+          never a broken link or a retry loop. */}
+      {order.invoiceUrl && (
+        <a
+          href={order.invoiceUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary text-sm font-medium hover:underline"
+        >
+          {t('downloadInvoice')}
+          {order.invoiceNumber ? ` (#${order.invoiceNumber})` : ''}
+        </a>
+      )}
     </div>
   );
 }