fix(core): add visit workspace button to team upgrade success page (#9186)

close AF-1978

packages/frontend/component/src/components/member-components/invite-team-modal/index.tsx

@@ -81,6 +81,9 @@ export const InviteTeamMemberModal = ({
       onOpenChange={setOpen}
       title={t['com.affine.payment.member.team.invite.title']()}
       cancelText={t['com.affine.inviteModal.button.cancel']()}
+      cancelButtonOptions={{
+        variant: 'secondary',
+      }}
       contentOptions={{
         ['data-testid' as string]: 'invite-modal',
         style: {

packages/frontend/component/src/components/member-components/invite-team-modal/link-invite.tsx

@@ -150,13 +150,13 @@ export const LinkInvite = ({
         />
         {invitationLink ? (
           <>
-            <Button onClick={onCopy}>
+            <Button onClick={onCopy} variant="secondary">
               {t['com.affine.payment.member.team.invite.copy']()}
             </Button>
             <IconButton icon={<CloseIcon />} onClick={onReset} />
           </>
         ) : (
-          <Button onClick={onGenerate}>
+          <Button onClick={onGenerate} variant="secondary">
             {t['com.affine.payment.member.team.invite.generate']()}
           </Button>
         )}

packages/frontend/core/src/components/hooks/affine/use-subscription-notify.tsx

@@ -46,7 +46,8 @@ export const getDowngradeQuestionnaireLink = (info: TypeFormInfo) =>
 export const generateSubscriptionCallbackLink = (
   account: AuthAccountInfo | null,
   plan: SubscriptionPlan,
-  recurring: SubscriptionRecurring
+  recurring: SubscriptionRecurring,
+  workspaceId?: string
 ) => {
   if (account === null) {
     throw new Error('Account is required');
@@ -69,7 +70,22 @@ export const generateSubscriptionCallbackLink = (
     account.id,
     account.email,
     account.info?.name ?? '',
+    workspaceId ?? '',
   ].join(separator);
 
   return `${baseUrl}?info=${encodeURIComponent(query)}`;
 };
+
+export const getSubscriptionInfo = (searchParams: URLSearchParams) => {
+  const decodedInfo = decodeURIComponent(searchParams.get('info') || '');
+  const [plan, recurring, accountId, email, name, workspaceId] =
+    decodedInfo.split(separator);
+  return {
+    plan: plan as SubscriptionPlan,
+    recurring: recurring as SubscriptionRecurring,
+    accountId,
+    email,
+    name: name.replaceAll(recoverSeparator, separator),
+    workspaceId,
+  };
+};

packages/frontend/core/src/desktop/dialogs/setting/general-setting/plans/plan-card.tsx

@@ -272,6 +272,7 @@ export const Upgrade = ({
   className,
   recurring,
   plan,
+  workspaceId,
   children,
   checkoutInput,
   onCheckoutSuccess,
@@ -280,6 +281,7 @@ export const Upgrade = ({
 }: ButtonProps & {
   recurring: SubscriptionRecurring;
   plan: SubscriptionPlan;
+  workspaceId?: string;
   checkoutInput?: Partial<CreateCheckoutSessionInput>;
   onBeforeCheckout?: () => void;
   onCheckoutSuccess?: () => void;
@@ -304,11 +306,18 @@ export const Upgrade = ({
       successCallbackLink: generateSubscriptionCallbackLink(
         authService.session.account$.value,
         plan,
-        recurring
+        recurring,
+        workspaceId
       ),
       ...checkoutInput,
     }),
-    [authService.session.account$.value, checkoutInput, plan, recurring]
+    [
+      authService.session.account$.value,
+      checkoutInput,
+      plan,
+      recurring,
+      workspaceId,
+    ]
   );
 
   return (

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/members/cloud-members-panel.tsx

@@ -288,7 +288,11 @@ const ImportCSV = ({ onImport }: { onImport: (file: File) => void }) => {
 
   return (
     <Upload accept="text/csv" fileChange={onImport}>
-      <Button className={styles.importButton} prefix={<ExportIcon />}>
+      <Button
+        className={styles.importButton}
+        prefix={<ExportIcon />}
+        variant="secondary"
+      >
         {t['com.affine.payment.member.team.invite.import-csv']()}
       </Button>
     </Upload>

packages/frontend/core/src/desktop/pages/upgrade-success/team/index.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@affine/component';
 import { AuthPageContainer } from '@affine/component/auth-components';
+import { getSubscriptionInfo } from '@affine/core/components/hooks/affine/use-subscription-notify';
 import { useNavigateHelper } from '@affine/core/components/hooks/use-navigate-helper';
 import { Trans, useI18n } from '@affine/i18n';
 import { useCallback } from 'react';
@@ -15,15 +16,26 @@ import * as styles from './styles.css';
 export const Component = () => {
   const t = useI18n();
   const [params] = useSearchParams();
+  const subscriptionInfo = getSubscriptionInfo(params);
 
-  const { jumpToIndex, jumpToOpenInApp } = useNavigateHelper();
-  const openAffine = useCallback(() => {
+  const { jumpToPage, jumpToOpenInApp, jumpToIndex } = useNavigateHelper();
+  const openWorkspace = useCallback(() => {
     if (params.get('schema')) {
       jumpToOpenInApp('bring-to-front');
     } else {
+      if (subscriptionInfo.workspaceId) {
+        jumpToPage(subscriptionInfo.workspaceId, 'all');
+        return;
+      }
       jumpToIndex();
     }
-  }, [jumpToIndex, jumpToOpenInApp, params]);
+  }, [
+    jumpToIndex,
+    jumpToOpenInApp,
+    jumpToPage,
+    params,
+    subscriptionInfo.workspaceId,
+  ]);
 
   const subtitle = (
     <div className={styles.leftContentText}>
@@ -49,8 +61,8 @@ export const Component = () => {
       title={t['com.affine.payment.upgrade-success-page.title']()}
       subtitle={subtitle}
     >
-      <Button variant="primary" size="extraLarge" onClick={openAffine}>
-        {t['com.affine.other-page.nav.open-affine']()}
+      <Button variant="primary" size="extraLarge" onClick={openWorkspace}>
+        {t['Visit Workspace']()}
       </Button>
     </AuthPageContainer>
   );

packages/frontend/core/src/desktop/pages/upgrade-to-team/index.tsx

@@ -196,6 +196,7 @@ const UpgradeDialog = ({
           className={styles.upgradeButtonInDialog}
           recurring={currentRecurring}
           plan={SubscriptionPlan.Team}
+          workspaceId={workspaceId}
           onCheckoutSuccess={onClose}
           checkoutInput={{
             args: {