Inna
1b0920d11f
Los 9 servicios con precio en euros (rename, customize, change-race, change-faction, level-up, gold, transfer, restore-item, send-gift) ahora ofrecen un selector de forma de pago con las 3 opciones: saldo PD, tarjeta (Stripe) o tarjeta (SumUp). - lib/dpoints: spendDPoints() descuenta PD de forma atómica (FOR UPDATE). - lib/pay-with-dpoints: paga con saldo PD, ejecuta la acción al momento y reembolsa si la ejecución falla; 100 PD = 1 €. - rutas checkout (character/[service] y gift): rama provider='pd' que valida saldo, descuenta, ejecuta fulfill y devuelve la URL de éxito (sin pasarela). - service-success: rama provider='pd' (la entrega ya se hizo en el checkout). - PaymentMethodSelect: componente compartido con coste por método y saldo; desactiva PD si no hay saldo suficiente. - Formularios (PaidServiceForm, Gold, Transfer, RestoreItems, SendGift) y sus páginas pasan el saldo PD y envían el método elegido + locale. - i18n: namespace Pay (es/en); añadidas claves Paid.restore-item que faltaban. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl'
|
|
|
|
export type PayMethod = 'pd' | 'stripe' | 'sumup'
|
|
|
|
// 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
|
|
|
|
/** Coste en PD (redondeado) de un precio en euros. */
|
|
export function pdCostOf(priceEur: number): number {
|
|
return Math.round(priceEur * PD_PER_UNIT)
|
|
}
|
|
|
|
/**
|
|
* 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,
|
|
}: {
|
|
value: PayMethod
|
|
onChange: (m: PayMethod) => void
|
|
priceEur: number
|
|
pdBalance: number
|
|
}) {
|
|
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,
|
|
},
|
|
{ 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 })}</p>
|
|
</div>
|
|
)
|
|
}
|