feat: make entire cart drawer UI and WhatsApp order draft fully language-compatible (Swedish default + en/hi/ur translations for title, notes, buttons, and drafted message)

This commit is contained in:
Zeeshan Khan
2026-06-02 17:57:22 +02:00
parent 50de4b0c90
commit 5eddef80e6
2 changed files with 130 additions and 17 deletions
+34 -17
View File
@@ -30,6 +30,8 @@
import { useCart } from './CartContext'; import { useCart } from './CartContext';
import Link from 'next/link'; import Link from 'next/link';
import { useLanguage } from "@/lib/language-context";
import { getTranslation } from "@/lib/translations";
export default function CartDrawer() { export default function CartDrawer() {
const { const {
@@ -42,6 +44,9 @@ export default function CartDrawer() {
clearCart clearCart
} = useCart(); } = useCart();
const { language } = useLanguage();
const t = getTranslation(language);
/** /**
* WHATSAPP DEEP LINK ORDERING * WHATSAPP DEEP LINK ORDERING
* *
@@ -58,16 +63,24 @@ export default function CartDrawer() {
.map((item) => `${item.quantity} × ${item.name}${item.price * item.quantity} kr`) .map((item) => `${item.quantity} × ${item.name}${item.price * item.quantity} kr`)
.join('\n'); .join('\n');
const message = const now = new Date();
`Hello Shahi Kitchen 👋 const suggested = new Date(now.getTime() + 30 * 60 * 1000);
// Use locale-appropriate time formatting so the suggested time in the draft feels native
const timeLocale = language === 'sv' ? 'sv-SE' : 'en-GB';
const suggestedTime = suggested.toLocaleTimeString(timeLocale, { hour: '2-digit', minute: '2-digit' });
I would like to place an order: const msg = t.cartDrawer;
const message =
`${msg.messageHello}
${msg.messageIntro}
${lines} ${lines}
${msg.messageConfirm.replace('{time}', suggestedTime)}
Total: ${totalPrice} kr ${msg.messageTotal}: ${totalPrice} kr
Thank you!`; ${msg.messageThanks}`;
const encoded = encodeURIComponent(message); const encoded = encodeURIComponent(message);
// This is the same WhatsApp business number used for table reservations on the homepage // This is the same WhatsApp business number used for table reservations on the homepage
@@ -92,10 +105,10 @@ Thank you!`;
{/* HEADER — Title + item count + quick clear + close button */} {/* 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 justify-between p-6 border-b border-[#EDE6D9]">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<h2 className="text-2xl tracking-[-0.5px]">Your Basket</h2> <h2 className="text-2xl tracking-[-0.5px]">{t.cartDrawer.title}</h2>
{items.length > 0 && ( {items.length > 0 && (
<span className="text-xs px-2.5 py-0.5 rounded-full bg-[#EDE6D9] text-[#6B665F]"> <span className="text-xs px-2.5 py-0.5 rounded-full bg-[#EDE6D9] text-[#6B665F]">
{items.length} {items.length === 1 ? 'item' : 'items'} {items.length} {items.length === 1 ? t.cartDrawer.item : t.cartDrawer.items}
</span> </span>
)} )}
</div> </div>
@@ -105,7 +118,7 @@ Thank you!`;
onClick={clearCart} onClick={clearCart}
className="text-xs text-[#B38B4D] hover:underline" className="text-xs text-[#B38B4D] hover:underline"
> >
Clear {t.cartDrawer.clear}
</button> </button>
)} )}
<button <button
@@ -123,13 +136,13 @@ Thank you!`;
{items.length === 0 ? ( {items.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-center"> <div className="flex flex-col items-center justify-center h-full text-center">
<div className="text-6xl mb-4">🛒</div> <div className="text-6xl mb-4">🛒</div>
<p className="text-lg text-[#6B665F]">Your basket is empty</p> <p className="text-lg text-[#6B665F]">{t.cartDrawer.empty}</p>
<Link <Link
href="/menu" href="/menu"
onClick={closeCart} onClick={closeCart}
className="mt-6 text-[#B38B4D] hover:underline" className="mt-6 text-[#B38B4D] hover:underline"
> >
Browse the menu {t.cartDrawer.browseMenu}
</Link> </Link>
</div> </div>
) : ( ) : (
@@ -167,7 +180,7 @@ Thank you!`;
onClick={() => removeFromCart(item.id)} onClick={() => removeFromCart(item.id)}
className="ml-auto text-xs text-[#B38B4D] hover:underline" className="ml-auto text-xs text-[#B38B4D] hover:underline"
> >
Remove {t.cartDrawer.remove}
</button> </button>
</div> </div>
</div> </div>
@@ -185,37 +198,41 @@ Thank you!`;
onClick={clearCart} onClick={clearCart}
className="text-xs text-[#8A8478] hover:text-[#B38B4D] mb-3 underline" className="text-xs text-[#8A8478] hover:text-[#B38B4D] mb-3 underline"
> >
Clear basket {t.cartDrawer.clearBasket}
</button> </button>
<div className="flex justify-between text-lg font-medium mb-4"> <div className="flex justify-between text-lg font-medium mb-4">
<span>Total</span> <span>{t.cartDrawer.total}</span>
<span>{totalPrice.toFixed(0)} kr</span> <span>{totalPrice.toFixed(0)} kr</span>
</div> </div>
<p className="text-xs text-center text-[#6B665F] mb-3">
{t.cartDrawer.pickupNote}
</p>
<button <button
onClick={orderViaWhatsApp} 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" 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"
> >
Send order via WhatsApp {t.cartDrawer.sendViaWhatsApp}
</button> </button>
<button <button
onClick={() => window.open('tel:031288910', '_self')} onClick={() => window.open('tel:031288910', '_self')}
className="btn-outline w-full py-3 rounded-full text-sm tracking-[0.5px] font-medium mb-3" className="btn-outline w-full py-3 rounded-full text-sm tracking-[0.5px] font-medium mb-3"
> >
Call 031-28 89 10 {t.cartDrawer.call}
</button> </button>
<button <button
onClick={closeCart} onClick={closeCart}
className="w-full text-sm text-[#6B665F] hover:text-[#2C2A26] pt-1" className="w-full text-sm text-[#6B665F] hover:text-[#2C2A26] pt-1"
> >
Continue browsing {t.cartDrawer.continueBrowsing}
</button> </button>
<p className="text-[10px] text-center text-[#8A8478] mt-4"> <p className="text-[10px] text-center text-[#8A8478] mt-4">
WhatsApp opens with your order pre-filled. We will confirm availability. {t.cartDrawer.whatsappHint}
</p> </p>
</div> </div>
)} )}
+96
View File
@@ -148,6 +148,30 @@ export const translations = {
add: 'Add', add: 'Add',
viewCart: 'View Cart', viewCart: 'View Cart',
// Cart Drawer (fully language-aware)
cartDrawer: {
title: 'Your Basket',
item: 'item',
items: 'items',
clear: 'Clear',
empty: 'Your basket is empty',
browseMenu: 'Browse the menu →',
clearBasket: 'Clear basket',
total: 'Total',
pickupNote: 'Estimated order pickup time is 30 minutes, but it can vary depending on workload and availability.',
sendViaWhatsApp: 'Send order via WhatsApp',
call: 'Call 031-28 89 10',
continueBrowsing: 'Continue browsing',
whatsappHint: 'WhatsApp opens with your order pre-filled. We will confirm availability.',
remove: 'Remove',
// WhatsApp message fragments (used to build the draft in the correct language)
messageHello: 'Hello Shahi Kitchen 👋',
messageIntro: 'I would like to place an order:',
messageConfirm: 'Please confirm pickup time (e.g. {time} or later)',
messageTotal: 'Total',
messageThanks: 'Thank you!',
},
// Full Menu Page // Full Menu Page
menu: { menu: {
title: 'Our Menu', title: 'Our Menu',
@@ -295,6 +319,30 @@ export const translations = {
add: 'Lägg till', add: 'Lägg till',
viewCart: 'Visa Varukorg', viewCart: 'Visa Varukorg',
// Cart Drawer (fully language-aware)
cartDrawer: {
title: 'Din varukorg',
item: 'vara',
items: 'varor',
clear: 'Rensa',
empty: 'Din varukorg är tom',
browseMenu: 'Bläddra i menyn →',
clearBasket: 'Rensa varukorg',
total: 'Totalt',
pickupNote: 'Uppskattad upphämtningstid är cirka 30 minuter, men den kan variera beroende på arbetsbelastning och tillgänglighet.',
sendViaWhatsApp: 'Skicka beställning via WhatsApp',
call: 'Ring 031-28 89 10',
continueBrowsing: 'Fortsätt bläddra',
whatsappHint: 'WhatsApp öppnas med din förifyllda beställning. Vi bekräftar tillgänglighet.',
remove: 'Ta bort',
// WhatsApp message fragments (used to build the draft in the correct language)
messageHello: 'Hej Shahi Kitchen 👋',
messageIntro: 'Jag skulle vilja lägga en beställning:',
messageConfirm: 'Vänligen bekräfta upphämtningstid (t.ex. {time} eller senare)',
messageTotal: 'Totalt',
messageThanks: 'Tack!',
},
// Full Menu Page // Full Menu Page
menu: { menu: {
title: 'Vår Meny', title: 'Vår Meny',
@@ -451,6 +499,30 @@ export const translations = {
add: 'ऐड करें', add: 'ऐड करें',
viewCart: 'कार्ट देखें', viewCart: 'कार्ट देखें',
// Cart Drawer (fully language-aware)
cartDrawer: {
title: 'आपकी टोकरी',
item: 'आइटम',
items: 'आइटम',
clear: 'साफ करें',
empty: 'आपकी टोकरी खाली है',
browseMenu: 'मेन्यू ब्राउज़ करें →',
clearBasket: 'टोकरी साफ करें',
total: 'कुल',
pickupNote: 'अनुमानित ऑर्डर पिकअप समय 30 मिनट है, लेकिन कार्यभार और उपलब्धता के आधार पर भिन्न हो सकता है।',
sendViaWhatsApp: 'व्हाट्सएप पर ऑर्डर भेजें',
call: 'कॉल करें 031-28 89 10',
continueBrowsing: 'ब्राउज़िंग जारी रखें',
whatsappHint: 'व्हाट्सएप आपके ऑर्डर के साथ खुलेगा। हम उपलब्धता की पुष्टि करेंगे।',
remove: 'हटाएं',
// WhatsApp message fragments
messageHello: 'नमस्ते Shahi Kitchen 👋',
messageIntro: 'मैं एक ऑर्डर देना चाहता/चाहती हूँ:',
messageConfirm: 'कृपया पिकअप समय की पुष्टि करें (उदा. {time} या बाद में)',
messageTotal: 'कुल',
messageThanks: 'धन्यवाद!',
},
}, },
ur: { ur: {
@@ -595,6 +667,30 @@ export const translations = {
add: 'شامل کریں', add: 'شامل کریں',
viewCart: 'کارٹ دیکھیں', viewCart: 'کارٹ دیکھیں',
// Cart Drawer (fully language-aware)
cartDrawer: {
title: 'آپ کی ٹوکری',
item: 'آئٹم',
items: 'آئٹمز',
clear: 'صاف کریں',
empty: 'آپ کی ٹوکری خالی ہے',
browseMenu: 'مینو دیکھیں →',
clearBasket: 'ٹوکری صاف کریں',
total: 'کل',
pickupNote: 'تخمینی آرڈر پک اپ کا وقت 30 منٹ ہے، لیکن کام کے بوجھ اور دستیابی کے مطابق مختلف ہو سکتا ہے۔',
sendViaWhatsApp: 'واٹس ایپ پر آرڈر بھیجیں',
call: 'کال کریں 031-28 89 10',
continueBrowsing: 'براؤزنگ جاری رکھیں',
whatsappHint: 'واٹس ایپ آپ کے آرڈر کے ساتھ کھلے گا۔ ہم دستیابی کی تصدیق کریں گے۔',
remove: 'ہٹائیں',
// WhatsApp message fragments
messageHello: 'ہیلو Shahi Kitchen 👋',
messageIntro: 'میں ایک آرڈر دینا چاہتا ہوں:',
messageConfirm: 'براہ مہربانی پک اپ ٹائم کی تصدیق کریں (مثلاً {time} یا بعد میں)',
messageTotal: 'کل',
messageThanks: 'شکریہ!',
},
}, },
} as const; } as const;