Skip to content

feat: move team blocked banner from sidebar to bottom status bar#304

Merged
ben-fornefeld merged 7 commits intomainfrom
devin/1777306208-move-team-blocked-to-statusbar
Apr 29, 2026
Merged

feat: move team blocked banner from sidebar to bottom status bar#304
ben-fornefeld merged 7 commits intomainfrom
devin/1777306208-move-team-blocked-to-statusbar

Conversation

@devin-ai-integration
Copy link
Copy Markdown
Contributor

@devin-ai-integration devin-ai-integration Bot commented Apr 27, 2026

Summary

Moves the team blockage banner out of the sidebar and into the dashboard bottom status bar, matching the Figma design shared by Vojtech.

Changes:

  • Removed TeamBlockageAlert from sidebar/footer.tsx
  • Added team suspended indicator to layouts/footer.tsx (the bottom status bar)
  • Shows BlockIcon with error-highlight color when team.isBlocked is true
  • Preserves routing logic from the old banner:
    • Billing-limit blocks → links to /limits with "Settle outstanding payment."
    • Default (overdue payment) blocks → links to /billing with "Pay now."
  • Uses prose-label styling from the theme, uppercase text
  • Always visible in the status bar (not hidden when sidebar collapses)
  • Mobile-safe: constrained width with truncation to prevent overflow

Review & Testing Checklist for Human

  • Verify the blocked banner no longer appears in the sidebar
  • Verify the status bar shows the suspended message with correct styling (red text, ⊘ icon) when a team is blocked
  • Verify clicking the CTA link navigates to the correct page (billing vs limits depending on block reason)
  • Verify the status bar looks correct on both desktop and mobile viewports (no horizontal overflow)

Notes

  • The blocked-banner.tsx file is left in place (no longer imported) — can be cleaned up in a follow-up if desired

Link to Devin session: https://app.devin.ai/sessions/67f48c6c00574f9ebc1a292c9311bd5e

Remove TeamBlockageAlert from sidebar footer and add team suspended
indicator to the dashboard layout status bar. Shows a ⊘ icon with
'Team suspended—overdue payment. Pay now.' text in error color,
with 'Pay now.' linking to the billing page.

Co-Authored-By: ben@e2b.dev <ben@e2b.dev>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 27, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
web Ready Ready Preview, Comment Apr 29, 2026 0:03am
web-juliett Ready Ready Preview, Comment Apr 29, 2026 0:03am

Request Review

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: c9196af82d

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread src/features/dashboard/layouts/footer.tsx Outdated
Comment thread src/features/dashboard/layouts/footer.tsx Outdated
@devin-ai-integration
Copy link
Copy Markdown
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Comment thread src/features/dashboard/layouts/footer.tsx Outdated
- Route billing-limit blocks to /limits page instead of /billing
- Default (overdue payment) blocks still route to /billing with 'Pay now.'
- Add max-width constraint on mobile to prevent horizontal overflow
- Use truncate instead of whitespace-nowrap for better mobile behavior

Co-Authored-By: ben@e2b.dev <ben@e2b.dev>
Comment thread src/features/dashboard/layouts/footer.tsx Outdated
Co-Authored-By: ben@e2b.dev <ben@e2b.dev>
Comment thread src/features/dashboard/layouts/team-blocked-indicator.tsx Outdated
Co-Authored-By: ben@e2b.dev <ben@e2b.dev>
Comment on lines +30 to +40
) : (
<>
Team suspended—overdue payment.{' '}
<Link
href={PROTECTED_URLS.BILLING(team.slug)}
className="underline"
>
Pay now.
</Link>
</>
)}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this means every other blocked reason is shown as payment issue.

please for the following two cases, do custom messages like for billing limits, and otherwise just show the actual blocked message OR generic fallback:

BlockedReasonMissingPayment = "missing payment method"
BlockedReasonVerification = "verification required"

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done in 0df612c. Now handles each case separately:

  • "billing limit" → "Billing limit reached. Update limit." → /limits
  • "missing payment method" → "Missing payment method. Add payment method." → /billing
  • "verification required" → "Verification required. Add payment method." → /billing
  • Any other reason → shows the actual blockedReason text with no CTA link

- 'billing limit' → 'Billing limit reached. Update limit.' → /limits
- 'missing payment method' → 'Missing payment method. Add payment method.' → /billing
- 'verification required' → 'Verification required. Add payment method.' → /billing
- Other reasons → show actual blockedReason text, no CTA link

Co-Authored-By: ben@e2b.dev <ben@e2b.dev>
@ben-fornefeld
Copy link
Copy Markdown
Member

the blockage element should be centered between the other two elements. if statusBanner is not provided, it can align to end

Left (user/path) and right (statusBanner) each take flex-1 so the
blocked indicator sits centered. When statusBanner is absent the
indicator naturally aligns to end.

Co-Authored-By: ben@e2b.dev <ben@e2b.dev>
@devin-ai-integration
Copy link
Copy Markdown
Contributor Author

Done in d9ab52b. The left (user/path) and right (statusBanner) sections each take flex-1, so the blocked indicator sits centered between them. When statusBanner is not provided, the indicator naturally aligns to the end.

@ben-fornefeld ben-fornefeld merged commit 35ee7dc into main Apr 29, 2026
10 checks passed
@ben-fornefeld ben-fornefeld deleted the devin/1777306208-move-team-blocked-to-statusbar branch April 29, 2026 01:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant