alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
49 lines
1.9 KiB
TypeScript
49 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import Input from '@/components/formElements/Input'
|
|
import { texts } from '@/texts'
|
|
|
|
interface CancellationPolicyEditorProps {
|
|
disabled?: boolean
|
|
value: number
|
|
onChange: (value: number) => void
|
|
}
|
|
|
|
/**
|
|
* Makes the cancellation fee explicit to hosts while keeping the persisted
|
|
* event contract to the existing `cancellationFeePercent` field.
|
|
*/
|
|
export default function CancellationPolicyEditor({ disabled = false, value, onChange }: CancellationPolicyEditorProps) {
|
|
const normalizedValue = Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0
|
|
|
|
return (
|
|
<div className="rounded-consumer-control bg-[#E2E2E280] p-3">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<p className="text-sm font-medium text-consumer-text">{texts.events.cancellationFeeLabel}</p>
|
|
<p className="mt-1 text-xs leading-5 text-secondary-20">{texts.events.cancellationSectionDescription}</p>
|
|
</div>
|
|
<div className="relative shrink-0">
|
|
<Input
|
|
aria-label={texts.events.cancellationFeeLabel}
|
|
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="cancellationFeePercent"
|
|
value={normalizedValue}
|
|
onValueChange={(nextValue) => {
|
|
const next = Number(nextValue)
|
|
|
|
onChange(Number.isFinite(next) ? Math.min(100, Math.max(0, next)) : 0)
|
|
}}
|
|
/>
|
|
{/* This marker belongs to the compact numeric field, not to its value. */}
|
|
<span className="pointer-events-none absolute inset-y-0 start-1 flex items-center text-xs text-secondary-20">٪</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|