@banbox/chat 1.0.7 → 1.0.9

package/src/modals/ChatAddressModal.tsx

@@ -0,0 +1,844 @@
+// modals/ChatAddressModal.tsx
+// 100% UI clone of marketplace ChatAddressModal + CustomerAddressCard + CustomerDeliveryAddressForm
+"use client";
+
+import clsx from "clsx";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+import {
+  MapPinIcon,
+  ChatXIcon,
+  EditIcon,
+  TrashIcon,
+  EmailIcon,
+  BadgeHomeAddrIcon,
+  BadgeOfficeIcon,
+  CheckboxFilledIcon,
+  MapIcon2,
+} from "../icons";
+import type { AddressCard } from "../types";
+
+/* ─────────────────────── Types ─────────────────────────── */
+
+type Mode = "list" | "add" | "edit";
+
+type AddressData = {
+  id: string;
+  firstName?: string;
+  lastName?: string;
+  businessName?: string;
+  mobileNumber?: string;
+  email?: string | null;
+  addressLabel?: "Home" | "Office" | string;
+  isDefault?: boolean;
+  country?: string;
+  district?: string | null;
+  policeStation?: string | null;
+  state?: string | null;
+  city?: string | null;
+  postalCode?: string;
+  addressLine?: string;
+  landMark?: string | null;
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onSend: (card: AddressCard) => void;
+  initialId?: string;
+  className?: string;
+  variant?: "single" | "group";
+};
+
+/* ─────────────────────── Mock data (same as marketplace) ─────────────────────── */
+
+const MOCK_ADDRESSES: AddressData[] = [
+  {
+    id: "ca-1",
+    isDefault: false,
+    addressLabel: "Office",
+    businessName: "Oceanget",
+    firstName: "Ariful",
+    lastName: "Islam",
+    mobileNumber: "+11712345678",
+    email: "ariful.ca@example.com",
+    country: "Canada",
+    postalCode: "M5V 3K2",
+    addressLine: "1001 Birchwood Ave, Apt 12",
+    landMark: "Near Harbourfront",
+    district: null,
+    policeStation: null,
+    state: "Ontario",
+    city: "Toronto",
+  },
+  {
+    id: "bd-1",
+    isDefault: true,
+    addressLabel: "Home",
+    firstName: "Ariful",
+    lastName: "Islam",
+    mobileNumber: "+8801712345678",
+    email: null,
+    country: "Bangladesh",
+    postalCode: "1212",
+    addressLine: "House 12, Road 34, Gulshan 2",
+    landMark: "N/A",
+    district: "Dhaka",
+    policeStation: "Gulshan",
+    state: null,
+    city: null,
+  },
+  {
+    id: "bd-2",
+    isDefault: false,
+    addressLabel: "Office",
+    businessName: "Oceanget",
+    firstName: "Ariful",
+    lastName: "Islam",
+    mobileNumber: "+8801712345678",
+    email: null,
+    country: "Bangladesh",
+    postalCode: "1212",
+    addressLine: "House 12, Road 34, Gulshan 2",
+    landMark: "N/A",
+    district: "Dhaka",
+    policeStation: "Gulshan",
+    state: null,
+    city: null,
+  },
+];
+
+const toAddressCard = (a: AddressData): AddressCard => ({
+  name: `${a.firstName ?? ""} ${a.lastName ?? ""}`.trim(),
+  label: (a.addressLabel as "Home" | "Office" | undefined) ?? (a.isDefault ? "Home" : undefined),
+  businessName: a.businessName ?? undefined,
+  mobileNumber: a.mobileNumber,
+  country: a.country,
+  district: a.district ?? null,
+  policeStation: a.policeStation ?? null,
+  state: a.state ?? null,
+  city: a.city ?? null,
+  postalCode: a.postalCode ?? undefined,
+  addressLine: a.addressLine,
+  landMark: a.landMark ?? null,
+});
+
+/* ─────────────────────── FieldRow (exact marketplace clone) ─────────────────────── */
+
+const FieldRow: React.FC<{
+  icon: React.ReactNode;
+  label: string;
+  value?: string | null;
+  highlight?: boolean;
+  isAction?: boolean;
+}> = ({ icon, label, value, highlight = false, isAction = true }) => {
+  if (value === null || value === undefined) return null;
+  return (
+    <div className="flex items-start gap-2 text-xs tracking-[0.25px]">
+      <span className={clsx("flex items-center justify-center text-black", isAction ? "w-4 h-4" : "w-3.5 h-3.5")}>
+        {icon}
+      </span>
+      <strong className={clsx("text-[12px] font-medium text-black", isAction ? "min-w-[106px]" : "min-w-[100px]")}>
+        {label}
+      </strong>
+      <span className={clsx("font-normal", highlight ? "text-black" : "text-[#636363]")}>
+        {value ?? "N/A"}
+      </span>
+    </div>
+  );
+};
+
+/* ─────────────────────── BadgeLabel (mirrors BadgeButton secondary) ─────────────────────── */
+
+const BadgeLabel: React.FC<{
+  label: string;
+  icon: React.ReactNode;
+}> = ({ label, icon }) => (
+  <span className="inline-flex items-center gap-1 rounded-xs bg-[#FFDBCF] px-2 py-[3px] text-[#FF5300] select-none">
+    <span className="inline-flex">{icon}</span>
+    <span className="text-xs font-medium tracking-[0.5px]">{label}</span>
+  </span>
+);
+
+/* ─────────────────────── RadioPill (exact marketplace clone) ─────────────────────── */
+
+const RadioPill: React.FC<{
+  name: string;
+  value: string;
+  label: string;
+  checked: boolean;
+  onChange: (v: string) => void;
+}> = ({ name, value, label, checked, onChange }) => (
+  <label className="group inline-flex h-[30px] select-none overflow-hidden rounded-xs bg-[#F8F8F8] cursor-pointer">
+    <input
+      type="radio"
+      name={name}
+      value={value}
+      checked={checked}
+      onChange={() => onChange(value)}
+      className="sr-only"
+    />
+    {/* Radio indicator */}
+    <span className="flex h-[30px] w-[30px] items-center justify-center rounded-xs border border-[#F8F8F8] bg-white">
+      <span
+        className={clsx(
+          "flex h-3.5 w-3.5 items-center justify-center rounded-full border-[1.5px] transition-all duration-200 ease-out group-hover:border-2",
+          checked ? "border-[#3D3D3D]" : "",
+        )}
+      >
+        <span
+          className={clsx(
+            "rounded-full bg-[#3D3D3D] transition-all duration-200 ease-out",
+            checked ? "h-2 w-2 opacity-100" : "h-2 w-2 opacity-0",
+            "group-hover:h-[6px] group-hover:w-[6px]",
+          )}
+        />
+      </span>
+    </span>
+    {/* Label */}
+    <span className="flex h-full items-center px-4 text-sm font-medium tracking-[0.25px] text-[#2C2C2C]">
+      {label}
+    </span>
+  </label>
+);
+
+/* ─────────────────────── CustomerAddressCard (exact marketplace clone) ─────────────────────── */
+
+const CustomerAddressCard: React.FC<{
+  addr: AddressData;
+  isSelected: boolean;
+  onSelect: () => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}> = ({ addr, isSelected, onSelect, onEdit, onDelete }) => {
+  const fullName = [addr.firstName, addr.lastName].filter(Boolean).join(" ");
+
+  const addressParts = [
+    addr.landMark,
+    addr.addressLine,
+    addr.policeStation,
+    addr.district,
+    addr.state,
+    addr.city,
+    addr.postalCode,
+    addr.country,
+  ].filter((part) => part && String(part).trim().length > 0);
+
+  const combinedAddress = addressParts.length ? addressParts.join(", ") : undefined;
+
+  return (
+    <div
+      className={clsx(
+        "border rounded-sm p-3 relative cursor-pointer hover:border-[#636363] flex gap-3",
+        isSelected ? "text-black border-[#636363]" : "border-[#ededed]",
+      )}
+      onClick={onSelect}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onSelect(); }
+      }}
+      role="radio"
+      aria-checked={isSelected}
+      tabIndex={0}
+    >
+      <div className="flex-1">
+        {/* Header row */}
+        <div className="flex justify-between items-center h-[30px]">
+          <div className="flex items-center gap-[18px]">
+            <h3 className="text-xl font-semibold tracking-[0.5px] text-black">
+              {fullName || "Recipient"}
+            </h3>
+            {addr.addressLabel && (
+              <BadgeLabel
+                label={addr.addressLabel}
+                icon={
+                  addr.addressLabel === "Home"
+                    ? <BadgeHomeAddrIcon className="w-3 h-3" />
+                    : <BadgeOfficeIcon className="w-3 h-3" />
+                }
+              />
+            )}
+          </div>
+          {addr.isDefault && (
+            <span className="flex items-center text-[14px] font-medium tracking-[0.5px] text-[#636363]">
+              <CheckboxFilledIcon className="h-[16px] w-[16px]" />
+              <span className="ml-1.5">Default</span>
+            </span>
+          )}
+        </div>
+
+        {/* Fields */}
+        <div className="grid grid-cols-1 text-sm mt-3 max-w-[80%] gap-y-1.5">
+          {addr.businessName && (
+            <FieldRow
+              icon={<BadgeOfficeIcon className="w-4 h-4" />}
+              label="Business Name"
+              value={addr.businessName}
+              highlight
+            />
+          )}
+          <FieldRow
+            icon={<MapIcon2 className="w-4 h-4" />}
+            label="Mobile Number"
+            value={addr.mobileNumber}
+            highlight
+          />
+          {addr.email !== null && addr.email !== undefined && (
+            <FieldRow
+              icon={<EmailIcon className="w-4 h-4" />}
+              label="Email"
+              value={addr.email}
+            />
+          )}
+          <FieldRow
+            icon={<MapIcon2 className="w-4 h-4" />}
+            label="Address"
+            value={combinedAddress}
+          />
+        </div>
+
+        {/* Action buttons */}
+        <div className="absolute flex justify-end bottom-[12px] right-3 gap-3">
+          <button
+            type="button"
+            className="text-[#2C2C2C] hover:bg-black/10 rounded-full cursor-pointer w-9 h-9 flex items-center justify-center"
+            aria-label="Edit address"
+            onClick={(e) => { e.stopPropagation(); onEdit(); }}
+          >
+            <EditIcon className="w-5 h-5 text-black" />
+          </button>
+          <button
+            type="button"
+            className="text-[#2C2C2C] hover:bg-black/10 rounded-full cursor-pointer w-9 h-9 flex items-center justify-center"
+            aria-label="Delete address"
+            onClick={(e) => { e.stopPropagation(); onDelete(); }}
+          >
+            <TrashIcon className="w-5 h-5 text-[#ff5200]" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/* ─────────────────────── InputField (marketplace style) ─────────────────────── */
+
+const Field: React.FC<{
+  label: string;
+  required?: boolean;
+  optional?: boolean;
+  children: React.ReactNode;
+}> = ({ label, required, optional, children }) => (
+  <div className="flex flex-col gap-1">
+    <label className="text-[12px] font-medium text-[#374151] tracking-[0.25px]">
+      {label}
+      {required && <span className="ml-0.5 text-[#ff5200]">*</span>}
+      {optional && <span className="ml-1 text-[#9ca3af] font-normal">(Optional)</span>}
+    </label>
+    {children}
+  </div>
+);
+
+const Input: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = (props) => (
+  <input
+    {...props}
+    className={clsx(
+      "rounded-sm border border-[#ededed] px-3 py-0 text-sm text-black placeholder-[#9ca3af]",
+      "outline-none focus:border-[#2753fb] focus:ring-1 focus:ring-[#2753fb]/20",
+      "h-[34px] w-full",
+      props.className,
+    )}
+  />
+);
+
+const SelectInput: React.FC<{
+  value: string;
+  onChange: (v: string) => void;
+  options: string[];
+  placeholder: string;
+  disabled?: boolean;
+}> = ({ value, onChange, options, placeholder, disabled }) => (
+  <select
+    value={value}
+    onChange={(e) => onChange(e.target.value)}
+    disabled={disabled}
+    className={clsx(
+      "rounded-sm border border-[#ededed] px-3 py-0 text-sm text-black bg-white",
+      "outline-none focus:border-[#2753fb] focus:ring-1 focus:ring-[#2753fb]/20",
+      "h-[34px] w-full appearance-none",
+      !value && "text-[#9ca3af]",
+      disabled && "opacity-50 cursor-not-allowed",
+    )}
+  >
+    <option value="" disabled>{placeholder}</option>
+    {options.map((o) => <option key={o} value={o}>{o}</option>)}
+  </select>
+);
+
+/* ─────────────────────── AddressForm (mirrors CustomerDeliveryAddressForm) ─────────────────────── */
+
+const BANGLADESH_DISTRICTS = [
+  "Dhaka", "Chittagong", "Sylhet", "Rajshahi", "Khulna", "Barisal", "Rangpur", "Mymensingh",
+  "Gazipur", "Narayanganj", "Tangail", "Faridpur", "Comilla", "Noakhali", "Cox's Bazar",
+];
+
+const COUNTRIES = ["Bangladesh", "India", "United States", "United Kingdom", "Canada", "Australia", "Germany", "France", "Saudi Arabia", "UAE"];
+
+const AddressForm: React.FC<{
+  initial?: Partial<AddressData>;
+  onSave: (data: AddressData) => void;
+  onBack: () => void;
+  mode: "add" | "edit";
+}> = ({ initial, onSave, onBack, mode }) => {
+  const [form, setForm] = useState<Partial<AddressData>>(
+    initial ?? { country: "Bangladesh", isDefault: false },
+  );
+  const [addressLabel, setAddressLabel] = useState<"home" | "office" | null>(
+    initial?.addressLabel?.toLowerCase() === "home" ? "home"
+      : initial?.addressLabel?.toLowerCase() === "office" ? "office"
+      : null,
+  );
+  const [isDefault, setIsDefault] = useState(Boolean(initial?.isDefault));
+
+  const set = (k: keyof AddressData, v: string | boolean | null) =>
+    setForm((prev) => ({ ...prev, [k]: v }));
+
+  const isBD = (form.country ?? "").toLowerCase() === "bangladesh";
+
+  const handleSave = () => {
+    onSave({
+      id: initial?.id ?? `addr-${Date.now()}`,
+      ...form,
+      isDefault,
+      addressLabel: addressLabel === "home" ? "Home" : addressLabel === "office" ? "Office" : undefined,
+    } as AddressData);
+  };
+
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); handleSave(); }} className="space-y-4">
+      {/* Name row */}
+      <div className="grid grid-cols-2 gap-4">
+        <Field label="First Name" required>
+          <Input value={form.firstName ?? ""} onChange={(e) => set("firstName", e.target.value)} placeholder="First Name" />
+        </Field>
+        <Field label="Last Name">
+          <Input value={form.lastName ?? ""} onChange={(e) => set("lastName", e.target.value)} placeholder="Last Name" />
+        </Field>
+      </div>
+
+      {/* Mobile */}
+      <Field label="Mobile Number" required>
+        <Input value={form.mobileNumber ?? ""} onChange={(e) => set("mobileNumber", e.target.value)} placeholder="+880..." />
+      </Field>
+
+      {/* Email */}
+      <Field label="Email">
+        <Input type="email" value={(form.email as string) ?? ""} onChange={(e) => set("email", e.target.value)} placeholder="name@example.com" />
+      </Field>
+
+      {/* Country */}
+      <Field label={isBD ? "Country" : "Country / Region"} required>
+        <SelectInput
+          value={form.country ?? ""}
+          onChange={(v) => { set("country", v); set("district", ""); set("policeStation", ""); set("state", ""); set("city", ""); }}
+          options={COUNTRIES}
+          placeholder="Select country"
+        />
+      </Field>
+
+      {/* BD vs International fields */}
+      {isBD ? (
+        <>
+          <div className="grid grid-cols-2 gap-4">
+            <Field label="District" required>
+              <SelectInput
+                value={form.district ?? ""}
+                onChange={(v) => { set("district", v); set("policeStation", ""); }}
+                options={BANGLADESH_DISTRICTS}
+                placeholder="District"
+                disabled={!form.country}
+              />
+            </Field>
+            <Field label="Police Station" required>
+              <Input value={form.policeStation ?? ""} onChange={(e) => set("policeStation", e.target.value)} placeholder="Police Station" />
+            </Field>
+          </div>
+          <Field label="Postal Code" optional>
+            <Input value={form.postalCode ?? ""} onChange={(e) => set("postalCode", e.target.value)} placeholder="Postal Code" />
+          </Field>
+        </>
+      ) : (
+        <>
+          <div className="grid grid-cols-2 gap-4">
+            <Field label="State" required>
+              <Input value={form.state ?? ""} onChange={(e) => set("state", e.target.value)} placeholder="State" />
+            </Field>
+            <Field label="City" required>
+              <Input value={form.city ?? ""} onChange={(e) => set("city", e.target.value)} placeholder="City" />
+            </Field>
+          </div>
+          <Field label="Postal Code" required>
+            <Input value={form.postalCode ?? ""} onChange={(e) => set("postalCode", e.target.value)} placeholder="Postal Code" />
+          </Field>
+        </>
+      )}
+
+      {/* Address line */}
+      <Field label="Address Line" required>
+        <Input
+          value={form.addressLine ?? ""}
+          onChange={(e) => set("addressLine", e.target.value)}
+          placeholder={isBD ? "House/Road/Block/Sector" : "Street, Apt, Suite, etc."}
+        />
+      </Field>
+
+      {/* Landmark */}
+      <Field label="Land Mark" optional>
+        <Input value={(form.landMark as string) ?? ""} onChange={(e) => set("landMark", e.target.value)} placeholder="Nearby landmark" />
+      </Field>
+
+      {/* Default checkbox + Home/Office radio pills */}
+      <div className="flex items-center justify-between">
+        {/* Checkbox */}
+        <label className="flex items-center gap-1.5 cursor-pointer w-fit select-none text-sm text-[#2C2C2C] font-normal">
+          <input
+            type="checkbox"
+            checked={isDefault}
+            onChange={(e) => setIsDefault(e.target.checked)}
+            className="sr-only"
+          />
+          <span
+            className={clsx(
+              "flex h-4 w-4 items-center justify-center rounded border transition-colors",
+              isDefault ? "bg-black border-black" : "border-[#d1d5db] bg-white",
+            )}
+          >
+            {isDefault && (
+              <svg viewBox="0 0 10 8" className="h-3 w-3 text-white" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1 4L3.5 6.5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            )}
+          </span>
+          Set as default delivery address
+        </label>
+
+        {/* Radio pills */}
+        <div className="flex items-center gap-[17px]">
+          <RadioPill name="addr-label" value="home" checked={addressLabel === "home"} label="Home" onChange={(v) => setAddressLabel(v as "home")} />
+          <RadioPill name="addr-label" value="office" checked={addressLabel === "office"} label="Office" onChange={(v) => setAddressLabel(v as "office")} />
+        </div>
+      </div>
+
+      {/* Form-level back/save buttons — these are rendered in modal footer, so just keep a hidden submit */}
+      <button type="submit" className="sr-only" id="addr-form-submit">Submit</button>
+    </form>
+  );
+};
+
+/* ─────────────────────── Delete Confirm dialog ─────────────────────── */
+
+const DeleteConfirm: React.FC<{
+  onConfirm: () => void;
+  onCancel: () => void;
+}> = ({ onConfirm, onCancel }) => (
+  <div className="fixed inset-0 z-[10010] flex items-center justify-center" onClick={onCancel}>
+    <div className="fixed inset-0 bg-black/40" />
+    <div
+      role="dialog"
+      aria-modal="true"
+      className="relative z-[10011] w-[420px] max-w-[95vw] rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)] overflow-hidden"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div className="flex h-[44px] items-center bg-[#f8f8f8] px-6">
+        <h2 className="text-xl font-semibold text-black">Delete Address</h2>
+      </div>
+      <div className="px-6 py-4 space-y-1">
+        <p className="text-sm font-medium text-black">Are you sure you want to delete this address?</p>
+        <p className="text-xs text-[#636363]">The address is permanently removed. This action cannot be undone.</p>
+      </div>
+      <div className="flex h-[52px] items-center justify-end gap-3 bg-[#f0f4ff] px-6">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={onConfirm}
+          className="h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  </div>
+);
+
+/* ─────────────────────── Main Modal ─────────────────────── */
+
+const ChatAddressModal: React.FC<Props> = ({
+  open,
+  onClose,
+  onSend,
+  initialId,
+  className,
+  variant = "group",
+}) => {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const [mode, setMode] = useState<Mode>("list");
+  const [addresses, setAddresses] = useState<AddressData[]>(MOCK_ADDRESSES);
+  const [editData, setEditData] = useState<AddressData | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<AddressData | null>(null);
+  const [formKey, setFormKey] = useState(0);
+
+  const defaultId =
+    initialId ??
+    addresses.find((a) => a.isDefault)?.id ??
+    addresses[0]?.id;
+
+  const [selectedId, setSelectedId] = useState<string>(defaultId || "");
+
+  const selectedAddress = useMemo(
+    () => addresses.find((a) => a.id === selectedId) || null,
+    [addresses, selectedId],
+  );
+
+  useEffect(() => {
+    bodyRef.current?.scrollTo({ top: 0, behavior: "auto" });
+  }, [mode]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onEsc = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onEsc);
+    return () => window.removeEventListener("keydown", onEsc);
+  }, [open, onClose]);
+
+  // Reset to list on open
+  useEffect(() => {
+    if (open) setMode("list");
+  }, [open]);
+
+  if (!open) return null;
+
+  const isSingle = variant === "single";
+
+  const handleSave = (data: AddressData) => {
+    setAddresses((prev) => {
+      const idx = prev.findIndex((a) => a.id === data.id);
+      if (idx >= 0) {
+        const next = [...prev];
+        next[idx] = data;
+        return next;
+      }
+      return [...prev, data];
+    });
+    setSelectedId(data.id);
+    setMode("list");
+  };
+
+  const handleDelete = (id: string) => {
+    setAddresses((prev) => prev.filter((a) => a.id !== id));
+    if (selectedId === id) {
+      const remaining = addresses.filter((a) => a.id !== id);
+      setSelectedId(remaining[0]?.id ?? "");
+    }
+    setDeleteTarget(null);
+  };
+
+  const renderHeader = () => {
+    if (mode === "list") {
+      return (
+        <div className="flex justify-between items-center w-full">
+          <h2 className="text-xl tracking-[0.5px] capitalize font-semibold text-black">
+            Delivery Address
+          </h2>
+          <button
+            type="button"
+            onClick={() => { setEditData(null); setFormKey(k => k + 1); setMode("add"); }}
+            className="text-black hover:text-[#ff5200] cursor-pointer text-sm font-medium tracking-[0.5px] underline underline-offset-4"
+          >
+            Add New Address
+          </button>
+        </div>
+      );
+    }
+    if (mode === "add") {
+      return (
+        <div className="flex justify-between items-center capitalize w-full">
+          <h2 className="text-xl tracking-[0.5px] font-semibold text-black">
+            Add New Address
+          </h2>
+          <button type="button" className="text-[#005694] text-sm font-normal tracking-[0.25px] underline underline-offset-4 flex items-center gap-2 cursor-pointer">
+            <MapPinIcon className="w-[18px] h-[18px]" />
+            <span>Use current location</span>
+          </button>
+        </div>
+      );
+    }
+    if (mode === "edit") {
+      return (
+        <div className="flex justify-between items-center w-full">
+          <h2 className="text-xl tracking-[0.5px] uppercase font-semibold text-black">
+            Edit Address
+          </h2>
+          <button type="button" className="text-[#005694] text-sm font-normal tracking-[0.25px] underline underline-offset-4 flex items-center gap-2 cursor-pointer">
+            <MapPinIcon className="w-[18px] h-[18px]" />
+            <span>Use current location</span>
+          </button>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <>
+      <div
+        className={clsx(
+          isSingle
+            ? "fixed inset-0 z-[10003] flex"
+            : "absolute inset-0 z-[70] flex items-center justify-center",
+        )}
+        onClick={(e) => { e.stopPropagation(); onClose(); }}
+      >
+        {/* Backdrop */}
+        <div className="fixed inset-0 bg-black/30" />
+
+        <div
+          ref={panelRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="chat-address-modal-title"
+          onClick={(e) => e.stopPropagation()}
+          className={clsx(
+            isSingle
+              ? "fixed bottom-6 right-6 w-[700px] max-w-[95vw]"
+              : "relative w-[700px] max-w-[95vw]",
+            "overflow-hidden rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)] z-[10004]",
+            className,
+          )}
+        >
+          {/* Header */}
+          <div className="h-[44px] px-8 py-[7px] flex items-center w-full bg-[var(--color-banbox-f8,#f8f8f8)] rounded-t-md">
+            {renderHeader()}
+          </div>
+
+          {/* Body */}
+          <div ref={bodyRef} className="px-8 py-3 overflow-y-auto h-[446px] custom-scroll">
+            {mode === "list" && (
+              <div className="space-y-4">
+                {addresses.map((addr) => (
+                  <CustomerAddressCard
+                    key={addr.id}
+                    addr={addr}
+                    isSelected={selectedId === addr.id}
+                    onSelect={() => setSelectedId(addr.id)}
+                    onEdit={() => { setEditData(addr); setFormKey(k => k + 1); setMode("edit"); }}
+                    onDelete={() => setDeleteTarget(addr)}
+                  />
+                ))}
+              </div>
+            )}
+
+            {(mode === "add" || mode === "edit") && (
+              <AddressForm
+                key={formKey}
+                initial={editData ?? undefined}
+                onSave={handleSave}
+                onBack={() => setMode("list")}
+                mode={mode}
+              />
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="h-[52px] bg-[var(--color-banbox-primary-container,#f0f4ff)] w-full px-6 py-2 flex justify-end items-center gap-6 rounded-b-[6px]">
+            <div className="flex items-center justify-end gap-3">
+              {mode === "list" && (
+                <>
+                  <button
+                    type="button"
+                    onClick={onClose}
+                    className="h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="button"
+                    disabled={!selectedAddress}
+                    onClick={() => {
+                      if (!selectedAddress) return;
+                      onSend(toAddressCard(selectedAddress));
+                      onClose();
+                    }}
+                    className="h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00] disabled:opacity-50"
+                  >
+                    Send
+                  </button>
+                </>
+              )}
+
+              {mode === "add" && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => setMode("list")}
+                    className="h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]"
+                  >
+                    Back
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      // Trigger the hidden submit button inside the form
+                      document.getElementById("addr-form-submit")?.click();
+                    }}
+                    className="h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]"
+                  >
+                    Save Address
+                  </button>
+                </>
+              )}
+
+              {mode === "edit" && (
+                <>
+                  <button
+                    type="button"
+                    onClick={() => setMode("list")}
+                    className="h-[34px] cursor-pointer rounded-[4px] border border-[#d1d5db] bg-white px-4 text-[13px] font-medium text-black hover:bg-[#f9fafb]"
+                  >
+                    Back
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      document.getElementById("addr-form-submit")?.click();
+                    }}
+                    className="h-[34px] cursor-pointer rounded-[4px] border-none bg-[#ff5200] px-4 text-[13px] font-medium text-white hover:bg-[#e64a00]"
+                  >
+                    Update
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Delete Confirmation */}
+      {deleteTarget && (
+        <DeleteConfirm
+          onConfirm={() => handleDelete(deleteTarget.id)}
+          onCancel={() => setDeleteTarget(null)}
+        />
+      )}
+    </>
+  );
+};
+
+export default ChatAddressModal;