Add match result webhook configuration to profile page

src/appConstants.ts

@@ -356,7 +356,8 @@ export const URL_END_POINT = {
   GET_LAST_ACTIVE_GAME: 'APIs/GetLastActiveGame.php',
   SYNC_METAFY_SUBSCRIBERS: 'APIs/SyncMetafySubscribers.php',
   GET_APP_INFO: 'AccountFiles/GetAppInfoAPI.php',
-  GENERATE_AUTH_TOKEN: 'AccountFiles/GenerateAuthTokenAPI.php'
+  GENERATE_AUTH_TOKEN: 'AccountFiles/GenerateAuthTokenAPI.php',
+  MATCH_RESULT_WEBHOOK: 'APIs/MatchResultWebhookAPI.php'
 };
 
 export const GAME_VISIBILITY = {

src/features/api/apiSlice.ts

@@ -59,6 +59,10 @@ import {
   UpdateFavoriteDeckRequest,
   UpdateFavoriteDeckResponse
 } from 'interface/API/UpdateFavoriteDeck.php';
+import {
+  MatchResultWebhookRequest,
+  MatchResultWebhookResponse
+} from 'interface/API/MatchResultWebhookAPI.php';
 import { PatreonLoginResponse } from 'routes/user/profile/linkpatreon/linkPatreon';
 import { UserProfileAPIResponse } from 'interface/API/UserProfileAPI.php';
 import {
@@ -449,6 +453,19 @@ export const apiSlice = createApi({
         };
       }
     }),
+    setMatchResultWebhook: builder.mutation<
+      MatchResultWebhookResponse,
+      MatchResultWebhookRequest
+    >({
+      query: (body: MatchResultWebhookRequest) => {
+        return {
+          url: URL_END_POINT.MATCH_RESULT_WEBHOOK,
+          method: 'POST',
+          body: body,
+          responseHandler: parseResponse
+        };
+      }
+    }),
     deleteAccount: builder.mutation<
       DeleteAccountAPIResponse,
       DeleteAccountAPIRequest
@@ -1113,6 +1130,7 @@ export const {
   useDeleteDeckMutation,
   useAddFavoriteDeckMutation,
   useUpdateFavoriteDeckMutation,
+  useSetMatchResultWebhookMutation,
   useDeleteAccountMutation,
   useLoginMutation,
   useLoginWithCookieQuery,

src/interface/API/MatchResultWebhookAPI.php.ts

@@ -0,0 +1,8 @@
+export interface MatchResultWebhookRequest {
+  webhookUrl: string;
+}
+
+export interface MatchResultWebhookResponse {
+  success: boolean;
+  message: string;
+}

src/interface/API/UserProfileAPI.php.ts

@@ -10,4 +10,5 @@ export interface UserProfileAPIResponse {
   isMetafyLinked?: boolean;
   isMetafySupporter?: boolean;
   metafyCommunities?: MetafyCommunity[];
+  matchResultWebhookUrl?: string;
 }

src/routes/user/profile/index.tsx

@@ -5,7 +5,8 @@ import {
   useGetFavoriteDecksQuery,
   useGetUserProfileQuery,
   useAddFavoriteDeckMutation,
-  useUpdateFavoriteDeckMutation
+  useUpdateFavoriteDeckMutation,
+  useSetMatchResultWebhookMutation
 } from 'features/api/apiSlice';
 import { DeleteDeckAPIResponse } from 'interface/API/DeleteDeckAPI.php';
 import { DeleteAccountAPIResponse } from 'interface/API/DeleteAccountAPI.php';
@@ -56,6 +57,15 @@ export const ProfilePage = () => {
   const [addFavoriteDeck] = useAddFavoriteDeckMutation();
   const [updateFavoriteDeck] = useUpdateFavoriteDeckMutation();
   const [deleteAccount, { isLoading: isDeleting }] = useDeleteAccountMutation();
+  const [webhookInput, setWebhookInput] = useState('');
+  const [isSavingWebhook, setIsSavingWebhook] = useState(false);
+  const [setMatchResultWebhook] = useSetMatchResultWebhookMutation();
+
+  useEffect(() => {
+    if (profileData?.matchResultWebhookUrl !== undefined) {
+      setWebhookInput(profileData.matchResultWebhookUrl ?? '');
+    }
+  }, [profileData?.matchResultWebhookUrl]);
 
   const handleDeleteDeckMessage = (resp: DeleteDeckAPIResponse): string => {
     if (resp.message === 'Deck deleted successfully.') {
@@ -65,6 +75,26 @@ export const ProfilePage = () => {
     }
   };
 
+  const handleSaveWebhook = async () => {
+    setIsSavingWebhook(true);
+    try {
+      const resp = await setMatchResultWebhook({
+        webhookUrl: webhookInput.trim()
+      }).unwrap();
+      if (resp.success) {
+        toast.success(resp.message, { position: 'top-center' });
+      } else {
+        toast.error(resp.message, { position: 'top-center' });
+      }
+    } catch {
+      toast.error('Failed to save webhook. Please try again.', {
+        position: 'top-center'
+      });
+    } finally {
+      setIsSavingWebhook(false);
+    }
+  };
+
   const handleDeleteDeck = async (deckLink: string) => {
     try {
       const deleteDeckPromise = deleteDeck({ deckLink }).unwrap();
@@ -347,6 +377,34 @@ export const ProfilePage = () => {
                     )}
                   </div>
                 )}
+
+                {/* Match Result Webhook */}
+                {!profileIsLoading && (
+                  <div className={styles.webhookSection}>
+                    <h3>Match Result Webhook</h3>
+                    <p>
+                      Receive your match results at a custom URL after each
+                      game. Must be a public https:// address.
+                    </p>
+                    <div className={styles.webhookInputRow}>
+                      <input
+                        type="url"
+                        placeholder="https://your-webhook.example.com/results"
+                        value={webhookInput}
+                        onChange={(e) => setWebhookInput(e.target.value)}
+                        disabled={isSavingWebhook}
+                        className={styles.addDeckInput}
+                      />
+                      <button
+                        className={styles.addDeckButton}
+                        onClick={handleSaveWebhook}
+                        disabled={isSavingWebhook}
+                      >
+                        {isSavingWebhook ? 'Saving...' : 'Save'}
+                      </button>
+                    </div>
+                  </div>
+                )}
               </div>
 
               <FriendsList className={styles.friendsSection} />

src/routes/user/profile/profile.module.css

@@ -414,6 +414,40 @@ td {
   border-color: rgba(212, 175, 55, 0.5);
 }
 
+/* Match Result Webhook Section */
+.webhookSection {
+  margin: 1rem 0;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.webhookSection h3 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 1.3em;
+}
+
+.webhookSection p {
+  margin: 0 0 0.75rem;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.9em;
+}
+
+.webhookInputRow {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+}
+
+@media (max-width: 575px) {
+  .webhookInputRow {
+    flex-direction: column;
+  }
+}
+
 .metafyToggleButton {
   padding: 0.5rem 1rem;
   margin: 1rem 0;