Replace entire repo content with shahikitchen-v1-prodcution.zip (v1.1 production)

components/CartDrawer.tsx

@@ -0,0 +1,230 @@
+'use client';
+
+/**
+ * =============================================================================
+ * CART DRAWER (SLIDE-IN BASKET PANEL)
+ * =============================================================================
+ * 
+ * This is the visual "basket" that slides in from the right when the user
+ * clicks the cart icon in the navbar or the "View Cart" toast action.
+ * 
+ * KEY DESIGN CHOICES:
+ * - Fixed position, full-height, max-w-md (beautiful on both mobile and desktop)
+ * - Backdrop click closes it (standard mobile pattern)
+ * - z-[990] sits above almost everything (including the sticky category nav) (below mobile menu)
+ * - All cart mutations go through the context — this component is "dumb" UI only
+ * 
+ * THE ORDERING FLOW (very important for restaurant context):
+ *   Instead of a traditional Stripe checkout, we generate a pre-filled WhatsApp
+ *   message containing every line item + quantities + grand total.
+ *   This matches the restaurant's current real-world ordering process.
+ *   The number 46739381089 is the same one used in the homepage reservation form.
+ * 
+ * FUTURE ENHANCEMENTS (documented here so nothing is forgotten):
+ * - Add "Special requests" textarea per order
+ * - Show estimated preparation time
+ * - Allow "Order for later" date/time picker
+ * - Split "Pickup" vs "Delivery" with different messaging
+ * - After WhatsApp opens, optionally clear the cart (or keep it — current choice)
+ */
+
+import Link from 'next/link';
+import { buildCartWhatsAppMessage } from '@/application/messaging/whatsapp-message-builder';
+import {
+  calculateLineTotal,
+  formatLineQuantityLabel,
+} from '@/domain/shared/order-line';
+import { RESTAURANT_CONTACT } from '@/domain/shared/constants';
+import { container } from '@/infrastructure/di/container';
+import { useCart } from '@/presentation/providers/cart-provider';
+import { useLanguage } from '@/presentation/providers/language-provider';
+import { getTranslation } from '@/presentation/i18n/translations';
+
+export default function CartDrawer() {
+  const { 
+    items, 
+    isOpen, 
+    closeCart, 
+    totalPrice, 
+    removeFromCart, 
+    updateQuantity,
+    clearCart 
+  } = useCart();
+
+  const { language } = useLanguage();
+  const t = getTranslation(language);
+
+  /**
+   * WHATSAPP DEEP LINK ORDERING
+   * 
+   * Builds a human-readable, copy-paste friendly message that the restaurant staff
+   * can immediately understand and action.
+   * 
+   * The format deliberately mirrors how the restaurant currently receives orders
+   * over the phone or via Instagram DMs.
+   */
+  const orderViaWhatsApp = () => {
+    const message = buildCartWhatsAppMessage(items, t.cartDrawer, language);
+    if (!message) return;
+    container.messagingGateway.openWhatsApp(message);
+  };
+
+  // Guard clause — drawer only renders when explicitly opened via context
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* SEMI-TRANSPARENT BACKDROP */}
+      {/* Clicking anywhere outside the drawer closes it (standard mobile pattern) */}
+      <div 
+        className="fixed inset-0 bg-black/40 z-[980]" 
+        onClick={closeCart}
+      />
+
+      {/* THE ACTUAL DRAWER — slides in from right */}
+      {/* z-[990] ensures it sits above sticky nav, category pills, and most other UI (below mobile menu) */}
+      <div className="fixed top-0 right-0 h-full w-full max-w-md bg-[#F8F5F0] z-[990] shadow-2xl flex flex-col">
+        {/* HEADER — Title + item count + quick clear + close button */}
+        <div className="flex items-center justify-between p-6 border-b border-[#EDE6D9]">
+          <div className="flex items-center gap-3">
+            <h2 className="text-2xl tracking-[-0.5px]">{t.cartDrawer.title}</h2>
+            {items.length > 0 && (
+              <span className="text-xs px-2.5 py-0.5 rounded-full bg-[#EDE6D9] text-[#6B665F]">
+                {items.length} {items.length === 1 ? t.cartDrawer.item : t.cartDrawer.items}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-3">
+            {items.length > 0 && (
+              <button 
+                onClick={clearCart}
+                className="text-xs text-[#B38B4D] hover:underline"
+              >
+                {t.cartDrawer.clear}
+              </button>
+            )}
+            <button 
+              onClick={closeCart}
+              className="text-[#6B665F] hover:text-[#2C2A26] text-2xl leading-none pl-1"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+
+        {/* SCROLLABLE CONTENT AREA */}
+        {/* Empty state is friendly and routes the user back to the menu */}
+        <div className="flex-1 overflow-y-auto p-6">
+          {items.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-center">
+              <div className="text-6xl mb-4">🛒</div>
+              <p className="text-lg text-[#6B665F]">{t.cartDrawer.empty}</p>
+              <Link 
+                href="/menu" 
+                onClick={closeCart}
+                className="mt-6 text-[#B38B4D] hover:underline"
+              >
+                {t.cartDrawer.browseMenu}
+              </Link>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              {items.map((item) => (
+                <div key={item.id} className="flex gap-4 border-b border-[#EDE6D9] pb-6">
+                  <div className="flex-1">
+                    <div className="flex justify-between">
+                      <div>
+                        <h4 className="font-medium tracking-[-0.3px]">{item.name}</h4>
+                        <p className="text-sm text-[#6B665F]">
+                          {item.pricingMode === 'weight'
+                            ? `${item.pricePerHalfKg ?? item.price} kr / ½ kg`
+                            : `${item.price} kr × ${item.quantity}`}
+                        </p>
+                      </div>
+                      <div className="text-right font-medium">
+                        {calculateLineTotal(item)} kr
+                      </div>
+                    </div>
+
+                    {/* Quantity controls */}
+                    <div className="flex items-center gap-3 mt-3">
+                      <button
+                        onClick={() => updateQuantity(item.id, item.quantity - 1)}
+                        className="w-8 h-8 flex items-center justify-center border border-[#EDE6D9] rounded hover:bg-white transition"
+                      >
+                        −
+                      </button>
+                      <span className="min-w-12 text-center font-medium tabular-nums">
+                        {formatLineQuantityLabel(item)}
+                      </span>
+                      <button
+                        onClick={() => updateQuantity(item.id, item.quantity + 1)}
+                        className="w-8 h-8 flex items-center justify-center border border-[#EDE6D9] rounded hover:bg-white transition"
+                      >
+                        +
+                      </button>
+
+                      <button
+                        onClick={() => removeFromCart(item.id)}
+                        className="ml-auto text-xs text-[#B38B4D] hover:underline"
+                      >
+                        {t.cartDrawer.remove}
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* STICKY FOOTER — always visible when cart has items */}
+        {/* Contains the two primary actions: WhatsApp (primary) + Phone (secondary) */}
+        {items.length > 0 && (
+          <div className="p-6 border-t border-[#EDE6D9] bg-white">
+            <button 
+              onClick={clearCart} 
+              className="text-xs text-[#8A8478] hover:text-[#B38B4D] mb-3 underline"
+            >
+              {t.cartDrawer.clearBasket}
+            </button>
+
+            <div className="flex justify-between text-lg font-medium mb-4">
+              <span>{t.cartDrawer.total}</span>
+              <span>{totalPrice.toFixed(0)} kr</span>
+            </div>
+
+            <p className="text-xs text-center text-[#6B665F] mb-3">
+              {t.cartDrawer.pickupNote}
+            </p>
+
+            <button
+              onClick={orderViaWhatsApp}
+              className="btn-primary w-full py-4 rounded-full text-base tracking-[0.5px] font-medium mb-2 flex items-center justify-center gap-2"
+            >
+              {t.cartDrawer.sendViaWhatsApp}
+            </button>
+
+            <button
+              onClick={() => window.open(`tel:${RESTAURANT_CONTACT.phonePrimary}`, '_self')}
+              className="btn-outline w-full py-3 rounded-full text-sm tracking-[0.5px] font-medium mb-3"
+            >
+              {t.cartDrawer.call}
+            </button>
+
+            <button
+              onClick={closeCart}
+              className="w-full text-sm text-[#6B665F] hover:text-[#2C2A26] pt-1"
+            >
+              {t.cartDrawer.continueBrowsing}
+            </button>
+
+            <p className="text-[10px] text-center text-[#8A8478] mt-4">
+              {t.cartDrawer.whatsappHint}
+            </p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}