player-reg: Add razorpay payment for player fee

india-ultimate · Sep 15, 2024 · 85b2374 · 85b2374
1 parent 1928ea7
commit 85b2374
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 40 deletions.
diff --git a/.gitignore b/.gitignore
@@ -167,3 +167,5 @@ cython_debug/
 /.envrc
 /secrets
 /cron/
+/.vscode
+/.DS_STORE
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
 static/bundle.js
+/.DS_STORE
diff --git a/frontend/src/components/RazorpayPayment.js b/frontend/src/components/RazorpayPayment.js
@@ -24,7 +24,9 @@ const RazorpayPayment = props => {
     const event_id = props.event?.id;
     const team_id = props.team?.id;
     const data = team_id
-      ? { team_id, event_id } // Team Registration
+      ? player_ids
+        ? { team_id, event_id, player_ids } // Player Registration
+        : { team_id, event_id } // Team Registration
       : props.annual
       ? player_ids
         ? { player_ids, season_id } // Group Membership

diff --git a/frontend/src/components/roster/AddToRoster.js b/frontend/src/components/roster/AddToRoster.js
@@ -11,7 +11,6 @@ import {
 } from "@tanstack/solid-table";
 import clsx from "clsx";
 import { Icon } from "solid-heroicons";
-import { handRaised } from "solid-heroicons/outline";
 import {
   arrowRight,
   checkCircle,
@@ -24,13 +23,13 @@ import { createEffect, createSignal, For, Show } from "solid-js";
 import { ChevronLeft, ChevronRight, Spinner } from "../../icons";
 import {
   addToRoster,
-  fetchUser,
   searchSeriesRosterPlayers
 } from "../../queries";
 import Info from "../alerts/Info";
 import Modal from "../Modal";
 import ErrorPopover from "../popover/ErrorPopover";
 import SuccessPopover from "../popover/SuccessPopover";
+import RazorpayPayment from "../RazorpayPayment";
 
 const AddToRoster = props => {
   let modalRef;
@@ -39,7 +38,6 @@ const AddToRoster = props => {
   const [error, setError] = createSignal({});
 
   const queryClient = useQueryClient();
-  const userQuery = createQuery(() => ["me"], fetchUser);
   const addToRosterMutation = createMutation({
     mutationFn: addToRoster,
     onSuccess: () =>
@@ -70,30 +68,6 @@ const AddToRoster = props => {
 
   return (
     <div class="mt-4 flex justify-center gap-2">
-      <Show
-        when={
-          !props.roster
-            ?.map(reg => reg.player.id)
-            .includes(userQuery.data?.player?.id)
-        }
-      >
-        <button
-          onClick={() => {
-            addToRosterMutation.mutate({
-              event_id: props.eventId,
-              team_id: props.teamId,
-              body: {
-                player_id: userQuery.data?.player?.id
-              }
-            });
-          }}
-          type="button"
-          class="mb-2 me-2 inline-flex w-full items-center justify-center gap-2 rounded-lg border border-blue-700 px-2 py-2.5 text-center text-sm font-medium text-blue-700 hover:bg-blue-800 hover:text-white focus:outline-none dark:border-blue-500  dark:text-blue-500 dark:hover:bg-blue-500 dark:hover:text-white dark:focus:ring-blue-800 md:px-5"
-        >
-          <Icon path={handRaised} style={{ width: "24px" }} />
-          <span class="w-3/4">Add myself</span>
-        </button>
-      </Show>
       <button
         onClick={() => modalRef.showModal()}
         type="button"
@@ -114,6 +88,7 @@ const AddToRoster = props => {
           tournamentSlug={props.tournamentSlug}
           teamSlug={props.teamSlug}
           isPartOfSeries={props.isPartOfSeries}
+          playerFee={props.playerFee}
         />
       </Modal>
 
@@ -173,6 +148,7 @@ const AddPlayerRegistrationForm = componentProps => {
     pageSize: 5
   });
   const [status, setStatus] = createSignal();
+  const [selectedPlayers, setSelectedPlayers] = createSignal([]);
 
   const queryClient = useQueryClient();
   const addToRosterMutation = createMutation({
@@ -190,9 +166,19 @@ const AddPlayerRegistrationForm = componentProps => {
     }
   });
 
-  createEffect(() => {
-    console.log(componentProps.isPartOfSeries);
-  });
+  const handleAddToRoster = player => {
+    if (componentProps.playerFee > 0) {
+      setSelectedPlayers([...selectedPlayers(), player]);
+    } else {
+      addToRosterMutation.mutate({
+        event_id: componentProps.eventId,
+        team_id: componentProps.teamId,
+        body: {
+          player_id: player.id
+        }
+      });
+    }
+  };
 
   const dataQuery = createQuery(
     () => [
@@ -248,15 +234,7 @@ const AddPlayerRegistrationForm = componentProps => {
           fallback={<span>Added</span>}
         >
           <button
-            onClick={() =>
-              addToRosterMutation.mutate({
-                event_id: componentProps.eventId,
-                team_id: componentProps.teamId,
-                body: {
-                  player_id: props.getValue()
-                }
-              })
-            }
+            onClick={() => handleAddToRoster(props.row.original)}
             class="mb-2 me-2 rounded-lg border border-blue-700 px-5 py-1.5 text-center text-sm font-medium text-blue-700 hover:bg-blue-800 hover:text-white focus:outline-none focus:ring-4 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500 dark:hover:text-white dark:focus:ring-blue-800"
           >
             Add
@@ -288,6 +266,57 @@ const AddPlayerRegistrationForm = componentProps => {
 
   return (
     <div class="h-screen w-full rounded-lg p-2">
+      <Show when={componentProps.playerFee > 0}>
+        <div class="mb-4 rounded-lg bg-blue-50 p-4 text-sm text-blue-800 dark:bg-gray-800 dark:text-blue-400">
+          <h1 class="text-lg font-bold">Player Registrations</h1>
+          <Show
+            when={selectedPlayers().length > 0}
+            fallback={
+              <h2 class="italic">
+                Please add players from the Add to roster section below
+              </h2>
+            }
+          >
+            <h2 class="">
+              Paying{" "}
+              <strong>
+                Rs.{" "}
+                {(componentProps.playerFee * selectedPlayers().length) / 100}
+              </strong>{" "}
+              for{" "}
+              {selectedPlayers()
+                .map(p => p.full_name)
+                .join() || "..."}
+            </h2>
+            <button
+              onClick={() => setSelectedPlayers([])}
+              class="rounded-lg text-sm text-red-500 underline"
+            >
+              Reset
+            </button>
+          </Show>
+
+          <RazorpayPayment
+            disabled={selectedPlayers().length === 0}
+            event={{ id: componentProps.eventId }}
+            team={{ id: componentProps.teamId }}
+            player_ids={selectedPlayers().map(p => p.id)}
+            amount={componentProps.playerFee * selectedPlayers().length}
+            setStatus={msg => {
+              return msg;
+            }}
+            successCallback={() => {
+              queryClient.invalidateQueries({
+                queryKey: ["tournament-roster"]
+              });
+              setStatus("Paid successfully!");
+            }}
+            failureCallback={msg => {
+              setStatus(msg);
+            }}
+          />
+        </div>
+      </Show>
       <h2 class="w-full text-left text-lg font-bold text-blue-600">
         Add Players to Roster
       </h2>
@@ -440,6 +469,7 @@ const AddPlayerRegistrationForm = componentProps => {
           </button>
         </div>
       </Show>
+
       <p class="my-2">{status()}</p>
     </div>
   );

diff --git a/frontend/src/components/roster/View.js b/frontend/src/components/roster/View.js
@@ -284,6 +284,7 @@ const Roster = () => {
                   isPartOfSeries={
                     tournamentQuery.data?.event?.series ? true : false
                   }
+                  playerFee={tournamentQuery.data?.event?.player_fee || 0}
                 />
               </Match>
             </Switch>