53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import { LifeBuoy } from "lucide-react";
|
||
import { getRefundPolicyTiers } from "@/lib/refund-policy";
|
||
|
||
/**
|
||
* Display kebijakan refund default di trip detail. Sumber tier:
|
||
* lib/refund-policy.ts. Compact agar tidak mendominasi page.
|
||
*/
|
||
export function RefundPolicySection() {
|
||
const tiers = getRefundPolicyTiers();
|
||
return (
|
||
<details className="rounded-xl border border-neutral-200 bg-neutral-50/60 p-3 text-xs sm:text-sm">
|
||
<summary className="cursor-pointer select-none font-semibold text-neutral-700">
|
||
<LifeBuoy
|
||
size={15}
|
||
strokeWidth={1.75}
|
||
aria-hidden
|
||
className="mr-1.5 inline align-text-bottom"
|
||
/>
|
||
Kebijakan refund saat peserta cancel
|
||
</summary>
|
||
<div className="mt-2 space-y-2 text-neutral-600">
|
||
<p className="text-[11px] text-neutral-500 sm:text-xs">
|
||
Kebijakan ini berlaku saat <strong>peserta</strong> cancel booking
|
||
yang sudah lunas. Kalau <strong>organizer</strong> membatalkan trip,
|
||
peserta yang sudah bayar selalu dapat refund 100%.
|
||
</p>
|
||
<ul className="space-y-1">
|
||
{tiers.map((t) => (
|
||
<li key={t.minDaysBefore} className="flex items-baseline gap-2">
|
||
<span
|
||
className={`inline-flex min-w-12 justify-center rounded-full px-2 py-0.5 text-[10px] font-bold ${
|
||
t.refundPercentage >= 80
|
||
? "bg-primary-100 text-primary-700"
|
||
: t.refundPercentage >= 50
|
||
? "bg-amber-100 text-amber-700"
|
||
: "bg-red-100 text-red-700"
|
||
}`}
|
||
>
|
||
{t.refundPercentage}%
|
||
</span>
|
||
<span>{t.label}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<p className="text-[11px] text-neutral-500 sm:text-xs">
|
||
Refund diproses manual oleh admin SeTrip — perlu 1–3 hari kerja
|
||
setelah disetujui untuk uang masuk ke rekening kamu.
|
||
</p>
|
||
</div>
|
||
</details>
|
||
);
|
||
}
|