feat: optional payment for frontend (#5056)

packages/frontend/core/src/hooks/affine/use-server-flavor.ts

@@ -0,0 +1,29 @@
+import { serverConfigQuery } from '@affine/graphql';
+import { useQuery } from '@affine/workspace/affine/gql';
+import type { BareFetcher, Middleware } from 'swr';
+
+const wrappedFetcher = (fetcher: BareFetcher<any> | null, ...args: any[]) =>
+  fetcher?.(...args).catch(() => null);
+
+const errorHandler: Middleware = useSWRNext => (key, fetcher, config) => {
+  return useSWRNext(key, wrappedFetcher.bind(null, fetcher), config);
+};
+
+export const useServerFlavor = () => {
+  const { data: config, error } = useQuery(
+    { query: serverConfigQuery },
+    { use: [errorHandler] }
+  );
+
+  if (error || !config) {
+    return 'local';
+  }
+
+  return config.serverConfig.flavor;
+};
+
+export const useSelfHosted = () => {
+  const serverFlavor = useServerFlavor();
+
+  return ['local', 'selfhosted'].includes(serverFlavor);
+};

packages/frontend/core/src/hooks/use-subscription.ts

@@ -2,6 +2,8 @@ import { type SubscriptionQuery, subscriptionQuery } from '@affine/graphql';
 import { useQuery } from '@affine/workspace/affine/gql';
 import { useAsyncCallback } from '@toeverything/hooks/affine-async-hooks';
 
+import { useSelfHosted } from './affine/use-server-flavor';
+
 export type Subscription = NonNullable<
   NonNullable<SubscriptionQuery['currentUser']>['subscription']
 >;
@@ -12,6 +14,7 @@ const selector = (data: SubscriptionQuery) =>
   data.currentUser?.subscription ?? null;
 
 export const useUserSubscription = () => {
+  const isSelfHosted = useSelfHosted();
   const { data, mutate } = useQuery({
     query: subscriptionQuery,
   });
@@ -36,5 +39,9 @@ export const useUserSubscription = () => {
     [mutate]
   );
 
+  if (isSelfHosted) {
+    return [selector(data), () => {}] as const;
+  }
+
   return [selector(data), set] as const;
 };