252 lines
9.4 KiB
TypeScript
252 lines
9.4 KiB
TypeScript
import React from "react";
|
|
import { ArrowLeft } from "lucide-react";
|
|
|
|
interface NotesStepProps {
|
|
notesForm: {
|
|
shippingDate: Date | null;
|
|
scheduleDelivery: boolean;
|
|
shippingPriority: "B" | "M" | "A";
|
|
notesText1: string;
|
|
notesText2: string;
|
|
notesDeliveryText1: string;
|
|
notesDeliveryText2: string;
|
|
notesDeliveryText3: string;
|
|
};
|
|
onFormChange: (field: string, value: any) => void;
|
|
onPrevious: () => void;
|
|
}
|
|
|
|
const NotesStep: React.FC<NotesStepProps> = ({
|
|
notesForm,
|
|
onFormChange,
|
|
onPrevious,
|
|
}) => {
|
|
// Função para formatar a data para o input type="date" (YYYY-MM-DD)
|
|
const formatDateForInput = (date: Date | null): string => {
|
|
if (!date) return "";
|
|
|
|
try {
|
|
// Verificar se é uma data válida
|
|
if (isNaN(date.getTime())) {
|
|
console.warn("📅 [NOTES_STEP] Data inválida:", date);
|
|
return "";
|
|
}
|
|
|
|
// Formatar para YYYY-MM-DD
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
const day = String(date.getDate()).padStart(2, "0");
|
|
|
|
return `${year}-${month}-${day}`;
|
|
} catch (error) {
|
|
console.error("📅 [NOTES_STEP] Erro ao formatar data:", error, date);
|
|
return "";
|
|
}
|
|
};
|
|
|
|
// Log para debug
|
|
React.useEffect(() => {
|
|
console.log(
|
|
"📅 [NOTES_STEP] shippingDate recebido:",
|
|
notesForm.shippingDate
|
|
);
|
|
console.log("📅 [NOTES_STEP] Tipo:", typeof notesForm.shippingDate);
|
|
if (notesForm.shippingDate) {
|
|
console.log(
|
|
"📅 [NOTES_STEP] Data formatada:",
|
|
formatDateForInput(notesForm.shippingDate)
|
|
);
|
|
}
|
|
}, [notesForm.shippingDate]);
|
|
|
|
return (
|
|
<div className="animate-fade-in">
|
|
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 mb-6">
|
|
Observações
|
|
</h3>
|
|
|
|
<form className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-[10px] font-black uppercase text-slate-400 mb-2">
|
|
Previsão de entrega
|
|
</label>
|
|
<input
|
|
type="date"
|
|
min={(() => {
|
|
// Calcular data mínima (D+3)
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
const minDate = new Date(today);
|
|
minDate.setDate(today.getDate() + 3);
|
|
// Formatar para YYYY-MM-DD
|
|
const year = minDate.getFullYear();
|
|
const month = String(minDate.getMonth() + 1).padStart(2, "0");
|
|
const day = String(minDate.getDate()).padStart(2, "0");
|
|
return `${year}-${month}-${day}`;
|
|
})()}
|
|
value={formatDateForInput(notesForm.shippingDate)}
|
|
onChange={(e) => {
|
|
const dateValue = e.target.value;
|
|
console.log(
|
|
"📅 [NOTES_STEP] Valor do input alterado:",
|
|
dateValue
|
|
);
|
|
|
|
if (dateValue) {
|
|
// Criar data a partir do valor do input (YYYY-MM-DD)
|
|
// Usar data local para corresponder exatamente ao que o usuário selecionou
|
|
const [year, month, day] = dateValue.split("-").map(Number);
|
|
const date = new Date(year, month - 1, day);
|
|
// Zerar horas para garantir que seja apenas a data, sem hora
|
|
date.setHours(0, 0, 0, 0);
|
|
|
|
console.log(
|
|
"📅 [NOTES_STEP] Nova data criada (local):",
|
|
date
|
|
);
|
|
console.log(
|
|
"📅 [NOTES_STEP] Data formatada de volta:",
|
|
formatDateForInput(date)
|
|
);
|
|
onFormChange("shippingDate", date);
|
|
} else {
|
|
console.log("📅 [NOTES_STEP] Data removida (null)");
|
|
onFormChange("shippingDate", null);
|
|
}
|
|
}}
|
|
className="w-full px-4 py-3 bg-slate-50 rounded-xl font-bold text-[#002147] border border-slate-200 focus:outline-none focus:ring-2 focus:ring-orange-500/20"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-[10px] font-black uppercase text-slate-400 mb-2">
|
|
Prioridade de Entrega
|
|
</label>
|
|
<div className="flex gap-4 mt-2">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="shippingPriority"
|
|
value="B"
|
|
checked={notesForm.shippingPriority === "B"}
|
|
onChange={(e) =>
|
|
onFormChange(
|
|
"shippingPriority",
|
|
e.target.value as "B" | "M" | "A"
|
|
)
|
|
}
|
|
className="w-4 h-4 text-[#002147] focus:ring-2 focus:ring-[#002147]"
|
|
/>
|
|
<span className="text-sm font-medium text-slate-700">
|
|
Entrega
|
|
</span>
|
|
</label>
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="shippingPriority"
|
|
value="M"
|
|
checked={notesForm.shippingPriority === "M"}
|
|
onChange={(e) =>
|
|
onFormChange(
|
|
"shippingPriority",
|
|
e.target.value as "B" | "M" | "A"
|
|
)
|
|
}
|
|
className="w-4 h-4 text-[#002147] focus:ring-2 focus:ring-[#002147]"
|
|
/>
|
|
<span className="text-sm font-medium text-slate-700">
|
|
Retira
|
|
</span>
|
|
</label>
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
name="shippingPriority"
|
|
value="A"
|
|
checked={notesForm.shippingPriority === "A"}
|
|
onChange={(e) =>
|
|
onFormChange(
|
|
"shippingPriority",
|
|
e.target.value as "B" | "M" | "A"
|
|
)
|
|
}
|
|
className="w-4 h-4 text-[#002147] focus:ring-2 focus:ring-[#002147]"
|
|
/>
|
|
<span className="text-sm font-medium text-slate-700">
|
|
Delivery
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-[10px] font-black uppercase text-slate-400 mb-2">
|
|
Observações do Pedido
|
|
</label>
|
|
<input
|
|
type="text"
|
|
maxLength={50}
|
|
value={notesForm.notesText1}
|
|
onChange={(e) => onFormChange("notesText1", e.target.value)}
|
|
className="w-full px-4 py-3 bg-slate-50 rounded-xl font-bold text-[#002147] border border-slate-200 focus:outline-none focus:ring-2 focus:ring-orange-500/20 mb-2"
|
|
placeholder="Observação 1"
|
|
/>
|
|
<input
|
|
type="text"
|
|
maxLength={50}
|
|
value={notesForm.notesText2}
|
|
onChange={(e) => onFormChange("notesText2", e.target.value)}
|
|
className="w-full px-4 py-3 bg-slate-50 rounded-xl font-bold text-[#002147] border border-slate-200 focus:outline-none focus:ring-2 focus:ring-orange-500/20"
|
|
placeholder="Observação 2"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-[10px] font-black uppercase text-slate-400 mb-2">
|
|
Observações de Entrega
|
|
</label>
|
|
<input
|
|
type="text"
|
|
maxLength={75}
|
|
value={notesForm.notesDeliveryText1}
|
|
onChange={(e) => onFormChange("notesDeliveryText1", e.target.value)}
|
|
className="w-full px-4 py-3 bg-slate-50 rounded-xl font-bold text-[#002147] border border-slate-200 focus:outline-none focus:ring-2 focus:ring-orange-500/20 mb-2"
|
|
placeholder="Observação de entrega 1"
|
|
/>
|
|
<input
|
|
type="text"
|
|
maxLength={75}
|
|
value={notesForm.notesDeliveryText2}
|
|
onChange={(e) => onFormChange("notesDeliveryText2", e.target.value)}
|
|
className="w-full px-4 py-3 bg-slate-50 rounded-xl font-bold text-[#002147] border border-slate-200 focus:outline-none focus:ring-2 focus:ring-orange-500/20 mb-2"
|
|
placeholder="Observação de entrega 2"
|
|
/>
|
|
<input
|
|
type="text"
|
|
maxLength={75}
|
|
value={notesForm.notesDeliveryText3}
|
|
onChange={(e) => onFormChange("notesDeliveryText3", e.target.value)}
|
|
className="w-full px-4 py-3 bg-slate-50 rounded-xl font-bold text-[#002147] border border-slate-200 focus:outline-none focus:ring-2 focus:ring-orange-500/20"
|
|
placeholder="Observação de entrega 3"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 mt-6">
|
|
<button
|
|
type="button"
|
|
onClick={onPrevious}
|
|
className="flex items-center gap-2 bg-slate-100 px-6 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest text-[#002147] hover:bg-slate-200 transition-colors"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
Retornar
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotesStep;
|