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

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 />
     </>
   );
 };