125 lines
4.2 KiB
TypeScript
125 lines
4.2 KiB
TypeScript
import { Clock, Tag, Trophy } from "lucide-react";
|
||
import Link from "next/link";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { tr } from "@/i18n/tr";
|
||
import { cn } from "@/lib/utils";
|
||
import { formatDate, formatMoney } from "@/shared/format";
|
||
import { formatUnitPrice, type RankedOffer } from "@/shared/prices";
|
||
import type { StoreOffer } from "../service";
|
||
|
||
const t = tr.productPrices;
|
||
export const ymdLabel = (ymd: string) => formatDate(`${ymd}T12:00:00+03:00`);
|
||
|
||
/** Mağaza renk işareti (kimlik; metin her zaman yanında). */
|
||
export function StoreDot({ slot, className }: { slot: number; className?: string }) {
|
||
return (
|
||
<span
|
||
aria-hidden
|
||
className={cn("mr-1.5 inline-block size-2.5 shrink-0 rounded-full", className)}
|
||
style={{ backgroundColor: `var(--series-${slot})` }}
|
||
/>
|
||
);
|
||
}
|
||
|
||
/** Teklif rozetleri: en uygun, kampanya, kampanya bitti, eski fiyat. */
|
||
function OfferBadges({ offer }: { offer: RankedOffer<StoreOffer> }) {
|
||
const p = offer.price;
|
||
return (
|
||
<span className="flex flex-wrap items-center gap-1">
|
||
{offer.cheapest ? (
|
||
<Badge className="gap-1 bg-income text-income-foreground">
|
||
<Trophy className="size-3" aria-hidden />
|
||
{t.cheapest}
|
||
</Badge>
|
||
) : null}
|
||
{p.isPromo && !offer.promoEnded ? (
|
||
<Badge variant="outline" className="gap-1 border-budget/50 text-budget">
|
||
<Tag className="size-3" aria-hidden />
|
||
{t.promo}
|
||
{p.promoUntil ? ` · ${t.promoUntil(ymdLabel(p.promoUntil))}` : ""}
|
||
</Badge>
|
||
) : null}
|
||
{offer.fellBack ? <Badge variant="secondary">{t.fellBack}</Badge> : null}
|
||
{offer.promoEnded ? <Badge variant="secondary">{t.promoEnded}</Badge> : null}
|
||
{offer.stale ? (
|
||
<Badge
|
||
variant="outline"
|
||
className="gap-1 border-amber-500/50 text-amber-700 dark:text-amber-400"
|
||
title={t.staleHint}
|
||
>
|
||
<Clock className="size-3" aria-hidden />
|
||
{t.stale(offer.ageDays)}
|
||
</Badge>
|
||
) : null}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* Birim fiyata göre sıralı teklifler. `showProduct`: ürün tipi karşılaştırmasında marka/paket
|
||
* ve ürün sayfası bağlantısı.
|
||
*/
|
||
export function OffersList({
|
||
offers,
|
||
typeUnit,
|
||
showProduct = false,
|
||
}: {
|
||
offers: RankedOffer<StoreOffer>[];
|
||
typeUnit: string;
|
||
showProduct?: boolean;
|
||
}) {
|
||
return (
|
||
<ol className="divide-y rounded-xl border bg-card">
|
||
{offers.map((o) => (
|
||
<li
|
||
key={o.key}
|
||
className={cn(
|
||
"grid grid-cols-[1.5rem_minmax(0,1fr)_auto] items-start gap-x-3 gap-y-1 p-3",
|
||
o.cheapest && "bg-income/5",
|
||
)}
|
||
>
|
||
<span className="pt-0.5 text-sm text-muted-foreground tabular-nums">{o.rank ?? "–"}</span>
|
||
<div className="min-w-0">
|
||
{showProduct ? (
|
||
<p className="truncate font-medium">
|
||
<Link href={`/stok/urunler/${o.productId}`} className="hover:underline">
|
||
{o.productLabel}
|
||
</Link>{" "}
|
||
<span className="text-xs font-normal text-muted-foreground">{o.packageLabel}</span>
|
||
</p>
|
||
) : null}
|
||
<p
|
||
className={cn(
|
||
"flex flex-wrap items-center",
|
||
showProduct ? "text-sm text-muted-foreground" : "font-medium",
|
||
)}
|
||
>
|
||
<StoreDot slot={o.store.slot} />
|
||
{o.store.label}
|
||
<span className="ml-1.5 text-xs font-normal text-muted-foreground">
|
||
· {ymdLabel(o.price.date)}
|
||
</span>
|
||
</p>
|
||
<div className="mt-1">
|
||
<OfferBadges offer={o} />
|
||
</div>
|
||
</div>
|
||
<div className="text-right tabular-nums">
|
||
<p className="font-semibold">
|
||
{o.unitPriceMinor === null ? (
|
||
<span className="text-sm font-normal text-muted-foreground">{t.noConversion}</span>
|
||
) : (
|
||
formatUnitPrice(o.unitPriceMinor, typeUnit)
|
||
)}
|
||
</p>
|
||
<p className="text-xs text-muted-foreground">
|
||
{formatMoney(o.price.priceMinor)}
|
||
{o.diffPct ? ` · ${t.diff(o.diffPct)}` : ""}
|
||
</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
);
|
||
}
|