Hide premium/billing if disabled

[elie222]

Hide Premium menu item in NavUser and MultiAccount/Billing sections in SettingsPage when env.NEXT_PUBLIC_BYPASS_PREMIUM_CHECKS is truthy

Gate Premium-related UI with env.NEXT_PUBLIC_BYPASS_PREMIUM_CHECKS, adding conditional rendering in SettingsPage and NavUser; bump version to v2.21.4.

📍Where to Start

Start with the conditional rendering in SettingsPage in page.tsx, then review the NavUser menu condition in NavUser.tsx.

---

Macroscope summarized a069ccb.

Summary by CodeRabbit

• Chores
  • Updated application version to v2.21.4
  • Modified conditional rendering of premium account management features and menu options based on environment configuration settings

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

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

Project	Deployment	Preview	Updated (UTC)
inbox-zero	Ready	Preview	Nov 27, 2025 2:57pm

[coderabbitai]

Walkthrough

Environment variable-based conditional rendering is added to gate premium UI elements. The MultiAccountSection and BillingSection in settings, along with the Premium dropdown menu item, are now hidden when the NEXT_PUBLIC_BYPASS_PREMIUM_CHECKS flag is enabled. Version bumped to v2.21.4.

Changes

Cohort / File(s)	Summary
Premium UI Gating apps/web/app/(app)/[emailAccountId]/settings/page.tsx, apps/web/components/NavUser.tsx	Added environment variable imports and wrapped MultiAccountSection, BillingSection, and Premium menu item with conditional rendering logic; these components are now hidden when NEXT_PUBLIC_BYPASS_PREMIUM_CHECKS is true.
Version Update version.txt	Bumped version from v2.21.3 to v2.21.4.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify conditional logic correctly negates the bypass flag to hide premium features
• Confirm env import path is correct and the flag is properly exported from "@/env"
• Check that version bump follows semantic versioning scheme

Possibly related PRs

• Adjust pricing seats #763: Modifies premium and multi-account UI components in settings, aligning with the premium feature gating changes in this PR.
• Simplify nav. Show settings again #746: Changes Premium menu item visibility in NavUser.tsx, directly related to the conditional rendering introduced here.
• Update deploy instructions #997: Introduces the NEXT_PUBLIC_BYPASS_PREMIUM_CHECKS environment variable to configuration and documentation, providing the flag being used in this PR's implementation.

Poem

🐰 A flag doth wave, premium features hide,
When bypass is true, they step aside,
Settings and menus dance to the rhythm,
Version bumps climb, we add wisdom,
Conditional renders keep the code clean—thump thump! 🥕

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Hide premium/billing if disabled' accurately summarizes the main change: conditionally hiding premium and billing UI sections based on an environment flag.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/hide-premium-sections-if-disabled

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 572d8ca and a069ccb.

📒 Files selected for processing (3)

• apps/web/app/(app)/[emailAccountId]/settings/page.tsx (2 hunks)
• apps/web/components/NavUser.tsx (2 hunks)
• version.txt (1 hunks)

🧰 Additional context used

📓 Path-based instructions (15)

!(pages/_document).{jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)

Don't use the next/head module in pages/_document.js on Next.js projects

Files:

• version.txt
• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

apps/web/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

apps/web/**/*.{ts,tsx}: Use TypeScript with strict null checks
Use @/ path aliases for imports from project root
Use proper error handling with try/catch blocks
Format code with Prettier
Follow consistent naming conventions using PascalCase for components
Centralize shared types in dedicated type files

Import specific lodash functions rather than entire lodash library to minimize bundle size (e.g., import groupBy from 'lodash/groupBy')

Files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

apps/web/**/*.tsx

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

apps/web/**/*.tsx: Follow tailwindcss patterns with prettier-plugin-tailwindcss for class sorting
Prefer functional components with hooks over class components
Use shadcn/ui components when available
Ensure responsive design with mobile-first approach
Use LoadingContent component for async data with loading and error states

Files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

apps/web/components/**/*.tsx

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

apps/web/components/**/*.tsx: Use React Hook Form with Zod validation for form components
Use result?.serverError with toastError and toastSuccess for error handling in form submissions

Use LoadingContent component to consistently handle loading and error states, passing loading, error, and children props

Use PascalCase for component file names (e.g., components/Button.tsx)

Files:

• apps/web/components/NavUser.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/data-fetching.mdc)

**/*.{ts,tsx}: For API GET requests to server, use the swr package
Use result?.serverError with toastError from @/components/Toast for error handling in async operations

**/*.{ts,tsx}: Use wrapper functions for Gmail message operations (get, list, batch, etc.) from @/utils/gmail/message.ts instead of direct API calls
Use wrapper functions for Gmail thread operations from @/utils/gmail/thread.ts instead of direct API calls
Use wrapper functions for Gmail label operations from @/utils/gmail/label.ts instead of direct API calls

**/*.{ts,tsx}: For early access feature flags, create hooks using the naming convention use[FeatureName]Enabled that return a boolean from useFeatureFlagEnabled("flag-key")
For A/B test variant flags, create hooks using the naming convention use[FeatureName]Variant that define variant types, use useFeatureFlagVariantKey() with type casting, and provide a default "control" fallback
Use kebab-case for PostHog feature flag keys (e.g., inbox-cleaner, pricing-options-2)
Always define types for A/B test variant flags (e.g., type PricingVariant = "control" | "variant-a" | "variant-b") and provide type safety through type casting

**/*.{ts,tsx}: Don't use primitive type aliases or misleading types
Don't use empty type parameters in type aliases and interfaces
Don't use this and super in static contexts
Don't use any or unknown as type constraints
Don't use the TypeScript directive @ts-ignore
Don't use TypeScript enums
Don't export imported variables
Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions
Don't use TypeScript namespaces
Don't use non-null assertions with the ! postfix operator
Don't use parameter properties in class constructors
Don't use user-defined types
Use as const instead of literal types and type annotations
Use either T[] or Array<T> consistently
Initialize each enum member value explicitly
Use export type for types
Use `impo...

Files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

**/{pages,routes,components}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/gmail-api.mdc)

Never call Gmail API directly from routes or components - always use wrapper functions from the utils folder

Files:

• apps/web/components/NavUser.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/prisma-enum-imports.mdc)

Always import Prisma enums from @/generated/prisma/enums instead of @/generated/prisma/client to avoid Next.js bundling errors in client components

Import Prisma using the project's centralized utility: import prisma from '@/utils/prisma'

Files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)

**/*.{tsx,ts}: Use Shadcn UI and Tailwind for components and styling
Use next/image package for images
For API GET requests to server, use the swr package with hooks like useSWR to fetch data
For text inputs, use the Input component with registerProps for form integration and error handling

Files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

**/*.{tsx,ts,css}

📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)

Implement responsive design with Tailwind CSS using a mobile-first approach

Files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursor/rules/ui-components.mdc)

**/*.tsx: Use the LoadingContent component to handle loading states instead of manual loading state management
For text areas, use the Input component with type='text', autosizeTextarea prop set to true, and registerProps for form integration

Files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)

**/*.{js,jsx,ts,tsx}: Don't use accessKey attribute on any HTML element
Don't set aria-hidden="true" on focusable elements
Don't add ARIA roles, states, and properties to elements that don't support them
Don't use distracting elements like <marquee> or <blink>
Only use the scope prop on <th> elements
Don't assign non-interactive ARIA roles to interactive HTML elements
Make sure label elements have text content and are associated with an input
Don't assign interactive ARIA roles to non-interactive HTML elements
Don't assign tabIndex to non-interactive HTML elements
Don't use positive integers for tabIndex property
Don't include "image", "picture", or "photo" in img alt prop
Don't use explicit role property that's the same as the implicit/default role
Make static elements with click handlers use a valid role attribute
Always include a title element for SVG elements
Give all elements requiring alt text meaningful information for screen readers
Make sure anchors have content that's accessible to screen readers
Assign tabIndex to non-interactive HTML elements with aria-activedescendant
Include all required ARIA attributes for elements with ARIA roles
Make sure ARIA properties are valid for the element's supported roles
Always include a type attribute for button elements
Make elements with interactive roles and handlers focusable
Give heading elements content that's accessible to screen readers (not hidden with aria-hidden)
Always include a lang attribute on the html element
Always include a title attribute for iframe elements
Accompany onClick with at least one of: onKeyUp, onKeyDown, or onKeyPress
Accompany onMouseOver/onMouseOut with onFocus/onBlur
Include caption tracks for audio and video elements
Use semantic elements instead of role attributes in JSX
Make sure all anchors are valid and navigable
Ensure all ARIA properties (aria-*) are valid
Use valid, non-abstract ARIA roles for elements with ARIA roles
Use valid AR...

Files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

**/*.{jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/ultracite.mdc)

**/*.{jsx,tsx}: Don't use unnecessary fragments
Don't pass children as props
Don't use the return value of React.render
Make sure all dependencies are correctly specified in React hooks
Make sure all React hooks are called from the top level of component functions
Don't forget key props in iterators and collection literals
Don't define React components inside other components
Don't use event handlers on non-interactive elements
Don't assign to React component props
Don't use both children and dangerouslySetInnerHTML props on the same element
Don't use dangerous JSX props
Don't use Array index in keys
Don't insert comments as text nodes
Don't assign JSX properties multiple times
Don't add extra closing tags for components without children
Use <>...</> instead of <Fragment>...</Fragment>
Watch out for possible "wrong" semicolons inside JSX elements
Make sure void (self-closing) elements don't have children
Don't use target="_blank" without rel="noopener"
Don't use <img> elements in Next.js projects
Don't use <head> elements in Next.js projects

Files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/utilities.mdc)

**/*.{js,ts,jsx,tsx}: Use lodash utilities for common operations (arrays, objects, strings)
Import specific lodash functions to minimize bundle size (e.g., import groupBy from 'lodash/groupBy')

Files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

apps/web/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (apps/web/CLAUDE.md)

Follow NextJS app router structure with (app) directory

Files:

• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

apps/web/app/(app)/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/page-structure.mdc)

apps/web/app/(app)/**/*.{ts,tsx}: Components for the page are either put in page.tsx, or in the apps/web/app/(app)/PAGE_NAME folder
If we're in a deeply nested component we will use swr to fetch via API
If you need to use onClick in a component, that component is a client component and file must start with use client

Files:

• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

🧠 Learnings (6)

📓 Common learnings

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/environment-variables.mdc:0-0
Timestamp: 2025-11-25T14:36:45.797Z
Learning: Applies to {.env.example,apps/web/env.ts} : Client-side environment variables must be prefixed with `NEXT_PUBLIC_`

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: apps/web/CLAUDE.md:0-0
Timestamp: 2025-11-25T14:36:18.404Z
Learning: Applies to apps/web/**/*NEXT_PUBLIC_* : Prefix client-side environment variables with `NEXT_PUBLIC_`

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/environment-variables.mdc:0-0
Timestamp: 2025-11-25T14:36:43.454Z
Learning: Applies to apps/web/env.ts : For client-side environment variables in `apps/web/env.ts`, prefix them with `NEXT_PUBLIC_` and add them to both the `client` and `experimental__runtimeEnv` sections

📚 Learning: 2025-11-25T14:36:45.797Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/environment-variables.mdc:0-0
Timestamp: 2025-11-25T14:36:45.797Z
Learning: Applies to apps/web/env.ts : Add client-side environment variables to `apps/web/env.ts` under the `client` object with `NEXT_PUBLIC_` prefix and Zod schema validation

Applied to files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

📚 Learning: 2025-11-25T14:36:43.454Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/environment-variables.mdc:0-0
Timestamp: 2025-11-25T14:36:43.454Z
Learning: Applies to apps/web/env.ts : For client-side environment variables in `apps/web/env.ts`, prefix them with `NEXT_PUBLIC_` and add them to both the `client` and `experimental__runtimeEnv` sections

Applied to files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

📚 Learning: 2025-11-25T14:36:45.797Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/environment-variables.mdc:0-0
Timestamp: 2025-11-25T14:36:45.797Z
Learning: Applies to {.env.example,apps/web/env.ts} : Client-side environment variables must be prefixed with `NEXT_PUBLIC_`

Applied to files:

• apps/web/components/NavUser.tsx
• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

📚 Learning: 2025-11-25T14:36:43.454Z

Learnt from: CR
Repo: elie222/inbox-zero PR: 0
File: .cursor/rules/environment-variables.mdc:0-0
Timestamp: 2025-11-25T14:36:43.454Z
Learning: Applies to apps/web/env.ts : Define environment variables in `apps/web/env.ts` using Zod schema validation, organizing them into `server` and `client` sections

Applied to files:

• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

📚 Learning: 2025-07-08T13:14:07.449Z

Learnt from: elie222
Repo: elie222/inbox-zero PR: 537
File: apps/web/app/(app)/[emailAccountId]/clean/onboarding/page.tsx:30-34
Timestamp: 2025-07-08T13:14:07.449Z
Learning: The clean onboarding page in apps/web/app/(app)/[emailAccountId]/clean/onboarding/page.tsx is intentionally Gmail-specific and should show an error for non-Google email accounts rather than attempting to support multiple providers.

Applied to files:

• apps/web/app/(app)/[emailAccountId]/settings/page.tsx

🧬 Code graph analysis (1)

apps/web/components/NavUser.tsx (1)

apps/web/env.ts (1)

• env (16-244)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: cubic · AI code reviewer
• GitHub Check: Jit Security
• GitHub Check: test

🔇 Additional comments (3)

version.txt (1)

1-1: Version bump is consistent with the new behavior.

Incrementing to v2.21.4 cleanly reflects the added env‑gated premium/billing behavior; no issues here.

apps/web/app/(app)/[emailAccountId]/settings/page.tsx (1)

16-16: Env‑gated hiding of premium user sections looks correct.

Importing env from "@/env" and wrapping MultiAccountSection + BillingSection in !env.NEXT_PUBLIC_BYPASS_PREMIUM_CHECKS cleanly hides these premium/billing areas when the bypass flag is enabled, while defaulting to visible when the env var is unset/false. This matches the “hide premium/billing if disabled” intent and follows the NEXT_PUBLIC_* client env conventions in apps/web/env.ts.

Based on learnings, this aligns with the shared env.ts pattern for client variables.

Also applies to: 39-44

apps/web/components/NavUser.tsx (1)

36-36: Premium menu gating via env is consistent and correct.

Using env.NEXT_PUBLIC_BYPASS_PREMIUM_CHECKS to conditionally omit the Premium dropdown item mirrors the settings page logic, ensuring all premium/billing UI is hidden when the bypass flag is enabled while remaining visible by default. The env import from "@/env" matches the shared client‑env pattern defined in apps/web/env.ts.

Based on learnings, this correctly leverages the validated NEXT_PUBLIC_* env configuration.

Also applies to: 180-187

---

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.}

[cubic-dev-ai]

No issues found across 3 files

[jit-ci]

❌ The following Jit checks failed to run:

• secret-detection
• static-code-analysis-js

#jit_bypass_commit in this PR to bypass, Jit Admin privileges required.

More info in the Jit platform.