feat(core): add ai subscription landing page (#6657)

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/subscribe.tsx

@@ -1,6 +1,7 @@
 import { Button, type ButtonProps } from '@affine/component';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { SubscriptionService } from '@affine/core/modules/cloud';
+import { getAffineCloudBaseUrl } from '@affine/core/modules/cloud/services/fetch';
 import { popupWindow } from '@affine/core/utils';
 import { SubscriptionPlan, SubscriptionRecurring } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
@@ -42,7 +43,7 @@ export const AISubscribe = ({ ...btnProps }: AISubscribeProps) => {
         idempotencyKey,
         plan: SubscriptionPlan.AI,
         coupon: null,
-        successCallbackLink: null,
+        successCallbackLink: getAffineCloudBaseUrl() + '/ai-upgrade-success',
       });
       popupWindow(session);
       setOpenedExternalWindow(true);

packages/frontend/core/src/components/affine/subscription-landing/index.tsx

@@ -0,0 +1,71 @@
+import { AuthPageContainer } from '@affine/component/auth-components';
+import { Button } from '@affine/component/ui/button';
+import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
+import { Trans } from '@affine/i18n';
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { type ReactNode, useCallback } from 'react';
+
+import * as styles from './styles.css';
+
+const UpgradeSuccessLayout = ({
+  title,
+  description,
+}: {
+  title?: ReactNode;
+  description?: ReactNode;
+}) => {
+  const t = useAFFiNEI18N();
+
+  const { jumpToIndex } = useNavigateHelper();
+  const openAffine = useCallback(() => {
+    jumpToIndex();
+  }, [jumpToIndex]);
+
+  const subtitle = (
+    <div className={styles.leftContentText}>
+      {description}
+      <div>
+        <Trans
+          i18nKey={'com.affine.payment.upgrade-success-page.support'}
+          components={{
+            1: (
+              <a
+                href="mailto:support@toeverything.info"
+                className={styles.mail}
+              />
+            ),
+          }}
+        />
+      </div>
+    </div>
+  );
+
+  return (
+    <AuthPageContainer title={title} subtitle={subtitle}>
+      <Button type="primary" size="extraLarge" onClick={openAffine}>
+        {t['com.affine.other-page.nav.open-affine']()}
+      </Button>
+    </AuthPageContainer>
+  );
+};
+
+export const CloudUpgradeSuccess = () => {
+  const t = useAFFiNEI18N();
+  return (
+    <UpgradeSuccessLayout
+      title={t['com.affine.payment.upgrade-success-page.title']()}
+      description={t['com.affine.payment.upgrade-success-page.text']()}
+    />
+  );
+};
+
+export const AIUpgradeSuccess = () => {
+  const t = useAFFiNEI18N();
+
+  return (
+    <UpgradeSuccessLayout
+      title={t['com.affine.payment.ai-upgrade-success-page.title']()}
+      description={t['com.affine.payment.ai-upgrade-success-page.text']()}
+    />
+  );
+};

packages/frontend/core/src/pages/ai-upgrade-success.tsx

@@ -0,0 +1,5 @@
+import { AIUpgradeSuccess } from '../components/affine/subscription-landing';
+
+export const Component = () => {
+  return <AIUpgradeSuccess />;
+};

packages/frontend/core/src/pages/upgrade-success.tsx

@@ -1,51 +1,5 @@
-import { AuthPageContainer } from '@affine/component/auth-components';
-import { Button } from '@affine/component/ui/button';
-import { Trans } from '@affine/i18n';
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { useCallback } from 'react';
-
-import { useNavigateHelper } from '../hooks/use-navigate-helper';
-import * as styles from './upgrade-success.css';
-
-export const UpgradeSuccess = () => {
-  const t = useAFFiNEI18N();
-
-  const { jumpToIndex } = useNavigateHelper();
-  const openAffine = useCallback(() => {
-    jumpToIndex();
-  }, [jumpToIndex]);
-
-  const subtitle = (
-    <div className={styles.leftContentText}>
-      {t['com.affine.payment.upgrade-success-page.text']()}
-      <div>
-        <Trans
-          i18nKey={'com.affine.payment.upgrade-success-page.support'}
-          components={{
-            1: (
-              <a
-                href="mailto:support@toeverything.info"
-                className={styles.mail}
-              />
-            ),
-          }}
-        />
-      </div>
-    </div>
-  );
-
-  return (
-    <AuthPageContainer
-      title={t['com.affine.payment.upgrade-success-page.title']()}
-      subtitle={subtitle}
-    >
-      <Button type="primary" size="extraLarge" onClick={openAffine}>
-        {t['com.affine.other-page.nav.open-affine']()}
-      </Button>
-    </AuthPageContainer>
-  );
-};
+import { CloudUpgradeSuccess } from '../components/affine/subscription-landing';
 
 export const Component = () => {
-  return <UpgradeSuccess />;
+  return <CloudUpgradeSuccess />;
 };

packages/frontend/core/src/router.tsx

@@ -89,6 +89,10 @@ export const topLevelRoutes = [
         path: '/upgrade-success',
         lazy: () => import('./pages/upgrade-success'),
       },
+      {
+        path: '/ai-upgrade-success',
+        lazy: () => import('./pages/ai-upgrade-success'),
+      },
       {
         path: '/desktop-signin',
         lazy: () => import('./pages/desktop-signin'),