create-brainerce-store 1.18.0 → 1.20.0

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

@@ -1,112 +1,112 @@
-'use client';
-
-import { useState } from 'react';
-import Link from 'next/link';
-import { getClient } from '@/lib/brainerce';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
-
-export default function ForgotPasswordPage() {
-  const t = useTranslations('auth');
-  const [email, setEmail] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [sent, setSent] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    if (loading) return;
-
-    try {
-      setLoading(true);
-      setError(null);
-      const client = getClient();
-      const resetUrl = `${window.location.origin}/api/auth/reset-callback`;
-      await client.forgotPassword(email, { resetUrl });
-      setSent(true);
-    } 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('forgotPasswordTitle')}</h1>
-          <p className="text-muted-foreground mt-1 text-sm">{t('forgotPasswordSubtitle')}</p>
-        </div>
-
-        {error && (
-          <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
-            {error}
-          </div>
-        )}
-
-        {sent ? (
-          <div className="space-y-4">
-            <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('resetLinkSent')}
-            </div>
-            <Link
-              href="/login"
-              className="text-primary block text-center text-sm font-medium hover:underline"
-            >
-              {t('backToLogin')}
-            </Link>
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label
-                htmlFor="forgot-email"
-                className="text-foreground mb-1.5 block text-sm font-medium"
-              >
-                {t('email')}
-              </label>
-              <input
-                id="forgot-email"
-                type="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder={t('emailPlaceholder')}
-                autoComplete="email"
-                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('sendingResetLink')}
-                </>
-              ) : (
-                t('sendResetLink')
-              )}
-            </button>
-
-            <Link
-              href="/login"
-              className="text-muted-foreground block text-center text-sm hover:underline"
-            >
-              {t('backToLogin')}
-            </Link>
-          </form>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { getClient } from '@/lib/brainerce';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/lib/translations';
+
+export default function ForgotPasswordPage() {
+  const t = useTranslations('auth');
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+      const client = getClient();
+      const resetUrl = `${window.location.origin}/api/auth/reset-callback`;
+      await client.forgotPassword(email, { resetUrl });
+      setSent(true);
+    } 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('forgotPasswordTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('forgotPasswordSubtitle')}</p>
+        </div>
+
+        {error && (
+          <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
+            {error}
+          </div>
+        )}
+
+        {sent ? (
+          <div className="space-y-4">
+            <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('resetLinkSent')}
+            </div>
+            <Link
+              href="/login"
+              className="text-primary block text-center text-sm font-medium hover:underline"
+            >
+              {t('backToLogin')}
+            </Link>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label
+                htmlFor="forgot-email"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('email')}
+              </label>
+              <input
+                id="forgot-email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder={t('emailPlaceholder')}
+                autoComplete="email"
+                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('sendingResetLink')}
+                </>
+              ) : (
+                t('sendResetLink')
+              )}
+            </button>
+
+            <Link
+              href="/login"
+              className="text-muted-foreground block text-center text-sm hover:underline"
+            >
+              {t('backToLogin')}
+            </Link>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,3 +1,77 @@
+<% if (i18nEnabled) { %>
+import type { Metadata } from 'next';
+<%- fontImport %>
+import { StoreProvider } from '@/providers/store-provider';
+import { Header } from '@/components/layout/header';
+import { Footer } from '@/components/layout/footer';
+import { getDirection, supportedLocales } from '@/i18n';
+import '../globals.css';
+
+<%- fontVariable %>
+
+const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+
+export const metadata: Metadata = {
+  metadataBase: new URL(baseUrl),
+  title: {
+    default: '<%= storeName %>',
+    template: `%s | <%= storeName %>`,
+  },
+  description: '<%= storeName %>',
+  alternates: {
+    canonical: '/',
+  },
+  openGraph: {
+    siteName: '<%= storeName %>',
+    type: 'website',
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+const organizationJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: '<%= storeName %>',
+  url: baseUrl,
+};
+
+export function generateStaticParams() {
+  return supportedLocales.map((locale) => ({ locale }));
+}
+
+export default function RootLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { locale: string };
+}) {
+  const dir = getDirection(params.locale);
+
+  return (
+    <html lang={params.locale} dir={dir}>
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationJsonLd) }}
+        />
+      </head>
+      <body className={font.className}>
+        <StoreProvider locale={params.locale}>
+          <div className="min-h-screen flex flex-col">
+            <Header />
+            <main className="flex-1">{children}</main>
+            <Footer />
+          </div>
+        </StoreProvider>
+      </body>
+    </html>
+  );
+}
+<% } else { %>
 import type { Metadata } from 'next';
 <%- fontImport %>
 import { StoreProvider } from '@/providers/store-provider';
@@ -62,3 +136,4 @@ export default function RootLayout({
     </html>
   );
 }
+<% } %>

package/templates/nextjs/base/src/app/login/layout.tsx

@@ -1,9 +1,9 @@
-import type { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  robots: { index: false, follow: false },
-};
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>;
-}
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/templates/nextjs/base/src/app/login/page.tsx

@@ -1,59 +1,59 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import { useAuth } from '@/providers/store-provider';
-import { proxyLogin } from '@/lib/auth';
-import { LoginForm } from '@/components/auth/login-form';
-import { OAuthButtons } from '@/components/auth/oauth-buttons';
-import { useTranslations } from '@/lib/translations';
-
-export default function LoginPage() {
-  const router = useRouter();
-  const auth = useAuth();
-  const t = useTranslations('auth');
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleLogin(email: string, password: string) {
-    try {
-      setError(null);
-      const result = await proxyLogin(email, password);
-
-      if (result.requiresVerification) {
-        // Verification token is NOT the auth JWT — safe to pass in URL
-        router.push('/verify-email');
-        return;
-      }
-
-      // Cookie was set by the proxy; refresh auth state
-      await auth.login();
-      router.push('/');
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Login failed. Please try again.';
-      setError(message);
-    }
-  }
-
-  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('welcomeBack')}</h1>
-          <p className="text-muted-foreground mt-1 text-sm">{t('signInSubtitle')}</p>
-        </div>
-
-        <LoginForm onSubmit={handleLogin} error={error} />
-
-        <OAuthButtons />
-
-        <p className="text-muted-foreground text-center text-sm">
-          {t('noAccount')}{' '}
-          <Link href="/register" className="text-primary font-medium hover:underline">
-            {t('createOne')}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useAuth } from '@/providers/store-provider';
+import { proxyLogin } from '@/lib/auth';
+import { LoginForm } from '@/components/auth/login-form';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { useTranslations } from '@/lib/translations';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const auth = useAuth();
+  const t = useTranslations('auth');
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleLogin(email: string, password: string) {
+    try {
+      setError(null);
+      const result = await proxyLogin(email, password);
+
+      if (result.requiresVerification) {
+        // Verification token is NOT the auth JWT — safe to pass in URL
+        router.push('/verify-email');
+        return;
+      }
+
+      // Cookie was set by the proxy; refresh auth state
+      await auth.login();
+      router.push('/');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Login failed. Please try again.';
+      setError(message);
+    }
+  }
+
+  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('welcomeBack')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('signInSubtitle')}</p>
+        </div>
+
+        <LoginForm onSubmit={handleLogin} error={error} />
+
+        <OAuthButtons />
+
+        <p className="text-muted-foreground text-center text-sm">
+          {t('noAccount')}{' '}
+          <Link href="/register" className="text-primary font-medium hover:underline">
+            {t('createOne')}
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/order-confirmation/layout.tsx

@@ -1,9 +1,9 @@
-import type { Metadata } from 'next';
-
-export const metadata: Metadata = {
-  robots: { index: false, follow: false },
-};
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return <>{children}</>;
-}
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  robots: { index: false, follow: false },
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

package/templates/nextjs/base/src/app/order-confirmation/page.tsx

@@ -35,6 +35,23 @@ function OrderConfirmationContent() {
         client.handlePaymentSuccess(checkoutId!);
         await refreshCart();
 
+        // For redirect-based payment providers (e.g. CardCom), the customer
+        // returns with provider params in the URL (lowprofilecode, etc.).
+        // Send these to the backend for server-side verification via the
+        // provider's API (e.g. GetLpResult) — never trust URL params alone.
+        const lowProfileCode =
+          searchParams.get('lowprofilecode') || searchParams.get('LowProfileCode');
+        if (lowProfileCode) {
+          try {
+            await client.confirmSdkPayment(checkoutId!, {
+              paymentIntentId: lowProfileCode,
+            });
+          } catch (err) {
+            console.warn('Redirect payment confirmation failed:', err);
+            // Don't block — webhook may still process the payment
+          }
+        }
+
         const orderResult = await client.waitForOrder(checkoutId!, {
           maxWaitMs: 30000,
         });

package/templates/nextjs/base/src/app/payment-complete/page.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { Suspense } from 'react';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+
+/**
+ * Lightweight callback page for iframe-based payment providers (e.g. CardCom).
+ *
+ * After the customer pays on the provider's hosted page (rendered inside an
+ * iframe on the checkout page), the provider redirects *inside the iframe* to
+ * this page. We extract the relevant query params and send them to the parent
+ * window via postMessage so the checkout page can verify the payment
+ * server-side and proceed to order confirmation.
+ */
+function PaymentCompleteContent() {
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    // Only send postMessage when running inside an iframe
+    if (window.parent === window) {
+      // Not in iframe — fallback: redirect to order-confirmation directly
+      const checkoutId = searchParams.get('checkout_id');
+      if (checkoutId) {
+        window.location.href = `/order-confirmation?${searchParams.toString()}`;
+      }
+      return;
+    }
+
+    // Collect all query params from the provider redirect
+    const data: Record<string, string> = {};
+    searchParams.forEach((value, key) => {
+      data[key] = value;
+    });
+
+    window.parent.postMessage({ type: 'brainerce:payment-complete', data }, window.location.origin);
+  }, [searchParams]);
+
+  return (
+    <div className="flex min-h-[200px] items-center justify-center">
+      <LoadingSpinner size="lg" />
+    </div>
+  );
+}
+
+export default function PaymentCompletePage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[200px] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <PaymentCompleteContent />
+    </Suspense>
+  );
+}