fix: correct route on app for transfer organization (#5641)

packages/services/api/src/modules/organization/providers/organization-manager.ts

@@ -721,7 +721,7 @@ export class OrganizationManager {
                 <mj-text>
                   ${member.user.displayName} wants to transfer the ownership of the <strong>${organization.name}</strong> organization.
                 </mj-text>
-                <mj-button href="https://app.graphql-hive.com/action/transfer/${organization.cleanId}/${code}">
+                <mj-button href="${mjml.raw(this.appBaseUrl)}/action/transfer/${organization.cleanId}/${code}">
                   Accept the transfer
                 </mj-button>
                 <mj-text align="center">

packages/web/app/src/pages/auth.tsx

@@ -3,7 +3,7 @@ import { SiGithub } from 'react-icons/si';
 import { useSessionContext } from 'supertokens-auth-react/recipe/session';
 import { HiveLogo } from '@/components/ui/icon';
 import { Meta } from '@/components/ui/meta';
-import { Outlet } from '@tanstack/react-router';
+import { Link, Outlet } from '@tanstack/react-router';
 
 function ExternalLink(props: { href: string; children: React.ReactNode }) {
   return (
@@ -33,10 +33,12 @@ export function AuthPage() {
             <div className="grid h-full min-h-[100vh] items-center justify-center md:grid-cols-2 lg:max-w-none lg:grid-cols-3 lg:px-0">
               <div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
                 <div className="absolute inset-0 bg-[#101014]" />
-                <div className="relative z-20 flex items-center text-lg font-medium">
-                  <HiveLogo animated={false} className="mr-2 size-6" />
-                  GraphQL Hive
-                </div>
+                <Link to="/">
+                  <div className="relative z-20 flex items-center text-lg font-medium">
+                    <HiveLogo animated={false} className="mr-2 size-6" />
+                    GraphQL Hive
+                  </div>
+                </Link>
                 <div className="relative flex h-full flex-row items-center justify-center">
                   <div className="max-w-xs md:max-w-none">
                     <h1 className="text-balance font-light text-white md:text-2xl/tight lg:text-3xl/tight">

packages/web/app/src/pages/organization-transfer.tsx

@@ -1,12 +1,14 @@
 import { useCallback } from 'react';
+import { LoaderCircleIcon, LogOutIcon } from 'lucide-react';
 import { useMutation, useQuery } from 'urql';
 import { Button } from '@/components/ui/button';
+import { DottedBackground } from '@/components/ui/dotted-background';
+import { HiveLogo } from '@/components/ui/icon';
 import { Meta } from '@/components/ui/meta';
-import { DataWrapper } from '@/components/v2/data-wrapper';
 import { graphql } from '@/gql';
 import { useNotifications } from '@/lib/hooks/use-notifications';
 import { cn } from '@/lib/utils';
-import { useRouter } from '@tanstack/react-router';
+import { Link, useRouter } from '@tanstack/react-router';
 
 const classes = {
   title: cn('sm:text-4xl text-3xl mb-4 font-medium text-white'),
@@ -105,17 +107,55 @@ export function OrganizationTransferPage(props: { organizationId: string; code:
   return (
     <>
       <Meta title="Organization Transfer" />
-      <DataWrapper query={query} organizationId={props.organizationId}>
-        {({ data }) => (
+      <DottedBackground className="min-h-[100vh]">
+        <div className="flex h-full grow items-center">
+          <Button
+            variant="outline"
+            onClick={() =>
+              void router.navigate({
+                to: '/logout',
+              })
+            }
+            className="absolute right-6 top-6"
+          >
+            <LogOutIcon className="mr-2 size-4" /> Sign out
+          </Button>
+          <Link to="/" className="absolute left-6 top-6">
+            <HiveLogo className="size-10" />
+          </Link>
           <div className="flex size-full flex-row items-center justify-center">
             <div className="flex w-full flex-col text-center md:w-2/3">
-              {data.organizationTransferRequest == null ? (
+              {query.stale || query.fetching ? (
+                <div>
+                  <LoaderCircleIcon className="mr-2 inline size-8 animate-spin" />
+                  Loading
+                </div>
+              ) : query.error ? (
+                <>
+                  <h1 className={classes.title}>Organization Transfer Error</h1>
+                  <p>{query.error.message}</p>
+
+                  <p className={classes.description}>
+                    Please make sure you are signed-in with the correct account for this
+                    organization.
+                  </p>
+
+                  <div className={classes.actions}>
+                    <Button size="lg" onClick={goBack}>
+                      Back to Hive
+                    </Button>
+                    <Button asChild size="lg">
+                      <Link to="/logout">Sign Out</Link>
+                    </Button>
+                  </div>
+                </>
+              ) : !query?.data?.organizationTransferRequest ? (
                 <>
                   <h1 className={classes.title}>Organization Transfer Error</h1>
                   <p className={classes.description}>Not found</p>
 
                   <div className={classes.actions}>
-                    <Button size="lg" variant="secondary" onClick={goBack}>
+                    <Button size="lg" onClick={goBack}>
                       Back to Hive
                     </Button>
                   </div>
@@ -124,9 +164,9 @@ export function OrganizationTransferPage(props: { organizationId: string; code:
                 <>
                   <h1 className={classes.title}>Accept the transfer?</h1>
                   <p className={classes.description}>
-                    {data.organizationTransferRequest.organization.owner.user.displayName} wants to
-                    transfer the "{data.organizationTransferRequest.organization.name}" organization
-                    to you.
+                    {query.data.organizationTransferRequest.organization.owner.user.displayName}{' '}
+                    wants to transfer the "
+                    {query.data.organizationTransferRequest.organization.name}" organization to you.
                   </p>
 
                   <div className={classes.actions}>
@@ -151,8 +191,8 @@ export function OrganizationTransferPage(props: { organizationId: string; code:
               )}
             </div>
           </div>
-        )}
-      </DataWrapper>
+        </div>
+      </DottedBackground>
     </>
   );
 }

packages/web/app/src/router.tsx

@@ -328,7 +328,7 @@ const joinOrganizationRoute = createRoute({
 
 const transferOrganizationRoute = createRoute({
   getParentRoute: () => authenticatedRoute,
-  path: 'transfer/$organizationId/$code',
+  path: 'action/transfer/$organizationId/$code',
   component: function TransferOrganizationRoute() {
     const { organizationId, code } = transferOrganizationRoute.useParams();
     return <OrganizationTransferPage organizationId={organizationId} code={code} />;