feat(console): implement interim landing page for new users to join i…

…nvited tenants (#5560)

packages/connectors/connector-logto-email/package.json

@@ -48,6 +48,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-2a72cc4"
+    "@logto/cloud": "0.2.5-81f06ea"
   }
 }

packages/console/package.json

@@ -28,7 +28,7 @@
     "@fontsource/roboto-mono": "^5.0.0",
     "@jest/types": "^29.5.0",
     "@logto/app-insights": "workspace:^1.4.0",
-    "@logto/cloud": "0.2.5-2a72cc4",
+    "@logto/cloud": "0.2.5-81f06ea",
     "@logto/connector-kit": "workspace:^2.1.0",
     "@logto/core-kit": "workspace:^2.3.0",
     "@logto/language-kit": "workspace:^1.1.0",

packages/console/src/cloud/pages/Main/InvitationList/index.module.scss

@@ -0,0 +1,77 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 600px;
+  background: var(--color-surface-1);
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 540px;
+    padding: _.unit(20) _.unit(17.5);
+    gap: _.unit(6);
+    background: var(--color-bg-float);
+    border-radius: 16px;
+    box-shadow: var(--shadow-1);
+    white-space: pre-wrap;
+
+    .icon {
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
+    }
+
+    .title {
+      font: var(--font-headline-2);
+    }
+
+    .description {
+      font: var(--font-body-2);
+      color: var(--color-text-secondary);
+    }
+
+    .tenant {
+      display: flex;
+      align-items: center;
+      padding: _.unit(3) _.unit(4);
+      gap: _.unit(3);
+      border-radius: 12px;
+      border: 1px solid var(--color-divider);
+
+      .name {
+        @include _.multi-line-ellipsis(2);
+      }
+
+      .tag {
+        margin-left: _.unit(-2);
+      }
+    }
+
+    .separator {
+      display: flex;
+      align-items: center;
+      gap: _.unit(4);
+
+      span {
+        font: var(--font-body-2);
+        color: var(--color-text-secondary);
+      }
+
+      hr {
+        flex: 1;
+        border: none;
+        border-top: 1px solid var(--color-divider);
+      }
+    }
+
+    .createTenantButton {
+      width: 100%;
+    }
+  }
+}

packages/console/src/cloud/pages/Main/InvitationList/index.tsx

@@ -0,0 +1,89 @@
+import { OrganizationInvitationStatus } from '@logto/schemas';
+import { useContext, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Icon from '@/assets/icons/organization-preview.svg';
+import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
+import { type TenantResponse, type InvitationListResponse } from '@/cloud/types/router';
+import CreateTenantModal from '@/components/CreateTenantModal';
+import TenantEnvTag from '@/components/TenantEnvTag';
+import { TenantsContext } from '@/contexts/TenantsProvider';
+import Button from '@/ds-components/Button';
+import Spacer from '@/ds-components/Spacer';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+  invitations: InvitationListResponse;
+};
+
+function InvitationList({ invitations }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const cloudApi = useCloudApi();
+  const { prependTenant, navigateTenant } = useContext(TenantsContext);
+  const [isJoining, setIsJoining] = useState(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <div className={styles.wrapper}>
+          <div className={styles.title}>{t('invitation.find_your_tenants')}</div>
+          <div className={styles.description}>{t('invitation.find_tenants_description')}</div>
+          {invitations.map(({ id, organizationId, tenantName, tenantTag }) => (
+            <div key={id} className={styles.tenant}>
+              <Icon className={styles.icon} />
+              <span className={styles.name}>{tenantName}</span>
+              <TenantEnvTag isAbbreviated className={styles.tag} tag={tenantTag} />
+              <Spacer />
+              <Button
+                size="small"
+                type="primary"
+                title="general.join"
+                isLoading={isJoining}
+                onClick={async () => {
+                  setIsJoining(true);
+                  try {
+                    await cloudApi.patch(`/api/invitations/:invitationId/status`, {
+                      params: { invitationId: id },
+                      body: { status: OrganizationInvitationStatus.Accepted },
+                    });
+                    navigateTenant(organizationId.slice(2));
+                  } finally {
+                    setIsJoining(false);
+                  }
+                }}
+              />
+            </div>
+          ))}
+          <div className={styles.separator}>
+            <hr />
+            <span>{t('general.or')}</span>
+            <hr />
+          </div>
+          <Button
+            size="large"
+            type="outline"
+            className={styles.createTenantButton}
+            title="invitation.create_new_tenant"
+            onClick={() => {
+              setIsCreateModalOpen(true);
+            }}
+          />
+        </div>
+      </div>
+      <CreateTenantModal
+        isOpen={isCreateModalOpen}
+        onClose={async (tenant?: TenantResponse) => {
+          if (tenant) {
+            prependTenant(tenant);
+            navigateTenant(tenant.id);
+          }
+          setIsCreateModalOpen(false);
+        }}
+      />
+    </>
+  );
+}
+
+export default InvitationList;

packages/console/src/cloud/pages/Main/index.tsx

@@ -1,16 +1,22 @@
+import { OrganizationInvitationStatus } from '@logto/schemas';
+
 import AppLoading from '@/components/AppLoading';
+import { isCloud } from '@/consts/env';
 import useCurrentUser from '@/hooks/use-current-user';
 import useUserDefaultTenantId from '@/hooks/use-user-default-tenant-id';
+import useUserInvitations from '@/hooks/use-user-invitations';
 import useUserOnboardingData from '@/onboarding/hooks/use-user-onboarding-data';
 
 import AutoCreateTenant from './AutoCreateTenant';
+import InvitationList from './InvitationList';
 import Redirect from './Redirect';
 import TenantLandingPage from './TenantLandingPage';
 
 export default function Main() {
   const { isLoaded } = useCurrentUser();
   const { isOnboarding } = useUserOnboardingData();
   const { defaultTenantId } = useUserDefaultTenantId();
+  const { data } = useUserInvitations(OrganizationInvitationStatus.Pending);
 
   if (!isLoaded) {
     return <AppLoading />;
@@ -26,6 +32,11 @@ export default function Main() {
     return <AutoCreateTenant />;
   }
 
+  // If user has pending invitations (onboarding will be skipped), show the invitation list and allow them to quick join.
+  if (isCloud && data?.length) {
+    return <InvitationList invitations={data} />;
+  }
+
   // If user has completed onboarding and still has no tenant, redirect to a special landing page.
   return <TenantLandingPage />;
 }

packages/console/src/cloud/types/router.ts

@@ -19,6 +19,8 @@ export type InvoicesResponse = GuardedResponse<GetRoutes['/api/tenants/:tenantId
 
 export type InvitationResponse = GuardedResponse<GetRoutes['/api/invitations/:invitationId']>;
 
+export type InvitationListResponse = GuardedResponse<GetRoutes['/api/invitations']>;
+
 // The response of GET /api/tenants is TenantResponse[].
 export type TenantResponse = GetArrayElementType<GuardedResponse<GetRoutes['/api/tenants']>>;
 

packages/console/src/hooks/use-user-invitations.ts

@@ -0,0 +1,42 @@
+import { type OrganizationInvitationStatus } from '@logto/schemas';
+import { type Optional } from '@silverhand/essentials';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+
+import { useCloudApi } from '@/cloud/hooks/use-cloud-api';
+import { type InvitationListResponse } from '@/cloud/types/router';
+
+import { type RequestError } from './use-api';
+
+/**
+ *
+ * @param status Filter invitations by status
+ * @returns The invitations with tenant info, error, and loading status.
+ */
+const useUserInvitations = (
+  status?: OrganizationInvitationStatus
+): {
+  data: Optional<InvitationListResponse>;
+  error: Optional<RequestError>;
+  isLoading: boolean;
+} => {
+  const cloudApi = useCloudApi({ hideErrorToast: true });
+  const { data, isLoading, error } = useSWR<InvitationListResponse, RequestError>(
+    `/api/invitations}`,
+    async () => cloudApi.get('/api/invitations')
+  );
+
+  // Filter invitations by given status
+  const filteredResult = useMemo(
+    () => (status ? data?.filter((invitation) => status === invitation.status) : data),
+    [data, status]
+  );
+
+  return {
+    data: filteredResult,
+    error,
+    isLoading,
+  };
+};
+
+export default useUserInvitations;

packages/console/src/pages/AcceptInvitation/SwitchAccount/index.module.scss

@@ -3,12 +3,12 @@
 .container {
   display: flex;
   flex-direction: column;
-  width: 100vw;
-  height: 100vh;
+  height: 100%;
+  min-height: 600px;
   background: var(--color-surface-1);
   align-items: center;
   justify-content: center;
-  overflow: hidden;
+  overflow-y: auto;
 
   .wrapper {
     display: flex;

packages/console/src/pages/AcceptInvitation/index.tsx

@@ -35,15 +35,15 @@ function AcceptInvitation() {
       return;
     }
     (async () => {
-      const { id, tenantId } = invitation;
+      const { id, organizationId } = invitation;
 
       // Accept the invitation and redirect to the tenant page.
       await cloudApi.patch(`/api/invitations/:invitationId/status`, {
         params: { invitationId: id },
         body: { status: OrganizationInvitationStatus.Accepted },
       });
 
-      navigateTenant(tenantId);
+      navigateTenant(organizationId.slice(2));
     })();
   }, [cloudApi, error, invitation, navigateTenant, t]);
 

packages/core/package.json

@@ -91,7 +91,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-2a72cc4",
+    "@logto/cloud": "0.2.5-81f06ea",
     "@silverhand/eslint-config": "5.0.0",
     "@silverhand/ts-config": "5.0.0",
     "@types/debug": "^4.1.7",