Skip to content

feat(web): user-count slider on pricing page + compare-table polish#1677

Merged
yannickmonney merged 3 commits into
mainfrom
feat/web-pricing-user-slider-and-compare-polish
May 6, 2026
Merged

feat(web): user-count slider on pricing page + compare-table polish#1677
yannickmonney merged 3 commits into
mainfrom
feat/web-pricing-user-slider-and-compare-polish

Conversation

@yannickmonney

Copy link
Copy Markdown
Contributor

Summary

  • New reusable Slider primitive in @tale/ui with rounded track + accent fill, thumb-following value tooltip (auto-hides), and tick marks.
  • Pricing page gets a UserCountControl (slider 25–1000 with ticks every 100, manual input that can exceed 1000). The Enterprise card now displays the calculated monthly total with a per-user breakdown line. Entries below 25 flash a tooltip and clamp to 25 on blur.
  • Compare table picks up a Custom DPA row (enterprise-only) with a ? hover popover, "Installation" is renamed to "Standard installation", SMS phrasing is removed, and the WhatsApp row is dropped.
  • Enterprise pricing card drops the "Custom development & consulting available" bullet.
  • Cloud-AI providers note clarifies EU/CH region; "AI training courses" in the training row is now a link to the existing edoobox course catalog.

Pre-PR checklist

  • Ran bun run check (format, lint, typecheck, all tests). 30/30 tasks pass; 3046 tests green.
  • N/A — no services/platform/messages changes (web-only).
  • N/A — no docs/ content affected (marketing site changes).
  • N/A — @tale/docs lint covered by bun run check.
  • N/A — no README impact.

Test plan

  • Visit /pricing: slider drags between 25 and 1000 with ticks at every 100; thumb tooltip shows the count and disappears after ~1.5s.
  • Type a value < 25 in the input → tooltip "Minimum is 25 users" briefly appears; blur clamps to 25.
  • Type a value > 1000 (e.g. 5000) → input accepts it; Enterprise total scales linearly.
  • CHF / EUR + monthly / yearly toggles continue to work; Enterprise total reformats per region.
  • In the compare table, hover the ? next to "Custom DPA" → tooltip explains custom DPAs; row shows ✓ for Enterprise and — for Community.
  • Confirm "Installation" row reads "Standard installation"; no SMS/WhatsApp text remains in the visible features/compare areas.
  • Click the linked "AI training courses" in the training row → opens the edoobox catalog in a new tab.
  • Verify French and German translations render correctly across the slider, tooltip, and compare-table updates.

- Add reusable @tale/ui Slider with rounded track, accent-filled progress, thumb-following value tooltip and tick marks
- Pricing page: new UserCountControl (slider 25-1000 with ticks every 100, manual input can exceed 1000); Enterprise card now shows the calculated monthly total with a per-user breakdown line; entries below 25 flash a tooltip and clamp to 25 on blur
- Compare table: added "Custom DPA" row (enterprise-only) with a "?" hover info popover; "Installation" row renamed to "Standard installation"; removed SMS phrasing throughout and dropped the "WhatsApp support" row
- Pricing card: removed "Custom development & consulting available"
- Cloud-AI providers note clarifies EU/CH region; "AI training courses" is now a link to the existing edoobox course catalog
@coderabbitai

coderabbitai Bot commented May 6, 2026

Copy link
Copy Markdown
Contributor

Warning

Rate limit exceeded

@yannickmonney has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 35 minutes and 8 seconds before requesting another review.

To continue reviewing without waiting, purchase usage credits in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 83689611-1575-4918-886d-872db0bc3724

📥 Commits

Reviewing files that changed from the base of the PR and between 3b1e3c6 and b7e7499.

📒 Files selected for processing (43)
  • packages/ui/package.json
  • packages/ui/src/components/forms/slider.tsx
  • packages/ui/src/index.ts
  • packages/ui/src/lib/format.test.ts
  • services/web/app/components/blocks/compare-table.tsx
  • services/web/app/components/blocks/cta-deploy.tsx
  • services/web/app/components/blocks/feature-sectors.tsx
  • services/web/app/components/blocks/hardware-compare.tsx
  • services/web/app/components/blocks/hardware-tiers.tsx
  • services/web/app/components/blocks/hero-headline.tsx
  • services/web/app/components/blocks/pricing-compare.tsx
  • services/web/app/components/blocks/pricing-tiers.tsx
  • services/web/app/components/blocks/user-count-control.tsx
  • services/web/app/components/layout/language-switcher.tsx
  • services/web/app/components/layout/localized-link.tsx
  • services/web/app/components/layout/site-footer.tsx
  • services/web/app/components/layout/site-header.tsx
  • services/web/app/entry-server.tsx
  • services/web/app/pages/contact-page.tsx
  • services/web/app/pages/hardware-pricing-page.tsx
  • services/web/app/pages/home-page.tsx
  • services/web/app/pages/pricing-page.tsx
  • services/web/app/pages/request-demo-page.tsx
  • services/web/app/routeTree.gen.ts
  • services/web/app/routes/$lang.tsx
  • services/web/app/routes/$lang/contact.tsx
  • services/web/app/routes/$lang/hardware-pricing.tsx
  • services/web/app/routes/$lang/index.tsx
  • services/web/app/routes/$lang/pricing.tsx
  • services/web/app/routes/$lang/request-demo.tsx
  • services/web/app/routes/__root.tsx
  • services/web/app/routes/contact.tsx
  • services/web/app/routes/hardware-pricing.tsx
  • services/web/app/routes/index.tsx
  • services/web/app/routes/pricing.tsx
  • services/web/app/routes/request-demo.tsx
  • services/web/lib/i18n/i18n.ts
  • services/web/lib/i18n/locales.ts
  • services/web/lib/i18n/localized-paths.ts
  • services/web/lib/i18n/use-current-locale.ts
  • services/web/messages/de.json
  • services/web/messages/en.json
  • services/web/messages/fr.json
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/web-pricing-user-slider-and-compare-polish

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.

- Mount every page under both an unprefixed (English) tree and a parallel `/$lang/...` tree (de, fr) so the URL itself reflects and persists the active language; reload, share, and back-button now stay on the chosen locale.
- Extract the five route bodies into shared page components under `app/pages/` so the unprefixed and `$lang/...` route files are thin shells around one renderer per page.
- Drive `i18n.language` from the URL: a top-level effect in `__root.tsx` reads `useCurrentLocale()` (sourced from the `$lang` param) and resolves it through `resolveRegionalLocale()`; SSR mirrors the same detection in `entry-server.tsx` so the very first render uses the right bundle and there's no flash.
- Replace every internal `<Link>` with a typed `<LocalizedLink>` wrapper that maps canonical paths (`/pricing`, `/`, …) to the right route id + `lang` param at render time.
- Update LanguageSwitcher to navigate (preserving search + hash) instead of just calling `i18n.changeLanguage`; redirect any unknown `$lang` value to the English root via `beforeLoad`.

chore(ui): make Swiss-grouping format test resilient to slim-ICU runtimes

The CI Node image emits U+0027 instead of U+2019 for the de-CH grouping separator. Normalize both to ASCII apostrophe before asserting so the test passes on full-ICU and slim-ICU alike.
@yannickmonney yannickmonney merged commit da6610b into main May 6, 2026
17 checks passed
@yannickmonney yannickmonney deleted the feat/web-pricing-user-slider-and-compare-polish branch May 6, 2026 20:48
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