root
429 lines
16 KiB
TypeScript
429 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useEffect, useState } from 'react';
|
|
import { MessageCircle, X } from 'lucide-react';
|
|
import type {
|
|
FulfillmentMode,
|
|
InquiryBranch,
|
|
InquiryPreferredDate,
|
|
} from '@/domain/cart/inquiry';
|
|
import type { DeliveryInquiryDetails, PickupInquiryDetails } from '@/domain/cart/inquiry';
|
|
import {
|
|
DEFAULT_INQUIRY_BRANCH,
|
|
getMinInquiryTimeForToday,
|
|
isInquiryBranchOnlineEnabled,
|
|
validateInquirySchedule,
|
|
} from '@/domain/cart/inquiry';
|
|
import type { Language } from '@/domain/language/entities';
|
|
import { getWhatsAppInquiryLanguage } from '@/application/messaging/inquiry-language';
|
|
import DeliveryAddressAutocomplete from '@/components/DeliveryAddressAutocomplete';
|
|
|
|
export interface CartInquiryModalLabels {
|
|
titlePickup: string;
|
|
titleDelivery: string;
|
|
signedInAs: string;
|
|
nameLabel: string;
|
|
namePlaceholder: string;
|
|
emailLabel: string;
|
|
emailPlaceholder: string;
|
|
emailRequired: string;
|
|
branchLabel: string;
|
|
branchAskim: string;
|
|
branchBackaplan: string;
|
|
askimOnlineUnavailable: string;
|
|
addressLabel: string;
|
|
addressPlaceholder: string;
|
|
addressHint: string;
|
|
addressFallbackPlaceholder: string;
|
|
addressFallbackHint: string;
|
|
addressSearching: string;
|
|
addressNoResults: string;
|
|
addressOutsideGothenburg: string;
|
|
addressSelectSuggestion: string;
|
|
addressInvalid: string;
|
|
preferredDateLabel: string;
|
|
preferredDatePlaceholder: string;
|
|
dateToday: string;
|
|
dateTomorrow: string;
|
|
preferredTimeLabel: string;
|
|
scheduleOptionalHint: string;
|
|
submitPickup: string;
|
|
submitDelivery: string;
|
|
cancel: string;
|
|
close: string;
|
|
nameRequired: string;
|
|
branchRequired: string;
|
|
scheduleIncomplete: string;
|
|
scheduleTooSoon: string;
|
|
}
|
|
|
|
interface CartInquiryModalProps {
|
|
mode: FulfillmentMode;
|
|
isOpen: boolean;
|
|
language: Language;
|
|
customerEmail: string | null;
|
|
customerName: string | null;
|
|
onClose: () => void;
|
|
onSubmitPickup: (details: PickupInquiryDetails) => void;
|
|
onSubmitDelivery: (details: DeliveryInquiryDetails) => void;
|
|
labels: CartInquiryModalLabels;
|
|
}
|
|
|
|
function createPickupDefaults(email = '', name = ''): PickupInquiryDetails {
|
|
return {
|
|
name: name.trim(),
|
|
email,
|
|
branch: DEFAULT_INQUIRY_BRANCH,
|
|
preferredDate: '',
|
|
preferredTime: '',
|
|
};
|
|
}
|
|
|
|
function createDeliveryDefaults(email = '', name = ''): DeliveryInquiryDetails {
|
|
return {
|
|
...createPickupDefaults(email, name),
|
|
address: '',
|
|
};
|
|
}
|
|
|
|
export default function CartInquiryModal({
|
|
mode,
|
|
isOpen,
|
|
language,
|
|
customerEmail,
|
|
customerName,
|
|
onClose,
|
|
onSubmitPickup,
|
|
onSubmitDelivery,
|
|
labels,
|
|
}: CartInquiryModalProps) {
|
|
const [pickup, setPickup] = useState(createPickupDefaults);
|
|
const [delivery, setDelivery] = useState(createDeliveryDefaults);
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
const [addressValid, setAddressValid] = useState(true);
|
|
const autocompleteLang = getWhatsAppInquiryLanguage(language);
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose();
|
|
},
|
|
[onClose],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
setErrors({});
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [isOpen, handleKeyDown]);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
setPickup(createPickupDefaults());
|
|
setDelivery(createDeliveryDefaults());
|
|
setErrors({});
|
|
setAddressValid(true);
|
|
return;
|
|
}
|
|
|
|
const email = customerEmail ?? '';
|
|
const name = customerName ?? '';
|
|
setPickup(createPickupDefaults(email, name));
|
|
setDelivery(createDeliveryDefaults(email, name));
|
|
setErrors({});
|
|
setAddressValid(true);
|
|
}, [isOpen, customerEmail, customerName]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const title = mode === 'pickup' ? labels.titlePickup : labels.titleDelivery;
|
|
const submitLabel = mode === 'pickup' ? labels.submitPickup : labels.submitDelivery;
|
|
const formState = mode === 'pickup' ? pickup : delivery;
|
|
const branch = formState.branch;
|
|
const preferredDate = formState.preferredDate;
|
|
const preferredTime = formState.preferredTime;
|
|
const isAskimBlocked = branch === 'askim';
|
|
const isSubmitDisabled = !isInquiryBranchOnlineEnabled(branch);
|
|
const minTimeToday = getMinInquiryTimeForToday();
|
|
const emailLocked = Boolean(customerEmail);
|
|
|
|
const setName = (value: string) => {
|
|
if (mode === 'pickup') setPickup((p) => ({ ...p, name: value }));
|
|
else setDelivery((d) => ({ ...d, name: value }));
|
|
if (errors.name) setErrors((err) => ({ ...err, name: '' }));
|
|
};
|
|
|
|
const setEmail = (value: string) => {
|
|
if (emailLocked) return;
|
|
if (mode === 'pickup') setPickup((p) => ({ ...p, email: value }));
|
|
else setDelivery((d) => ({ ...d, email: value }));
|
|
if (errors.email) setErrors((err) => ({ ...err, email: '' }));
|
|
};
|
|
|
|
const setBranch = (value: InquiryBranch) => {
|
|
if (mode === 'pickup') setPickup((p) => ({ ...p, branch: value }));
|
|
else setDelivery((d) => ({ ...d, branch: value }));
|
|
if (errors.branch) setErrors((err) => ({ ...err, branch: '' }));
|
|
};
|
|
|
|
const setPreferredDate = (value: InquiryPreferredDate) => {
|
|
if (mode === 'pickup') {
|
|
setPickup((p) => ({ ...p, preferredDate: value }));
|
|
} else {
|
|
setDelivery((d) => ({ ...d, preferredDate: value }));
|
|
}
|
|
if (errors.schedule) setErrors((err) => ({ ...err, schedule: '' }));
|
|
};
|
|
|
|
const setPreferredTime = (value: string) => {
|
|
if (mode === 'pickup') {
|
|
setPickup((p) => ({ ...p, preferredTime: value }));
|
|
} else {
|
|
setDelivery((d) => ({ ...d, preferredTime: value }));
|
|
}
|
|
if (errors.schedule) setErrors((err) => ({ ...err, schedule: '' }));
|
|
};
|
|
|
|
const validateSchedule = (state: PickupInquiryDetails): boolean => {
|
|
const result = validateInquirySchedule(state);
|
|
if (result === 'ok') return true;
|
|
|
|
if (result === 'incomplete') {
|
|
setErrors((err) => ({ ...err, schedule: labels.scheduleIncomplete }));
|
|
} else if (result === 'too_soon' || result === 'invalid_time') {
|
|
setErrors((err) => ({ ...err, schedule: labels.scheduleTooSoon }));
|
|
}
|
|
return false;
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const nextErrors: Record<string, string> = {};
|
|
|
|
if (mode === 'pickup') {
|
|
if (!pickup.name.trim()) nextErrors.name = labels.nameRequired;
|
|
if (!pickup.email.trim()) nextErrors.email = labels.emailRequired;
|
|
if (!pickup.branch) nextErrors.branch = labels.branchRequired;
|
|
if (Object.keys(nextErrors).length) {
|
|
setErrors(nextErrors);
|
|
return;
|
|
}
|
|
if (!validateSchedule(pickup)) return;
|
|
if (!isInquiryBranchOnlineEnabled(pickup.branch)) return;
|
|
onSubmitPickup(pickup);
|
|
return;
|
|
}
|
|
|
|
if (!delivery.name.trim()) nextErrors.name = labels.nameRequired;
|
|
if (!delivery.email.trim()) nextErrors.email = labels.emailRequired;
|
|
if (!delivery.branch) nextErrors.branch = labels.branchRequired;
|
|
if (delivery.address.trim() && !addressValid) {
|
|
nextErrors.address = labels.addressInvalid;
|
|
}
|
|
if (Object.keys(nextErrors).length) {
|
|
setErrors(nextErrors);
|
|
return;
|
|
}
|
|
if (!validateSchedule(delivery)) return;
|
|
if (!isInquiryBranchOnlineEnabled(delivery.branch)) return;
|
|
onSubmitDelivery(delivery);
|
|
};
|
|
|
|
const inputClass =
|
|
'mt-1.5 w-full min-h-[48px] rounded-xl border border-[#EDE6D9] bg-[#FFFCF7] px-3 py-3 text-base text-[#2C2A26] placeholder:text-[#8A8478] focus:border-[#c99a2e] focus:ring-2 focus:ring-[#c99a2e]/20 touch-manipulation';
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-[1000] bg-black/50 backdrop-blur-[2px]"
|
|
onClick={onClose}
|
|
aria-hidden
|
|
/>
|
|
|
|
<div
|
|
className="fixed inset-0 z-[1010] flex items-end sm:items-center justify-center p-0 sm:p-6 pointer-events-none"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="cart-inquiry-title"
|
|
>
|
|
<div
|
|
className="pointer-events-auto flex max-h-[92dvh] w-full flex-col overflow-hidden rounded-t-3xl border border-[#EDE6D9] bg-[#FFFCF7] shadow-2xl sm:max-w-md sm:rounded-2xl"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="flex shrink-0 items-center justify-between border-b border-[#EDE6D9] px-4 py-3.5 sm:px-6 sm:py-4">
|
|
<h2 id="cart-inquiry-title" className="pe-3 font-serif text-lg tracking-[-0.3px] text-[#101724] sm:text-xl">
|
|
{title}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
aria-label={labels.close}
|
|
className="flex h-11 w-11 items-center justify-center rounded-full border border-[#EDE6D9] bg-white text-[#6B665F] hover:text-[#101724] touch-manipulation"
|
|
>
|
|
<X className="h-4 w-4" aria-hidden />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
|
|
<div className="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-y-contain px-4 py-4 sm:px-6 sm:py-5">
|
|
{customerEmail && (
|
|
<div className="flex items-center gap-3 rounded-2xl border border-[#c99a2e]/25 bg-gradient-to-r from-[#FFF6DC] to-[#FFFCF7] px-3 py-3 sm:px-4">
|
|
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#101724] text-xs font-bold text-white">
|
|
{customerEmail.charAt(0).toUpperCase()}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-[10px] font-semibold uppercase tracking-wide text-[#8f6b22]">
|
|
{labels.signedInAs}
|
|
</p>
|
|
<p className="truncate text-sm font-medium text-[#101724]">{customerEmail}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="text-xs font-medium tracking-wide text-[#2C2A26]">
|
|
{labels.nameLabel}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formState.name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder={labels.namePlaceholder}
|
|
className={inputClass}
|
|
autoComplete="name"
|
|
/>
|
|
{errors.name && (
|
|
<p className="mt-1 text-xs text-[#B45309]" role="alert">{errors.name}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs font-medium tracking-wide text-[#2C2A26]">
|
|
{labels.emailLabel}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
value={formState.email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder={labels.emailPlaceholder}
|
|
readOnly={emailLocked}
|
|
className={`${inputClass} ${emailLocked ? 'bg-[#F8F5F0]/80 text-[#6B665F] cursor-default' : ''}`}
|
|
autoComplete="email"
|
|
/>
|
|
{errors.email && (
|
|
<p className="mt-1 text-xs text-[#B45309]" role="alert">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs font-medium tracking-wide text-[#2C2A26]">
|
|
{labels.branchLabel}
|
|
</label>
|
|
<select
|
|
value={branch}
|
|
onChange={(e) => setBranch(e.target.value as InquiryBranch)}
|
|
className={`${inputClass} ${isAskimBlocked ? 'border-red-500 focus:border-red-500 focus:ring-red-500/20' : ''}`}
|
|
>
|
|
<option value="backaplan">{labels.branchBackaplan}</option>
|
|
<option value="askim">{labels.branchAskim}</option>
|
|
</select>
|
|
{errors.branch && (
|
|
<p className="mt-1 text-xs text-red-600" role="alert">{errors.branch}</p>
|
|
)}
|
|
{isAskimBlocked && (
|
|
<p className="mt-1 text-xs font-medium text-red-600" role="alert">
|
|
{labels.askimOnlineUnavailable}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{mode === 'delivery' && (
|
|
<div>
|
|
<label className="text-xs font-medium tracking-wide text-[#2C2A26]">
|
|
{labels.addressLabel}
|
|
</label>
|
|
<DeliveryAddressAutocomplete
|
|
value={delivery.address}
|
|
onChange={(address) => setDelivery((d) => ({ ...d, address }))}
|
|
onValidationChange={setAddressValid}
|
|
language={autocompleteLang}
|
|
labels={{
|
|
placeholder: labels.addressPlaceholder,
|
|
hint: labels.addressHint,
|
|
fallbackPlaceholder: labels.addressFallbackPlaceholder,
|
|
fallbackHint: labels.addressFallbackHint,
|
|
searching: labels.addressSearching,
|
|
noResults: labels.addressNoResults,
|
|
outsideGothenburg: labels.addressOutsideGothenburg,
|
|
selectSuggestion: labels.addressSelectSuggestion,
|
|
}}
|
|
inputClassName={inputClass}
|
|
/>
|
|
{errors.address && (
|
|
<p className="mt-1 text-xs text-red-600" role="alert">{errors.address}</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="rounded-2xl border border-[#EDE6D9] bg-[#FFFCF7]/80 p-4 space-y-4">
|
|
<p className="text-xs text-[#6B665F]">{labels.scheduleOptionalHint}</p>
|
|
|
|
<div>
|
|
<label className="text-xs font-medium tracking-wide text-[#2C2A26]">
|
|
{labels.preferredDateLabel}
|
|
</label>
|
|
<select
|
|
value={preferredDate}
|
|
onChange={(e) => setPreferredDate(e.target.value as InquiryPreferredDate)}
|
|
className={inputClass}
|
|
>
|
|
<option value="">{labels.preferredDatePlaceholder}</option>
|
|
<option value="today">{labels.dateToday}</option>
|
|
<option value="tomorrow">{labels.dateTomorrow}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs font-medium tracking-wide text-[#2C2A26]">
|
|
{labels.preferredTimeLabel}
|
|
</label>
|
|
<input
|
|
type="time"
|
|
value={preferredTime}
|
|
onChange={(e) => setPreferredTime(e.target.value)}
|
|
min={preferredDate === 'today' ? minTimeToday : undefined}
|
|
className={inputClass}
|
|
/>
|
|
</div>
|
|
|
|
{errors.schedule && (
|
|
<p className="text-xs text-red-600" role="alert">{errors.schedule}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="shrink-0 border-t border-[#EDE6D9] bg-[#FFFCF7]/95 px-4 py-4 pb-[max(1rem,env(safe-area-inset-bottom))] backdrop-blur-sm sm:px-6">
|
|
<div className="flex flex-col-reverse gap-3 sm:flex-row">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="flex min-h-[52px] flex-1 items-center justify-center rounded-full border border-[#EDE6D9] py-3.5 text-sm font-medium text-[#6B665F] hover:bg-[#F8F5F0] touch-manipulation active:scale-[0.985]"
|
|
>
|
|
{labels.cancel}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitDisabled}
|
|
className="btn-primary flex min-h-[52px] flex-1 items-center justify-center gap-2 rounded-full py-3.5 text-sm font-medium tracking-wide touch-manipulation active:scale-[0.985] disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
<MessageCircle className="h-4 w-4 shrink-0" aria-hidden />
|
|
{submitLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
} |