create-brainerce-store 1.50.5 → 1.52.0

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

@@ -1,178 +1,7 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { Link } from '@/lib/navigation';
-import type {
-  CartRecommendationsResponse,
-  CartUpgradesResponse,
-  CartBundlesResponse,
-} from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useCart } from '@/providers/store-provider';
-import { CartItem } from '@/components/cart/cart-item';
-import { CartUpgradeBanner } from '@/components/cart/cart-upgrade-banner';
-import { CartBundleOfferCard } from '@/components/cart/cart-bundle-offer';
-import { CartSummary } from '@/components/cart/cart-summary';
-import { CouponInput } from '@/components/cart/coupon-input';
-import { CartNudges } from '@/components/cart/cart-nudges';
-import { FreeShippingBar } from '@/components/cart/free-shipping-bar';
-import { ReservationCountdown } from '@/components/cart/reservation-countdown';
-import { CartRecommendationSection } from '@/components/products/recommendation-section';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
+import { CartView } from '@/ui/cart/cart-view';
 
 export default function CartPage() {
-  const { cart, cartLoading, refreshCart, itemCount } = useCart();
-  const t = useTranslations('cart');
-  const tc = useTranslations('common');
-  const [cartRecs, setCartRecs] = useState<CartRecommendationsResponse | null>(null);
-  const [upgrades, setUpgrades] = useState<CartUpgradesResponse | null>(null);
-  const [bundles, setBundles] = useState<CartBundlesResponse | null>(null);
-
-  // Load recommendations, upgrades, and bundles in a single request
-  useEffect(() => {
-    if (!cart?.id || cart.items.length === 0) {
-      setCartRecs(null);
-      setUpgrades(null);
-      setBundles(null);
-      return;
-    }
-    const client = getClient();
-    client
-      .getCart(cart.id, { include: ['recommendations', 'upgrades', 'bundles'] })
-      .then((enriched) => {
-        setCartRecs(enriched.recommendations ?? null);
-        setUpgrades(enriched.upgrades ?? null);
-        setBundles(enriched.bundles ?? null);
-      })
-      .catch(() => {});
-  }, [cart?.id, cart?.items.length]);
-
-  if (cartLoading) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
-  }
-
-  // Empty cart state
-  if (!cart || cart.items.length === 0) {
-    return (
-      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <svg
-          className="text-muted-foreground mx-auto mb-4 h-16 w-16"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-          />
-        </svg>
-        <h1 className="text-foreground text-2xl font-bold">{t('emptyTitle')}</h1>
-        <p className="text-muted-foreground mt-2">{t('emptySubtitle')}</p>
-        <Link
-          href="/products"
-          className="bg-primary text-primary-foreground mt-6 inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-        >
-          {tc('continueShopping')}
-        </Link>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <h1 className="text-foreground mb-6 text-2xl font-bold">
-        {t('title')} ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
-      </h1>
-
-      {/* Reservation countdown */}
-      {cart.reservation?.hasReservation && (
-        <ReservationCountdown reservation={cart.reservation} className="mb-6" />
-      )}
-
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        {/* Cart Items */}
-        <div className="lg:col-span-2">
-          {/* Nudges */}
-          {cart.nudges && cart.nudges.length > 0 && (
-            <CartNudges nudges={cart.nudges} className="mb-4" />
-          )}
-
-          {/* Cart items */}
-          <div>
-            {cart.items.map((item) => (
-              <div key={item.id}>
-                <CartItem item={item} onUpdate={refreshCart} />
-                {upgrades?.upgrades?.[item.productId] && (
-                  <CartUpgradeBanner
-                    suggestion={upgrades.upgrades[item.productId]}
-                    cartItem={item}
-                    onUpgrade={refreshCart}
-                    className="mb-2 ms-24"
-                  />
-                )}
-              </div>
-            ))}
-          </div>
-
-          {/* Bundle offers */}
-          {bundles?.bundles && bundles.bundles.length > 0 && (
-            <div className="mt-6 space-y-3">
-              <h3 className="text-foreground text-sm font-semibold">{t('bundleOffers')}</h3>
-              {bundles.bundles.map((offer) => (
-                <CartBundleOfferCard
-                  key={offer.id}
-                  offer={offer}
-                  cartId={cart.id}
-                  onAdd={refreshCart}
-                />
-              ))}
-            </div>
-          )}
-
-          {/* Coupon input */}
-          <div className="border-border mt-6 border-t pt-4">
-            <CouponInput cart={cart} onUpdate={refreshCart} />
-          </div>
-        </div>
-
-        {/* Summary sidebar */}
-        <div className="lg:col-span-1">
-          <div className="bg-muted/50 border-border sticky top-24 rounded-lg border p-6">
-            <FreeShippingBar className="mb-4" />
-            <CartSummary />
-
-            <Link
-              href="/checkout"
-              className="bg-primary text-primary-foreground mt-6 inline-flex w-full items-center justify-center rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90"
-            >
-              {t('proceedToCheckout')}
-            </Link>
-
-            <Link
-              href="/products"
-              className="text-muted-foreground hover:text-foreground mt-3 inline-flex w-full items-center justify-center px-6 py-2 text-sm transition-colors"
-            >
-              {tc('continueShopping')}
-            </Link>
-          </div>
-        </div>
-      </div>
-
-      {/* Cross-sell recommendations */}
-      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
-        <CartRecommendationSection
-          title={t('youMightAlsoNeed')}
-          items={cartRecs.recommendations}
-          className="mt-10"
-        />
-      )}
-    </div>
-  );
+  return <CartView />;
 }

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

@@ -2,8 +2,8 @@
 
 import { Suspense, useEffect, useState, useCallback, useRef } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { CdnImage as Image } from '@/components/shared/cdn-image';
-import { Link } from '@/lib/navigation';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import { Link } from '@/core/lib/navigation';
 import type {
   Checkout,
   ShippingRate,
@@ -14,9 +14,9 @@ import type {
   CheckoutCustomFieldDefinition,
 } from 'brainerce';
 import { formatPrice } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useStoreInfo, useCart, useAuth } from '@/providers/store-provider';
-import { useCurrency } from '@/lib/use-currency';
+import { getClient } from '@/core/lib/brainerce';
+import { useStoreInfo, useCart, useAuth } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
 import { CheckoutForm } from '@/components/checkout/checkout-form';
 import { ShippingStep } from '@/components/checkout/shipping-step';
 import { PaymentStep } from '@/components/checkout/payment-step';
@@ -25,12 +25,12 @@ import { PickupStep } from '@/components/checkout/pickup-step';
 import { CustomFieldsStep } from '@/components/checkout/custom-fields-step';
 import { TaxDisplay } from '@/components/checkout/tax-display';
 import { OrderBumpCard } from '@/components/checkout/order-bump-card';
-import { CouponInput } from '@/components/cart/coupon-input';
-import { ReservationCountdown } from '@/components/cart/reservation-countdown';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-import { isValidCheckoutId } from '@/lib/safe-redirect';
+import { CouponInput } from '@/ui/cart/coupon-input';
+import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { isValidCheckoutId } from '@/core/lib/safe-redirect';
 
 type CheckoutStep = 'method' | 'address' | 'shipping' | 'pickup' | 'custom-fields' | 'payment';
 
@@ -261,6 +261,7 @@ function CheckoutContent() {
           lastName: address.lastName,
           phone: address.phone,
           acceptsMarketing: consent.acceptsMarketing,
+          notes: address.notes,
         });
         setCheckout(updated);
         setStep('payment');

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

@@ -34,9 +34,9 @@
 
 import { useEffect, useMemo, useState } from 'react';
 import type { ContactFormPublic, ContactFormPublicField } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
+import { getClient } from '@/core/lib/brainerce';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
 
 type FieldValue = string | string[] | boolean;
 

package/templates/nextjs/base/src/app/faq/page.tsx.ejs

@@ -11,8 +11,8 @@
 import * as React from 'react';
 import type { Metadata } from 'next';
 
-import { getServerClient } from '@/lib/brainerce';
-import { FaqSection } from '@/components/content/faq-section';
+import { getServerClient } from '@/core/lib/brainerce';
+import { FaqSection } from '@/ui/layout/faq-section';
 <% if (i18nEnabled) { %>
 type PageProps = {
   params: Promise<{ locale: string }>;

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

@@ -1,10 +1,10 @@
 'use client';
 
 import { useState } from 'react';
-import { Link } from '@/lib/navigation';
-import { getClient } from '@/lib/brainerce';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
+import { Link } from '@/core/lib/navigation';
+import { getClient } from '@/core/lib/brainerce';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
 
 export default function ForgotPasswordPage() {
   const t = useTranslations('auth');

package/templates/nextjs/base/src/app/globals.css

@@ -1,30 +1,36 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96%;
-    --muted-foreground: 0 0% 45%;
-    --accent: 0 0% 96%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 90%;
-    --radius: 0.5rem;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  body {
-    @apply bg-background text-foreground antialiased;
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 90%;
+    --input: 0 0% 90%;
+    --ring: 0 0% 9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+    --radius: 0.5rem;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+}

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

@@ -1,14 +1,14 @@
 <% if (i18nEnabled) { %>
 import type { Metadata } from 'next';
 <%- fontImport %>
-import { StoreProvider } from '@/providers/store-provider';
-import { AnnouncementBar } from '@/components/content/announcement-bar';
-import { SiteHeader } from '@/components/content/site-header';
-import { SiteFooter } from '@/components/content/site-footer';
+import { StoreProvider } from '@/core/providers/store-provider';
+import { AnnouncementBar } from '@/ui/layout/announcement-bar';
+import { SiteHeader } from '@/ui/layout/site-header';
+import { SiteFooter } from '@/ui/layout/site-footer';
 import { BrainerceBotWidget } from '@/components/brainerce-bot';
-import { getServerClient, fetchStoreInfo } from '@/lib/brainerce';
+import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
 import { getDirection, supportedLocales } from '@/i18n';
-import { getNonce } from '@/lib/nonce';
+import { getNonce } from '@/core/lib/nonce';
 import '../globals.css';
 
 <%- fontVariable %>
@@ -116,13 +116,13 @@ export default async function RootLayout({
 <% } else { %>
 import type { Metadata } from 'next';
 <%- fontImport %>
-import { StoreProvider } from '@/providers/store-provider';
-import { AnnouncementBar } from '@/components/content/announcement-bar';
-import { SiteHeader } from '@/components/content/site-header';
-import { SiteFooter } from '@/components/content/site-footer';
+import { StoreProvider } from '@/core/providers/store-provider';
+import { AnnouncementBar } from '@/ui/layout/announcement-bar';
+import { SiteHeader } from '@/ui/layout/site-header';
+import { SiteFooter } from '@/ui/layout/site-footer';
 import { BrainerceBotWidget } from '@/components/brainerce-bot';
-import { getServerClient, fetchStoreInfo } from '@/lib/brainerce';
-import { getNonce } from '@/lib/nonce';
+import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
+import { getNonce } from '@/core/lib/nonce';
 import './globals.css';
 
 <%- fontVariable %>

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

@@ -1,12 +1,12 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter, Link } from '@/lib/navigation';
-import { useAuth } from '@/providers/store-provider';
-import { proxyLogin } from '@/lib/auth';
+import { useRouter, Link } from '@/core/lib/navigation';
+import { useAuth } from '@/core/providers/store-provider';
+import { proxyLogin } from '@/core/lib/auth';
 import { LoginForm } from '@/components/auth/login-form';
 import { OAuthButtons } from '@/components/auth/oauth-buttons';
-import { useTranslations } from '@/lib/translations';
+import { useTranslations } from '@/core/lib/translations';
 
 export default function LoginPage() {
   const router = useRouter();

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

@@ -2,12 +2,12 @@
 
 import { Suspense, useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { Link } from '@/lib/navigation';
+import { Link } from '@/core/lib/navigation';
 import type { WaitForOrderResult, OrderDownloadLink } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useCart } from '@/providers/store-provider';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
+import { getClient } from '@/core/lib/brainerce';
+import { useCart } from '@/core/providers/store-provider';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
 
 function OrderConfirmationContent() {
   const searchParams = useSearchParams();
@@ -35,20 +35,27 @@ 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.
+        // For redirect-based payment providers, the customer returns with
+        // provider params in the URL — CardCom: lowprofilecode; PayPal:
+        // token + PayerID. Send these to the backend for server-side
+        // verification via the provider's API (e.g. GetLpResult / PayPal
+        // capture) — never trust URL params alone. For PayPal this call is
+        // what actually captures the approved payment.
         const lowProfileCode =
           searchParams.get('lowprofilecode') || searchParams.get('LowProfileCode');
-        if (lowProfileCode) {
+        const paypalOrderToken =
+          searchParams.get('token') && searchParams.get('PayerID')
+            ? searchParams.get('token')
+            : null;
+        const redirectReturnToken = lowProfileCode || paypalOrderToken;
+        if (redirectReturnToken) {
           try {
             await client.confirmSdkPayment(checkoutId!, {
-              paymentIntentId: lowProfileCode,
+              paymentIntentId: redirectReturnToken,
             });
           } catch (err) {
             console.warn('Redirect payment confirmation failed:', err);
-            // Don't block — webhook may still process the payment
+            // Don't block — payment-status polling re-verifies server-side
           }
         }
 

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

@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
-import { getServerClient } from '@/lib/brainerce';
-import { buildMetaDescription } from '@/lib/seo';
+import { getServerClient } from '@/core/lib/brainerce';
+import { buildMetaDescription } from '@/core/lib/seo';
 import { OrganizationJsonLd } from '@/components/seo/organization-json-ld';
-import { RichTextBlock } from '@/components/content/rich-text-block';
-import { HomeClient } from './home-client';
+import { RichTextBlock } from '@/ui/layout/rich-text-block';
+import { HomeClient } from '@/ui/home/home-client';
 
 // Build homepage metadata server-side so Google, Facebook, WhatsApp etc.
 // see a real <meta name="description"> on first request. Falls back to the

package/templates/nextjs/base/src/app/pages/[slug]/page.tsx.ejs

@@ -15,9 +15,9 @@ import * as React from 'react';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
-import { getServerClient } from '@/lib/brainerce';
-import { sanitizeHtml } from '@/lib/sanitize';
-import { decodeSlug } from '@/lib/utils';
+import { getServerClient } from '@/core/lib/brainerce';
+import { sanitizeHtml } from '@/core/lib/sanitize';
+import { decodeSlug } from '@/core/lib/utils';
 
 <% if (i18nEnabled) { %>
 type PageProps = {

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

@@ -3,7 +3,7 @@
 import { useEffect } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Suspense } from 'react';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
 
 /**
  * Lightweight callback page for iframe-based payment providers (e.g. CardCom).

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -1,13 +1,13 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getProductPriceInfo } from 'brainerce';
-import { getServerClient, fetchStoreInfo } from '@/lib/brainerce';
-import { resolveCurrency } from '@/lib/resolve-currency';
-import { buildMetaDescription } from '@/lib/seo';
-import { decodeSlug } from '@/lib/utils';
+import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
+import { resolveCurrency } from '@/core/lib/resolve-currency';
+import { buildMetaDescription } from '@/core/lib/seo';
+import { decodeSlug } from '@/core/lib/utils';
 import { ProductJsonLd } from '@/components/seo/product-json-ld';
-import { ReviewsSection } from '@/components/reviews/reviews-section';
-import { ProductClientSection } from './product-client-section';
+import { ReviewsSection } from '@/ui/product/reviews-section';
+import { ProductClientSection } from '@/ui/product/product-client-section';
 
 type Props = {
   params: Promise<{ slug: string; locale?: string }>;