Add payment for tournaments

src/models/tournament.ts

@@ -20,6 +20,7 @@ interface BaseTournament {
   game: Game | Game['id'];
   manager_online_product: number;
   player_online_product: number;
+  substitute_online_product: number;
   maxTeam: number;
   validated_teams: number;
   description: string;

src/stores/tournament.store.ts

@@ -212,6 +212,41 @@ export const useTournamentStore = defineStore('tournament', () => {
     return res.data;
   }
 
+  async function payRegistration(
+    tournament: Tournament,
+    role: string,
+  ) {
+    await get_csrf();
+
+    let product_id;
+    if (role === 'player') {
+      product_id = tournament.player_online_product;
+    } else if (role === 'manager') {
+      product_id = tournament.manager_online_product;
+    } else if (role === 'substitute') {
+      product_id = tournament.substitute_online_product;
+    }
+    if (!product_id) return;
+
+    const data = {
+      products: [product_id],
+    } as Record<string, unknown>;
+
+    const response = await axios.post<{
+      redirect_url: string;
+    }>('payment/pay/', data, {
+      withCredentials: true,
+      headers: {
+        'X-CSRFToken': csrf.value,
+      },
+    });
+    await fetchTournamentFull(tournament.id);
+
+    const { redirect_url } = response.data;
+
+    window.location.href = redirect_url;
+  }
+
   function $reset() {
     eventsList.value = {};
     tournamentsList.value = {};
@@ -242,6 +277,7 @@ export const useTournamentStore = defineStore('tournament', () => {
     fetchTournamentsFull,
     registerTeam,
     registerPlayerOrManager,
+    payRegistration,
     $reset,
     groupBy,
   };

src/views/Me.vue

@@ -10,11 +10,15 @@ import {
 import placeholder from '@/assets/images/logo_home.png';
 import FormField from '@/components/FormField.vue';
 import Modal from '@/components/Modal.vue';
+import type { Tournament } from '@/models/tournament';
+import { useTournamentStore } from '@/stores/tournament.store';
 import { useUserStore } from '@/stores/user.store';
 
 const userStore = useUserStore();
+const tournamentStore = useTournamentStore();
 const { user, role, inscriptions } = storeToRefs(userStore);
 const { fetch_user_inscription_full, patch_user } = userStore;
+const { payRegistration } = tournamentStore;
 
 onMounted(async () => {
   await fetch_user_inscription_full();
@@ -226,11 +230,12 @@ const editField = (field: string) => {
               <div class="m-1 flex h-8 flex-1 flex-col justify-center">
                 <div>
                   <a
-                    :class="{ [`bg-red-600`]: inscriptions.unpaid[inscription[1].team.id], [`bg-green-600`]: !inscriptions.unpaid[inscription[1].team.id] }"
+                    :class="{ [`bg-red-600`]: inscriptions.unpaid[inscription[1].id], [`bg-green-600`]: !inscriptions.unpaid[inscription[1].id] }"
                     class="center rounded p-2 font-bold text-white transition duration-150 ease-in-out hover:ring hover:ring-pink-500"
                     :href="`/tournament/${inscription[1].team.tournament.id }?s=teams`"
+                    @click.prevent="inscriptions.unpaid[inscription[1].id] ? payRegistration(inscription[1].team.tournament as unknown as Tournament, inscription[0]) : ''"
                   >
-                    {{ inscriptions.unpaid[inscription[1].team.id] ? 'Terminer l\'inscription' : (inscription[1].team.players[0] === user.id || inscription[0] === "manager") ? 'Gérer l\'équipe' : 'Voir l\'équipe' }}
+                    {{ inscriptions.unpaid[inscription[1].id] ? 'Terminer l\'inscription' : (inscription[1].team.players[0] === user.id || inscription[0] === "manager") ? 'Gérer l\'équipe' : 'Voir l\'équipe' }}
                   </a>
                 </div>
               </div>

src/views/TournamentRegister.vue

@@ -23,7 +23,9 @@ const { user } = useUserStore();
 
 const tournamentStore = useTournamentStore();
 
-const { registerTeam, registerPlayerOrManager, getTournamentFull } = tournamentStore;
+const {
+  registerTeam, registerPlayerOrManager, getTournamentFull, payRegistration,
+} = tournamentStore;
 const { tournamentsList } = storeToRefs(tournamentStore);
 const tournament = computed<Tournament | undefined>(() => tournamentsList.value[props.id]);
 // const tournament = ref<Tournament>();
@@ -101,7 +103,7 @@ const register_player = async () => {
 };
 
 const payment = async () => {
-  /* */
+  await payRegistration(tournament.value as Tournament, register_form.role);
 };
 
 const generate_password = () => {