Skip to content

Pricing comparison table - #576

Merged
Blaumaus merged 3 commits into
mainfrom
pricing-table
Jun 17, 2026
Merged

Blaumaus merged 3 commits into
mainfrom
pricing-table

Conversation

@Blaumaus

@Blaumaus Blaumaus commented Jun 17, 2026 •

Copy link
Copy Markdown
Member

Summary by CodeRabbit

  • New Features
    • Added a dedicated Pricing page with a plan-comparison table (standard/plus/enterprise).
  • Enhancements
    • Improved locale-aware currency formatting across pricing, billing, and session views.
    • Expanded pricing comparison UI copy for English, German, French, Polish, and Ukrainian.
  • Bug Fixes
    • Corrected Telegram login warning text for incorrect passwords.
  • Navigation Updates
    • Updated header/footer “Pricing” links to use the direct pricing route (no hash anchors).

@Blaumaus Blaumaus self-assigned this Jun 17, 2026
@coderabbitai

coderabbitai Bot commented Jun 17, 2026 •

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8e6996d6-83e5-498a-b900-d824f5791a6d

📥 Commits

Reviewing files that changed from the base of the PR and between 0cc2bef and 2c2cf34.

📒 Files selected for processing (6)
  • web/app/components/pricing/MarketingPricing.tsx
  • web/app/components/pricing/PricingComparisonTable.tsx
  • web/app/lib/pricing/format.ts
  • web/app/pages/Project/tabs/Sessions/Pageflow.tsx
  • web/app/pages/UserSettings/UserSettings.tsx
  • web/app/routes/pricing.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • web/app/routes/pricing.tsx

📝 Walkthrough

Walkthrough

Adds a dedicated /pricing Remix route that renders MarketingPricing, a new PricingComparisonTable component, FAQ, and DitchGoogle. Extracts currency formatting into a reusable library and refactors existing pricing UI components to use it. Updates all header and footer navigation links from hash-based anchors to the new route path. Adds localized pricing comparison copy across five locales.

Changes

Dedicated Pricing Page Feature

Layer / File(s) Summary
Route constant and navigation link updates
web/app/utils/routes.ts, web/app/components/Header/index.tsx, web/app/components/Footer/index.tsx, docs/app/components/Footer.tsx
Adds pricing: '/pricing' to the routes constant and updates all Pricing links in the web header (desktop + mobile), web footer (production + community edition), and docs footer from #pricing hash anchors to the new dedicated path.
Currency formatting library
web/app/lib/pricing/format.ts
Creates shared currency formatting utilities: type utilities for format options, getPriceFractionDigits to compute fraction digits from numeric values, getCurrencyFormatOptions to build Intl.NumberFormatOptions for currency formatting, and formatCurrencyAmount to format monetary amounts with locale and currency code support.
MarketingPricing component currency refactoring
web/app/components/pricing/MarketingPricing.tsx
Updates pricing/currency rendering to use formatCurrencyAmount and getCurrencyFormatOptions instead of manual symbol composition. Refactors PriceAmount to accept currencyCode and language, removes CURRENCIES lookup, and updates both subscription and VAT strikethrough price displays.
PricingComparisonTable component
web/app/components/pricing/PricingComparisonTable.tsx
New 612-line component rendering a localized pricing comparison table for three plan tiers. Defines typed row/category structures, implements getCategories(t) for localized feature data with tooltips and external links, RowTooltipContent for tooltip rendering, the main export with sticky header and per-plan pricing labels, FeatureCategoryRows for category/row rendering with optional tooltips, and ValueCell for per-cell icon or translated value display.
Pricing Remix route
web/app/routes/pricing.tsx
New route module with meta (SEO title/description/preview image), sitemap (self-hosted exclusion), loader (redirects to login or fetches Metainfo with skipAuth: true), and PricingRoute component composing MarketingPricing, PricingComparisonTable, FAQ, and DitchGoogle.
Localized pricing comparison copy
web/public/locales/en.json, web/public/locales/de.json, web/public/locales/fr.json, web/public/locales/pl.json, web/public/locales/uk.json
Adds pricing.comparison blocks and titles.pricing entries across all five supported locales, supplying plan category labels, feature names, plan quota value strings, and per-feature tooltip descriptions consumed by PricingComparisonTable.
Pageflow component currency formatting update
web/app/pages/Project/tabs/Sessions/Pageflow.tsx
Refactors monetary amount rendering to use formatCurrencyAmount helper. Extends component props to include language from translations, and updates formatAmount utility to call formatCurrencyAmount for locale-aware formatting of sale/refund events.
UserSettings component currency formatting update
web/app/pages/UserSettings/UserSettings.tsx
Updates billing amount displays to use formatCurrencyAmount helper instead of manual symbol composition. Removes local formatBillingPrice helper and CURRENCIES lookup, then refactors six billing display sections (add-on "active/recurring" summaries and preview "due now"/"recurring" amounts) to call formatCurrencyAmount with locale support.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • Swetrix/swetrix#574: Modifies pricing tooltip content in MarketingPricing.tsx, which is refactored and rendered alongside the new PricingComparisonTable added by this PR.
  • Swetrix/swetrix#470: Updates billing/pricing UI in MarketingPricing.tsx and UserSettings.tsx, both of which are refactored in this PR to use the new currency formatting library.

Poem

🐇 A hop, a skip, a brand-new page,
No more #pricing hash on stage!
A table gleams with tiers aligned,
With tooltips, checks, and perks defined.
In five tongues now the prices sing —
What joyful routes a route can bring! 🎉

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The pull request description is empty with no information provided by the author. Add a description covering the changes made (pricing route/component), community edition support status, and whether any database migrations or documentation updates are needed.
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 (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately reflects the main change: adding a pricing comparison table component with route and localization support.
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 pricing-table

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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

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 `@web/app/components/pricing/PricingComparisonTable.tsx`:
- Around line 390-394: The priceLabel in the pricing comparison table is
manually concatenating the currency symbol and starterPrice without locale-aware
formatting. Replace the string concatenation that builds
`${currency.symbol}${starterPrice}` with Intl.NumberFormat, passing the current
i18n language and the currencyCode to properly format the price according to the
user's locale and currency requirements.

In `@web/app/routes/pricing.tsx`:
- Around line 36-42: The serverFetch call for the metainfo is unprotected and
will crash the entire route if it throws an error. Wrap the serverFetch function
call in a try-catch block, and in the catch handler, log the error and ensure
the metainfo returned in the response object still uses DEFAULT_METAINFO as the
fallback. This allows the pricing route to gracefully degrade and render with
default metainfo when the fetch fails, rather than failing entirely.

In `@web/public/locales/fr.json`:
- Line 3155: The metaDescription string at line 3155 in the French localization
file uses "relectures de session" for session replay, which is inconsistent with
the terminology used elsewhere in the fr.json file. Search the fr.json file to
identify the standard French term used for "session replay" throughout the
locale file, then replace "relectures de session" in the metaDescription value
with the consistent terminology to ensure uniform UI language across all French
copy.
🪄 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: 0b41e36b-7d0a-46bd-9015-1fac346658d9

📥 Commits

Reviewing files that changed from the base of the PR and between 09e0cc5 and 98ac240.

📒 Files selected for processing (11)
  • docs/app/components/Footer.tsx
  • web/app/components/Footer/index.tsx
  • web/app/components/Header/index.tsx
  • web/app/components/pricing/PricingComparisonTable.tsx
  • web/app/routes/pricing.tsx
  • web/app/utils/routes.ts
  • web/public/locales/de.json
  • web/public/locales/en.json
  • web/public/locales/fr.json
  • web/public/locales/pl.json
  • web/public/locales/uk.json

Comment thread web/app/routes/pricing.tsx Resolved
Comment thread web/public/locales/fr.json Resolved
@Blaumaus
Blaumaus merged commit 15b12ab into main Jun 17, 2026
12 checks passed
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