Skip to content

[PB-5978]: feat(mail)/frozen account state#53

Merged
jzunigax2 merged 6 commits into
masterfrom
feat/disabled-account-state
May 15, 2026
Merged

[PB-5978]: feat(mail)/frozen account state#53
jzunigax2 merged 6 commits into
masterfrom
feat/disabled-account-state

Conversation

@jzunigax2
Copy link
Copy Markdown
Contributor

@jzunigax2 jzunigax2 commented May 8, 2026

Added account suspended notification to the sidebar. Locked some actions when account status is suspended

@jzunigax2 jzunigax2 self-assigned this May 8, 2026
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented May 11, 2026

Deploying mail-web with  Cloudflare Pages  Cloudflare Pages

Latest commit: eba51ab
Status: ✅  Deploy successful!
Preview URL: https://d6189205.mail-web-ea0.pages.dev
Branch Preview URL: https://feat-disabled-account-state.mail-web-ea0.pages.dev

View logs

@jzunigax2 jzunigax2 force-pushed the feat/disabled-account-state branch from 65b05ed to 99d313d Compare May 12, 2026 15:57
@jzunigax2 jzunigax2 marked this pull request as ready for review May 12, 2026 16:28
@jzunigax2 jzunigax2 requested a review from xabg2 as a code owner May 12, 2026 16:28
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 12, 2026

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 842318f3-361d-4563-9a78-3a8441e03399

📥 Commits

Reviewing files that changed from the base of the PR and between f8202bb and eba51ab.

📒 Files selected for processing (2)
  • src/components/Sidenav/useSidenavData.test.ts
  • src/components/Sidenav/useSidenavData.ts

📝 Walkthrough

Walkthrough

Adds a reusable useSidenavData hook (storage + mail-derived UI state), a getDaysUntil utility usage, and tests. Sidenav now consumes the hook to disable compose when mail is suspended and display a translated downgrade/expiration notification with days-until-deletion.

Changes

Sidenav data and timing utilities

Layer / File(s) Summary
Days-Until utility and tests
src/utils/days-until/index.ts, src/utils/days-until/daysUntil.test.ts
Adds getDaysUntil(date) using dayjs and MS_PER_DAY with tests covering edge cases and rounding behavior.
useSidenavData implementation
src/components/Sidenav/useSidenavData.ts
New hook that reads storage plan limit/usage and mail account status, computes isMailDisabled, daysUntilDeletion, and storagePercentage, and returns loading flags and raw values.
useSidenavData tests
src/components/Sidenav/useSidenavData.test.ts
Vitest tests that mock RTK Query hooks to verify suspension logic, days-until calculation with fixed time, storage percentage calculations (including caps and zero-limit), and loading propagation.

Sequence Diagram(s)

sequenceDiagram
  participant Sidenav
  participant useSidenavData
  participant useGetStorageQueries
  participant useGetMailMeQuery
  participant getDaysUntil
  Sidenav->>useSidenavData: call hook
  useSidenavData->>useGetStorageQueries: query plan limit & usage
  useSidenavData->>useGetMailMeQuery: query mail account
  useSidenavData->>getDaysUntil: compute daysUntilDeletion(deletionAt)
  useGetMailMeQuery-->>useSidenavData: mailMe (active/suspended)
  useGetStorageQueries-->>useSidenavData: planLimit / planUsage
  useSidenavData-->>Sidenav: { isMailDisabled, daysUntilDeletion, storagePercentage, loading flags }
Loading

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • internxt/mail-web#21: Both modify Sidenav compose-button interactions and compose wiring.
  • internxt/mail-web#32: Related mail SDK/API and error module changes; this PR adds getMe()/FetchMailMeError while #32 focuses on other mail endpoints.
  • internxt/mail-web#31: Related MailService introductions and SDK wiring that this PR extends.

Suggested labels

enhancement

Suggested reviewers

  • xabg2
  • larryrider

"I'm a rabbit in the codebase, hopping through the day,
I count the days until a mailbox slips away.
With hooks and tests I tidy up the trail,
A tiny carrot emoji for each passing mail. 🥕"

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The PR title clearly describes the main feature: handling a frozen/suspended mail account state, which directly aligns with the primary changes of adding suspension notifications and disabling actions.
Description check ✅ Passed The description is directly related to the changeset, accurately stating that a suspended account notification was added to the sidebar and actions are locked when account status is suspended.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/disabled-account-state

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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

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

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Warning

CodeRabbit couldn't request changes on this pull request because it doesn't have sufficient GitHub permissions.

Please grant CodeRabbit Pull requests: Read and write permission and re-run the review.

👉 Steps to fix this

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/Sidenav/index.tsx`:
- Around line 24-27: Extract the data fetching and derived UI state from Sidenav
into a hook (e.g., create useMailAccountState or useSidenavData) so the
component remains presentational: move the useGetMailMeQuery() call and derived
values isMailDisabled, daysUntilDeletion (derived via
getDaysUntil(mailMe?.deletionAt)), and storagePercentage (derived from planUsage
and planLimit) into that hook, have the hook return plain values/booleans
(mailMe, isMailDisabled, daysUntilDeletion, storagePercentage, planUsage,
planLimit) and any callbacks, then replace the in-component logic in Sidenav
with a single call to the new hook and pass the returned values as props to the
render layer; update any other similar logic around lines 76-85 into the same or
another focused use... hook following the same pattern.
- Around line 79-82: The CTA's onAction is currently a no-op and should invoke
the real upgrade flow; replace the empty handler assigned to onAction with a
call that opens your app's upgrade UI (for example call an existing helper like
openUpgradeModal(), openBillingPortal(), or dispatch a navigation such as
router.push('/settings/billing')), ensuring you import or access that function
inside the Sidenav component and pass any required params; update the onAction
reference (the handler on the message created with
translate('mailDowngraded.message'...)) to invoke that real upgrade function
instead of () => {} so the warning button actually starts the upgrade flow.

In `@src/utils/days-until/index.ts`:
- Around line 3-4: The getDaysUntil function currently computes days for any
string and can return NaN for unparseable dates; update getDaysUntil to first
parse the input (e.g., const ts = Date.parse(date) or new Date(date).getTime()),
check Number.isFinite(ts) or !Number.isNaN(ts), and if the parse fails return
undefined; otherwise use ts and MS_PER_DAY in the Math.max/Math.ceil calculation
so invalid date strings do not propagate NaN to callers.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: b187cb78-a03d-40ee-b0cf-5170ddddf4e1

📥 Commits

Reviewing files that changed from the base of the PR and between c2fa38a and 99d313d.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (15)
  • package.json
  • src/components/Sidenav/index.tsx
  • src/errors/mail/index.ts
  • src/hooks/navigation/useSidenavNavigation.tsx
  • src/i18n/locales/en.json
  • src/i18n/locales/es.json
  • src/i18n/locales/fr.json
  • src/i18n/locales/it.json
  • src/services/sdk/mail/index.ts
  • src/services/sdk/mail/mail.service.test.ts
  • src/store/api/base.ts
  • src/store/api/mail/index.ts
  • src/store/api/mail/mail.api.test.ts
  • src/utils/days-until/daysUntil.test.ts
  • src/utils/days-until/index.ts

Comment thread src/components/Sidenav/index.tsx Outdated
Comment thread src/components/Sidenav/index.tsx
Comment thread src/utils/days-until/index.ts Outdated
isLoadingPlanLimit,
isLoadingPlanUsage,
storagePercentage,
} = useSidenavData();
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🚀

expect(mockMailClient.getMailAccount).toHaveBeenCalledOnce();
});

test('When fetching the mail account and it is suspended, then suspendedAt and deletionAt should be present', async () => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Avoid using technical descriptions. When fetching the mail account and it is suspended, then the date when it was suspended and it will be deleted are present

Comment thread src/store/api/mail/mail.api.test.ts Outdated
expect(result.data).toStrictEqual(mockAccount);
});

test('When fetching the mail account fails, then a FetchMailMeError should be returned', async () => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

We can use an error indicating so is thrown

…ive scenarios for mail account status and storage usage
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🧹 Nitpick comments (1)
src/components/Sidenav/useSidenavData.test.ts (1)

127-169: ⚡ Quick win

Add a boundary test for undefined storage values.

There’s no case asserting behavior when RTK Query returns data: undefined for plan values; adding it will protect fallback semantics and avoid regressions in storagePercentage.

Suggested test case
   describe('Storage percentage', () => {
+    test('When storage values are unavailable, then usage percentage is reported as zero', () => {
+      setupMocks({
+        planLimit: undefined as unknown as number,
+        planUsage: undefined as unknown as number,
+      });
+
+      const { result } = renderHook(() => useSidenavData());
+
+      expect(result.current.planLimit).toBe(0);
+      expect(result.current.planUsage).toBe(0);
+      expect(result.current.storagePercentage).toBe(0);
+    });
+
     test('When the used storage is half of the available storage, then the reported usage is fifty percent', () => {

As per coding guidelines, src/**/*.test.{ts,tsx}: ... cover happy path, edge cases, error/rejection paths, and boundary values.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Sidenav/useSidenavData.test.ts` around lines 127 - 169, Add a
boundary test to ensure useSidenavData handles RTK Query returning undefined for
plan values: create a new test in the "Storage percentage" suite that calls
setupMocks with planUsage: undefined and planLimit: undefined (and appropriate
isLoading flags false), renderHook(() => useSidenavData()), and assert that
result.current.storagePercentage is 0 and that planUsage/planLimit fall back to
safe values (e.g., 0) and loading flags (isLoadingPlanLimit/isLoadingPlanUsage)
are false; reference the existing tests using setupMocks, useSidenavData,
storagePercentage, planUsage, planLimit, isLoadingPlanLimit and
isLoadingPlanUsage to place and name the test consistent with the suite.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/Sidenav/useSidenavData.test.ts`:
- Line 3: Import of useSidenavData uses a relative path; replace the relative
import with the project path alias (e.g., use '@/...' instead of './...') so
internal imports follow the src alias convention—update the import that
references the useSidenavData symbol in useSidenavData.test.ts to use the `@/`*
alias form consistent with the repository rules.

In `@src/components/Sidenav/useSidenavData.ts`:
- Around line 6-12: The code sets planLimit default to 1 which can misrepresent
unknown/unloaded limits; change the default to 0 or undefined when destructuring
the result of useGetStorageLimitQuery (variable planLimit in useSidenavData.ts)
and adjust the storagePercentage calculation to explicitly handle missing/zero
limits (e.g., treat undefined or 0 as "unknown" and return 0% or a special
state) so storagePercentage = planLimit > 0 ? Math.min((planUsage / planLimit) *
100, 100) : 0; also ensure any UI that relies on isLoadingPlanLimit or planLimit
distinguishes loading/unknown vs actual 0 values.

---

Nitpick comments:
In `@src/components/Sidenav/useSidenavData.test.ts`:
- Around line 127-169: Add a boundary test to ensure useSidenavData handles RTK
Query returning undefined for plan values: create a new test in the "Storage
percentage" suite that calls setupMocks with planUsage: undefined and planLimit:
undefined (and appropriate isLoading flags false), renderHook(() =>
useSidenavData()), and assert that result.current.storagePercentage is 0 and
that planUsage/planLimit fall back to safe values (e.g., 0) and loading flags
(isLoadingPlanLimit/isLoadingPlanUsage) are false; reference the existing tests
using setupMocks, useSidenavData, storagePercentage, planUsage, planLimit,
isLoadingPlanLimit and isLoadingPlanUsage to place and name the test consistent
with the suite.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 411b5301-77cd-44cf-82ba-b916a13e7382

📥 Commits

Reviewing files that changed from the base of the PR and between 99d313d and f8202bb.

📒 Files selected for processing (7)
  • src/components/Sidenav/index.tsx
  • src/components/Sidenav/useSidenavData.test.ts
  • src/components/Sidenav/useSidenavData.ts
  • src/services/sdk/mail/mail.service.test.ts
  • src/store/api/mail/mail.api.test.ts
  • src/utils/days-until/daysUntil.test.ts
  • src/utils/days-until/index.ts
🚧 Files skipped from review as they are similar to previous changes (4)
  • src/utils/days-until/daysUntil.test.ts
  • src/components/Sidenav/index.tsx
  • src/services/sdk/mail/mail.service.test.ts
  • src/store/api/mail/mail.api.test.ts

@@ -0,0 +1,170 @@
import { renderHook } from '@testing-library/react';
import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
import { useSidenavData } from './useSidenavData';
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win

Use @/* alias for internal imports in src.

Switch the local relative import to alias form for consistency with repository rules.

-import { useSidenavData } from './useSidenavData';
+import { useSidenavData } from '@/components/Sidenav/useSidenavData';

As per coding guidelines, src/**/*.{ts,tsx}: Use the path alias @/* → src/* when importing internal modules.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { useSidenavData } from './useSidenavData';
import { useSidenavData } from '@/components/Sidenav/useSidenavData';
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Sidenav/useSidenavData.test.ts` at line 3, Import of
useSidenavData uses a relative path; replace the relative import with the
project path alias (e.g., use '@/...' instead of './...') so internal imports
follow the src alias convention—update the import that references the
useSidenavData symbol in useSidenavData.test.ts to use the `@/`* alias form
consistent with the repository rules.

Comment thread src/components/Sidenav/useSidenavData.ts Outdated
@sonarqubecloud
Copy link
Copy Markdown

@jzunigax2 jzunigax2 requested a review from xabg2 May 14, 2026 23:37
@jzunigax2 jzunigax2 merged commit f7d920b into master May 15, 2026
6 checks passed
@jzunigax2 jzunigax2 deleted the feat/disabled-account-state branch May 15, 2026 14:55
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.

2 participants