create-brainerce-store 1.50.5 → 1.52.0

package/templates/nextjs/base/src/{components → ui}/cart/coupon-input.tsx

@@ -1,11 +1,14 @@
 'use client';
 
 import { useState } from 'react';
+import { Tag } from 'lucide-react';
 import type { Cart } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { cn } from '@/lib/utils';
+import { getClient } from '@/core/lib/brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/core/lib/utils';
 
 interface CouponInputProps {
   cart: Cart;
@@ -75,19 +78,7 @@ export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInp
       <div className={cn('space-y-2', className)}>
         <div className="bg-muted flex items-center justify-between rounded px-3 py-2">
           <div className="flex items-center gap-2">
-            <svg
-              className="text-primary h-4 w-4 flex-shrink-0"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
-              />
-            </svg>
+            <Tag className="text-primary h-4 w-4 flex-shrink-0" aria-hidden="true" />
             <span className="text-foreground text-sm font-medium">{appliedCoupon}</span>
           </div>
           <button
@@ -106,7 +97,7 @@ export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInp
   return (
     <div className={cn('space-y-2', className)}>
       <div className="flex gap-2">
-        <input
+        <Input
           type="text"
           value={code}
           onChange={(e) => {
@@ -120,23 +111,21 @@ export function CouponInput({ cart, checkoutId, onUpdate, className }: CouponInp
             }
           }}
           placeholder={t('placeholder')}
-          className={cn(
-            'bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-9 flex-1 rounded border px-3 text-sm focus:outline-none focus:ring-2',
-            error ? 'border-destructive' : 'border-border'
-          )}
+          className={cn('h-9 flex-1 rounded', error && 'border-destructive')}
         />
-        <button
+        <Button
           type="button"
+          variant="outline"
           onClick={handleApply}
           disabled={applying || !code.trim()}
-          className="border-border bg-background text-foreground hover:bg-muted h-9 rounded border px-4 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+          className="h-9 rounded px-4 hover:bg-muted"
         >
           {applying ? (
             <LoadingSpinner size="sm" className="border-muted-foreground/30 border-t-foreground" />
           ) : (
             tc('apply')
           )}
-        </button>
+        </Button>
       </div>
 
       {error && <p className="text-destructive text-xs">{error}</p>}

package/templates/nextjs/base/src/{components → ui}/cart/free-shipping-bar.tsx

@@ -1,10 +1,11 @@
 'use client';
 
+import { Check } from 'lucide-react';
 import { formatPrice } from 'brainerce';
-import { useStoreInfo, useCart } from '@/providers/store-provider';
-import { useCurrency } from '@/lib/use-currency';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+import { useStoreInfo, useCart } from '@/core/providers/store-provider';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
 
 interface FreeShippingBarProps {
   className?: string;
@@ -35,9 +36,7 @@ export function FreeShippingBar({ className }: FreeShippingBarProps) {
     return (
       <div className={cn('rounded-lg border border-green-200 bg-green-50 p-3', className)}>
         <div className="flex items-center gap-2 text-sm font-medium text-green-700">
-          <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-          </svg>
+          <Check className="h-4 w-4 shrink-0" aria-hidden="true" />
           {t('freeShippingQualified')}
         </div>
       </div>

package/templates/nextjs/base/src/{components → ui}/cart/reservation-countdown.tsx

@@ -1,103 +1,95 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import type { ReservationInfo } from 'brainerce';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
-
-interface ReservationCountdownProps {
-  reservation: ReservationInfo;
-  className?: string;
-}
-
-export function ReservationCountdown({ reservation, className }: ReservationCountdownProps) {
-  const t = useTranslations('reservation');
-  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
-
-  const calculateRemaining = useCallback(() => {
-    if (!reservation.expiresAt) return 0;
-    const expiresAtMs = new Date(reservation.expiresAt).getTime();
-    const nowMs = Date.now();
-    return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
-  }, [reservation.expiresAt]);
-
-  useEffect(() => {
-    setRemainingSeconds(calculateRemaining());
-
-    const interval = setInterval(() => {
-      const remaining = calculateRemaining();
-      setRemainingSeconds(remaining);
-
-      if (remaining <= 0) {
-        clearInterval(interval);
-      }
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [calculateRemaining]);
-
-  if (!reservation.hasReservation) return null;
-
-  const minutes = Math.floor(remainingSeconds / 60);
-  const seconds = remainingSeconds % 60;
-  const isExpired = remainingSeconds <= 0;
-  const isUrgent = remainingSeconds > 0 && remainingSeconds < 120;
-
-  const displayMessage = reservation.countdownMessage
-    ? reservation.countdownMessage.replace(
-        '{time}',
-        `${minutes}:${seconds.toString().padStart(2, '0')}`
-      )
-    : null;
-
-  return (
-    <div
-      className={cn(
-        'flex items-center gap-3 rounded-lg px-4 py-3 text-sm',
-        isExpired
-          ? 'bg-destructive/10 border-destructive/20 text-destructive border'
-          : isUrgent
-            ? 'border border-orange-200 bg-orange-50 text-orange-800 dark:border-orange-800 dark:bg-orange-950/30 dark:text-orange-300'
-            : 'bg-primary/5 border-primary/20 text-foreground border',
-        className
-      )}
-    >
-      <svg
-        className={cn(
-          'h-5 w-5 flex-shrink-0',
-          isExpired
-            ? 'text-destructive'
-            : isUrgent
-              ? 'text-orange-600 dark:text-orange-400'
-              : 'text-primary'
-        )}
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-        />
-      </svg>
-
-      <div className="flex-1">
-        {isExpired ? (
-          <p className="font-medium">{t('expired')}</p>
-        ) : displayMessage ? (
-          <p>{displayMessage}</p>
-        ) : (
-          <p>
-            {isUrgent ? `${t('hurry')} ` : ''}
-            {t('reservedFor')}{' '}
-            <span className="font-semibold tabular-nums">
-              {minutes}:{seconds.toString().padStart(2, '0')}
-            </span>
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Clock } from 'lucide-react';
+import type { ReservationInfo } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface ReservationCountdownProps {
+  reservation: ReservationInfo;
+  className?: string;
+}
+
+export function ReservationCountdown({ reservation, className }: ReservationCountdownProps) {
+  const t = useTranslations('reservation');
+  const [remainingSeconds, setRemainingSeconds] = useState<number>(0);
+
+  const calculateRemaining = useCallback(() => {
+    if (!reservation.expiresAt) return 0;
+    const expiresAtMs = new Date(reservation.expiresAt).getTime();
+    const nowMs = Date.now();
+    return Math.max(0, Math.floor((expiresAtMs - nowMs) / 1000));
+  }, [reservation.expiresAt]);
+
+  useEffect(() => {
+    setRemainingSeconds(calculateRemaining());
+
+    const interval = setInterval(() => {
+      const remaining = calculateRemaining();
+      setRemainingSeconds(remaining);
+
+      if (remaining <= 0) {
+        clearInterval(interval);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [calculateRemaining]);
+
+  if (!reservation.hasReservation) return null;
+
+  const minutes = Math.floor(remainingSeconds / 60);
+  const seconds = remainingSeconds % 60;
+  const isExpired = remainingSeconds <= 0;
+  const isUrgent = remainingSeconds > 0 && remainingSeconds < 120;
+
+  const displayMessage = reservation.countdownMessage
+    ? reservation.countdownMessage.replace(
+        '{time}',
+        `${minutes}:${seconds.toString().padStart(2, '0')}`
+      )
+    : null;
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 rounded-lg px-4 py-3 text-sm',
+        isExpired
+          ? 'bg-destructive/10 border-destructive/20 text-destructive border'
+          : isUrgent
+            ? 'border border-orange-200 bg-orange-50 text-orange-800 dark:border-orange-800 dark:bg-orange-950/30 dark:text-orange-300'
+            : 'bg-primary/5 border-primary/20 text-foreground border',
+        className
+      )}
+    >
+      <Clock
+        className={cn(
+          'h-5 w-5 flex-shrink-0',
+          isExpired
+            ? 'text-destructive'
+            : isUrgent
+              ? 'text-orange-600 dark:text-orange-400'
+              : 'text-primary'
+        )}
+        aria-hidden="true"
+      />
+
+      <div className="flex-1">
+        {isExpired ? (
+          <p className="font-medium">{t('expired')}</p>
+        ) : displayMessage ? (
+          <p>{displayMessage}</p>
+        ) : (
+          <p>
+            {isUrgent ? `${t('hurry')} ` : ''}
+            {t('reservedFor')}{' '}
+            <span className="font-semibold tabular-nums">
+              {minutes}:{seconds.toString().padStart(2, '0')}
+            </span>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/ui/home/discount-banner-strip.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import type { DiscountBanner } from 'brainerce';
+
+/** Store-wide discount banner strip shown at the very top of the homepage. */
+export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] }) {
+  if (banners.length === 0) return null;
+
+  return (
+    <div className="bg-primary text-primary-foreground">
+      <div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-center gap-4 overflow-x-auto text-sm font-medium">
+          {banners.map((banner) => (
+            <span key={banner.ruleId}>{banner.text}</span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/ui/home/featured-products-section.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import type { Product } from 'brainerce';
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { ProductGrid } from '@/ui/product/product-grid';
+
+/** Homepage featured-products grid with a "view all" link. */
+export function FeaturedProductsSection({ products }: { products: Product[] }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+      <div className="mb-8 flex items-center justify-between">
+        <h2 className="text-foreground text-2xl font-bold">{t('featuredProducts')}</h2>
+        <Link href="/products" className="text-primary text-sm font-medium hover:underline">
+          {tc('viewAll')}
+        </Link>
+      </div>
+      <ProductGrid products={products} />
+    </section>
+  );
+}

package/templates/nextjs/base/src/ui/home/hero-section.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { Button } from '@/components/ui/button';
+
+/** Homepage hero: welcome headline, subtitle, and shop-now CTA. */
+export function HeroSection({ storeName }: { storeName?: string | null }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section className="bg-muted">
+      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
+        <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
+          {t('welcomeTo')} {storeName || tc('store')}
+        </h1>
+        <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
+          {t('heroSubtitle')}
+        </p>
+        <Button asChild size="lg" className="mt-8 rounded px-6 text-base">
+          <Link href="/products">{tc('shopNow')}</Link>
+        </Button>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/base/src/ui/home/home-client.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { useHomeData } from '@/core/hooks/use-home-data';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { DiscountBannerStrip } from './discount-banner-strip';
+import { HeroSection } from './hero-section';
+import { FeaturedProductsSection } from './featured-products-section';
+
+export function HomeClient() {
+  const { storeInfo, loading: storeLoading } = useStoreInfo();
+  const { products, banners, loading } = useHomeData();
+
+  if (storeLoading || loading) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center">
+        <LoadingSpinner size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <DiscountBannerStrip banners={banners} />
+      <HeroSection storeName={storeInfo?.name} />
+      <FeaturedProductsSection products={products} />
+    </div>
+  );
+}