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/components/affine/subscription-landing/styles.css.ts

@@ -0,0 +1,15 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+export const leftContentText = style({
+  fontSize: cssVar('fontBase'),
+  fontWeight: 400,
+  lineHeight: '1.6',
+  maxWidth: '548px',
+});
+export const mail = style({
+  color: cssVar('linkColor'),
+  textDecoration: 'none',
+  ':visited': {
+    color: cssVar('linkColor'),
+  },
+});