feat(core): avoid popup window being blocked (#6451)

packages/frontend/core/src/components/affine/auth/subscription-redirect.tsx

@@ -4,6 +4,7 @@ import { Loading } from '@affine/component/ui/loading';
 import { AffineShapeIcon } from '@affine/core/components/page-list';
 import { useCredentialsRequirement } from '@affine/core/hooks/affine/use-server-config';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
+import { popupWindow } from '@affine/core/utils';
 import { SubscriptionPlan, type SubscriptionRecurring } from '@affine/graphql';
 import {
   changePasswordMutation,
@@ -48,7 +49,7 @@ const usePaymentRedirect = () => {
         successCallbackLink: null,
       },
     });
-    window.open(checkoutUrl, '_self', 'norefferer');
+    popupWindow(checkoutUrl);
   }, [recurring, plan, coupon, idempotencyKey, checkoutSubscription]);
 };
 

packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -11,7 +11,7 @@ import { useCallback } from 'react';
 
 import { useAppSettingHelper } from '../../../../../hooks/affine/use-app-setting-helper';
 import { appIconMap, appNames } from '../../../../../pages/open-app';
-import { mixpanel } from '../../../../../utils';
+import { mixpanel, popupWindow } from '../../../../../utils';
 import { relatedLinks } from './config';
 import * as styles from './style.css';
 import { UpdateCheckSection } from './update-check-section';
@@ -99,7 +99,7 @@ export const AboutAffine = () => {
               desc={t['com.affine.aboutAFFiNE.changelog.description']()}
               style={{ cursor: 'pointer' }}
               onClick={() => {
-                window.open(runtimeConfig.changelogUrl, '_blank');
+                popupWindow(runtimeConfig.changelogUrl);
               }}
             >
               <ArrowRightSmallIcon />
@@ -143,7 +143,7 @@ export const AboutAffine = () => {
               <div
                 className={styles.communityItem}
                 onClick={() => {
-                  window.open(link, '_blank');
+                  popupWindow(link);
                 }}
                 key={title}
               >

packages/frontend/core/src/components/affine/setting-modal/general-setting/billing/index.tsx

@@ -31,7 +31,7 @@ import { useMutation } from '../../../../../hooks/use-mutation';
 import { useQuery } from '../../../../../hooks/use-query';
 import type { SubscriptionMutator } from '../../../../../hooks/use-subscription';
 import { useUserSubscription } from '../../../../../hooks/use-subscription';
-import { mixpanel } from '../../../../../utils';
+import { mixpanel, popupWindow } from '../../../../../utils';
 import { SWRErrorBoundary } from '../../../../pure/swr-error-bundary';
 import { CancelAction, ResumeAction } from '../plans/actions';
 import * as styles from './style.css';
@@ -262,7 +262,7 @@ const PaymentMethodUpdater = () => {
   const update = useAsyncCallback(async () => {
     await trigger(null, {
       onSuccess: data => {
-        window.open(data.createCustomerPortal, '_blank', 'noopener noreferrer');
+        popupWindow(data.createCustomerPortal);
       },
     });
   }, [trigger]);
@@ -361,7 +361,7 @@ const InvoiceLine = ({
 
   const open = useCallback(() => {
     if (invoice.link) {
-      window.open(invoice.link, '_blank', 'noopener noreferrer');
+      popupWindow(invoice.link);
     }
   }, [invoice.link]);
 

packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/ai/subscribe.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@affine/component';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useMutation } from '@affine/core/hooks/use-mutation';
+import { popupWindow } from '@affine/core/utils';
 import { createCheckoutSessionMutation } from '@affine/graphql';
 import { nanoid } from 'nanoid';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
@@ -51,11 +52,7 @@ export const AISubscribe = ({
       },
       {
         onSuccess: data => {
-          const newTab = window.open(
-            data.createCheckoutSession,
-            '_blank',
-            'noopener noreferrer'
-          );
+          const newTab = popupWindow(data.createCheckoutSession);
           if (newTab) {
             newTabRef.current = newTab;
             newTab.addEventListener('close', onClose);

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

@@ -5,6 +5,7 @@ import type {
   Subscription,
   SubscriptionMutator,
 } from '@affine/core/hooks/use-subscription';
+import { popupWindow } from '@affine/core/utils';
 import type { SubscriptionRecurring } from '@affine/graphql';
 import {
   createCheckoutSessionMutation,
@@ -309,13 +310,7 @@ const Upgrade = ({
         },
         {
           onSuccess: data => {
-            // FIXME: safari prevents from opening new tab by window api
-            // TODO(@xp): what if electron?
-            const newTab = window.open(
-              data.createCheckoutSession,
-              '_blank',
-              'noopener noreferrer'
-            );
+            const newTab = popupWindow(data.createCheckoutSession);
 
             if (newTab) {
               newTabRef.current = newTab;

packages/frontend/core/src/components/app-sidebar/app-updater-button/index.tsx

@@ -1,4 +1,5 @@
 import { Tooltip } from '@affine/component';
+import { popupWindow } from '@affine/core/utils';
 import { Unreachable } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon, ResetIcon } from '@blocksuite/icons';
@@ -181,13 +182,12 @@ export function AppUpdaterButton({
           onDownloadUpdate();
         }
       } else {
-        window.open(
-          `https://github.com/toeverything/AFFiNE/releases/tag/v${updateAvailable.version}`,
-          '_blank'
+        popupWindow(
+          `https://github.com/toeverything/AFFiNE/releases/tag/v${updateAvailable.version}`
         );
       }
     } else if (changelogUnread) {
-      window.open(runtimeConfig.changelogUrl, '_blank');
+      popupWindow(runtimeConfig.changelogUrl);
       onOpenChangelog();
     } else {
       throw new Unreachable();

packages/frontend/core/src/components/pure/help-island/index.tsx

@@ -1,4 +1,5 @@
 import { Tooltip } from '@affine/component/ui/tooltip';
+import { popupWindow } from '@affine/core/utils';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon } from '@blocksuite/icons';
 import { Doc, useLiveData, useServiceOptional } from '@toeverything/infra';
@@ -70,7 +71,7 @@ export const HelpIsland = () => {
             <StyledIconWrapper
               data-testid="right-bottom-change-log-icon"
               onClick={() => {
-                window.open(runtimeConfig.changelogUrl, '_blank');
+                popupWindow(runtimeConfig.changelogUrl);
               }}
             >
               <NewIcon />