Inna
809eb756c8
Solo en /send-gift se añade una 4ª forma de pago: PV (vote points, gratis por votar). Cuesta más que PD para preservar su valor: coste_PV = coste_PD × VP_PRICE_FACTOR (=2, configurable en lib/pay-with-dpoints). - lib/dpoints: getVPointsBalance, creditVPoints y spendVPoints (débito atómico del campo vp, con FOR UPDATE), espejo de las de PD. - lib/pay-with-dpoints: VP_PRICE_FACTOR, vpointsCost() y payServiceWithVPoints() (descuenta PV, ejecuta el envío y reembolsa si falla). - gift/checkout: rama provider='vp' (además de 'pd'). - service-success: la entrega inmediata cubre 'pd' y 'vp'. - PaymentMethodSelect: opción VP opcional (solo si el form pasa vpBalance); muestra coste en PV, insuficiencia y el saldo VP. - SendGiftForm + página: pasan el saldo VP. - i18n Pay: vp, vpCost, insufficientVp, balanceVp, errors.insufficientVp (es/en). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
export type PayMethod = 'pd' | 'stripe' | 'sumup' | 'vp'
|
|
|
|
// 100 PD = 1 € (igual que PD_PER_UNIT en lib/dpoints, que no se importa aquí
|
|
// para no arrastrar el acceso a BD al bundle del cliente).
|
|
const PD_PER_UNIT = 100
|
|
// Los PV cuestan este factor por el coste en PD (igual que VP_PRICE_FACTOR en
|
|
// lib/pay-with-dpoints). Mantener sincronizados.
|
|
const VP_PRICE_FACTOR = 2
|
|
|
|
/** Coste en PD (redondeado) de un precio en euros. */
|
|
export function pdCostOf(priceEur: number): number {
|
|
return Math.round(priceEur * PD_PER_UNIT)
|
|
}
|
|
|
|
/** Coste en PV de un precio en euros (más caro que en PD). */
|
|
export function vpCostOf(priceEur: number): number {
|
|
return pdCostOf(priceEur) * VP_PRICE_FACTOR
|
|
}
|
|
|
|
/**
|
|
* Selector de forma de pago: saldo PD, tarjeta (Stripe) o tarjeta (SumUp).
|
|
* Muestra el coste de cada método y desactiva PD si no hay saldo suficiente.
|
|
*/
|
|
export function PaymentMethodSelect({
|
|
value,
|
|
onChange,
|
|
priceEur,
|
|
pdBalance,
|
|
vpBalance,
|
|
}: {
|
|
value: PayMethod
|
|
onChange: (m: PayMethod) => void
|
|
priceEur: number
|
|
pdBalance: number
|
|
vpBalance?: number // si se pasa, muestra la opción de pagar con PV (solo /send-gift)
|
|
}) {
|
|
const t = useTranslations('Pay')
|
|
const cost = pdCostOf(priceEur)
|
|
const canPd = pdBalance >= cost && cost > 0
|
|
|
|
const options: { id: PayMethod; label: string; sub: string; disabled?: boolean }[] = [
|
|
{
|
|
id: 'pd',
|
|
label: t('pd'),
|
|
sub: canPd ? t('pdCost', { cost }) : t('insufficient', { cost }),
|
|
disabled: !canPd,
|
|
},
|
|
]
|
|
|
|
// Opción PV: solo cuando el formulario la habilita pasando el saldo VP.
|
|
if (vpBalance !== undefined) {
|
|
const vCost = vpCostOf(priceEur)
|
|
const canVp = vpBalance >= vCost && vCost > 0
|
|
options.push({
|
|
id: 'vp',
|
|
label: t('vp'),
|
|
sub: canVp ? t('vpCost', { cost: vCost }) : t('insufficientVp', { cost: vCost }),
|
|
disabled: !canVp,
|
|
})
|
|
}
|
|
|
|
options.push(
|
|
{ id: 'stripe', label: t('stripe'), sub: t('eur', { price: priceEur }) },
|
|
{ id: 'sumup', label: t('sumup'), sub: t('eur', { price: priceEur }) },
|
|
)
|
|
|
|
return (
|
|
<div className="pay-method-select">
|
|
<p className="second-brown">{t('method')}</p>
|
|
<div className="pay-method-options">
|
|
{options.map((o) => (
|
|
<label
|
|
key={o.id}
|
|
className={`pay-method-option${value === o.id ? ' selected' : ''}${o.disabled ? ' disabled' : ''}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="pay-method"
|
|
value={o.id}
|
|
checked={value === o.id}
|
|
disabled={o.disabled}
|
|
onChange={() => onChange(o.id)}
|
|
/>
|
|
<span className="pay-method-label">{o.label}</span>
|
|
<span className={`pay-method-sub ${o.disabled ? 'red-form-response' : 'yellow-info'}`}>{o.sub}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
<p className="third-brown pay-method-balance">
|
|
{t('balance', { balance: pdBalance })}
|
|
{vpBalance !== undefined ? ` · ${t('balanceVp', { balance: vpBalance })}` : ''}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|