Inna
f7a376bd7c
- /rename-character y /customize-character: renombrar/personalizar pagados por SumUp (getRenamePrice/getCustomizePrice). SumUp ahora es service-aware: columna home_stripelog.service; createSumUpCheckout guarda service+character; fulfillSumUpCheckout despacha a la acción del servicio (.char rename/customi) o, sin service, acredita PD. [service]/checkout acepta provider:'sumup'; PaidServiceForm acepta provider+confirmText; service-success maneja el return SumUp. Se eliminan las antiguas /rename y /customize (Stripe). - /revive-character (comparte ReviveServiceContent); se elimina /revive. - Renombres de ruta + todos sus enlaces: /account -> /my-account, /recruit -> /recruit-a-friend, /unstuck -> /unstuck-character. (/select-account y /api/account/* intactos.) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
289 lines
13 KiB
TypeScript
289 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Link } from '@/i18n/navigation'
|
|
|
|
const LOGOS = '/nw-themes/nw-ryu/nw-images/nw-logos'
|
|
const RANKS = '/nw-themes/nw-ryu/nw-images/nw-ranks'
|
|
|
|
type TabId = 'Info' | 'Stripe' | 'SumUp'
|
|
|
|
const RANK_ROWS = [
|
|
['1_Newbie', 'Nivel 1', 'Desde 0 PD'],
|
|
['2_Rookie', 'Nivel 2', 'Hasta 100 PD'],
|
|
['3_Apprentice', 'Nivel 3', 'Hasta 200 PD'],
|
|
['4_Explorer', 'Nivel 4', 'Hasta 300 PD'],
|
|
['5_Contributor', 'Nivel 5', 'Hasta 400 PD'],
|
|
['6_Enthusiast', 'Nivel 6', 'Hasta 500 PD'],
|
|
['7_Collaborator', 'Nivel 7', 'Hasta 600 PD'],
|
|
['8_Regular', 'Nivel 8', 'Hasta 700 PD'],
|
|
['9_RisingStar', 'Nivel 9', 'Hasta 800 PD'],
|
|
['10_Proficient', 'Nivel 10', 'Hasta 900 PD'],
|
|
['11_Experienced', 'Nivel 11', 'Hasta 1000 PD'],
|
|
['12_Mentor', 'Nivel 12', 'Hasta 5000 PD'],
|
|
['13_Veteran', 'Nivel 13', 'Hasta 10000 PD'],
|
|
['14_GrandMaster', 'Nivel 14', 'Más de 10000 PD'],
|
|
]
|
|
|
|
export function DPointsTabs({ realm, currency }: { realm: string; currency: string }) {
|
|
const [active, setActive] = useState<TabId>('Info')
|
|
const [showRanks, setShowRanks] = useState(false)
|
|
const sym = currency === 'usd' ? '$' : '€'
|
|
|
|
return (
|
|
<>
|
|
<div className="body-box-content justified">
|
|
<div className="dnt-sidebar">
|
|
<button
|
|
className={`dnt-button-2 tablink${active === 'Info' ? ' dnt-selected' : ''}`}
|
|
onClick={() => setActive('Info')}
|
|
>
|
|
Información
|
|
</button>
|
|
<Link className="back-to-account" href="/my-account">Regresar a mi cuenta</Link>
|
|
<Link className="back-to-account-responsive" href="/my-account">Regresar</Link>
|
|
</div>
|
|
<div className="dnt-sidebar dnt-methods">
|
|
<button className={`dnt-button-2 tablink${active === 'Stripe' ? ' dnt-selected' : ''}`} onClick={() => setActive('Stripe')}>
|
|
<img src={`${LOGOS}/stripe-p-logo.svg`} alt="Stripe" title="Stripe" /> Stripe
|
|
</button>
|
|
<button className={`dnt-button-2 tablink${active === 'SumUp' ? ' dnt-selected' : ''}`} onClick={() => setActive('SumUp')}>
|
|
<img src={`${LOGOS}/sumup-p-logo.svg`} alt="SumUp" title="SumUp" /> SumUp
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
|
|
<div className="dnt-tabs">
|
|
{active === 'Info' && (
|
|
<div className="box-content dnt-tab dnt-animate">
|
|
<div className="body-box-content">
|
|
<span>¿Qué son los PD?</span>
|
|
<p>Ofrecemos a nuestros usuarios la oportunidad de obtener niveles que les brindan beneficios exclusivos dentro de nuestra comunidad en línea. Estos beneficios incluyen acceso a herramientas especiales, contenido exclusivo y mejoras significativas para su experiencia en nuestro sitio web. Al realizar una compra, nuestros usuarios reciben PD, una unidad de reconocimiento interna que refleja su compromiso y progreso en nuestra plataforma. Los PD les permiten alcanzar nuevos niveles y desbloquear recompensas exclusivas. Cabe destacar que estos PD son una forma única de valorar y premiar la participación activa de nuestros usuarios en nuestra comunidad.</p>
|
|
<br />
|
|
<hr />
|
|
<br />
|
|
<span>¿Cuáles son los niveles disponibles?</span>
|
|
{!showRanks ? (
|
|
<p id="rank-div-show" onClick={() => setShowRanks(true)}>Mostrar</p>
|
|
) : (
|
|
<p id="rank-div-hide" style={{ display: 'block' }} onClick={() => setShowRanks(false)}>Ocultar</p>
|
|
)}
|
|
{showRanks && (
|
|
<div className="rank-div" id="rank-div" style={{ display: 'block' }}>
|
|
<table className="rank-table">
|
|
<tbody>
|
|
{RANK_ROWS.map(([file, nivel, desde]) => (
|
|
<tr key={file}>
|
|
<td><img src={`${RANKS}/${file}.svg`} alt={nivel} title={nivel} width="24px" /></td>
|
|
<td>{nivel}</td>
|
|
<td className="second-brown">{desde}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
<br />
|
|
<hr />
|
|
<br />
|
|
<span>¿Cuáles son los métodos de compra de PD?</span>
|
|
<p>Los métodos de compra disponibles actualmente son:</p>
|
|
<p>- <img className="pay-inline-logo" src={`${LOGOS}/stripe-p-logo.svg`} alt="Stripe" /> Stripe (tarjeta de crédito/débito, para todos los países).</p>
|
|
<p>- <img className="pay-inline-logo" src={`${LOGOS}/sumup-p-logo.svg`} alt="SumUp" /> SumUp (tarjeta de crédito/débito).</p>
|
|
<br />
|
|
<hr />
|
|
<br />
|
|
<span>¿Cuántos PD se reciben?</span>
|
|
<p>Por cada {sym}1 recibes 100 PD. La cantidad final se indica antes de confirmar el pago.</p>
|
|
<br />
|
|
<hr />
|
|
<br />
|
|
<span>¿Tienes dudas o problemas con una compra?</span>
|
|
<p>No realices una compra hasta estar completamente seguro de que has leído esta información y sabes cómo es el proceso que vayas a escoger.</p>
|
|
<p>Si a pesar de leer este instructivo aún tienes dudas, el equipo de {realm} podrá asesorarte en cualquier momento. Puedes colocar un ticket en el servidor, o contactarnos mediante nuestra plataforma de Discord.</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{active === 'Stripe' && <StripeTab realm={realm} sym={sym} />}
|
|
{active === 'SumUp' && <SumUpTab realm={realm} sym={sym} />}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
/* --------------------------- Lógica de pago común --------------------------- */
|
|
function checkoutError(error?: string): string {
|
|
switch (error) {
|
|
case 'notConfigured':
|
|
return 'Este método de pago aún no está disponible. Por favor, utiliza otro método o inténtalo más tarde.'
|
|
case 'invalidAmount':
|
|
return 'La cantidad debe ser un número entero entre 1 y 200.'
|
|
case 'notAuthenticated':
|
|
return 'Tu sesión ha expirado. Inicia sesión de nuevo.'
|
|
default:
|
|
return 'No se pudo iniciar el pago. Inténtalo de nuevo.'
|
|
}
|
|
}
|
|
|
|
function usePayment(provider: 'stripe' | 'sumup') {
|
|
const [amount, setAmount] = useState('')
|
|
const [accepted, setAccepted] = useState(false)
|
|
const [busy, setBusy] = useState(false)
|
|
const [err, setErr] = useState<string | null>(null)
|
|
|
|
async function pay(e: React.FormEvent<HTMLFormElement>, sym: string) {
|
|
e.preventDefault()
|
|
if (!accepted) {
|
|
alert('Debes aceptar los Términos y Condiciones y la Política de Reembolso')
|
|
return
|
|
}
|
|
const n = Number(amount)
|
|
if (!Number.isInteger(n) || n < 1 || n > 200) {
|
|
setErr(checkoutError('invalidAmount'))
|
|
return
|
|
}
|
|
if (!window.confirm(`Vas a adquirir ${n * 100} PD por ${sym}${n}.\n¿Deseas continuar al pago?`)) return
|
|
setBusy(true)
|
|
setErr(null)
|
|
try {
|
|
const res = await fetch('/api/dpoints/checkout', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify({ provider, amount: n }),
|
|
})
|
|
const d: { success?: boolean; url?: string; error?: string } = await res.json()
|
|
if (d.success && d.url) {
|
|
window.location.href = d.url
|
|
return
|
|
}
|
|
setErr(checkoutError(d.error))
|
|
setBusy(false)
|
|
} catch {
|
|
setErr(checkoutError())
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return { amount, setAmount, accepted, setAccepted, busy, err, pay }
|
|
}
|
|
|
|
/* -------------------------------- Formulario -------------------------------- */
|
|
function AmountForm({
|
|
provider,
|
|
sym,
|
|
buttonLabel,
|
|
}: {
|
|
provider: 'stripe' | 'sumup'
|
|
sym: string
|
|
buttonLabel: string
|
|
}) {
|
|
const st = usePayment(provider)
|
|
const points = Number(st.amount) > 0 ? Number(st.amount) * 100 : 0
|
|
return (
|
|
<>
|
|
<p className="yellow-info centered">{sym}1 = 100 PD</p>
|
|
<p className="centered second-brown">Valor mínimo: {sym}1 · Valor máximo por transacción: {sym}200</p>
|
|
<br />
|
|
<fieldset>
|
|
<div className="separate2">
|
|
<p className="centered red-info2">¡Importante!</p>
|
|
<p className="centered">Introduce sólo valores enteros (sin decimales).</p>
|
|
<p className="centered">Ejemplo: para 200 PD escribe 2.</p>
|
|
</div>
|
|
</fieldset>
|
|
<br />
|
|
<p className="centered">Cantidad en {sym === '$' ? 'USD' : 'EUR'} a adquirir</p>
|
|
<form className="centered" onSubmit={(e) => st.pay(e, sym)}>
|
|
<input
|
|
type="number"
|
|
placeholder={`Cantidad en ${sym === '$' ? 'USD' : 'EUR'}`}
|
|
min="1"
|
|
max="200"
|
|
step="1"
|
|
value={st.amount}
|
|
onChange={(e) => st.setAmount(e.target.value)}
|
|
required
|
|
/>{' '}
|
|
{sym === '$' ? 'USD' : 'EUR'}
|
|
{points > 0 && <p className="centered green-info2">Recibirás {points} PD</p>}
|
|
<br /><br />
|
|
<input
|
|
type="checkbox"
|
|
id={`accept-${provider}`}
|
|
className="terms-check"
|
|
checked={st.accepted}
|
|
onChange={(e) => st.setAccepted(e.target.checked)}
|
|
required
|
|
/>
|
|
<label htmlFor={`accept-${provider}`}> Acepto los <Link href="/terms-and-conditions" target="_blank">Términos y Condiciones</Link> y la <Link href="/refund-policy" target="_blank">Política de Reembolso</Link></label>
|
|
<br /><br />
|
|
{st.err && <p className="red-form-response">{st.err}</p>}
|
|
<button type="submit" className="dnt-button" disabled={!st.accepted || st.busy}>
|
|
{st.busy ? 'Redirigiendo…' : buttonLabel}
|
|
</button>
|
|
</form>
|
|
</>
|
|
)
|
|
}
|
|
|
|
/* ---------------------------------- Stripe ---------------------------------- */
|
|
function StripeTab({ realm, sym }: { realm: string; sym: string }) {
|
|
return (
|
|
<div className="box-content dnt-tab dnt-animate">
|
|
<div className="body-box-content">
|
|
<span>¿Qué es Stripe?</span><img className="pp-icon" src={`${LOGOS}/stripe-logo.svg`} alt="Stripe" />
|
|
<p>Stripe es una plataforma de pagos en línea segura que procesa tarjetas de crédito y débito de todo el mundo. Tus datos de pago se gestionan directamente en Stripe; {realm} nunca los almacena.<br />Más información sobre Stripe <a href="https://stripe.com/es" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
|
|
<br />
|
|
<hr />
|
|
<br />
|
|
<span>¿Cómo adquirir PD a través de Stripe?</span>
|
|
<p>Al ser un sistema auto-gestionado, las adquisiciones son automáticas y en cuestión de minutos tras completar el pago recibirás los PD en tu cuenta.</p>
|
|
<br />
|
|
<hr />
|
|
<br />
|
|
<p>- Introduce en el campo de más abajo la cantidad que deseas adquirir.</p>
|
|
<p>- Al presionar <span>ADQUIRIR PD</span>, serás redirigido a la pasarela segura de Stripe para completar el pago con tu tarjeta.</p>
|
|
<p>- Una vez que Stripe valide tu pago, tendrás los PD en tu cuenta de forma automática.</p>
|
|
<br />
|
|
<p>Recuerda que la cantidad sólo acepta números enteros y el mínimo posible es {sym}1.</p>
|
|
<p>Ejemplos de valor incorrecto: <span className="red-info2">{sym}5,90 | {sym}22,30 | {sym}53,10</span></p>
|
|
<p>Ejemplos de valor correcto: <span className="green-info2">{sym}6 | {sym}22 | {sym}53</span></p>
|
|
<br /><br /><br />
|
|
<AmountForm provider="stripe" sym={sym} buttonLabel="ADQUIRIR PD" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/* ---------------------------------- SumUp ----------------------------------- */
|
|
function SumUpTab({ realm, sym }: { realm: string; sym: string }) {
|
|
return (
|
|
<div className="box-content dnt-tab dnt-animate">
|
|
<div className="body-box-content">
|
|
<span>¿Qué es SumUp?</span><img className="pp-icon" src={`${LOGOS}/sumup-logo.svg`} alt="SumUp" />
|
|
<p>SumUp es una plataforma de pagos europea que permite pagar de forma rápida y segura con tarjeta de crédito o débito. Tus datos de pago se gestionan directamente en SumUp; {realm} nunca los almacena.<br />Más información sobre SumUp <a href="https://sumup.com/es-es/" target="_blank" rel="noopener noreferrer">aquí</a>.</p>
|
|
<br />
|
|
<hr />
|
|
<br />
|
|
<span>¿Cómo adquirir PD a través de SumUp?</span>
|
|
<p>Al ser un sistema auto-gestionado, las adquisiciones son automáticas y tras completar el pago recibirás los PD en tu cuenta.</p>
|
|
<br />
|
|
<hr />
|
|
<br />
|
|
<p>- Introduce en el campo de más abajo la cantidad que deseas adquirir.</p>
|
|
<p>- Al presionar <span>ADQUIRIR PD</span>, serás redirigido a la pasarela segura de SumUp para completar el pago con tu tarjeta.</p>
|
|
<p>- Una vez que SumUp valide tu pago, tendrás los PD en tu cuenta de forma automática.</p>
|
|
<br />
|
|
<p>Recuerda que la cantidad sólo acepta números enteros y el mínimo posible es {sym}1.</p>
|
|
<p>Ejemplos de valor incorrecto: <span className="red-info2">{sym}5,90 | {sym}22,30 | {sym}53,10</span></p>
|
|
<p>Ejemplos de valor correcto: <span className="green-info2">{sym}6 | {sym}22 | {sym}53</span></p>
|
|
<br /><br /><br />
|
|
<AmountForm provider="sumup" sym={sym} buttonLabel="ADQUIRIR PD" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|