fix: open Stripe Express payout management in new tab

[vishalsaw28]

This updates the Stripe payout account “Manage” action to open Stripe Express in a new tab instead of navigating away from the Dub dashboard.

Since Stripe Express is an external dashboard, opening it in a new tab preserves user context and improves the payout management experience.

Closes #3290

Summary by CodeRabbit

• Bug Fixes
  • Stripe payout method page now opens in a new browser tab instead of navigating within the app, preserving your current session and navigation context.

[vercel]

@vishalsaw28 is attempting to deploy a commit to the Dub Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

📝 Walkthrough

Walkthrough

The change modifies how the Stripe account management link opens in the payout methods dropdown component. Instead of navigating within the application using router.push, it now opens the URL in a new browser tab with security parameters (noopener,noreferrer).

Changes

Cohort / File(s)	Summary
Stripe Link Opening Behavior apps/web/ui/partners/payout-methods-dropdown.tsx	Changed Stripe account link to open in a new tab using window.open(data.url, "_blank", "noopener,noreferrer") instead of router.push(data.url) in the onSuccess handler.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A tab opens wide, so shiny and new,
Stripe management awaits in the clearest blue,
No navigation blur, just a leap to the side,
Payout accounts managed with rabbit-approved pride! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: opening Stripe Express payout management in a new tab instead of navigating within the app.
Linked Issues check	✅ Passed	The code change directly addresses the requirement in issue #3290 by modifying the Stripe payout account 'Manage' action to open in a new tab using window.open() with appropriate security parameters.
Out of Scope Changes check	✅ Passed	The pull request contains only the necessary change to the payout-methods-dropdown.tsx file, limited to the specific functionality requested in issue #3290 with no additional unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/web/ui/partners/payout-methods-dropdown.tsx (1)

42-54: ⚠️ Potential issue | 🟠 Major

window.open in an async callback will be blocked by pop-up blockers.

onSuccess fires after the server action's network round-trip completes, so window.open is no longer in the synchronous call stack of the user's click event. Most browsers will silently block this.

A common workaround is to open a blank window reference synchronously (during the click), then set its URL once the async response arrives:

Proposed fix

Instead of relying on the onSuccess callback, handle the window opening in connectPayout where the user gesture is still in scope:

  const connectPayout = async (method: string) => {
    if (!partner) {
      return;
    }

    if (method === "paypal") {
      await executePaypalAsync();
    } else if (method === "stripe") {
-     await executeStripeAsync();
+     const newWindow = window.open("", "_blank", "noopener,noreferrer");
+     const result = await executeStripeAsync();
+     if (result?.data?.url && newWindow) {
+       newWindow.location.href = result.data.url;
+     } else {
+       newWindow?.close();
+     }
    }

    setOpenPopover(false);
  };

And remove the router.push / window.open from the onSuccess callback (keeping only the error toast in onSuccess if the URL is missing, or moving that check into connectPayout as well).

Note: with noopener, the returned newWindow reference may be null in some browsers. If that's the case, drop noopener from the features string (the blank origin window has no meaningful window.opener context to protect) or fall back to window.location.assign(data.url) when newWindow is null.

[steven-tey]

@vishalsaw28 thanks for the PR! We actually had this before but it gets blocked occasionally by Chrome and other browsers, which leads to user confusion, so we're sticking with this for now.

[vishalsaw28]

@vishalsaw28 thanks for the PR! We actually had this before but it gets blocked occasionally by Chrome and other browsers, which leads to user confusion, so we're sticking with this for now.

Got it, that makes sense thanks for the clarification and context! Appreciate it.