simone
e10d1f70cb
- client-view.ts: read cumulative_price + services list from offer_tier_services→services (Phase 12 catalog); legacy fallback to offer_micro_services→offer_services when no new-style rows exist. Extend activeOffers type with services[] in both ProjectView and ClientView. - OffersSection.tsx: extract OfferCard client component with useState accordion; hide "Valore incluso" row when price is 0; add "Cosa è compreso" chevron toggle listing included services (name + description when present). - client-dashboard.tsx: hide progress bar and PhaseViewToggle when hasRetainer; render polished empty-state placeholder with RefreshCw icon instead. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
105 lines
3.5 KiB
TypeScript
105 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
|
|
interface IncludedService {
|
|
name: string;
|
|
description: string | null;
|
|
}
|
|
|
|
interface ActiveOffer {
|
|
id: string;
|
|
public_name: string; // micro offer public name — NOT shown to client (T-05-10)
|
|
offer_name: string; // macro public_name — shown as heading
|
|
offer_type: string; // una_tantum | retainer
|
|
cumulative_price: string; // sum of service prices
|
|
accepted_total: string | null;
|
|
services: IncludedService[];
|
|
}
|
|
|
|
interface OffersSectionProps {
|
|
offers: ActiveOffer[];
|
|
}
|
|
|
|
function OfferCard({ offer }: { offer: ActiveOffer }) {
|
|
const [open, setOpen] = useState(false);
|
|
const price = parseFloat(offer.cumulative_price);
|
|
const hasPrice = price > 0;
|
|
const hasServices = offer.services.length > 0;
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg border border-[#e5e5e5] overflow-hidden">
|
|
{/* Main info rows */}
|
|
<div className="p-4 space-y-2">
|
|
{/* Heading: macro public name */}
|
|
<p className="text-sm font-semibold text-[#1a1a1a]">{offer.offer_name}</p>
|
|
|
|
<div className="space-y-1">
|
|
{/* "Valore incluso" — hidden when 0 */}
|
|
{hasPrice && (
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs text-[#71717a]">Valore incluso</span>
|
|
<span className="text-xs font-mono text-[#1a1a1a]">
|
|
€{price.toFixed(2)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* "Prezzo finale" */}
|
|
{offer.accepted_total && (
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-semibold text-[#1a1a1a]">Prezzo finale</span>
|
|
<span className="text-sm font-bold text-[#1A463C]">
|
|
€{parseFloat(offer.accepted_total).toFixed(2)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Accordion "Cosa è compreso" — only when there are services */}
|
|
{hasServices && (
|
|
<div className="border-t border-[#e5e5e5]">
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="w-full flex items-center justify-between px-4 py-2.5 text-xs font-semibold text-[#1a1a1a] hover:bg-[#f9f9f9] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1A463C] focus-visible:ring-inset"
|
|
aria-expanded={open}
|
|
>
|
|
<span>Cosa è compreso</span>
|
|
<ChevronDown
|
|
className={`w-3.5 h-3.5 text-[#71717a] transition-transform duration-200 ${open ? "rotate-180" : ""}`}
|
|
/>
|
|
</button>
|
|
|
|
{open && (
|
|
<ul className="px-4 pb-3 space-y-2">
|
|
{offer.services.map((svc, i) => (
|
|
<li key={i} className="flex flex-col gap-0.5">
|
|
<span className="text-xs font-medium text-[#1a1a1a]">{svc.name}</span>
|
|
{svc.description && (
|
|
<span className="text-[11px] text-[#71717a] leading-snug">{svc.description}</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function OffersSection({ offers }: OffersSectionProps) {
|
|
if (offers.length === 0) return null;
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{offers.map((offer) => (
|
|
<OfferCard key={offer.id} offer={offer} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|