9400828f62
Rebrand from Forte (music-store-specific) to LunarFront (any small business): - Package namespace @forte/* → @lunarfront/* - Database forte/forte_test → lunarfront/lunarfront_test - Docker containers, volumes, connection strings - UI branding, localStorage keys, test emails - All documentation and planning docs Generalize music-specific terminology: - instrumentDescription → itemDescription - instrumentCount → itemCount - instrumentType → itemCategory (on service templates) - New migration 0027_generalize_terminology for column renames - Seed data updated with generic examples - RBAC descriptions updated
85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
import { useForm } from 'react-hook-form'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { PaymentMethodCreateSchema } from '@lunarfront/shared/schemas'
|
|
import type { PaymentMethodCreateInput } from '@lunarfront/shared/schemas'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
|
|
|
interface PaymentMethodFormProps {
|
|
accountId: string
|
|
onSubmit: (data: Record<string, unknown>) => void
|
|
loading?: boolean
|
|
}
|
|
|
|
export function PaymentMethodForm({ accountId, onSubmit, loading }: PaymentMethodFormProps) {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: zodResolver(PaymentMethodCreateSchema),
|
|
defaultValues: {
|
|
accountId,
|
|
processor: 'stripe',
|
|
processorPaymentMethodId: '',
|
|
isDefault: false,
|
|
},
|
|
})
|
|
|
|
const processor = watch('processor')
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label>Processor</Label>
|
|
<Select
|
|
value={processor}
|
|
onValueChange={(v) => setValue('processor', v as 'stripe' | 'global_payments')}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="stripe">Stripe</SelectItem>
|
|
<SelectItem value="global_payments">Global Payments</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="pmId">Payment Method ID *</Label>
|
|
<Input id="pmId" {...register('processorPaymentMethodId')} placeholder="pm_..." />
|
|
{errors.processorPaymentMethodId && (
|
|
<p className="text-sm text-destructive">{errors.processorPaymentMethodId.message}</p>
|
|
)}
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="cardBrand">Card Brand</Label>
|
|
<Input id="cardBrand" {...register('cardBrand')} placeholder="visa" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="lastFour">Last Four</Label>
|
|
<Input id="lastFour" {...register('lastFour')} placeholder="4242" maxLength={4} />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="expMonth">Exp Month</Label>
|
|
<Input id="expMonth" type="number" {...register('expMonth', { valueAsNumber: true })} min={1} max={12} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="expYear">Exp Year</Label>
|
|
<Input id="expYear" type="number" {...register('expYear', { valueAsNumber: true })} min={2024} max={2100} />
|
|
</div>
|
|
</div>
|
|
<Button type="submit" disabled={loading}>
|
|
{loading ? 'Saving...' : 'Add Payment Method'}
|
|
</Button>
|
|
</form>
|
|
)
|
|
}
|