From 59875400c696abcc548f5847602d45d45667f95c Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Tue, 9 Apr 2024 17:36:36 +0800
Subject: [PATCH] fix(console): go to onboarding process on clicking create new
 tenant button (#5663)

---
 .../cloud/pages/Main/InvitationList/index.tsx | 120 +++++++++---------
 1 file changed, 59 insertions(+), 61 deletions(-)

diff --git a/packages/console/src/cloud/pages/Main/InvitationList/index.tsx b/packages/console/src/cloud/pages/Main/InvitationList/index.tsx
index 6f5c71881..db7bd5317 100644
--- a/packages/console/src/cloud/pages/Main/InvitationList/index.tsx
+++ b/packages/console/src/cloud/pages/Main/InvitationList/index.tsx
@@ -4,13 +4,14 @@ import { useTranslation } from 'react-i18next';
 
 import OrganizationIcon 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 { type InvitationListResponse } from '@/cloud/types/router';
 import TenantEnvTag from '@/components/TenantEnvTag';
 import ThemedIcon from '@/components/ThemedIcon';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
 import Spacer from '@/ds-components/Spacer';
+import useTenantPathname from '@/hooks/use-tenant-pathname';
+import useUserOnboardingData from '@/onboarding/hooks/use-user-onboarding-data';
 
 import * as styles from './index.module.scss';
 
@@ -21,71 +22,68 @@ type Props = {
 function InvitationList({ invitations }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const cloudApi = useCloudApi();
-  const { prependTenant, navigateTenant, resetTenants } = useContext(TenantsContext);
+  const { navigateTenant, resetTenants } = useContext(TenantsContext);
+  const { navigate } = useTenantPathname();
   const [isJoining, setIsJoining] = useState(false);
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isUpdatingOnboardingStatus, setIsUpdatingOnboardingStatus] = useState(false);
+  const { update } = useUserOnboardingData();
 
   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}>
-              <ThemedIcon for={OrganizationIcon} size={40} />
-              <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 },
-                    });
-                    const data = await cloudApi.get('/api/tenants');
-                    resetTenants(data);
-                    navigateTenant(getTenantIdFromOrganizationId(organizationId));
-                  } finally {
-                    setIsJoining(false);
-                  }
-                }}
-              />
-            </div>
-          ))}
-          <div className={styles.separator}>
-            <hr />
-            <span>{t('general.or')}</span>
-            <hr />
+    <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}>
+            <ThemedIcon for={OrganizationIcon} size={40} />
+            <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 },
+                  });
+                  const data = await cloudApi.get('/api/tenants');
+                  resetTenants(data);
+                  navigateTenant(getTenantIdFromOrganizationId(organizationId));
+                } finally {
+                  setIsJoining(false);
+                }
+              }}
+            />
           </div>
-          <Button
-            size="large"
-            type="outline"
-            className={styles.createTenantButton}
-            title="invitation.create_new_tenant"
-            onClick={() => {
-              setIsCreateModalOpen(true);
-            }}
-          />
+        ))}
+        <div className={styles.separator}>
+          <hr />
+          <span>{t('general.or')}</span>
+          <hr />
         </div>
+        <Button
+          size="large"
+          type="outline"
+          className={styles.createTenantButton}
+          isLoading={isUpdatingOnboardingStatus}
+          title="invitation.create_new_tenant"
+          onClick={async () => {
+            setIsUpdatingOnboardingStatus(true);
+            try {
+              await update({ isOnboardingDone: false });
+              navigate('/');
+            } finally {
+              setIsUpdatingOnboardingStatus(false);
+            }
+          }}
+        />
       </div>
-      <CreateTenantModal
-        isOpen={isCreateModalOpen}
-        onClose={async (tenant?: TenantResponse) => {
-          if (tenant) {
-            prependTenant(tenant);
-            navigateTenant(tenant.id);
-          }
-          setIsCreateModalOpen(false);
-        }}
-      />
-    </>
+    </div>
   );
 }