fix: replace browser alerts with Sonner toasts

[akashagrahari78]

Closes #360

Summary

• Replaced browser alert placeholders with Sonner toast notifications
• Updated UI interactions to use non-blocking toasts instead of alerts
• Added Sonner <Toaster /> to the root layout for global usage

Testing

• Verified toast rendering in the application layout
• Tested UI interactions where alerts were previously used

Screenshots

*Before

*After

Summary by CodeRabbit

• New Features

  • Added a global in-app toast notification system to provide non-blocking feedback across the app.

• Improvements

  • Replaced blocking browser alert dialogs with contextual toast messages for a smoother user experience.
  • Enhanced payment flow notifications with clear, user-facing error messages for verification failures, payment problems, and missing plan information.

[vercel]

@akashagrahari78 is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds the sonner toast library, mounts a global Toaster in the root layout, and replaces several blocking alert() calls with non-blocking toast notifications in payment and filter components.

Changes

Cohort / File(s)	Summary
Dependency Setup apps/web/package.json	Added runtime dependency sonner ^2.0.7.
Global Toast Configuration apps/web/src/app/layout.tsx	Imported and rendered Toaster (theme="system", richColors) in root layout for app-wide toasts.
Toast Integration apps/web/src/components/payment/PaymentFlow.tsx, apps/web/src/components/ui/FiltersContainer.tsx	Replaced browser alert() calls with toast calls: payment errors use toast.error(...); WIP filter message uses toast.info(...). Control flow and state updates unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• [imp]: add pitch to investors #250 — Modifies the same apps/web/src/components/payment/PaymentFlow.tsx file (redirect/auth and cache refresh changes), closely related at the code level.

Poem

🐰
I swapped the bangs for gentle hums,
No blocking pop-ups, just tiny drums.
Sonner sings where alerts once stood,
Smooth little toasts—oh, isn't that good? 🥕✨

🚥 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.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #360: added Sonner dependency, replaced blocking alert calls with non-blocking toast notifications, and integrated Toaster component in the root layout.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to issue #360 objectives; modifications to package.json, layout.tsx, PaymentFlow.tsx, and FiltersContainer.tsx align with replacing alerts with toast notifications.
Title check	✅ Passed	The title 'fix: replace browser alerts with Sonner toasts' directly and accurately summarizes the main change: replacing browser alert() calls with Sonner toast notifications across multiple components and adding Sonner setup to the root layout.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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]

Actionable comments posted: 1

🧹 Nitpick comments (1)

apps/web/src/app/layout.tsx (1)

130-130: Configure Toaster to match the app's dark theme.

The app forces defaultTheme="dark" in ThemeProvider, but Sonner's <Toaster /> defaults to the light theme, so toasts will render with a light background against the app's dark bg-background and feel visually inconsistent with the design system. Additionally, <Toaster /> is rendered outside ThemeProvider, so it can't pick up the active theme from next-themes context automatically.

Consider explicitly setting the theme (and optionally position/richColors) to match the app:

Proposed change

-        <Toaster />
+        <Toaster theme="dark" position="bottom-right" richColors />

Or move <Toaster /> inside ThemeProvider and use theme="system" so it follows next-themes.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/web/src/app/layout.tsx` at line 130, The Toaster is rendered outside
ThemeProvider and defaults to a light theme, causing visual mismatch; fix by
either moving the <Toaster /> inside the existing ThemeProvider so it can use
next-themes and set theme="system", or explicitly configure the Sonner <Toaster
/> props to match the app (e.g., theme="dark", richColors={true} and optional
position) so it renders with the app's dark styling; update the component that
renders <Toaster /> accordingly (referencing <Toaster /> and ThemeProvider).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/src/components/ui/FiltersContainer.tsx`:
- Around line 23-25: The toast message in handleClickWipFilters currently has a
trailing space and lost the original emoji; update the string passed to
toast.info in handleClickWipFilters to remove the trailing whitespace and
restore the original emoji (e.g., "🏗️ Coming very soon") so the WIP message
displays correctly.

---

Nitpick comments:
In `@apps/web/src/app/layout.tsx`:
- Line 130: The Toaster is rendered outside ThemeProvider and defaults to a
light theme, causing visual mismatch; fix by either moving the <Toaster />
inside the existing ThemeProvider so it can use next-themes and set
theme="system", or explicitly configure the Sonner <Toaster /> props to match
the app (e.g., theme="dark", richColors={true} and optional position) so it
renders with the app's dark styling; update the component that renders <Toaster
/> accordingly (referencing <Toaster /> and ThemeProvider).

🪄 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: efab3e22-ebad-4682-bd5f-f55bfc05cce8

📥 Commits

Reviewing files that changed from the base of the PR and between a2ef5f3 and afcf865.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (4)

• apps/web/package.json
• apps/web/src/app/layout.tsx
• apps/web/src/components/payment/PaymentFlow.tsx
• apps/web/src/components/ui/FiltersContainer.tsx

[akashagrahari78]

Issue is resolved as by moving Toaster inside ThemeProvider and dark theme is added.