From 823b8d0014440190e724aa8f7498dc7225cb1757 Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Sun, 12 Jul 2026 21:35:52 +0000
Subject: [PATCH] =?UTF-8?q?Fase=203:=20migra=204=20servicios=20de=20person?=
 =?UTF-8?q?aje=20m=C3=A1s=20a=20la=20isla=20reutilizable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

customize, change_race, change_faction y level_up comparten el patrón exacto de
rename (select 'character' + precio -> Stripe), así que reutilizan la isla
CharacterPurchaseForm / entry character_purchase cambiando solo los data-* (url,
label, clase de botón). Sin JS nuevo. Se eliminan los <script> jQuery y Stripe
inline de cada plantilla.

Verificado: check OK, las 4 páginas redirigen a login sin sesión y las plantillas
renderizan la isla correctamente.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 home/templates/partials/change_faction.html   | 25 +++++++---------
 home/templates/partials/change_race.html      | 30 +++++++------------
 .../partials/customize_character.html         | 30 +++++++------------
 home/templates/partials/level_up.html         | 25 +++++++---------
 4 files changed, 40 insertions(+), 70 deletions(-)

diff --git a/home/templates/partials/change_faction.html b/home/templates/partials/change_faction.html
index f8e5871..ce7da58 100644
--- a/home/templates/partials/change_faction.html
+++ b/home/templates/partials/change_faction.html
@@ -55,21 +55,16 @@
                                     <p>Por favor, asegúrate de haber escogido al personaje correcto ya que esta acción no es reversible una vez realizada.</p>
                                 </div>
                             </fieldset>
-							<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/change_faction_response.js"></script>
-							<script src="https://js.stripe.com/v3/"></script>
-                           <form action="" id="nw-change-faction-form" method="POST" accept-charset="utf-8">
-                                    <select name="character">
-										 <option value="" selected disabled>Seleccione un personaje</option>
-										{% for character in characters %}
-                                        <option class="priest big-font" value="{{ character }}">{{ character }}</option>
-										{% endfor %}
-                                    </select>
-                                    <br>
-                                    <button class="change-faction-button" type="submit" name="change-faction-button" data-id="ChangeFaction">Cambiar Facción por {{ price }} €</button>
-                                </form>
-                                <br>
-                                <hr>
-                                <center><div class="alert-message" id="change-race-response"></div></center>
+                            {% load django_vite %}
+                            <!-- Isla React (Vite): servicio de pago de personaje (genérico). -->
+                            <div id="character-purchase-app"
+                                 data-csrf="{{ csrf_token }}"
+                                 data-url="{% url 'change-faction-character' %}"
+                                 data-price="{{ price }}"
+                                 data-label="Cambiar Facción"
+                                 data-button-class="change-faction-button"></div>
+                            {{ characters|json_script:"character-purchase-data" }}
+                            {% vite_asset 'src/entries/character_purchase.tsx' %}
                                 <br>
                             </div>
                         </div>
diff --git a/home/templates/partials/change_race.html b/home/templates/partials/change_race.html
index a1024d5..1d21bb2 100644
--- a/home/templates/partials/change_race.html
+++ b/home/templates/partials/change_race.html
@@ -19,26 +19,16 @@
                                     <p>Por favor, asegúrate de haber escogido al personaje correcto ya que esta acción no es reversible una vez realizada.</p>
                                 </div>
                             </fieldset>
-							<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/change_race_response.js"></script>
-							<script src="https://js.stripe.com/v3/"></script>
-                              <form id="nw-change-race-form" div class="centered">
-                                <br>
-                                <br>
-                                <p>Escoge el personaje que quieres desbloquear</p>
-                                <br>
-                                <form action="" id="nw-change-race-form" method="POST" accept-charset="utf-8">
-                                    <select name="character">
-										 <option value="" selected disabled>Seleccione un personaje</option>
-										{% for character in characters %}
-                                        <option class="priest big-font" value="{{ character }}">{{ character }}</option>
-										{% endfor %}
-                                    </select>
-                                    <br>
-                                    <button class="change-race-button" type="submit" name="change-race-button" data-id="ChangeRace">Cambiar Raza por {{ price }} €</button>
-                                </form>
-                                <br>
-                                <hr>
-                                <center><div class="alert-message" id="change-race-response"></div></center>
+                            {% load django_vite %}
+                            <!-- Isla React (Vite): servicio de pago de personaje (genérico). -->
+                            <div id="character-purchase-app"
+                                 data-csrf="{{ csrf_token }}"
+                                 data-url="{% url 'change-race-character' %}"
+                                 data-price="{{ price }}"
+                                 data-label="Cambiar Raza"
+                                 data-button-class="change-race-button"></div>
+                            {{ characters|json_script:"character-purchase-data" }}
+                            {% vite_asset 'src/entries/character_purchase.tsx' %}
                                 <br>
                             </div>
                         </div>
diff --git a/home/templates/partials/customize_character.html b/home/templates/partials/customize_character.html
index 9a696d9..7916779 100644
--- a/home/templates/partials/customize_character.html
+++ b/home/templates/partials/customize_character.html
@@ -24,26 +24,16 @@
                                     <p>Por favor, asegúrate de haber escogido al personaje correcto ya que esta acción no es reversible una vez realizada.</p>
                                 </div>
                             </fieldset>
-							<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/customize_response.js"></script>
-							<script src="https://js.stripe.com/v3/"></script>
-                            <form id="nw-customize-form" div class="centered">
-                                <br>
-                                <br>
-                                <p>Escoge el personaje que quieres desbloquear</p>
-                                <br>
-                                <form action="" id="nw-customize-form" method="POST" accept-charset="utf-8">
-                                    <select name="character">
-										 <option value="" selected disabled>Seleccione un personaje</option>
-										{% for character in characters %}
-                                        <option class="priest big-font" value="{{ character }}">{{ character }}</option>
-										{% endfor %}
-                                    </select>
-                                    <br>
-                                    <button class="customize-button" type="submit" name="rename-button" data-id="Renombrar">Renombrar por {{ price }} €</button>
-                                </form>
-                                <br>
-                                <hr>
-                                <center><div class="alert-message" id="customize-response"></div></center>
+                            {% load django_vite %}
+                            <!-- Isla React (Vite): servicio de pago de personaje (genérico). -->
+                            <div id="character-purchase-app"
+                                 data-csrf="{{ csrf_token }}"
+                                 data-url="{% url 'customize-character' %}"
+                                 data-price="{{ price }}"
+                                 data-label="Personalizar"
+                                 data-button-class="customize-button"></div>
+                            {{ characters|json_script:"character-purchase-data" }}
+                            {% vite_asset 'src/entries/character_purchase.tsx' %}
                                 <br>
                             </div>
                         </div>
diff --git a/home/templates/partials/level_up.html b/home/templates/partials/level_up.html
index a893609..30471d7 100644
--- a/home/templates/partials/level_up.html
+++ b/home/templates/partials/level_up.html
@@ -20,21 +20,16 @@
                                 </div>
                             </fieldset>
 							<p>Selecciona el personaje que deseas subir al nivel 80:</p>
-							<script src="{{ URL_PRINCIPAL }}/static/nw-themes/nw-ryu/nw-js-handlers/level_up_response.js"></script>
-							<script src="https://js.stripe.com/v3/"></script>
-                            <form action="" id="nw-levelup-form" method="POST" accept-charset="utf-8">
-                                    <select name="character">
-										 <option value="" selected disabled>Seleccione un personaje</option>
-										{% for character in characters %}
-                                        <option class="priest big-font" value="{{ character }}">{{ character }}</option>
-										{% endfor %}
-                                    </select>
-                                    <br>
-                                    <button class="level-up-button" type="submit" name="level-up-button" data-id="LevelUp">Subir a nivel 80 por {{ price }} €</button>
-                                </form>
-                                <br>
-                                <hr>
-                                <center><div class="alert-message" id="levelup-response"></div></center>
+                            {% load django_vite %}
+                            <!-- Isla React (Vite): servicio de pago de personaje (genérico). -->
+                            <div id="character-purchase-app"
+                                 data-csrf="{{ csrf_token }}"
+                                 data-url="{% url 'level_up_character' %}"
+                                 data-price="{{ price }}"
+                                 data-label="Subir a nivel 80"
+                                 data-button-class="level-up-button"></div>
+                            {{ characters|json_script:"character-purchase-data" }}
+                            {% vite_asset 'src/entries/character_purchase.tsx' %}
                                 <br>
                             </div>
                         </div>