admin/shahikitchen-prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace entire repo content with code from /root/shahikitchen-google/

Browse Source
This commit is contained in:
root
2026-07-03 02:51:15 +00:00
parent c8b7dc95e4
commit 8ccf033329
79 changed files with 7611 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CartDrawer.tsx
+185 -46
View File
@@ -1,6 +1,6 @@
'use client';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { MessageCircle } from 'lucide-react';
import {
@@ -19,14 +19,46 @@ import { useCart } from '@/presentation/providers/cart-provider';
import { useLanguage } from '@/presentation/providers/language-provider';
import { getTranslation } from '@/presentation/i18n/translations';
import { getMenuItemName } from '@/application/i18n/menu-localization';
import { getMenuItemById } from '@/lib/menu-data';
import { useMenu } from '@/presentation/providers/menu-provider';
import CartInquiryModal from '@/components/CartInquiryModal';
import {
buildCartInquiryCopy,
getWhatsAppInquiryLanguage,
getWhatsAppInquiryTranslation,
} from '@/application/messaging/inquiry-language';
import { useCustomerAuth } from '@/presentation/providers/customer-auth-provider';
const CART_INQUIRY_INTENT_KEY = 'shahi-cart-inquiry-intent';
function GoogleIcon({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 24 24" aria-hidden="true">
<path
fill="#4285F4"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
/>
<path
fill="#34A853"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="#FBBC05"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
);
}
export default function CartDrawer() {
const {
items,
isOpen,
closeCart,
openCart,
totalPrice,
removeFromCart,
updateQuantity,
@@ -34,19 +66,28 @@ export default function CartDrawer() {
} = useCart();
const { language, isRtl } = useLanguage();
const { getItemById } = useMenu();
const {
email: customerEmail,
name: customerName,
isAuthenticated,
isLoading: isAuthLoading,
} = useCustomerAuth();
const t = getTranslation(language);
const [inquiryMode, setInquiryMode] = useState<FulfillmentMode | null>(null);
const [authGateMode, setAuthGateMode] = useState<FulfillmentMode | null>(null);
const inquiryCopy = {
pickupIntro: t.cartDrawer.inquiryPickupIntro,
deliveryIntro: t.cartDrawer.inquiryDeliveryIntro,
messageTotal: t.cartDrawer.messageTotal,
messageName: t.cartDrawer.messageName,
messagePhone: t.cartDrawer.messagePhone,
messageAddress: t.cartDrawer.messageAddress,
messagePreferredTime: t.cartDrawer.messagePreferredTime,
deliverySwishNote: t.cartDrawer.deliverySwishNote,
};
useEffect(() => {
if (isAuthLoading || !isAuthenticated) return;
const intent = sessionStorage.getItem(CART_INQUIRY_INTENT_KEY) as FulfillmentMode | null;
if (intent !== 'pickup' && intent !== 'delivery') return;
sessionStorage.removeItem(CART_INQUIRY_INTENT_KEY);
openCart();
setAuthGateMode(null);
setInquiryMode(intent);
}, [isAuthenticated, isAuthLoading, openCart]);
const openWhatsApp = (message: string | null) => {
if (!message) return;
@@ -54,12 +95,42 @@ export default function CartDrawer() {
setInquiryMode(null);
};
const startInquiry = (mode: FulfillmentMode) => {
if (isAuthLoading) return;
if (!isAuthenticated) {
setAuthGateMode(mode);
setInquiryMode(null);
return;
}
setAuthGateMode(null);
setInquiryMode(mode);
};
const handleGoogleSignInForInquiry = () => {
if (!authGateMode) return;
try {
sessionStorage.setItem(CART_INQUIRY_INTENT_KEY, authGateMode);
} catch {
// Ignore storage errors.
}
const returnTo = encodeURIComponent(`${window.location.pathname}${window.location.search}`);
window.location.href = `/api/auth/google?returnTo=${returnTo}`;
};
const handlePickupSubmit = (details: PickupInquiryDetails) => {
openWhatsApp(buildPickupInquiryMessage(items, details, inquiryCopy, language));
const inquiryLang = getWhatsAppInquiryLanguage(language);
const inquiryCopy = buildCartInquiryCopy(getWhatsAppInquiryTranslation(language));
openWhatsApp(buildPickupInquiryMessage(items, details, inquiryCopy, inquiryLang));
};
const handleDeliverySubmit = (details: DeliveryInquiryDetails) => {
openWhatsApp(buildDeliveryInquiryMessage(items, details, inquiryCopy, language));
const inquiryLang = getWhatsAppInquiryLanguage(language);
const inquiryCopy = buildCartInquiryCopy(getWhatsAppInquiryTranslation(language));
openWhatsApp(buildDeliveryInquiryMessage(items, details, inquiryCopy, inquiryLang));
};
if (!isOpen) return null;
@@ -72,11 +143,11 @@ export default function CartDrawer() {
/>
<div
className={`fixed top-0 h-full w-full max-w-md bg-[#F8F5F0] z-[990] shadow-2xl flex flex-col ${
className={`fixed top-0 h-[100dvh] w-full max-w-md bg-[#F8F5F0] z-[990] shadow-2xl flex flex-col ${
isRtl ? 'left-0 border-r border-[#EDE6D9]' : 'right-0 border-l border-[#EDE6D9]'
}`}
>
<div className="flex items-center justify-between p-6 border-b border-[#EDE6D9]">
<div className="flex shrink-0 items-center justify-between border-b border-[#EDE6D9] px-4 py-4 sm:px-6 sm:py-5">
<div className="flex items-center gap-3">
<h2 className="text-2xl tracking-[-0.5px]">{t.cartDrawer.title}</h2>
{items.length > 0 && (
@@ -96,14 +167,15 @@ export default function CartDrawer() {
)}
<button
onClick={closeCart}
className="text-[#6B665F] hover:text-[#2C2A26] text-2xl leading-none pl-1"
aria-label="Close cart"
className="flex min-h-11 min-w-11 items-center justify-center text-[#6B665F] hover:text-[#2C2A26] text-2xl leading-none touch-manipulation"
>
×
</button>
</div>
</div>
<div className="flex-1 overflow-y-auto p-6">
<div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain px-4 py-4 sm:px-6 sm:py-6">
{items.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-center">
<div className="text-6xl mb-4">🛒</div>
@@ -126,7 +198,7 @@ export default function CartDrawer() {
<h4 className="font-medium tracking-[-0.3px]">
{getMenuItemName(language, {
id: item.id,
name: getMenuItemById(item.id)?.name ?? item.name,
name: getItemById(item.id)?.name ?? item.name,
})}
</h4>
<p className="text-sm text-[#6B665F]">
@@ -172,7 +244,7 @@ export default function CartDrawer() {
</div>
{items.length > 0 && (
<div className="p-6 pb-[max(1.5rem,env(safe-area-inset-bottom))] border-t border-[#EDE6D9] bg-white">
<div className="shrink-0 border-t border-[#EDE6D9] bg-white px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] sm:px-6 sm:py-6">
<button
onClick={clearCart}
className="text-xs text-[#8A8478] hover:text-[#B38B4D] mb-3 underline"
@@ -185,27 +257,57 @@ export default function CartDrawer() {
<span>{totalPrice.toFixed(0)} kr</span>
</div>
<p className="text-xs text-center text-[#6B665F] mb-4">
{t.cartDrawer.inquiryHint}
</p>
{authGateMode ? (
<div className="mb-3 rounded-2xl border border-[#EDE6D9] bg-gradient-to-br from-[#FFFCF7] to-[#FFF6DC]/50 p-4 text-center sm:p-5">
<h3 className="mb-2 font-serif text-base tracking-tight text-[#101724] sm:text-lg">
{t.cartDrawer.signInRequiredTitle}
</h3>
<p className="mb-4 text-sm leading-relaxed text-[#6B665F]">
{t.cartDrawer.signInRequiredSubtitle}
</p>
<button
type="button"
onClick={handleGoogleSignInForInquiry}
className="mb-3 flex w-full items-center justify-center gap-3 rounded-2xl border border-[#EDE6D9] bg-white px-4 py-3.5 text-sm font-semibold text-[#101724] shadow-sm transition hover:border-[#c99a2e]/40 hover:bg-[#FFFCF7] active:scale-[0.985] min-h-[52px] touch-manipulation"
>
<GoogleIcon className="h-5 w-5 shrink-0" />
<span className="text-left leading-snug">{t.auth.customer.signInWithGoogle}</span>
</button>
<button
type="button"
onClick={() => setAuthGateMode(null)}
className="inline-flex min-h-[44px] w-full items-center justify-center text-sm font-medium text-[#6B665F] hover:text-[#101724] active:underline touch-manipulation"
>
{t.cartDrawer.inquiryCancel}
</button>
</div>
) : (
<>
<p className="text-xs text-center text-[#6B665F] mb-4">
{t.cartDrawer.inquiryHint}
</p>
<button
type="button"
onClick={() => setInquiryMode('pickup')}
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"
>
<MessageCircle className="h-5 w-5" aria-hidden />
{t.cartDrawer.pickupInquiry}
</button>
<button
type="button"
onClick={() => startInquiry('pickup')}
disabled={isAuthLoading}
className="btn-primary mb-2 flex w-full min-h-[52px] items-center justify-center gap-2 rounded-full py-4 text-base font-medium tracking-[0.5px] touch-manipulation active:scale-[0.985] disabled:opacity-60"
>
<MessageCircle className="h-5 w-5" aria-hidden />
{t.cartDrawer.pickupInquiry}
</button>
<button
type="button"
onClick={() => setInquiryMode('delivery')}
className="btn-outline w-full py-4 rounded-full text-base tracking-[0.5px] font-medium mb-2 flex items-center justify-center gap-2 border-[#25D366] text-[#128C7E] hover:bg-[#25D366]/10"
>
<MessageCircle className="h-5 w-5" aria-hidden />
{t.cartDrawer.deliveryInquiry}
</button>
<button
type="button"
onClick={() => startInquiry('delivery')}
disabled={isAuthLoading}
className="btn-outline mb-2 flex w-full min-h-[52px] items-center justify-center gap-2 rounded-full border-[#25D366] py-4 text-base font-medium tracking-[0.5px] text-[#128C7E] hover:bg-[#25D366]/10 touch-manipulation active:scale-[0.985] disabled:opacity-60"
>
<MessageCircle className="h-5 w-5" aria-hidden />
{t.cartDrawer.deliveryInquiry}
</button>
</>
)}
<button
onClick={() => window.open(`tel:${RESTAURANT_CONTACT.phonePrimary}`, '_self')}
@@ -224,32 +326,69 @@ export default function CartDrawer() {
)}
</div>
{inquiryMode && (
{inquiryMode && isAuthenticated && (
<CartInquiryModal
mode={inquiryMode}
isOpen={!!inquiryMode}
language={language}
customerEmail={customerEmail}
customerName={customerName}
onClose={() => setInquiryMode(null)}
onSubmitPickup={handlePickupSubmit}
onSubmitDelivery={handleDeliverySubmit}
labels={{
titlePickup: t.cartDrawer.inquiryModalTitlePickup,
titleDelivery: t.cartDrawer.inquiryModalTitleDelivery,
signedInAs: t.cartDrawer.signedInAs,
nameLabel: t.cartDrawer.nameLabel,
namePlaceholder: t.cartDrawer.namePlaceholder,
phoneLabel: t.cartDrawer.phoneLabel,
phonePlaceholder: t.cartDrawer.phonePlaceholder,
emailLabel: t.cartDrawer.emailLabel,
emailPlaceholder: t.cartDrawer.emailPlaceholder,
emailRequired: t.cartDrawer.emailRequired,
branchLabel: t.cartDrawer.branchLabel,
branchAskim: t.cartDrawer.branchAskim,
branchBackaplan: t.cartDrawer.branchBackaplan,
askimOnlineUnavailable: t.cartDrawer.askimOnlineUnavailable,
addressLabel: t.cartDrawer.addressLabel,
addressPlaceholder: t.cartDrawer.addressPlaceholder,
addressHint:
(t.cartDrawer as { addressHint?: string }).addressHint ??
'Only Gothenburg addresses can be selected. Pick one from the suggestions.',
addressFallbackPlaceholder:
(t.cartDrawer as { addressFallbackPlaceholder?: string }).addressFallbackPlaceholder ??
'Street, postcode, city…',
addressFallbackHint:
(t.cartDrawer as { addressFallbackHint?: string }).addressFallbackHint ??
'Address search is temporarily unavailable. Type your full delivery address manually.',
addressSearching:
(t.cartDrawer as { addressSearching?: string }).addressSearching ??
'Searching addresses…',
addressNoResults:
(t.cartDrawer as { addressNoResults?: string }).addressNoResults ??
'No matching addresses. Try street name and number.',
addressOutsideGothenburg:
(t.cartDrawer as { addressOutsideGothenburg?: string }).addressOutsideGothenburg ??
'This address is outside Gothenburg. We only deliver within the city.',
addressSelectSuggestion:
(t.cartDrawer as { addressSelectSuggestion?: string }).addressSelectSuggestion ??
'Please pick an address from the suggestions.',
addressInvalid:
(t.cartDrawer as { addressInvalid?: string }).addressInvalid ??
'Select a valid Gothenburg address from the list.',
preferredDateLabel: t.cartDrawer.preferredDateLabel,
preferredDatePlaceholder: t.cartDrawer.preferredDatePlaceholder,
dateToday: t.cartDrawer.dateToday,
dateTomorrow: t.cartDrawer.dateTomorrow,
preferredTimeLabel: t.cartDrawer.preferredTimeLabel,
preferredTimePlaceholder: t.cartDrawer.preferredTimePlaceholder,
scheduleOptionalHint: t.cartDrawer.scheduleOptionalHint,
submitPickup: t.cartDrawer.submitPickup,
submitDelivery: t.cartDrawer.submitDelivery,
cancel: t.cartDrawer.inquiryCancel,
close: t.cartDrawer.inquiryClose,
nameRequired: t.cartDrawer.nameRequired,
phoneRequired: t.cartDrawer.phoneRequired,
addressRequired: t.cartDrawer.addressRequired,
timeRequired: t.cartDrawer.timeRequired,
branchRequired: t.cartDrawer.branchRequired,
scheduleIncomplete: t.cartDrawer.scheduleIncomplete,
scheduleTooSoon: t.cartDrawer.scheduleTooSoon,
}}
/>
)}