create-brainerce-store 1.5.0 → 1.5.2

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.5.0",
+      version: "1.5.1",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

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

@@ -12,7 +12,7 @@ import { useTranslations } from '@/lib/translations';
 
 export default function AccountPage() {
   const router = useRouter();
-  const { isLoggedIn, logout } = useAuth();
+  const { isLoggedIn, authLoading, logout } = useAuth();
   const t = useTranslations('account');
   const tc = useTranslations('common');
   const [profile, setProfile] = useState<CustomerProfile | null>(null);
@@ -21,6 +21,8 @@ export default function AccountPage() {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    if (authLoading) return;
+
     if (!isLoggedIn) {
       router.push('/login');
       return;
@@ -52,9 +54,9 @@ export default function AccountPage() {
     }
 
     loadAccountData();
-  }, [isLoggedIn, router]);
+  }, [isLoggedIn, authLoading, router]);
 
-  if (!isLoggedIn) {
+  if (authLoading || !isLoggedIn) {
     return null;
   }
 
@@ -96,7 +98,9 @@ export default function AccountPage() {
       </div>
 
       {/* Profile Section */}
-      {profile && <ProfileSection profile={profile} onProfileUpdate={setProfile} className="mb-8" />}
+      {profile && (
+        <ProfileSection profile={profile} onProfileUpdate={setProfile} className="mb-8" />
+      )}
 
       {/* Order History */}
       <div>

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

@@ -20,6 +20,7 @@ import { PaymentStep } from '@/components/checkout/payment-step';
 import { DeliveryMethodStep } from '@/components/checkout/delivery-method-step';
 import { PickupStep } from '@/components/checkout/pickup-step';
 import { TaxDisplay } from '@/components/checkout/tax-display';
+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';
@@ -31,7 +32,7 @@ function CheckoutContent() {
   const searchParams = useSearchParams();
   const { storeInfo } = useStoreInfo();
   const { isLoggedIn } = useAuth();
-  const { cart } = useCart();
+  const { cart, refreshCart } = useCart();
   const currency = storeInfo?.currency || 'USD';
   const t = useTranslations('checkout');
   const tc = useTranslations('common');
@@ -224,6 +225,20 @@ function CheckoutContent() {
     }
   }
 
+  // Refresh cart and checkout after coupon apply/remove
+  const handleCouponUpdate = useCallback(async () => {
+    await refreshCart();
+    if (checkout) {
+      try {
+        const client = getClient();
+        const updated = await client.getCheckout(checkout.id);
+        setCheckout(updated);
+      } catch (err) {
+        console.error('Failed to refresh checkout after coupon update:', err);
+      }
+    }
+  }, [checkout, refreshCart]);
+
   if (initializing) {
     return (
       <div className="flex min-h-[60vh] items-center justify-center">
@@ -541,6 +556,13 @@ function CheckoutContent() {
               )
             )}
 
+            {/* Coupon input */}
+            {cart && (
+              <div className="border-border border-t pt-4">
+                <CouponInput cart={cart} onUpdate={handleCouponUpdate} />
+              </div>
+            )}
+
             {/* Totals */}
             {checkout && (
               <div className="border-border space-y-2 border-t pt-4 text-sm">

package/templates/nextjs/base/src/components/account/profile-section.tsx

@@ -86,7 +86,7 @@ export function ProfileSection({ profile, onProfileUpdate, className }: ProfileS
                     type="text"
                     value={form.firstName}
                     onChange={(e) => setForm((f) => ({ ...f, firstName: e.target.value }))}
-                    className="border-border bg-background text-foreground w-full rounded-md border px-3 py-1.5 text-sm outline-none focus:border-primary"
+                    className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
                     autoFocus
                   />
                 </div>
@@ -98,7 +98,7 @@ export function ProfileSection({ profile, onProfileUpdate, className }: ProfileS
                     type="text"
                     value={form.lastName}
                     onChange={(e) => setForm((f) => ({ ...f, lastName: e.target.value }))}
-                    className="border-border bg-background text-foreground w-full rounded-md border px-3 py-1.5 text-sm outline-none focus:border-primary"
+                    className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
                   />
                 </div>
               </div>
@@ -110,7 +110,7 @@ export function ProfileSection({ profile, onProfileUpdate, className }: ProfileS
                   type="tel"
                   value={form.phone}
                   onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
-                  className="border-border bg-background text-foreground w-full rounded-md border px-3 py-1.5 text-sm outline-none focus:border-primary"
+                  className="border-border bg-background text-foreground focus:border-primary w-full rounded-md border px-3 py-1.5 text-sm outline-none"
                 />
               </div>
               <p className="text-muted-foreground truncate text-sm">{profile.email}</p>
@@ -144,8 +144,18 @@ export function ProfileSection({ profile, onProfileUpdate, className }: ProfileS
                   className="text-muted-foreground hover:text-foreground flex-shrink-0 rounded p-1 transition-colors"
                   title={t('editProfile')}
                 >
-                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+                  <svg
+                    className="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+                    />
                   </svg>
                 </button>
               </div>
@@ -179,7 +189,9 @@ export function ProfileSection({ profile, onProfileUpdate, className }: ProfileS
                 )}
               </div>
 
-              {profile.phone && <p className="text-muted-foreground mt-2 text-sm">{profile.phone}</p>}
+              {profile.phone && (
+                <p className="text-muted-foreground mt-2 text-sm">{profile.phone}</p>
+              )}
 
               <p className="text-muted-foreground mt-3 text-xs">
                 {t('memberSince')}{' '}
@@ -197,7 +209,9 @@ export function ProfileSection({ profile, onProfileUpdate, className }: ProfileS
             <p
               className={cn(
                 'mt-2 text-sm',
-                message.type === 'success' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
+                message.type === 'success'
+                  ? 'text-green-600 dark:text-green-400'
+                  : 'text-red-600 dark:text-red-400'
               )}
             >
               {message.text}

package/templates/nextjs/base/src/providers/store-provider.tsx.ejs

@@ -23,6 +23,7 @@ export function useStoreInfo() {
 // ---- Auth Context ----
 interface AuthContextValue {
   isLoggedIn: boolean;
+  authLoading: boolean;
   token: string | null;
   login: (token: string) => void;
   logout: () => void;
@@ -30,6 +31,7 @@ interface AuthContextValue {
 
 const AuthContext = createContext<AuthContextValue>({
   isLoggedIn: false,
+  authLoading: true,
   token: null,
   login: () => {},
   logout: () => {},
@@ -65,6 +67,7 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
   const [storeInfo, setStoreInfo] = useState<StoreInfo | null>(null);
   const [storeLoading, setStoreLoading] = useState(true);
   const [token, setToken] = useState<string | null>(null);
+  const [authLoading, setAuthLoading] = useState(true);
   const [cart, setCart] = useState<Cart | null>(null);
   const [cartLoading, setCartLoading] = useState(true);
 
@@ -75,6 +78,7 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
     if (stored) {
       setToken(stored);
     }
+    setAuthLoading(false);
 
     client
       .getStoreInfo()
@@ -134,7 +138,7 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <StoreInfoContext.Provider value={{ storeInfo, loading: storeLoading }}>
-      <AuthContext.Provider value={{ isLoggedIn: !!token, token, login, logout }}>
+      <AuthContext.Provider value={{ isLoggedIn: !!token, authLoading, token, login, logout }}>
         <CartContext.Provider
           value={{ cart, cartLoading, refreshCart, itemCount, totals }}
         >