chore: merge executor worktree (worktree-agent-a44f854f45ac76582)
This commit is contained in:
@@ -0,0 +1,23 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { getOfferEditorData, getOfferFieldOptions } from "@/lib/offer-queries";
|
||||
import { OfferEditorClient } from "@/components/admin/offers/OfferEditorClient";
|
||||
|
||||
export const revalidate = 0;
|
||||
|
||||
export default async function OfferEditPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ id: string }>;
|
||||
}) {
|
||||
const { id } = await params;
|
||||
const [data, options] = await Promise.all([
|
||||
getOfferEditorData(id),
|
||||
getOfferFieldOptions(),
|
||||
]);
|
||||
|
||||
if (!data) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return <OfferEditorClient data={data} fieldOptions={options} />;
|
||||
}
|
||||
@@ -0,0 +1,500 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
saveOfferEditor,
|
||||
toggleOfferArchived,
|
||||
renameOfferOption,
|
||||
type SaveOfferEditorPayload,
|
||||
} from "@/app/admin/offers/actions";
|
||||
import { OptionSelect } from "@/components/ui/option-select";
|
||||
import { OptionMultiSelect } from "@/components/ui/option-multi-select";
|
||||
import { EditableCell } from "@/components/ui/editable-cell";
|
||||
import type { OfferEditorData, OfferFieldOptions, OfferTierData } from "@/lib/offer-queries";
|
||||
|
||||
type TierLetter = "A" | "B" | "C";
|
||||
const TIER_LETTERS: TierLetter[] = ["A", "B", "C"];
|
||||
|
||||
function emptyTier(letter: TierLetter): OfferTierData {
|
||||
return {
|
||||
id: "",
|
||||
tier_letter: letter,
|
||||
internal_name: "",
|
||||
public_name: "",
|
||||
duration_months: 1,
|
||||
public_price: null,
|
||||
assignedServiceIds: [],
|
||||
servicesTotal: "0",
|
||||
};
|
||||
}
|
||||
|
||||
function padTiers(tiers: OfferTierData[]): OfferTierData[] {
|
||||
return TIER_LETTERS.map(
|
||||
(letter) => tiers.find((t) => t.tier_letter === letter) ?? emptyTier(letter)
|
||||
);
|
||||
}
|
||||
|
||||
function formatEuro(value: number): string {
|
||||
return `€${value.toLocaleString("it-IT", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||||
}
|
||||
|
||||
function formatUnitPrice(raw: string): string {
|
||||
const num = parseFloat(raw);
|
||||
return `€${(isNaN(num) ? 0 : num).toLocaleString("it-IT", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||||
}
|
||||
|
||||
type MacroFields = {
|
||||
internal_name: string;
|
||||
public_name: string;
|
||||
description: string;
|
||||
category: string | null;
|
||||
ticket: string | null;
|
||||
cliente_ideale: string;
|
||||
risultato: string;
|
||||
tempo: string;
|
||||
pain: string;
|
||||
metodo: string;
|
||||
};
|
||||
|
||||
export function OfferEditorClient({
|
||||
data,
|
||||
fieldOptions,
|
||||
}: {
|
||||
data: OfferEditorData;
|
||||
fieldOptions: OfferFieldOptions;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
|
||||
const [macro, setMacro] = useState<MacroFields>({
|
||||
internal_name: data.macro.internal_name,
|
||||
public_name: data.macro.public_name,
|
||||
description: data.macro.description ?? "",
|
||||
category: data.macro.category,
|
||||
ticket: data.macro.ticket,
|
||||
cliente_ideale: data.macro.cliente_ideale ?? "",
|
||||
risultato: data.macro.risultato ?? "",
|
||||
tempo: data.macro.tempo ?? "",
|
||||
pain: data.macro.pain ?? "",
|
||||
metodo: data.macro.metodo ?? "",
|
||||
});
|
||||
|
||||
const [tiers, setTiers] = useState<OfferTierData[]>(() => padTiers(data.tiers));
|
||||
const [tipoTags, setTipoTags] = useState<string[]>(data.tipoTags);
|
||||
const [obiettivoTags, setObiettivoTags] = useState<string[]>(data.obiettivoTags);
|
||||
|
||||
const [categoriaOptions, setCategoriaOptions] = useState<string[]>(fieldOptions.categoria);
|
||||
const [ticketOptions, setTicketOptions] = useState<string[]>(fieldOptions.ticket);
|
||||
const [tipoOptions, setTipoOptions] = useState<string[]>(fieldOptions.tipo);
|
||||
const [obiettivoOptions, setObiettivoOptions] = useState<string[]>(fieldOptions.obiettivo);
|
||||
|
||||
const [initialArchived] = useState<boolean>(data.macro.is_archived);
|
||||
|
||||
const filteredServices = useMemo(() => {
|
||||
return macro.category
|
||||
? data.availableServices.filter((s) => s.category === macro.category)
|
||||
: data.availableServices;
|
||||
}, [macro.category, data.availableServices]);
|
||||
|
||||
const tierTotals = useMemo(() => {
|
||||
return tiers.map((tier) =>
|
||||
tier.assignedServiceIds.reduce((sum, id) => {
|
||||
const service = filteredServices.find((s) => s.id === id);
|
||||
return sum + Number(service?.unit_price ?? 0);
|
||||
}, 0)
|
||||
);
|
||||
}, [tiers, filteredServices]);
|
||||
|
||||
const canSave = tiers.some((t) => t.assignedServiceIds.length > 0);
|
||||
|
||||
function updateMacro<K extends keyof MacroFields>(key: K, value: MacroFields[K]) {
|
||||
setMacro((prev) => ({ ...prev, [key]: value }));
|
||||
}
|
||||
|
||||
function toggleService(tierIdx: number, serviceId: string) {
|
||||
setTiers((prev) =>
|
||||
prev.map((tier, idx) => {
|
||||
if (idx !== tierIdx) return tier;
|
||||
const has = tier.assignedServiceIds.includes(serviceId);
|
||||
return {
|
||||
...tier,
|
||||
assignedServiceIds: has
|
||||
? tier.assignedServiceIds.filter((id) => id !== serviceId)
|
||||
: [...tier.assignedServiceIds, serviceId],
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function updateTierPublicPrice(tierIdx: number, value: string) {
|
||||
setTiers((prev) =>
|
||||
prev.map((tier, idx) => (idx === tierIdx ? { ...tier, public_price: value } : tier))
|
||||
);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
setSaveError(null);
|
||||
const payload: SaveOfferEditorPayload = {
|
||||
internal_name: macro.internal_name,
|
||||
public_name: macro.public_name || macro.internal_name,
|
||||
description: macro.description,
|
||||
category: macro.category ?? undefined,
|
||||
ticket: macro.ticket ?? undefined,
|
||||
cliente_ideale: macro.cliente_ideale,
|
||||
risultato: macro.risultato,
|
||||
tempo: macro.tempo,
|
||||
pain: macro.pain,
|
||||
metodo: macro.metodo,
|
||||
tiers: tiers.map((t) => ({
|
||||
id: t.id || undefined,
|
||||
tier_letter: (t.tier_letter ?? "A") as "A" | "B" | "C",
|
||||
internal_name: t.internal_name || `Tier ${t.tier_letter}`,
|
||||
public_name: t.public_name || t.tier_letter || "Tier",
|
||||
duration_months: t.duration_months || 1,
|
||||
public_price: t.public_price ? Number(t.public_price) : null,
|
||||
assignedServiceIds: t.assignedServiceIds,
|
||||
})),
|
||||
tipoTags,
|
||||
obiettivoTags,
|
||||
};
|
||||
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await saveOfferEditor(data.macro.id, payload);
|
||||
router.push("/admin/offers");
|
||||
} catch {
|
||||
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleArchive() {
|
||||
if (!window.confirm("Sei sicuro? L'offerta non sarà visibile nella lista.")) return;
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await toggleOfferArchived(data.macro.id, true);
|
||||
router.push("/admin/offers");
|
||||
} catch {
|
||||
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleRenameCategoria(oldValue: string, newValue: string) {
|
||||
setCategoriaOptions((prev) => prev.map((o) => (o === oldValue ? newValue : o)));
|
||||
if (macro.category === oldValue) updateMacro("category", newValue);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await renameOfferOption("categoria", oldValue, newValue);
|
||||
} catch {
|
||||
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleRenameTicket(oldValue: string, newValue: string) {
|
||||
setTicketOptions((prev) => prev.map((o) => (o === oldValue ? newValue : o)));
|
||||
if (macro.ticket === oldValue) updateMacro("ticket", newValue);
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await renameOfferOption("ticket", oldValue, newValue);
|
||||
} catch {
|
||||
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleRenameTipo(oldValue: string, newValue: string) {
|
||||
setTipoOptions((prev) => prev.map((o) => (o === oldValue ? newValue : o)));
|
||||
setTipoTags((prev) => prev.map((t) => (t === oldValue ? newValue : t)));
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await renameOfferOption("tipo", oldValue, newValue);
|
||||
} catch {
|
||||
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleRenameObiettivo(oldValue: string, newValue: string) {
|
||||
setObiettivoOptions((prev) => prev.map((o) => (o === oldValue ? newValue : o)));
|
||||
setObiettivoTags((prev) => prev.map((t) => (t === oldValue ? newValue : t)));
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await renameOfferOption("obiettivo", oldValue, newValue);
|
||||
} catch {
|
||||
setSaveError("Errore nel salvataggio. Verifica i campi.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto py-8 px-4 space-y-8">
|
||||
{/* Header & navigation */}
|
||||
<div>
|
||||
<Link href="/admin/offers" className="text-sm text-[#71717a] hover:text-[#1a1a1a]">
|
||||
← Indietro
|
||||
</Link>
|
||||
<div className="mt-2 flex items-center justify-between">
|
||||
<h2 className="text-xl font-semibold text-[#1a1a1a]">Modifica Offerta</h2>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<h3 className="text-base font-semibold text-[#1a1a1a]">
|
||||
<EditableCell
|
||||
value={macro.internal_name}
|
||||
type="text"
|
||||
required
|
||||
onSave={(v) => updateMacro("internal_name", v)}
|
||||
/>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tags block */}
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-base font-semibold text-[#1a1a1a]">Tag</h3>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-[#71717a] w-24 shrink-0">Categoria</span>
|
||||
<OptionSelect
|
||||
value={macro.category}
|
||||
options={categoriaOptions}
|
||||
onChange={(v) => updateMacro("category", v)}
|
||||
onRename={handleRenameCategoria}
|
||||
placeholder="Seleziona categoria..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-[#71717a] w-24 shrink-0">Ticket</span>
|
||||
<OptionSelect
|
||||
value={macro.ticket}
|
||||
options={ticketOptions}
|
||||
onChange={(v) => updateMacro("ticket", v)}
|
||||
onRename={handleRenameTicket}
|
||||
placeholder="Seleziona ticket..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-[#71717a] w-24 shrink-0">Tipo</span>
|
||||
<OptionMultiSelect
|
||||
values={tipoTags}
|
||||
options={tipoOptions}
|
||||
onAdd={(v) => {
|
||||
setTipoTags((prev) => [...prev, v]);
|
||||
if (!tipoOptions.includes(v)) setTipoOptions((prev) => [...prev, v]);
|
||||
}}
|
||||
onRemove={(v) => setTipoTags((prev) => prev.filter((t) => t !== v))}
|
||||
onRename={handleRenameTipo}
|
||||
placeholder="+ Crea Tipo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-[#71717a] w-24 shrink-0">Obiettivo</span>
|
||||
<OptionMultiSelect
|
||||
values={obiettivoTags}
|
||||
options={obiettivoOptions}
|
||||
onAdd={(v) => {
|
||||
setObiettivoTags((prev) => [...prev, v]);
|
||||
if (!obiettivoOptions.includes(v)) setObiettivoOptions((prev) => [...prev, v]);
|
||||
}}
|
||||
onRemove={(v) => setObiettivoTags((prev) => prev.filter((t) => t !== v))}
|
||||
onRename={handleRenameObiettivo}
|
||||
placeholder="+ Crea Obiettivo"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services matrix */}
|
||||
<section className="space-y-3">
|
||||
<h3 className="text-base font-semibold text-[#1a1a1a]">Servizi Inclusi</h3>
|
||||
|
||||
<div className="bg-white rounded-xl border border-[#e5e7eb] overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-[#f9f9f9] border-b border-[#e5e7eb]">
|
||||
<tr>
|
||||
<th className="text-left py-2 px-3 font-semibold text-[#71717a]">Servizio</th>
|
||||
<th className="text-right py-2 px-3 font-semibold text-[#71717a]">Prezzo</th>
|
||||
{TIER_LETTERS.map((letter) => (
|
||||
<th
|
||||
key={letter}
|
||||
className="text-center py-2 px-3 font-semibold text-[#71717a] w-12"
|
||||
>
|
||||
{letter}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredServices.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={2 + TIER_LETTERS.length} className="py-3 px-3 text-[#71717a]">
|
||||
Nessun servizio disponibile per questa categoria
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredServices.map((service) => (
|
||||
<tr
|
||||
key={service.id}
|
||||
className="border-b border-[#e5e7eb] hover:bg-[#f9f9f9] transition-colors duration-150 h-10"
|
||||
>
|
||||
<td className="py-2 px-3 text-[#1a1a1a]">{service.name}</td>
|
||||
<td className="py-2 px-3 text-right tabular-nums text-[#1a1a1a]">
|
||||
{formatUnitPrice(service.unit_price)}
|
||||
</td>
|
||||
{tiers.map((tier, tierIdx) => (
|
||||
<td key={tier.tier_letter} className="py-2 px-3 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={tier.assignedServiceIds.includes(service.id)}
|
||||
onChange={() => toggleService(tierIdx, service.id)}
|
||||
style={{ accentColor: "#1A463C" }}
|
||||
className="h-4 w-4 cursor-pointer"
|
||||
/>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr className="border-t border-[#e5e7eb]">
|
||||
<td className="py-2 px-3 font-semibold text-[#1a1a1a]" colSpan={2}>
|
||||
Totale Servizi
|
||||
</td>
|
||||
{tierTotals.map((total, idx) => (
|
||||
<td
|
||||
key={tiers[idx].tier_letter}
|
||||
className="py-2 px-3 text-center font-semibold text-[#1a1a1a] tabular-nums"
|
||||
>
|
||||
{formatEuro(total)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 px-3 font-semibold text-[#1a1a1a]" colSpan={2}>
|
||||
Prezzo Pubblico
|
||||
</td>
|
||||
{tiers.map((tier, tierIdx) => (
|
||||
<td key={tier.tier_letter} className="py-2 px-3 text-center">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={tier.public_price ?? ""}
|
||||
onChange={(e) => updateTierPublicPrice(tierIdx, e.target.value)}
|
||||
placeholder="€0,00"
|
||||
className="w-20 text-center text-sm border border-[#e5e7eb] rounded px-1 py-1 tabular-nums focus-visible:ring-1 focus-visible:ring-primary focus:outline-none"
|
||||
/>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Transformation promise block */}
|
||||
<section className="space-y-4">
|
||||
<h3 className="text-base font-semibold text-[#1a1a1a]">Promessa di Trasformazione</h3>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-[#71717a] w-24 shrink-0">Aiuto</span>
|
||||
<div className="flex-1">
|
||||
<EditableCell
|
||||
value={macro.cliente_ideale}
|
||||
type="text"
|
||||
placeholder="Aggiungi cliente ideale"
|
||||
onSave={(v) => updateMacro("cliente_ideale", v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-[#71717a] w-24 shrink-0">A ottenere</span>
|
||||
<div className="flex-1">
|
||||
<EditableCell
|
||||
value={macro.risultato}
|
||||
type="text"
|
||||
placeholder="Aggiungi risultato"
|
||||
onSave={(v) => updateMacro("risultato", v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-[#71717a] w-24 shrink-0">In</span>
|
||||
<div className="flex-1">
|
||||
<EditableCell
|
||||
value={macro.tempo}
|
||||
type="text"
|
||||
placeholder="Aggiungi durata (es. 3 mesi)"
|
||||
onSave={(v) => updateMacro("tempo", v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-[#71717a] w-24 shrink-0">Senza</span>
|
||||
<div className="flex-1">
|
||||
<EditableCell
|
||||
value={macro.pain}
|
||||
type="text"
|
||||
placeholder="Aggiungi pain point"
|
||||
onSave={(v) => updateMacro("pain", v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-[#71717a] w-24 shrink-0">Grazie a</span>
|
||||
<div className="flex-1">
|
||||
<EditableCell
|
||||
value={macro.metodo}
|
||||
type="text"
|
||||
placeholder="Aggiungi metodo"
|
||||
onSave={(v) => updateMacro("metodo", v)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Action buttons */}
|
||||
{saveError && <p className="text-sm text-red-600">{saveError}</p>}
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
disabled={!canSave || isPending}
|
||||
title={!canSave ? "Seleziona almeno un servizio" : undefined}
|
||||
className="bg-[#1A463C] text-white text-sm font-semibold px-6 py-4 rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[#163a31] transition-colors duration-150"
|
||||
>
|
||||
Salva Offerta
|
||||
</button>
|
||||
<Link
|
||||
href="/admin/offers"
|
||||
className="border border-[#e5e7eb] text-[#1a1a1a] text-sm font-semibold px-6 py-4 rounded hover:bg-[#f9f9f9] transition-colors duration-150"
|
||||
>
|
||||
Annulla
|
||||
</Link>
|
||||
{!initialArchived && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleArchive}
|
||||
disabled={isPending}
|
||||
className="text-[#dc2626] text-sm font-semibold px-6 py-4 rounded hover:bg-red-50 transition-colors duration-150 disabled:opacity-50"
|
||||
>
|
||||
Archivia
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user