feat(core): disable payment in canary (#4722)

packages/common/env/src/global.ts

@@ -30,6 +30,7 @@ export const runtimeFlagsSchema = z.object({
   enableCloud: z.boolean(),
   enableCaptcha: z.boolean(),
   enableEnhanceShareMode: z.boolean(),
+  enablePayment: z.boolean(),
   // this is for the electron app
   serverUrlPrefix: z.string(),
   enableMoveDatabase: z.boolean(),

packages/frontend/core/.webpack/runtime-config.ts

@@ -31,6 +31,7 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enableCloud: true,
       enableCaptcha: true,
       enableEnhanceShareMode: false,
+      enablePayment: true,
       serverUrlPrefix: 'https://app.affine.pro',
       editorFlags,
       appVersion: packageJson.version,
@@ -65,6 +66,7 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enableCloud: true,
       enableCaptcha: true,
       enableEnhanceShareMode: false,
+      enablePayment: false,
       serverUrlPrefix: 'https://affine.fail',
       editorFlags,
       appVersion: packageJson.version,
@@ -120,6 +122,11 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
     enableMoveDatabase: process.env.ENABLE_MOVE_DATABASE
       ? process.env.ENABLE_MOVE_DATABASE === 'true'
       : currentBuildPreset.enableMoveDatabase,
+    enablePayment: process.env.ENABLE_PAYMENT
+      ? process.env.ENABLE_PAYMENT !== 'false'
+      : buildFlags.mode === 'development'
+      ? true
+      : currentBuildPreset.enablePayment,
   };
 
   if (buildFlags.mode === 'development') {

packages/frontend/core/package.json

@@ -41,7 +41,7 @@
     "@mui/material": "^5.14.14",
     "@radix-ui/react-select": "^2.0.0",
     "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.45",
+    "@toeverything/components": "^0.0.46",
     "async-call-rpc": "^6.3.1",
     "bytes": "^3.1.2",
     "css-spring": "^4.1.0",

packages/frontend/core/src/atoms/index.ts

@@ -12,6 +12,7 @@ export const openCreateWorkspaceModalAtom = atom<CreateWorkspaceMode>(false);
 export const openQuickSearchModalAtom = atom(false);
 export const openOnboardingModalAtom = atom(false);
 export const openSignOutModalAtom = atom(false);
+export const openPaymentDisableAtom = atom(false);
 
 export type SettingAtom = Pick<SettingProps, 'activeTab' | 'workspaceId'> & {
   open: boolean;

packages/frontend/core/src/components/affine/payment-disable/index.tsx

@@ -0,0 +1,35 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { ConfirmModal } from '@toeverything/components/modal';
+import { useAtom } from 'jotai';
+import { useCallback } from 'react';
+
+import { openPaymentDisableAtom } from '../../../atoms';
+import * as styles from './style.css';
+
+export const PaymentDisableModal = () => {
+  const [open, setOpen] = useAtom(openPaymentDisableAtom);
+  const t = useAFFiNEI18N();
+
+  const onClickCancel = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  return (
+    <ConfirmModal
+      title={t['com.affine.payment.disable-payment.title']()}
+      cancelText=""
+      cancelButtonOptions={{ style: { display: 'none' } }}
+      confirmButtonOptions={{
+        type: 'primary',
+        children: t['Got it'](),
+      }}
+      onConfirm={onClickCancel}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <p className={styles.paymentDisableModalContent}>
+        {t['com.affine.payment.disable-payment.description']()}
+      </p>
+    </ConfirmModal>
+  );
+};

packages/frontend/core/src/components/affine/payment-disable/style.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const paymentDisableModalContent = style({
+  color: 'var(--affine-text-primary-color)',
+});

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx

@@ -12,8 +12,10 @@ import {
 import { useMutation } from '@affine/workspace/affine/gql';
 import { DoneIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
+import { useAtom } from 'jotai';
 import { type PropsWithChildren, useCallback, useEffect, useRef } from 'react';
 
+import { openPaymentDisableAtom } from '../../../../../atoms';
 import { useCurrentLoginStatus } from '../../../../../hooks/affine/use-current-login-status';
 import { BulledListIcon } from './icons/bulled-list';
 import * as styles from './style.css';
@@ -285,7 +287,13 @@ const Upgrade = ({
     onSubscriptionUpdate();
   }, [onSubscriptionUpdate]);
 
+  const [, openPaymentDisableModal] = useAtom(openPaymentDisableAtom);
   const upgrade = useCallback(() => {
+    if (!runtimeConfig.enablePayment) {
+      openPaymentDisableModal(true);
+      return;
+    }
+
     if (newTabRef.current) {
       newTabRef.current.focus();
     } else {
@@ -310,7 +318,7 @@ const Upgrade = ({
         }
       );
     }
-  }, [trigger, recurring, onClose]);
+  }, [trigger, recurring, onClose, openPaymentDisableModal]);
 
   useEffect(() => {
     return () => {

packages/frontend/core/src/providers/modal-provider.tsx

@@ -12,6 +12,7 @@ import {
   openSettingModalAtom,
   openSignOutModalAtom,
 } from '../atoms';
+import { PaymentDisableModal } from '../components/affine/payment-disable';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../hooks/use-navigate-helper';
 import { signOutCloud } from '../utils/cloud-utils';
@@ -201,6 +202,7 @@ export const AllWorkspaceModals = (): ReactElement => {
       <Suspense>
         <SignOutConfirmModal />
       </Suspense>
+      <PaymentDisableModal />
     </>
   );
 };

packages/frontend/i18n/src/resources/en.json

@@ -629,6 +629,8 @@
   "com.affine.cmdk.affine.getting-started": "Getting Started",
   "com.affine.cmdk.affine.contact-us": "Contact Us",
   "com.affine.cmdk.affine.restart-to-upgrade": "Restart to Upgrade",
+  "com.affine.payment.disable-payment.title": "Account Upgrade Unavailable",
+  "com.affine.payment.disable-payment.description": "This is a special testing(Canary) version of AFFiNE. Account upgrades are not supported in this version. If you want to experience the full service, please download the stable version from our website.",
   "com.affine.share-menu.publish-to-web": "Publish to Web",
   "com.affine.share-menu.publish-to-web.description": "Let anyone with a link view a read-only version of this page.",
   "com.affine.share-menu.share-privately": "Share Privately",

packages/plugins/copilot/package.json

@@ -17,7 +17,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.45",
+    "@toeverything/components": "^0.0.46",
     "@vanilla-extract/css": "^1.13.0",
     "clsx": "^2.0.0",
     "idb": "^7.1.1",

packages/plugins/hello-world/package.json

@@ -18,7 +18,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.45"
+    "@toeverything/components": "^0.0.46"
   },
   "devDependencies": {
     "@affine/plugin-cli": "workspace:*"

packages/plugins/image-preview/package.json

@@ -17,7 +17,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.45",
+    "@toeverything/components": "^0.0.46",
     "@toeverything/theme": "^0.7.20",
     "clsx": "^2.0.0",
     "foxact": "^0.2.20",

packages/plugins/outline/package.json

@@ -18,7 +18,7 @@
     "@affine/component": "workspace:*",
     "@affine/sdk": "workspace:*",
     "@blocksuite/icons": "2.1.34",
-    "@toeverything/components": "^0.0.45"
+    "@toeverything/components": "^0.0.46"
   },
   "devDependencies": {
     "@affine/plugin-cli": "workspace:*",

yarn.lock

@@ -274,7 +274,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": "npm:2.1.34"
-    "@toeverything/components": "npm:^0.0.45"
+    "@toeverything/components": "npm:^0.0.46"
     "@types/marked": "npm:^6.0.0"
     "@vanilla-extract/css": "npm:^1.13.0"
     clsx: "npm:^2.0.0"
@@ -328,7 +328,7 @@ __metadata:
     "@sentry/webpack-plugin": "npm:^2.8.0"
     "@svgr/webpack": "npm:^8.1.0"
     "@swc/core": "npm:^1.3.93"
-    "@toeverything/components": "npm:^0.0.45"
+    "@toeverything/components": "npm:^0.0.46"
     "@types/bytes": "npm:^3.1.3"
     "@types/lodash-es": "npm:^4.17.9"
     "@types/webpack-env": "npm:^1.18.2"
@@ -490,7 +490,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": "npm:2.1.34"
-    "@toeverything/components": "npm:^0.0.45"
+    "@toeverything/components": "npm:^0.0.46"
   languageName: unknown
   linkType: soft
 
@@ -516,7 +516,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": "npm:2.1.34"
-    "@toeverything/components": "npm:^0.0.45"
+    "@toeverything/components": "npm:^0.0.46"
     "@toeverything/theme": "npm:^0.7.20"
     clsx: "npm:^2.0.0"
     foxact: "npm:^0.2.20"
@@ -617,7 +617,7 @@ __metadata:
     "@affine/plugin-cli": "workspace:*"
     "@affine/sdk": "workspace:*"
     "@blocksuite/icons": "npm:2.1.34"
-    "@toeverything/components": "npm:^0.0.45"
+    "@toeverything/components": "npm:^0.0.46"
     jotai: "npm:^2.4.3"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
@@ -12546,9 +12546,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@toeverything/components@npm:^0.0.45":
+"@toeverything/components@npm:^0.0.46":
-  version: 0.0.45
+  version: 0.0.46
-  resolution: "@toeverything/components@npm:0.0.45"
+  resolution: "@toeverything/components@npm:0.0.46"
   dependencies:
     "@blocksuite/icons": "npm:^2.1.33"
     "@radix-ui/react-dialog": "npm:^1.0.4"
@@ -12560,7 +12560,7 @@ __metadata:
     clsx: ^2
     react: ^18
     react-dom: ^18
-  checksum: fb168a83cd04da654ae1723098bf6902bf0eef8be9410a0814514b062d87e5fd2b972746a7770f8ca831a69d4a53255c87750e9fa8beab040d88deebc646dd92
+  checksum: 1e74a620d82bc6f6c318ccac35a2f4f86d5e3b97761e798d0ad3f3b31a74f377e402338ad00a2af54c62dda7d88c231cc07b53f2aa9c9bff1de5088659e1c712
   languageName: node
   linkType: hard