280 lines
10 KiB
TypeScript
280 lines
10 KiB
TypeScript
|
import React, { useState, useEffect } from "react";
|
||
|
|
import { X, MapPin, Plus, CheckCircle } from "lucide-react";
|
||
|
|
import {
|
||
|
|
CustomerAddress,
|
||
|
|
customerService,
|
||
|
|
} from "../../src/services/customer.service";
|
||
|
|
|
||
|
|
interface AddressSelectionModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
customerId: number | null;
|
||
|
|
onClose: () => void;
|
||
|
|
onSelect: (address: CustomerAddress) => void;
|
||
|
|
onCreateNew: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const AddressSelectionModal: React.FC<AddressSelectionModalProps> = ({
|
||
|
|
isOpen,
|
||
|
|
customerId,
|
||
|
|
onClose,
|
||
|
|
onSelect,
|
||
|
|
onCreateNew,
|
||
|
|
}) => {
|
||
|
|
const [addresses, setAddresses] = useState<CustomerAddress[]>([]);
|
||
|
|
const [isLoading, setIsLoading] = useState(false);
|
||
|
|
const [selectedAddressId, setSelectedAddressId] = useState<number | null>(
|
||
|
|
null
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (isOpen && customerId) {
|
||
|
|
loadAddresses();
|
||
|
|
} else if (isOpen && !customerId) {
|
||
|
|
console.warn("AddressSelectionModal: customerId não fornecido");
|
||
|
|
setAddresses([]);
|
||
|
|
}
|
||
|
|
}, [isOpen, customerId]);
|
||
|
|
|
||
|
|
const loadAddresses = async () => {
|
||
|
|
if (!customerId) {
|
||
|
|
console.warn(
|
||
|
|
"AddressSelectionModal: customerId é obrigatório para carregar endereços"
|
||
|
|
);
|
||
|
|
setAddresses([]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
setIsLoading(true);
|
||
|
|
try {
|
||
|
|
console.log(
|
||
|
|
"AddressSelectionModal: Carregando endereços para customerId:",
|
||
|
|
customerId
|
||
|
|
);
|
||
|
|
const customerAddresses = await customerService.getCustomerAddresses(
|
||
|
|
customerId
|
||
|
|
);
|
||
|
|
console.log(
|
||
|
|
"AddressSelectionModal: Endereços carregados:",
|
||
|
|
customerAddresses
|
||
|
|
);
|
||
|
|
console.log(
|
||
|
|
"AddressSelectionModal: Quantidade de endereços:",
|
||
|
|
customerAddresses.length
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!Array.isArray(customerAddresses)) {
|
||
|
|
console.error(
|
||
|
|
"AddressSelectionModal: Resposta da API não é um array:",
|
||
|
|
customerAddresses
|
||
|
|
);
|
||
|
|
setAddresses([]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
setAddresses(customerAddresses);
|
||
|
|
} catch (error) {
|
||
|
|
console.error(
|
||
|
|
"AddressSelectionModal: Erro ao carregar endereços:",
|
||
|
|
error
|
||
|
|
);
|
||
|
|
setAddresses([]);
|
||
|
|
} finally {
|
||
|
|
setIsLoading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSelect = () => {
|
||
|
|
if (selectedAddressId) {
|
||
|
|
const address = addresses.find(
|
||
|
|
(a) =>
|
||
|
|
a.id === selectedAddressId ||
|
||
|
|
a.idAddress === selectedAddressId ||
|
||
|
|
a.addressId === selectedAddressId
|
||
|
|
);
|
||
|
|
if (address) {
|
||
|
|
onSelect(address);
|
||
|
|
onClose();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatAddress = (address: CustomerAddress) => {
|
||
|
|
const parts = [];
|
||
|
|
const street = address.address || address.street || "";
|
||
|
|
const number = address.number || address.numberAddress || "";
|
||
|
|
const complement = address.complement || "";
|
||
|
|
|
||
|
|
if (street) parts.push(street);
|
||
|
|
if (number) parts.push(number);
|
||
|
|
if (complement) parts.push(complement);
|
||
|
|
return parts.join(", ");
|
||
|
|
};
|
||
|
|
|
||
|
|
const getAddressId = (address: CustomerAddress): number | null => {
|
||
|
|
return address.id || address.idAddress || address.addressId || null;
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col overflow-hidden">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="p-6 bg-[#002147] text-white rounded-t-3xl relative overflow-hidden flex-shrink-0">
|
||
|
|
<div className="relative z-10 flex items-center justify-between">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="w-12 h-12 bg-orange-500/20 rounded-2xl flex items-center justify-center">
|
||
|
|
<MapPin className="w-6 h-6 text-orange-400" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-black">
|
||
|
|
Selecionar endereço de entrega
|
||
|
|
</h3>
|
||
|
|
<p className="text-xs text-orange-400 font-bold uppercase tracking-wider mt-0.5">
|
||
|
|
{addresses.length} endereço{addresses.length !== 1 ? "s" : ""}{" "}
|
||
|
|
encontrado{addresses.length !== 1 ? "s" : ""}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-white/10 transition-colors"
|
||
|
|
>
|
||
|
|
<X className="w-5 h-5" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="absolute right-[-10%] top-[-10%] w-32 h-32 bg-orange-400/10 rounded-full blur-2xl"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="flex-1 overflow-hidden flex flex-col p-6">
|
||
|
|
{isLoading ? (
|
||
|
|
<div className="flex-1 flex items-center justify-center">
|
||
|
|
<div className="w-12 h-12 border-4 border-[#002147] border-t-transparent rounded-full animate-spin"></div>
|
||
|
|
</div>
|
||
|
|
) : addresses.length === 0 ? (
|
||
|
|
<div className="flex-1 flex flex-col items-center justify-center">
|
||
|
|
<div className="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mb-4">
|
||
|
|
<MapPin className="w-10 h-10 text-slate-400" />
|
||
|
|
</div>
|
||
|
|
<p className="text-lg font-bold text-slate-600 mb-2">
|
||
|
|
Sem endereços cadastrados
|
||
|
|
</p>
|
||
|
|
<p className="text-sm text-slate-500 text-center mb-6">
|
||
|
|
Este cliente não possui endereços cadastrados. Clique no botão
|
||
|
|
abaixo para cadastrar um novo endereço.
|
||
|
|
</p>
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
onClose();
|
||
|
|
onCreateNew();
|
||
|
|
}}
|
||
|
|
className="flex items-center gap-2 bg-[#002147] text-white px-6 py-3 rounded-xl font-black uppercase text-xs tracking-widest hover:bg-[#001a36] transition-all shadow-lg"
|
||
|
|
>
|
||
|
|
<Plus className="w-4 h-4" />
|
||
|
|
Cadastrar Novo Endereço
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<div className="mb-4 flex justify-end">
|
||
|
|
<button
|
||
|
|
onClick={() => {
|
||
|
|
onClose();
|
||
|
|
onCreateNew();
|
||
|
|
}}
|
||
|
|
className="flex items-center gap-2 bg-white border-2 border-[#002147] text-[#002147] px-4 py-2 rounded-xl font-bold text-xs hover:bg-[#002147] hover:text-white transition-all"
|
||
|
|
>
|
||
|
|
<Plus className="w-4 h-4" />
|
||
|
|
Novo Endereço
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
className="flex-1 overflow-y-auto space-y-3 pr-2"
|
||
|
|
style={{
|
||
|
|
scrollbarWidth: "thin",
|
||
|
|
scrollbarColor: "#cbd5e1 #f1f5f9",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{addresses.map((address) => {
|
||
|
|
const addressId = getAddressId(address);
|
||
|
|
const isSelected = selectedAddressId === addressId;
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={addressId || Math.random()}
|
||
|
|
onClick={() => setSelectedAddressId(addressId)}
|
||
|
|
className={`p-4 rounded-2xl border-2 transition-all cursor-pointer ${
|
||
|
|
isSelected
|
||
|
|
? "bg-orange-50 border-orange-500"
|
||
|
|
: "bg-slate-50 border-slate-200 hover:border-orange-300"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<div className="flex items-start justify-between">
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="flex items-center gap-2 mb-2">
|
||
|
|
<h4 className="font-black text-slate-800">
|
||
|
|
{address.addressType || "Endereço"}
|
||
|
|
</h4>
|
||
|
|
{address.isPrimary && (
|
||
|
|
<span className="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-[10px] font-black uppercase">
|
||
|
|
Principal
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<p className="text-sm font-bold text-slate-700 mb-1">
|
||
|
|
{formatAddress(address)}
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-slate-500">
|
||
|
|
{(address.neighborhood || address.neighbourhood) &&
|
||
|
|
`${
|
||
|
|
address.neighborhood || address.neighbourhood
|
||
|
|
} - `}
|
||
|
|
{address.city && `${address.city}`}
|
||
|
|
{address.state && `/${address.state}`}
|
||
|
|
</p>
|
||
|
|
{address.zipCode && (
|
||
|
|
<p className="text-xs text-slate-500 mt-1">
|
||
|
|
CEP: {address.zipCode}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
{isSelected && (
|
||
|
|
<div className="ml-4">
|
||
|
|
<CheckCircle className="w-6 h-6 text-orange-500" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
{addresses.length > 0 && (
|
||
|
|
<div className="p-6 border-t border-slate-200 flex-shrink-0 flex items-center justify-end gap-3">
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="px-6 py-3 rounded-xl font-bold text-slate-700 hover:bg-slate-100 transition-colors"
|
||
|
|
>
|
||
|
|
Cancelar
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={handleSelect}
|
||
|
|
disabled={selectedAddressId === null}
|
||
|
|
className="px-6 py-3 rounded-xl font-black bg-[#002147] text-white hover:bg-[#001a36] transition-all shadow-lg shadow-[#002147]/20 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
|
||
|
|
>
|
||
|
|
Selecionar
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default AddressSelectionModal;
|