From f5bb734441aa3585364d87264b16fb7798739359 Mon Sep 17 00:00:00 2001
From: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
Date: Tue, 9 Sep 2025 00:34:33 +0530
Subject: [PATCH] fix: platform onboarding (#23581)

* fix: platform onboarding

* chore: better function naming

* fix: implement PR feedback
---
 .../platform/hooks/useGetUserAttributes.ts    | 17 +++++++---
 .../billing/useExternalRedirectHandler.ts     | 12 +++++++
 .../settings/platform/platform-view.tsx       | 34 ++++++++++++++++---
 3 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 apps/web/lib/hooks/settings/platform/billing/useExternalRedirectHandler.ts

diff --git a/apps/web/components/settings/platform/hooks/useGetUserAttributes.ts b/apps/web/components/settings/platform/hooks/useGetUserAttributes.ts
index 34a6d468a6..7110c7577b 100644
--- a/apps/web/components/settings/platform/hooks/useGetUserAttributes.ts
+++ b/apps/web/components/settings/platform/hooks/useGetUserAttributes.ts
@@ -3,11 +3,16 @@ import { useCheckTeamBilling } from "@calcom/web/lib/hooks/settings/platform/bil
 import { usePlatformMe } from "./usePlatformMe";
 
 export const useGetUserAttributes = () => {
-  const { data: platformUser, isLoading: isPlatformUserLoading } = usePlatformMe();
-  const { data: userBillingData, isFetching: isUserBillingDataLoading } = useCheckTeamBilling(
-    platformUser?.organizationId,
-    platformUser?.organization?.isPlatform ?? false
-  );
+  const {
+    data: platformUser,
+    isLoading: isPlatformUserLoading,
+    refetch: refetchPlatformUser,
+  } = usePlatformMe();
+  const {
+    data: userBillingData,
+    isFetching: isUserBillingDataLoading,
+    refetch: refetchTeamBilling,
+  } = useCheckTeamBilling(platformUser?.organizationId, platformUser?.organization?.isPlatform ?? false);
   const isPlatformUser = platformUser?.organization?.isPlatform ?? false;
   const isPaidUser = userBillingData?.valid;
   const userOrgId = platformUser?.organizationId;
@@ -19,5 +24,7 @@ export const useGetUserAttributes = () => {
     isPaidUser,
     userBillingData,
     userOrgId,
+    refetchTeamBilling,
+    refetchPlatformUser,
   };
 };
diff --git a/apps/web/lib/hooks/settings/platform/billing/useExternalRedirectHandler.ts b/apps/web/lib/hooks/settings/platform/billing/useExternalRedirectHandler.ts
new file mode 100644
index 0000000000..a190e91619
--- /dev/null
+++ b/apps/web/lib/hooks/settings/platform/billing/useExternalRedirectHandler.ts
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+
+export function useExternalRedirectHandler(callback: (referrer: string) => void) {
+  useEffect(() => {
+    const referrer = document.referrer;
+    const isExternal = referrer && !referrer.includes(window.location.hostname);
+
+    if (isExternal) {
+      callback(referrer);
+    }
+  }, [callback]);
+}
diff --git a/apps/web/modules/settings/platform/platform-view.tsx b/apps/web/modules/settings/platform/platform-view.tsx
index aad541ac17..42702ad14d 100644
--- a/apps/web/modules/settings/platform/platform-view.tsx
+++ b/apps/web/modules/settings/platform/platform-view.tsx
@@ -1,12 +1,14 @@
 "use client";
 
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { useState, useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { useState, useEffect, useCallback } from "react";
 
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { showToast } from "@calcom/ui/components/toast";
 
+import { useExternalRedirectHandler } from "@lib/hooks/settings/platform/billing/useExternalRedirectHandler";
 import { useDeleteOAuthClient } from "@lib/hooks/settings/platform/oauth-clients/useDeleteOAuthClient";
 import { useOAuthClients } from "@lib/hooks/settings/platform/oauth-clients/useOAuthClients";
 
@@ -20,13 +22,22 @@ const queryClient = new QueryClient();
 
 export default function Platform() {
   const { t } = useLocale();
-  const [initialClientId, setInitialClientId] = useState("");
-  const [initialClientName, setInitialClientName] = useState("");
+  const [_initialClientId, setInitialClientId] = useState("");
+  const [_initialClientName, setInitialClientName] = useState("");
+  const pathname = usePathname();
 
   const { data, isLoading: isOAuthClientLoading, refetch: refetchClients } = useOAuthClients();
 
-  const { isUserLoading, isUserBillingDataLoading, isPlatformUser, isPaidUser, userBillingData, userOrgId } =
-    useGetUserAttributes();
+  const {
+    isUserLoading,
+    isUserBillingDataLoading,
+    isPlatformUser,
+    isPaidUser,
+    userBillingData,
+    userOrgId,
+    refetchTeamBilling,
+    refetchPlatformUser,
+  } = useGetUserAttributes();
 
   const { mutateAsync, isPending: isDeleting } = useDeleteOAuthClient({
     onSuccess: () => {
@@ -39,11 +50,24 @@ export default function Platform() {
     await mutateAsync({ id: id });
   };
 
+  const refetchBillingState = useCallback(() => {
+    refetchTeamBilling();
+    refetchPlatformUser();
+  }, [refetchTeamBilling, refetchPlatformUser]);
+
   useEffect(() => {
     setInitialClientId(data[0]?.id);
     setInitialClientName(data[0]?.name);
   }, [data]);
 
+  useEffect(() => {
+    refetchBillingState();
+  }, [pathname, refetchTeamBilling, refetchPlatformUser, refetchBillingState]);
+
+  useExternalRedirectHandler(() => {
+    refetchBillingState();
+  });
+
   if (isUserLoading || isOAuthClientLoading) return <div className="m-5">{t("loading")}</div>;
 
   if (isUserBillingDataLoading && !userBillingData) {