82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import Input from '@/components/formElements/Input'
|
|
import { texts } from '@/texts'
|
|
|
|
interface CancellationPolicyEditorProps {
|
|
disabled?: boolean
|
|
cancellationFeePercent: number
|
|
cancellationFeePercent12To24Hours: number
|
|
cancellationFeePercentMoreThan24Hours: number
|
|
onChange: (
|
|
field: 'cancellationFeePercent' | 'cancellationFeePercent12To24Hours' | 'cancellationFeePercentMoreThan24Hours',
|
|
value: number
|
|
) => void
|
|
}
|
|
|
|
/**
|
|
* Makes all three time-based cancellation fee tiers explicit to hosts.
|
|
*/
|
|
export default function CancellationPolicyEditor({
|
|
disabled = false,
|
|
cancellationFeePercent,
|
|
cancellationFeePercent12To24Hours,
|
|
cancellationFeePercentMoreThan24Hours,
|
|
onChange,
|
|
}: CancellationPolicyEditorProps) {
|
|
const tiers = [
|
|
{
|
|
field: 'cancellationFeePercentMoreThan24Hours' as const,
|
|
label: texts.events.cancellationFeeMoreThan24HoursLabel,
|
|
value: cancellationFeePercentMoreThan24Hours,
|
|
},
|
|
{
|
|
field: 'cancellationFeePercent12To24Hours' as const,
|
|
label: texts.events.cancellationFee12To24HoursLabel,
|
|
value: cancellationFeePercent12To24Hours,
|
|
},
|
|
{
|
|
field: 'cancellationFeePercent' as const,
|
|
label: texts.events.cancellationFeeLabel,
|
|
value: cancellationFeePercent,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
{tiers.map((tier) => {
|
|
const normalizedValue = Number.isFinite(tier.value) ? Math.min(100, Math.max(0, tier.value)) : 0
|
|
|
|
return (
|
|
<div
|
|
key={tier.field}
|
|
className="rounded-consumer-control bg-[#E2E2E280] p-3"
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<p className="text-sm font-medium text-consumer-text">{tier.label}</p>
|
|
<div className="relative shrink-0">
|
|
<Input
|
|
aria-label={tier.label}
|
|
disabled={disabled}
|
|
generalType="numberInput"
|
|
inputWrapper="h-10 w-16 rounded-xl border-0 bg-white px-2 text-center text-sm font-medium text-tertiary-900 shadow-none [&_input]:text-center disabled:bg-white/70"
|
|
maxValue={100}
|
|
minValue={0}
|
|
name={tier.field}
|
|
value={normalizedValue}
|
|
onValueChange={(nextValue) => {
|
|
const next = Number(nextValue)
|
|
|
|
onChange(tier.field, Number.isFinite(next) ? Math.min(100, Math.max(0, next)) : 0)
|
|
}}
|
|
/>
|
|
<span className="pointer-events-none absolute inset-y-0 start-1 flex items-center text-xs text-secondary-20">٪</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|