create-brainerce-store 1.50.1 → 1.51.0

package/templates/nextjs/designs/passepartout/messages-patch/en.json

@@ -0,0 +1,87 @@
+{
+  "common": {
+    "whatsappMessage": "Hi, I'd love more details about a product from your store"
+  },
+  "home": {
+    "heroOverline": "New collection · chosen with care",
+    "featuredKicker": "No. 02",
+    "viewExhibition": "View the full exhibition",
+    "trustShipping": "Fast home delivery",
+    "trustWarranty": "Full warranty on every item",
+    "trustGift": "Free gift wrapping",
+    "trustSecure": "Secure payment",
+    "ctaStory": "Our story",
+    "marqueeHandmade": "Chosen with care, piece by piece",
+    "marqueeOneOff": "Small, rotating editions",
+    "collectionsKicker": "No. 01",
+    "collections": "Collections",
+    "onWallKicker": "No. 03",
+    "onWall": "On the wall now",
+    "voicesKicker": "No. 04",
+    "voices": "Kind words",
+    "quote1": "“The order arrived in a box that is a gift in itself. Meticulous service from the first moment.”",
+    "name1": "Michal, Tel Aviv",
+    "quote2": "“I was looking for a special gift and found exactly what I wanted — and then some.”",
+    "name2": "Noa, Haifa",
+    "quote3": "“Quality you can feel in your hands, and quick, kind answers to every question.”",
+    "name3": "Dana, Jerusalem",
+    "storyOverline": "Behind the scenes",
+    "storyTitle": "Some things are not rushed.",
+    "storyBody": "Every piece here is chosen or made with intention — in small series, with good materials and plenty of patience. We believe good things are made slowly.",
+    "storyCta": "View the collection",
+    "visitTitle": "We'd love to meet",
+    "visitSub": "Personal service · quick answers to every question",
+    "visitCta": "Contact us",
+    "newsletterPlaceholder": "Your email",
+    "newsletterCta": "Join",
+    "newsletterHook": "Join the newsletter for 10% off your first order",
+    "newsletterSuccess": "Welcome ✨ Your discount is on its way to your inbox"
+  },
+  "productDetail": {
+    "itemNo": "Item no. {sku}",
+    "aboutWork": "About this piece",
+    "giftPanel": "Personalization",
+    "trustLine": "Fast shipping · 14-day returns · Gift wrapping",
+    "fbtKicker": "No. 02",
+    "upsellsKicker": "No. 03",
+    "relatedKicker": "No. 04",
+    "installments": "Up to 12 interest-free payments",
+    "inStockShip": "In stock · ships within a few business days",
+    "shippingReturnsTitle": "Shipping & returns",
+    "shippingReturnsBody": "Home delivery within a few business days. Exchange or return within 14 days of receiving your order, provided the item is unused and in its original packaging.",
+    "careWarrantyTitle": "Warranty & service",
+    "careWarrantyBody": "We stand behind every piece that leaves here. Ran into a problem? Write to us and we'll sort it out quickly — repair, replacement or refund."
+  },
+  "reviews": {
+    "title": "Reviews",
+    "noReviews": "No reviews yet — be the first to share your experience.",
+    "verifiedPurchase": "Verified purchase",
+    "loading": "Loading…",
+    "signIn": "Sign in",
+    "signInSuffix": "to leave a review for this product.",
+    "onlyPurchasers": "Only customers who purchased this product can leave a review.",
+    "reviewsDisabled": "Reviews are not enabled for this store.",
+    "cannotReview": "You cannot review this product right now.",
+    "confirmDelete": "Delete your review for this product?",
+    "deleteFailed": "Could not delete your review. Please try again.",
+    "startOver": "Want to start over? You can delete your review.",
+    "deleting": "Deleting…",
+    "deleteReview": "Delete review",
+    "alreadySubmitted": "You've already submitted a review for this product.",
+    "tooMany": "Too many submissions. Please try again in a few minutes.",
+    "updateFailed": "Could not update your review. Please try again.",
+    "submitFailed": "Could not submit your review. Please try again.",
+    "thanksUpdated": "Thanks! Your review has been updated.",
+    "thanksSubmitted": "Thanks! Your review has been submitted.",
+    "editYourReview": "Edit your review",
+    "writeReview": "Write a review",
+    "yourRating": "Your rating",
+    "starRating": "Star rating",
+    "yourReview": "Your review",
+    "optionalField": "optional",
+    "saving": "Saving…",
+    "submittingBtn": "Submitting…",
+    "saveChanges": "Save changes",
+    "submitReview": "Submit review"
+  }
+}

package/templates/nextjs/designs/passepartout/messages-patch/he.json

@@ -0,0 +1,87 @@
+{
+  "common": {
+    "whatsappMessage": "היי, אשמח לפרטים על מוצר מהאתר"
+  },
+  "home": {
+    "heroOverline": "אוסף חדש · נבחר בקפידה",
+    "featuredKicker": "מס׳ 02",
+    "viewExhibition": "לכל התערוכה",
+    "trustShipping": "משלוח מהיר עד הבית",
+    "trustWarranty": "אחריות מלאה על כל פריט",
+    "trustGift": "אריזת מתנה חינם",
+    "trustSecure": "תשלום מאובטח",
+    "ctaStory": "הסיפור שלנו",
+    "marqueeHandmade": "נבחר בקפידה, פריט-פריט",
+    "marqueeOneOff": "מהדורות קטנות ומתחלפות",
+    "collectionsKicker": "מס׳ 01",
+    "collections": "האוספים",
+    "onWallKicker": "מס׳ 03",
+    "onWall": "על הקיר עכשיו",
+    "voicesKicker": "מס׳ 04",
+    "voices": "אומרים עלינו",
+    "quote1": "״ההזמנה הגיעה באריזה שהיא בעצמה מתנה. שירות מוקפד מהרגע הראשון.״",
+    "name1": "מיכל, תל אביב",
+    "quote2": "״חיפשתי מתנה מיוחדת ומצאתי בדיוק את מה שרציתי — ואפילו יותר.״",
+    "name2": "נועה, חיפה",
+    "quote3": "״איכות שמרגישים בידיים, ומענה מהיר ואדיב לכל שאלה.״",
+    "name3": "דנה, ירושלים",
+    "storyOverline": "מאחורי הקלעים",
+    "storyTitle": "יש דברים שלא ממהרים.",
+    "storyBody": "כל פריט אצלנו נבחר או נוצר בתשומת לב — בסדרות קטנות, עם חומרים טובים והרבה סבלנות. אנחנו מאמינים שדברים טובים נעשים לאט.",
+    "storyCta": "לצפייה באוסף",
+    "visitTitle": "נשמח להכיר",
+    "visitSub": "שירות אישי · מענה מהיר לכל שאלה",
+    "visitCta": "צרו קשר",
+    "newsletterPlaceholder": "האימייל שלכם",
+    "newsletterCta": "הצטרפו",
+    "newsletterHook": "הצטרפו לניוזלטר וקבלו 10% הנחה בקנייה הראשונה",
+    "newsletterSuccess": "ברוכים הבאים ✨ ההטבה בדרך לתיבת המייל שלכם"
+  },
+  "productDetail": {
+    "itemNo": "פריט מס׳ {sku}",
+    "aboutWork": "על הפריט",
+    "giftPanel": "התאמה אישית",
+    "trustLine": "משלוח מהיר · החזרות עד 14 יום · אריזת מתנה",
+    "fbtKicker": "מס׳ 02",
+    "upsellsKicker": "מס׳ 03",
+    "relatedKicker": "מס׳ 04",
+    "installments": "עד 12 תשלומים ללא ריבית",
+    "inStockShip": "במלאי · נשלח תוך ימי עסקים ספורים",
+    "shippingReturnsTitle": "משלוחים והחזרות",
+    "shippingReturnsBody": "משלוח עד הבית תוך ימי עסקים ספורים. החלפה או החזרה תוך 14 יום מקבלת ההזמנה, בתנאי שהפריט לא נעשה בו שימוש ובאריזתו המקורית.",
+    "careWarrantyTitle": "אחריות ושירות",
+    "careWarrantyBody": "אנחנו עומדים מאחורי כל פריט שיוצא מכאן. נתקלתם בבעיה? כתבו לנו ונדאג לפתרון מהיר — תיקון, החלפה או החזר."
+  },
+  "reviews": {
+    "title": "ביקורות",
+    "noReviews": "אין עדיין ביקורות — היו הראשונים לשתף.",
+    "verifiedPurchase": "רכישה מאומתת",
+    "loading": "טוען…",
+    "signIn": "התחברו",
+    "signInSuffix": "כדי לכתוב ביקורת על המוצר.",
+    "onlyPurchasers": "רק לקוחות שרכשו את המוצר יכולים לכתוב ביקורת.",
+    "reviewsDisabled": "ביקורות אינן פעילות בחנות זו.",
+    "cannotReview": "לא ניתן לכתוב ביקורת על המוצר כרגע.",
+    "confirmDelete": "למחוק את הביקורת שלך על המוצר?",
+    "deleteFailed": "לא ניתן היה למחוק את הביקורת. נסו שוב.",
+    "startOver": "רוצים להתחיל מחדש? אפשר למחוק את הביקורת.",
+    "deleting": "מוחק…",
+    "deleteReview": "מחיקת ביקורת",
+    "alreadySubmitted": "כבר שלחתם ביקורת על המוצר הזה.",
+    "tooMany": "יותר מדי נסיונות. נסו שוב בעוד כמה דקות.",
+    "updateFailed": "לא ניתן היה לעדכן את הביקורת. נסו שוב.",
+    "submitFailed": "לא ניתן היה לשלוח את הביקורת. נסו שוב.",
+    "thanksUpdated": "תודה! הביקורת עודכנה.",
+    "thanksSubmitted": "תודה! הביקורת נשלחה.",
+    "editYourReview": "עריכת הביקורת",
+    "writeReview": "כתיבת ביקורת",
+    "yourRating": "הדירוג שלכם",
+    "starRating": "דירוג כוכבים",
+    "yourReview": "הביקורת שלכם",
+    "optionalField": "לא חובה",
+    "saving": "שומר…",
+    "submittingBtn": "שולח…",
+    "saveChanges": "שמירת שינויים",
+    "submitReview": "שליחת ביקורת"
+  }
+}

package/templates/nextjs/designs/passepartout/ui/cart/cart-bundle-offer.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useState } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartBundleOffer as CartBundleOfferType } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface CartBundleOfferCardProps {
+  offer: CartBundleOfferType;
+  cartId: string;
+  onAdd: () => void;
+  className?: string;
+}
+
+export function CartBundleOfferCard({ offer, cartId, onAdd, className }: CartBundleOfferCardProps) {
+  const t = useTranslations('cart');
+  const currency = useCurrency();
+  const [adding, setAdding] = useState(false);
+
+  const offered = offer.offeredProducts;
+
+  const totalOriginal = parseFloat(offer.totalOriginalPrice);
+  const totalDiscounted = parseFloat(offer.totalDiscountedPrice);
+  const discountLabel =
+    offer.discountType === 'PERCENTAGE'
+      ? `${offer.discountValue}%`
+      : (formatPrice(parseFloat(offer.discountValue), { currency }) as string);
+
+  async function handleAdd() {
+    if (adding) return;
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/core/lib/brainerce');
+      const client = getClient();
+      // No variant selections in the default template — products with
+      // variants are best handled with a dedicated picker per offered item.
+      await client.addBundleToCart(cartId, offer.id);
+      onAdd();
+    } catch (err) {
+      console.error('Failed to add bundle:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  return (
+    <div className={cn('bg-background border-border rounded-none border p-4', className)}>
+      <div className="mb-3">
+        <p className="text-foreground text-sm font-medium">{offer.name}</p>
+        {offer.description && (
+          <p className="text-muted-foreground mt-0.5 text-xs">{offer.description}</p>
+        )}
+      </div>
+
+      <ul className="space-y-2">
+        {offered.map((p) => {
+          const firstImage = p.images?.[0];
+          const imageUrl = firstImage?.url ?? null;
+          return (
+            <li key={p.id} className="flex items-center gap-3">
+              <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
+                {imageUrl ? (
+                  <Image src={imageUrl} alt={p.name} fill sizes="48px" className="object-cover" />
+                ) : null}
+              </div>
+              <div className="min-w-0 flex-1">
+                <p className="text-foreground truncate text-sm">{p.name}</p>
+                <div className="mt-0.5 flex items-center gap-2">
+                  <span className="text-muted-foreground text-xs line-through">
+                    {formatPrice(parseFloat(p.originalPrice), { currency }) as string}
+                  </span>
+                  <span className="text-foreground text-xs font-semibold">
+                    {formatPrice(parseFloat(p.discountedPrice), { currency }) as string}
+                  </span>
+                </div>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="border-border mt-3 flex items-center justify-between border-t pt-3">
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground text-sm line-through">
+            {formatPrice(totalOriginal, { currency }) as string}
+          </span>
+          <span className="text-foreground text-sm font-semibold">
+            {formatPrice(totalDiscounted, { currency }) as string}
+          </span>
+          <span className="bg-destructive/10 text-destructive rounded px-1.5 py-0.5 text-xs font-medium">
+            -{discountLabel}
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={handleAdd}
+          disabled={adding}
+          className={cn(
+            'bg-primary text-primary-foreground flex-shrink-0 rounded px-4 py-2 text-xs font-medium transition-opacity hover:opacity-90',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+          )}
+        >
+          {adding ? t('addingBundle') : t('addBundleItem')}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/designs/passepartout/ui/cart/cart-nudges.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import type { CartNudge } from 'brainerce';
+import { cn } from '@/core/lib/utils';
+
+interface CartNudgesProps {
+  nudges: CartNudge[];
+  className?: string;
+}
+
+export function CartNudges({ nudges, className }: CartNudgesProps) {
+  if (nudges.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {nudges.map((nudge) => (
+        <div
+          key={nudge.ruleId}
+          className="bg-primary/5 border-primary/20 flex items-start gap-3 rounded-none border px-4 py-3"
+        >
+          <svg
+            className="text-primary mt-0.5 h-5 w-5 flex-shrink-0"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          <p className="text-foreground flex-1 text-sm">{nudge.text}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/nextjs/designs/passepartout/ui/cart/cart-upgrade-banner.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { CdnImage as Image } from '@/ui/shared/cdn-image';
+import type { CartUpgradeSuggestion, CartItem as CartItemType } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { getClient } from '@/core/lib/brainerce';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+
+interface CartUpgradeBannerProps {
+  suggestion: CartUpgradeSuggestion;
+  cartItem: CartItemType;
+  onUpgrade: () => void;
+  className?: string;
+}
+
+export function CartUpgradeBanner({
+  suggestion,
+  cartItem,
+  onUpgrade,
+  className,
+}: CartUpgradeBannerProps) {
+  const t = useTranslations('cart');
+  const currency = useCurrency();
+  const [upgrading, setUpgrading] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  const storageKey = `dismissed_upgrade_${suggestion.sourceProductId}`;
+
+  useEffect(() => {
+    try {
+      if (sessionStorage.getItem(storageKey)) {
+        setDismissed(true);
+      }
+    } catch {
+      /* ignore */
+    }
+  }, [storageKey]);
+
+  if (dismissed) return null;
+
+  const target = suggestion.targetProduct;
+  const firstImage = target.images?.[0];
+  const imageUrl = firstImage
+    ? typeof firstImage === 'string'
+      ? firstImage
+      : firstImage.url
+    : null;
+  const formattedDelta = formatPrice(parseFloat(suggestion.priceDelta), { currency }) as string;
+
+  function handleDismiss() {
+    try {
+      sessionStorage.setItem(storageKey, '1');
+    } catch {
+      /* ignore */
+    }
+    setDismissed(true);
+  }
+
+  async function handleUpgrade() {
+    if (upgrading) return;
+    try {
+      setUpgrading(true);
+      const client = getClient();
+      await client.smartRemoveFromCart(cartItem.productId, cartItem.variantId || undefined);
+      await client.smartAddToCart({ productId: target.id, quantity: cartItem.quantity });
+      onUpgrade();
+    } catch (err) {
+      console.error('Failed to upgrade cart item:', err);
+    } finally {
+      setUpgrading(false);
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'bg-primary/5 border-primary/20 relative flex items-center gap-3 rounded-none border px-4 py-3',
+        className
+      )}
+    >
+      {/* Dismiss button */}
+      <button
+        type="button"
+        onClick={handleDismiss}
+        className="text-muted-foreground hover:text-foreground absolute end-2 top-2 text-xs"
+        aria-label={t('dismissUpgrade')}
+      >
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+
+      {/* Product image */}
+      <div className="bg-muted relative h-12 w-12 flex-shrink-0 overflow-hidden rounded">
+        {imageUrl ? (
+          <Image src={imageUrl} alt={target.name} fill sizes="48px" className="object-cover" />
+        ) : (
+          <div className="text-muted-foreground flex h-full w-full items-center justify-center">
+            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+
+      {/* Text */}
+      <div className="min-w-0 flex-1">
+        <p className="text-foreground text-sm font-medium">
+          {t('upgradeFor', { name: target.name, amount: formattedDelta })}
+        </p>
+      </div>
+
+      {/* Upgrade button */}
+      <button
+        type="button"
+        onClick={handleUpgrade}
+        disabled={upgrading}
+        className={cn(
+          'bg-primary text-primary-foreground flex-shrink-0 rounded px-3 py-1.5 text-xs font-medium transition-opacity hover:opacity-90',
+          'disabled:cursor-not-allowed disabled:opacity-50'
+        )}
+      >
+        {upgrading ? t('upgrading') : t('upgrade')}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,149 @@
+'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';
+
+export function CartView() {
+  const t = useTranslations('cart');
+  const tc = useTranslations('common');
+  const { cart, cartLoading, refreshCart, itemCount, cartRecs, upgrades, bundles } = useCartPage();
+
+  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-none 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>
+  );
+}