create-brainerce-store 1.72.0 → 1.74.0

package/templates/nextjs/designs/atelier/ui/cart/cart-view.tsx

@@ -1,184 +1,229 @@
-'use client';
-
-import { Link } from '@/core/lib/navigation';
-import { useCartPage } from '@/core/hooks/use-cart-page';
-import { CartItem } from '@/ui/cart/cart-item';
-import { CartUpgradeBanner } from '@/ui/cart/cart-upgrade-banner';
-import { CartBundleOfferCard } from '@/ui/cart/cart-bundle-offer';
-import { CartSummary } from '@/ui/cart/cart-summary';
-import { CouponInput } from '@/ui/cart/coupon-input';
-import { CartNudges } from '@/ui/cart/cart-nudges';
-import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
-import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
-import { CartRecommendationSection } from '@/ui/product/recommendation-section';
-import { LoadingSpinner } from '@/ui/shared/loading-spinner';
-import { useTranslations } from '@/core/lib/translations';
-import { IconBag, IconArrowEnd, IconShield } from '@/ui/shared/icons';
-
-export function CartView() {
-  const t = useTranslations('cart');
-  const tc = useTranslations('common');
-  const tr = useTranslations('reservation');
-  const {
-    cart,
-    cartLoading,
-    refreshCart,
-    itemCount,
-    cartRecs,
-    upgrades,
-    bundles,
-    reservationExpired,
-    unavailableItems,
-    canProceedToCheckout,
-    onReservationExpired,
-  } = useCartPage();
-
-  if (cartLoading) {
-    return <LoadingSpinner size="lg" className="min-h-[60vh]" />;
-  }
-
-  // Empty cart state — designed, never a bare sentence in blank space.
-  if (!cart || cart.items.length === 0) {
-    return (
-      <section className="container-narrow flex min-h-[60vh] items-center justify-center py-16">
-        <div className="card flex w-full max-w-md flex-col items-center gap-3 px-8 py-14 text-center">
-          <span className="flex h-16 w-16 items-center justify-center rounded-full bg-secondary text-primary">
-            <IconBag size={32} />
-          </span>
-          <h1 className="text-2xl sm:text-3xl">{t('emptyTitle')}</h1>
-          <p className="text-muted-foreground">{t('emptySubtitle')}</p>
-          <Link href="/products" className="btn-primary btn-md mt-3">
-            {tc('continueShopping')}
-            <IconArrowEnd size={18} className="rtl-flip" />
-          </Link>
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="container-narrow py-8 lg:py-12">
-      <h1 className="text-3xl sm:text-4xl">
-        {t('title')}{' '}
-        <span className="font-sans text-base font-normal text-muted-foreground">
-          ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
-        </span>
-      </h1>
-
-      {/* Reservation countdown. onExpire refreshes the cart and closes the
-          checkout gate below. Passing it is what makes expiry mean anything. */}
-      {cart.reservation?.hasReservation && (
-        <ReservationCountdown
-          reservation={cart.reservation}
-          onExpire={onReservationExpired}
-          className="mt-4"
-        />
-      )}
-
-      <div className="mt-6 grid grid-cols-1 items-start gap-8 lg:grid-cols-3 lg:gap-10">
-        {/* Cart Items */}
-        <div className="lg:col-span-2">
-          {/* Nudges */}
-          {cart.nudges && cart.nudges.length > 0 && (
-            <CartNudges nudges={cart.nudges} className="mb-4" />
-          )}
-
-          {/* Cart items */}
-          <ul className="card divide-y overflow-hidden">
-            {cart.items.map((item) => (
-              <li key={item.id} className="p-4 sm:p-5">
-                <CartItem item={item} onUpdate={refreshCart} />
-                {upgrades?.upgrades?.[item.productId] && (
-                  <CartUpgradeBanner
-                    suggestion={upgrades.upgrades[item.productId]}
-                    cartItem={item}
-                    onUpgrade={refreshCart}
-                    className="mt-4"
-                  />
-                )}
-              </li>
-            ))}
-          </ul>
-
-          {/* Bundle offers */}
-          {bundles?.bundles && bundles.bundles.length > 0 && (
-            <section className="mt-6">
-              <h3 className="mb-3 text-xl">{t('bundleOffers')}</h3>
-              <div className="space-y-4">
-                {bundles.bundles.map((offer) => (
-                  <CartBundleOfferCard
-                    key={offer.id}
-                    offer={offer}
-                    cartId={cart.id}
-                    onAdd={refreshCart}
-                  />
-                ))}
-              </div>
-            </section>
-          )}
-
-          {/* Coupon input */}
-          <div className="mt-6">
-            <p className="mb-2 text-sm font-semibold text-foreground">{t('couponTitle')}</p>
-            <CouponInput cart={cart} onUpdate={refreshCart} />
-          </div>
-        </div>
-
-        {/* Summary sidebar */}
-        <aside className="lg:sticky lg:top-24">
-          <div className="card space-y-5 p-5 sm:p-6">
-            <FreeShippingBar />
-            <CartSummary />
-
-            {/* Proceed to checkout. When the gate is closed this must be a
-                real disabled control, never a styled-down link: an anchor
-                ignores `disabled` and would still navigate. */}
-            {canProceedToCheckout ? (
-              <Link href="/checkout" className="btn-primary btn-lg w-full">
-                {t('proceedToCheckout')}
-                <IconArrowEnd size={20} className="rtl-flip" />
-              </Link>
-            ) : (
-              <div>
-                <button type="button" disabled className="btn-primary btn-lg w-full opacity-50">
-                  {t('proceedToCheckout')}
-                  <IconArrowEnd size={20} className="rtl-flip" />
-                </button>
-                <p className="mt-2 text-center text-xs text-destructive">
-                  {unavailableItems.length > 0
-                    ? t('unavailableItemsHint')
-                    : reservationExpired
-                      ? tr('expiredHint')
-                      : null}
-                </p>
-              </div>
-            )}
-
-            <p className="flex items-center justify-center gap-1.5 text-xs text-muted-foreground">
-              <IconShield size={16} />
-              {t('secureCheckoutNote')}
-            </p>
-          </div>
-
-          <p className="mt-4 text-center">
-            <Link
-              href="/products"
-              className="text-sm font-medium text-primary underline-offset-2 hover:underline"
-            >
-              {tc('continueShopping')}
-            </Link>
-          </p>
-        </aside>
-      </div>
-
-      {/* Cross-sell recommendations */}
-      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
-        <CartRecommendationSection
-          title={t('youMightAlsoNeed')}
-          items={cartRecs.recommendations}
-          className="mt-12"
-        />
-      )}
-    </section>
-  );
-}
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { useCartPage } from '@/core/hooks/use-cart-page';
+import { CartItem } from '@/ui/cart/cart-item';
+import { CartUpgradeBanner } from '@/ui/cart/cart-upgrade-banner';
+import { CartBundleOfferCard } from '@/ui/cart/cart-bundle-offer';
+import { CartSummary } from '@/ui/cart/cart-summary';
+import { CouponInput } from '@/ui/cart/coupon-input';
+import { CartNudges } from '@/ui/cart/cart-nudges';
+import { FreeShippingBar } from '@/ui/cart/free-shipping-bar';
+import { ReservationCountdown } from '@/ui/cart/reservation-countdown';
+import { CartRecommendationSection } from '@/ui/product/recommendation-section';
+import { LoadingSpinner } from '@/ui/shared/loading-spinner';
+import { useTranslations } from '@/core/lib/translations';
+import { IconBag, IconArrowEnd, IconShield } from '@/ui/shared/icons';
+
+export function CartView() {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const tr = useTranslations('reservation');
+  const {
+    cart,
+    cartLoading,
+    refreshCart,
+    itemCount,
+    cartRecs,
+    upgrades,
+    bundles,
+    reservationExpired,
+    unavailableItems,
+    selectedItemIds,
+    selectedItems,
+    toggleItemSelected,
+    allSelected,
+    setAllSelected,
+    checkoutHref,
+    canProceedToCheckout,
+    onReservationExpired,
+  } = useCartPage();
+
+  if (cartLoading) {
+    return <LoadingSpinner size="lg" className="min-h-[60vh]" />;
+  }
+
+  // Empty cart state — designed, never a bare sentence in blank space.
+  if (!cart || cart.items.length === 0) {
+    return (
+      <section className="container-narrow flex min-h-[60vh] items-center justify-center py-16">
+        <div className="card flex w-full max-w-md flex-col items-center gap-3 px-8 py-14 text-center">
+          <span className="bg-secondary text-primary flex h-16 w-16 items-center justify-center rounded-full">
+            <IconBag size={32} />
+          </span>
+          <h1 className="text-2xl sm:text-3xl">{t('emptyTitle')}</h1>
+          <p className="text-muted-foreground">{t('emptySubtitle')}</p>
+          <Link href="/products" className="btn-primary btn-md mt-3">
+            {tc('continueShopping')}
+            <IconArrowEnd size={18} className="rtl-flip" />
+          </Link>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="container-narrow py-8 lg:py-12">
+      <h1 className="text-3xl sm:text-4xl">
+        {t('title')}{' '}
+        <span className="text-muted-foreground font-sans text-base font-normal">
+          ({itemCount} {itemCount === 1 ? tc('item') : tc('items')})
+        </span>
+      </h1>
+
+      {/* Reservation countdown. onExpire refreshes the cart and closes the
+          checkout gate below. Passing it is what makes expiry mean anything. */}
+      {cart.reservation?.hasReservation && (
+        <ReservationCountdown
+          reservation={cart.reservation}
+          onExpire={onReservationExpired}
+          className="mt-4"
+        />
+      )}
+
+      <div className="mt-6 grid grid-cols-1 items-start gap-8 lg:grid-cols-3 lg:gap-10">
+        {/* Cart Items */}
+        <div className="lg:col-span-2">
+          {/* Nudges */}
+          {cart.nudges && cart.nudges.length > 0 && (
+            <CartNudges nudges={cart.nudges} className="mb-4" />
+          )}
+
+          {/* Select-all. Partial checkout: only the ticked lines are sent to
+              createCheckout, and whatever stays unticked is still in the cart
+              (and still for sale) after payment. */}
+          <div className="mb-3 flex items-center gap-3 px-1">
+            <input
+              id="cart-select-all"
+              type="checkbox"
+              checked={allSelected}
+              onChange={(event) => setAllSelected(event.target.checked)}
+              className="accent-primary h-4 w-4 cursor-pointer"
+            />
+            <label htmlFor="cart-select-all" className="text-foreground cursor-pointer text-sm">
+              {tc('all')}
+            </label>
+          </div>
+
+          {/* Cart items */}
+          <ul className="card divide-y overflow-hidden">
+            {cart.items.map((item) => (
+              <li key={item.id} className="flex items-start gap-3 p-4 sm:p-5">
+                <input
+                  type="checkbox"
+                  checked={selectedItemIds.includes(item.id)}
+                  onChange={() => toggleItemSelected(item.id)}
+                  aria-label={item.product.name}
+                  className="accent-primary mt-8 h-4 w-4 shrink-0 cursor-pointer"
+                />
+                <div className="min-w-0 flex-1">
+                  <CartItem item={item} onUpdate={refreshCart} />
+                  {upgrades?.upgrades?.[item.productId] && (
+                    <CartUpgradeBanner
+                      suggestion={upgrades.upgrades[item.productId]}
+                      cartItem={item}
+                      onUpgrade={refreshCart}
+                      className="mt-4"
+                    />
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+
+          {/* Bundle offers */}
+          {bundles?.bundles && bundles.bundles.length > 0 && (
+            <section className="mt-6">
+              <h3 className="mb-3 text-xl">{t('bundleOffers')}</h3>
+              <div className="space-y-4">
+                {bundles.bundles.map((offer) => (
+                  <CartBundleOfferCard
+                    key={offer.id}
+                    offer={offer}
+                    cartId={cart.id}
+                    onAdd={refreshCart}
+                  />
+                ))}
+              </div>
+            </section>
+          )}
+
+          {/* Coupon input */}
+          <div className="mt-6">
+            <p className="text-foreground mb-2 text-sm font-semibold">{t('couponTitle')}</p>
+            <CouponInput cart={cart} onUpdate={refreshCart} />
+          </div>
+        </div>
+
+        {/* Summary sidebar */}
+        <aside className="lg:sticky lg:top-24">
+          <div className="card space-y-5 p-5 sm:p-6">
+            <FreeShippingBar />
+            {/* Totals are for the WHOLE cart. A partial selection is priced
+                authoritatively on the checkout page, which is the only place
+                the server has scoped the discounts and tax to the subset. */}
+            <CartSummary />
+
+            {/* Shown once the shopper unticks anything. At zero selected this
+                is what explains the disabled button below — a count, so it
+                needs no copy of its own. */}
+            {!allSelected && (
+              <p className="text-muted-foreground text-center text-xs">
+                {selectedItems.length} {selectedItems.length === 1 ? tc('item') : tc('items')}
+              </p>
+            )}
+
+            {/* Proceed to checkout. When the gate is closed this must be a
+                real disabled control, never a styled-down link: an anchor
+                ignores `disabled` and would still navigate. */}
+            {canProceedToCheckout ? (
+              /* `checkoutHref` carries `?items=` only for a strict subset; a
+                 full cart links to a bare /checkout exactly as before. */
+              <Link href={checkoutHref} className="btn-primary btn-lg w-full">
+                {t('proceedToCheckout')}
+                <IconArrowEnd size={20} className="rtl-flip" />
+              </Link>
+            ) : (
+              <div>
+                <button type="button" disabled className="btn-primary btn-lg w-full opacity-50">
+                  {t('proceedToCheckout')}
+                  <IconArrowEnd size={20} className="rtl-flip" />
+                </button>
+                <p className="text-destructive mt-2 text-center text-xs">
+                  {unavailableItems.length > 0
+                    ? t('unavailableItemsHint')
+                    : reservationExpired
+                      ? tr('expiredHint')
+                      : null}
+                </p>
+              </div>
+            )}
+
+            <p className="text-muted-foreground flex items-center justify-center gap-1.5 text-xs">
+              <IconShield size={16} />
+              {t('secureCheckoutNote')}
+            </p>
+          </div>
+
+          <p className="mt-4 text-center">
+            <Link
+              href="/products"
+              className="text-primary text-sm font-medium underline-offset-2 hover:underline"
+            >
+              {tc('continueShopping')}
+            </Link>
+          </p>
+        </aside>
+      </div>
+
+      {/* Cross-sell recommendations */}
+      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
+        <CartRecommendationSection
+          title={t('youMightAlsoNeed')}
+          items={cartRecs.recommendations}
+          className="mt-12"
+        />
+      )}
+    </section>
+  );
+}