From e13024580d6433b239aff7f2064b5086f4216dd3 Mon Sep 17 00:00:00 2001 From: CatsJuice Date: Mon, 22 Apr 2024 09:03:27 +0000 Subject: [PATCH] feat(core): add ai subscription landing page (#6657) --- .../plans/ai/actions/subscribe.tsx | 3 +- .../affine/subscription-landing/index.tsx | 71 +++++++++++++++++++ .../subscription-landing/styles.css.ts} | 0 .../core/src/pages/ai-upgrade-success.tsx | 5 ++ .../core/src/pages/upgrade-success.tsx | 50 +------------ packages/frontend/core/src/router.tsx | 4 ++ packages/frontend/electron/renderer/app.tsx | 9 ++- packages/frontend/i18n/src/resources/en.json | 2 + 8 files changed, 93 insertions(+), 51 deletions(-) create mode 100644 packages/frontend/core/src/components/affine/subscription-landing/index.tsx rename packages/frontend/core/src/{pages/upgrade-success.css.ts => components/affine/subscription-landing/styles.css.ts} (100%) create mode 100644 packages/frontend/core/src/pages/ai-upgrade-success.tsx diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/subscribe.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/subscribe.tsx index c8d7e5a359..c44cdd6243 100644 --- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/actions/subscribe.tsx +++ b/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); diff --git a/packages/frontend/core/src/components/affine/subscription-landing/index.tsx b/packages/frontend/core/src/components/affine/subscription-landing/index.tsx new file mode 100644 index 0000000000..1da4f1ee23 --- /dev/null +++ b/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 = ( +
+ {description} +
+ + ), + }} + /> +
+
+ ); + + return ( + + + + ); +}; + +export const CloudUpgradeSuccess = () => { + const t = useAFFiNEI18N(); + return ( + + ); +}; + +export const AIUpgradeSuccess = () => { + const t = useAFFiNEI18N(); + + return ( + + ); +}; diff --git a/packages/frontend/core/src/pages/upgrade-success.css.ts b/packages/frontend/core/src/components/affine/subscription-landing/styles.css.ts similarity index 100% rename from packages/frontend/core/src/pages/upgrade-success.css.ts rename to packages/frontend/core/src/components/affine/subscription-landing/styles.css.ts diff --git a/packages/frontend/core/src/pages/ai-upgrade-success.tsx b/packages/frontend/core/src/pages/ai-upgrade-success.tsx new file mode 100644 index 0000000000..6cbf125380 --- /dev/null +++ b/packages/frontend/core/src/pages/ai-upgrade-success.tsx @@ -0,0 +1,5 @@ +import { AIUpgradeSuccess } from '../components/affine/subscription-landing'; + +export const Component = () => { + return ; +}; diff --git a/packages/frontend/core/src/pages/upgrade-success.tsx b/packages/frontend/core/src/pages/upgrade-success.tsx index ce67a89711..61c5b8f946 100644 --- a/packages/frontend/core/src/pages/upgrade-success.tsx +++ b/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 = ( -
- {t['com.affine.payment.upgrade-success-page.text']()} -
- - ), - }} - /> -
-
- ); - - return ( - - - - ); -}; +import { CloudUpgradeSuccess } from '../components/affine/subscription-landing'; export const Component = () => { - return ; + return ; }; diff --git a/packages/frontend/core/src/router.tsx b/packages/frontend/core/src/router.tsx index 081694c868..afcbf89fe7 100644 --- a/packages/frontend/core/src/router.tsx +++ b/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'), diff --git a/packages/frontend/electron/renderer/app.tsx b/packages/frontend/electron/renderer/app.tsx index 552d943739..c0e0f09f73 100644 --- a/packages/frontend/electron/renderer/app.tsx +++ b/packages/frontend/electron/renderer/app.tsx @@ -29,11 +29,16 @@ import type { PropsWithChildren, ReactElement } from 'react'; import { lazy, Suspense } from 'react'; import { RouterProvider } from 'react-router-dom'; +const desktopWhiteList = [ + '/desktop-signin', + '/open-app/signin-redirect', + '/upgrade-success', + '/ai-upgrade-success', +]; if ( !environment.isDesktop && environment.isDebug && - !location.pathname.includes('/desktop-signin') && - !location.pathname.includes('/open-app/signin-redirect') + desktopWhiteList.every(path => !location.pathname.startsWith(path)) ) { document.body.innerHTML = `

Don't run electron entry in browser.

`; throw new Error('Wrong distribution'); diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 05f8cc647d..fdedf8410f 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -1022,6 +1022,8 @@ "com.affine.payment.upgrade-success-page.support": "If you have any questions, please contact our <1> customer support.", "com.affine.payment.upgrade-success-page.text": "Congratulations! Your AFFiNE account has been successfully upgraded to a Pro account.", "com.affine.payment.upgrade-success-page.title": "Upgrade Successful!", + "com.affine.payment.ai-upgrade-success-page.title": "Purchase Successful!", + "com.affine.payment.ai-upgrade-success-page.text": "Congratulations on your successful purchase of AFFiNE AI! You're now empowered to refine your content, generate images, and craft comprehensive mindmaps directly within AFFiNE AI, dramatically enhancing your productivity.", "com.affine.publicLinkDisableModal.button.cancel": "Cancel", "com.affine.publicLinkDisableModal.button.disable": "Disable", "com.affine.publicLinkDisableModal.description": "Disabling this public link will prevent anyone with the link from accessing this doc.",