fix: platform onboarding (calcom#23581)

* fix: platform onboarding

* chore: better function naming

* fix: implement PR feedback

Author: Ryukemeister

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,
   };
 };

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]);
+}

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) {