create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/designs/atelier/ui/cart/free-shipping-bar.tsx

@@ -1,77 +1,77 @@
-'use client';
-
-import { formatPrice } from 'brainerce';
-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';
-import { IconTruck, IconCheck } from '@/ui/shared/icons';
-
-interface FreeShippingBarProps {
-  className?: string;
-}
-
-/**
- * Free-shipping progress on the cart page ("add X more for free shipping");
- * threshold from useStoreInfo().upsell, subtotal from useCart().totals.
- * Custom meter (track + forest fill) instead of the semantic <progress>.
- */
-export function FreeShippingBar({ className }: FreeShippingBarProps) {
-  // Hooks must be called unconditionally and in the same order on every
-  // render — keep all of them above any early `return null` branch.
-  const t = useTranslations('cart');
-  const { storeInfo } = useStoreInfo();
-  const { totals } = useCart();
-  const currency = useCurrency();
-
-  const upsell = storeInfo?.upsell;
-  const threshold = upsell?.freeShippingThreshold;
-  const enabled = upsell?.freeShippingBarEnabled !== false;
-
-  // Don't render if disabled or no threshold configured
-  if (!enabled || !threshold || threshold <= 0) return null;
-
-  const subtotal = totals.subtotal;
-  const remaining = Math.max(0, threshold - subtotal);
-  const qualified = remaining <= 0;
-  const percent = Math.min(100, Math.round((subtotal / threshold) * 100));
-
-  if (qualified) {
-    return (
-      <p
-        className={cn(
-          'flex items-center gap-2 rounded-lg bg-secondary px-3.5 py-2.5 text-sm font-semibold text-primary',
-          className
-        )}
-      >
-        <IconCheck size={18} />
-        {t('freeShippingQualified')}
-      </p>
-    );
-  }
-
-  return (
-    <div className={cn('rounded-lg bg-secondary px-3.5 py-3', className)}>
-      <p className="flex items-center gap-2 text-sm font-medium text-foreground">
-        <span aria-hidden="true" className="text-primary">
-          <IconTruck size={18} />
-        </span>
-        {t('freeShippingRemaining', {
-          amount: formatPrice(remaining, { currency }) as string,
-        })}
-      </p>
-      <div
-        role="progressbar"
-        aria-valuenow={percent}
-        aria-valuemin={0}
-        aria-valuemax={100}
-        className="mt-2.5 h-2 overflow-hidden rounded-full bg-background"
-      >
-        <div
-          className="h-full rounded-full bg-primary transition-[width] duration-500"
-          style={{ width: `${percent}%` }}
-        />
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { formatPrice } from 'brainerce';
+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';
+import { IconTruck, IconCheck } from '@/ui/shared/icons';
+
+interface FreeShippingBarProps {
+  className?: string;
+}
+
+/**
+ * Free-shipping progress on the cart page ("add X more for free shipping");
+ * threshold from useStoreInfo().upsell, subtotal from useCart().totals.
+ * Custom meter (track + forest fill) instead of the semantic <progress>.
+ */
+export function FreeShippingBar({ className }: FreeShippingBarProps) {
+  // Hooks must be called unconditionally and in the same order on every
+  // render — keep all of them above any early `return null` branch.
+  const t = useTranslations('cart');
+  const { storeInfo } = useStoreInfo();
+  const { totals } = useCart();
+  const currency = useCurrency();
+
+  const upsell = storeInfo?.upsell;
+  const threshold = upsell?.freeShippingThreshold;
+  const enabled = upsell?.freeShippingBarEnabled !== false;
+
+  // Don't render if disabled or no threshold configured
+  if (!enabled || !threshold || threshold <= 0) return null;
+
+  const subtotal = totals.subtotal;
+  const remaining = Math.max(0, threshold - subtotal);
+  const qualified = remaining <= 0;
+  const percent = Math.min(100, Math.round((subtotal / threshold) * 100));
+
+  if (qualified) {
+    return (
+      <p
+        className={cn(
+          'flex items-center gap-2 rounded-lg bg-secondary px-3.5 py-2.5 text-sm font-semibold text-primary',
+          className
+        )}
+      >
+        <IconCheck size={18} />
+        {t('freeShippingQualified')}
+      </p>
+    );
+  }
+
+  return (
+    <div className={cn('rounded-lg bg-secondary px-3.5 py-3', className)}>
+      <p className="flex items-center gap-2 text-sm font-medium text-foreground">
+        <span aria-hidden="true" className="text-primary">
+          <IconTruck size={18} />
+        </span>
+        {t('freeShippingRemaining', {
+          amount: formatPrice(remaining, { currency }) as string,
+        })}
+      </p>
+      <div
+        role="progressbar"
+        aria-valuenow={percent}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className="mt-2.5 h-2 overflow-hidden rounded-full bg-background"
+      >
+        <div
+          className="h-full rounded-full bg-primary transition-[width] duration-500"
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/cart/reservation-countdown.tsx

@@ -1,89 +1,89 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import type { ReservationInfo } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-import { IconClock } from '@/ui/shared/icons';
-
-interface ReservationCountdownProps {
-  reservation: ReservationInfo;
-  className?: string;
-}
-
-/**
- * Stock-reservation countdown on the cart/checkout pages; the `reservation`
- * prop comes from useCartPage().cart.reservation. Keeps the ticking logic
- * and the expired/urgent states (exposed via data-state).
- */
-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
-      role="timer"
-      data-state={isExpired ? 'expired' : isUrgent ? 'urgent' : 'active'}
-      className={cn(
-        'flex items-center gap-2.5 rounded-lg px-4 py-3 text-sm font-medium',
-        isExpired || isUrgent
-          ? 'bg-destructive/10 text-destructive'
-          : 'bg-secondary text-foreground',
-        className
-      )}
-    >
-      <span aria-hidden="true" className="shrink-0">
-        <IconClock size={18} />
-      </span>
-      {isExpired ? (
-        <p>{t('expired')}</p>
-      ) : displayMessage ? (
-        <p>{displayMessage}</p>
-      ) : (
-        <p>
-          {isUrgent ? `${t('hurry')} ` : ''}
-          {t('reservedFor')}{' '}
-          <span className="font-bold tabular-nums">
-            {minutes}:{seconds.toString().padStart(2, '0')}
-          </span>
-        </p>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import type { ReservationInfo } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { IconClock } from '@/ui/shared/icons';
+
+interface ReservationCountdownProps {
+  reservation: ReservationInfo;
+  className?: string;
+}
+
+/**
+ * Stock-reservation countdown on the cart/checkout pages; the `reservation`
+ * prop comes from useCartPage().cart.reservation. Keeps the ticking logic
+ * and the expired/urgent states (exposed via data-state).
+ */
+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
+      role="timer"
+      data-state={isExpired ? 'expired' : isUrgent ? 'urgent' : 'active'}
+      className={cn(
+        'flex items-center gap-2.5 rounded-lg px-4 py-3 text-sm font-medium',
+        isExpired || isUrgent
+          ? 'bg-destructive/10 text-destructive'
+          : 'bg-secondary text-foreground',
+        className
+      )}
+    >
+      <span aria-hidden="true" className="shrink-0">
+        <IconClock size={18} />
+      </span>
+      {isExpired ? (
+        <p>{t('expired')}</p>
+      ) : displayMessage ? (
+        <p>{displayMessage}</p>
+      ) : (
+        <p>
+          {isUrgent ? `${t('hurry')} ` : ''}
+          {t('reservedFor')}{' '}
+          <span className="font-bold tabular-nums">
+            {minutes}:{seconds.toString().padStart(2, '0')}
+          </span>
+        </p>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/home/benefits-band.tsx

@@ -1,34 +1,34 @@
-'use client';
-
-import { useTranslations } from '@/core/lib/translations';
-import { IconTruck, IconShield, IconBadgeCheck, IconReturn } from '@/ui/shared/icons';
-
-const BENEFITS = [
-  { icon: IconTruck, titleKey: 'benefit1Title', descKey: 'benefit1Desc' },
-  { icon: IconShield, titleKey: 'benefit2Title', descKey: 'benefit2Desc' },
-  { icon: IconBadgeCheck, titleKey: 'benefit3Title', descKey: 'benefit3Desc' },
-  { icon: IconReturn, titleKey: 'benefit4Title', descKey: 'benefit4Desc' },
-] as const;
-
-/** Trust/benefits row under the hero — icons + short promises. */
-export function BenefitsBand() {
-  const t = useTranslations('home');
-
-  return (
-    <section aria-label={t('benefit2Title')}>
-      <ul className="container-page grid grid-cols-2 gap-x-6 gap-y-8 pb-10 pt-16 lg:grid-cols-4">
-        {BENEFITS.map(({ icon: Icon, titleKey, descKey }) => (
-          <li key={titleKey} className="flex items-start gap-3.5">
-            <span className="bg-secondary text-primary flex h-11 w-11 shrink-0 items-center justify-center rounded-full">
-              <Icon size={24} />
-            </span>
-            <div>
-              <p className="text-foreground text-sm font-semibold">{t(titleKey)}</p>
-              <p className="text-muted-foreground mt-0.5 text-[13px] leading-5">{t(descKey)}</p>
-            </div>
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-}
+'use client';
+
+import { useTranslations } from '@/core/lib/translations';
+import { IconTruck, IconShield, IconBadgeCheck, IconReturn } from '@/ui/shared/icons';
+
+const BENEFITS = [
+  { icon: IconTruck, titleKey: 'benefit1Title', descKey: 'benefit1Desc' },
+  { icon: IconShield, titleKey: 'benefit2Title', descKey: 'benefit2Desc' },
+  { icon: IconBadgeCheck, titleKey: 'benefit3Title', descKey: 'benefit3Desc' },
+  { icon: IconReturn, titleKey: 'benefit4Title', descKey: 'benefit4Desc' },
+] as const;
+
+/** Trust/benefits row under the hero — icons + short promises. */
+export function BenefitsBand() {
+  const t = useTranslations('home');
+
+  return (
+    <section aria-label={t('benefit2Title')}>
+      <ul className="container-page grid grid-cols-2 gap-x-6 gap-y-8 pb-10 pt-16 lg:grid-cols-4">
+        {BENEFITS.map(({ icon: Icon, titleKey, descKey }) => (
+          <li key={titleKey} className="flex items-start gap-3.5">
+            <span className="bg-secondary text-primary flex h-11 w-11 shrink-0 items-center justify-center rounded-full">
+              <Icon size={24} />
+            </span>
+            <div>
+              <p className="text-foreground text-sm font-semibold">{t(titleKey)}</p>
+              <p className="text-muted-foreground mt-0.5 text-[13px] leading-5">{t(descKey)}</p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}