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

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",