send-gift: permitir pagar con PV (puntos de voto), más caro que PD

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>

web-next/components/PaymentMethodSelect.tsx

@@ -2,17 +2,25 @@
 
 import { useTranslations } from 'next-intl'
 
-export type PayMethod = 'pd' | 'stripe' | 'sumup'
+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.
@@ -22,11 +30,13 @@ export function PaymentMethodSelect({
   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)
@@ -39,9 +49,24 @@ export function PaymentMethodSelect({
       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">
@@ -65,7 +90,10 @@ export function PaymentMethodSelect({
           </label>
         ))}
       </div>
-      <p className="third-brown pay-method-balance">{t('balance', { balance: pdBalance })}</p>
+      <p className="third-brown pay-method-balance">
+        {t('balance', { balance: pdBalance })}
+        {vpBalance !== undefined ? ` · ${t('balanceVp', { balance: vpBalance })}` : ''}
+      </p>
     </div>
   )
 }

web-next/components/SendGiftForm.tsx

@@ -51,11 +51,13 @@ export function SendGiftForm({
   catalog,
   currency = '€',
   pdBalance = 0,
+  vpBalance = 0,
 }: {
   characters: CharOption[]
   catalog: GiftCategory[]
   currency?: string
   pdBalance?: number
+  vpBalance?: number
 }) {
   const t = useTranslations('CharService')
   const tpay = useTranslations('Pay')
@@ -260,7 +262,7 @@ export function SendGiftForm({
           <p>
             {t.rich('sendGift.total', { total, currency, s: (c) => <span className="yellow-info">{c}</span> })}
           </p>
-          {total > 0 && <PaymentMethodSelect value={method} onChange={setMethod} priceEur={total} pdBalance={pdBalance} />}
+          {total > 0 && <PaymentMethodSelect value={method} onChange={setMethod} priceEur={total} pdBalance={pdBalance} vpBalance={vpBalance} />}
           <br />
           <button
             type="submit"