fix(i18n): card copy that bypassed the catalog, and the prop guard that let it - #2710
Merged
Conversation
Four card-surface strings rendered English regardless of the user's language. The screens themselves are fully localized, so these read as the page ignoring the preference: - YourCardScreen's balance-due notice passed its title and description as literals. react/jsx-no-literals runs with ignoreProps: true, so copy handed to a component as a prop is invisible to the guard — the same shape as CardAdjustmentNotice on the card receipt, fixed here too. - The five card-terms legal links hardcoded /en/. The marketing pages are locale-routed and fall back to English prose when a document has no translation, so linking the user's own locale is strictly better. The marketing tags differ from the app's in case (pt-br vs pt-BR), so the href goes through toMarketingLocale rather than the raw locale. - Lock/CancelCardModal threw an English literal for the not-yet-loaded overview, two lines above siblings that use t(). Unlike most throws here, this one is rendered into the modal's error slot. es-AR takes voseo overrides only where the es-419 string it inherits carries a tuteo verb form. Backend reason prose on the application-status screen is unchanged: every code the resolver emits already maps to identity.reasons.* except document_rejected, which is deliberately unmapped.
…iding
react/jsx-no-literals runs with ignoreProps: true and cannot be flipped —
every non-copy prop (variant="warning", icon="info", type="button") is a
string literal too. That blind spot is how the card balance-due notice and
the card-receipt adjustment notice shipped English to every locale from
screens where all other copy went through t().
Adds a local rule for the gap. It checks only props that carry prose and
only values that read as prose (two or more words, with each interpolation
standing in as one word), so ids, slugs and single tokens like label="CUIT"
stay legal while `${amount} will be debited …` does not. Both edges are
pinned by RuleTester cases.
It is a named rule rather than another no-restricted-syntax selector
because that array lives in the repo-wide block: redefining the rule for
the localized surface would replace it there, silently dropping the
router.back, nuqs and toast guards exactly where they matter most.
Clears every violation it found:
- add-money bank reuses addMoney.errors.rateUnavailable, which already said
this in three languages
- ExchangeRate had two labels plus three module-level English constants the
rule cannot see; all five now come from the catalog
- "Exchange rate" existed twice once ExchangeRate needed it, so the
transaction-row key moves to common — the drift test allows one key per
string, and this is one string
- MaintenanceBanner, ReConsentModal title, and the dismiss aria-label on
the pending-task cards
MantecaDepositInfo keeps "Razón Social": it is the field name the user's
Argentine banking app shows, and translating it breaks the match they are
transcribing.
recover-wallet stays outside the guard's globs. It has no useTranslations
at all — an English-only recovery tool, like the fix-card-signature page
already exempted above it. Localizing it is its own job.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Comment |
Collaborator
Author
Alternative: #2711 lands the same change on
|
Contributor
Code-analysis diffPainscore total: 7159.84 → 7166.31 (+6.47) 🆕 New findings (34)
…and 14 more. ✅ Resolved (34)
…and 14 more. 📈 Painscore deltas (top movers)
|
Contributor
🧪 UI test report — ✅ all greenSuites
📊 Coverage (unit)
⏱ 10 slowest test cases
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The card page reads as untranslated for es-419 / pt-BR users, and it is not the plumbing: every screen under
src/components/Card/callsuseTranslations, thecardnamespace has 232 genuinely translated keys, and there is exactly oneNextIntlClientProvider— above every route. What leaks is copy that never reaches the catalog.The common cause is a guard gap.
react/jsx-no-literalsruns withignoreProps: true, so it only inspects JSX children. Copy handed to a component as a prop is invisible to it, and that is precisely the shape that shipped English:ignorePropscannot simply be flipped —variant="warning",icon="info"andtype="button"are string literals too.What changed
Card surface
card.yourCard.balanceDueTitle/balanceDueBodyYourCardScreentransaction.cardRows.settlementAdjustedNoticeCardAdjustmentNotice/en/CardTermsScreencard.errors.cardDetailsLoadingLockCardModal,CancelCardModalThe five card-terms links pointed at
peanut.me/en/card-esign,/en/card-terms-us,/en/card-privacyand friends. Those marketing pages are locale-routed and fall back to English prose when a document has no translation, so linking the user's own locale is strictly better than pinning/en/. The marketing locale set spells its tags differently from the app's (pt-brvspt-BR), so the href goes throughtoMarketingLocalerather than the raw locale — pinned by a new test.The two modal errors are worth a look: they sat two lines above siblings already using
t('errors.*'), and unlike most throws in this codebase they are rendered straight into the modal's error slot rather than collapsed by the friendly-error mapper.The guard
A local ESLint rule (
eslint-rules/copy-props-from-catalog.js) covers the gap. It checks only props that carry prose, and only values that read as prose — two or more words, with each interpolation standing in as one word.label="CUIT"andtitle={`$${cents}`}stay legal;title={`${amount} will be debited …`}does not. Both edges are pinned by RuleTester cases.It is a named rule rather than another
no-restricted-syntaxselector for a reason worth flagging in review: that array lives in the repo-widesrc/**block, and flat config replaces rule options instead of merging them. Scoping a secondno-restricted-syntaxto the localized surface would have silently dropped therouter.back, nuqs and toast guards exactly where they matter most.Everything the rule found is fixed — no exception list, no follow-up debt:
add-money/[country]/bankreusesaddMoney.errors.rateUnavailable, which already said this in three languagesExchangeRatehad two hardcoded labels plus three module-level English constants the rule structurally cannot see; all five now come from the catalog"Exchange rate"existed twice onceExchangeRateneeded it, so the transaction-row key moved tocommon— the duplicate-value drift test allows one key per string, and this is one stringMaintenanceBanner, theReConsentModaltitle, and the dismissaria-labelon pending-task cardsDeliberately not changed
MantecaDepositInfokeeps"Razón Social"behind a documented one-line disable. It is the field name the user's Argentine banking app displays; translating it breaks the match they are transcribing. Same precedent as the glossary's verbatim Apple Wallet quote.recover-walletstays outside the guard's globs. It has zerouseTranslations— an English-only recovery tool, like thefix-card-signaturepage already exempted right above it. Localizing it is its own job, not a silent glob widening that reds the build.identity.reasons.*exceptdocument_rejected, which is unmapped on purpose: it only ships with the self-heal classifier's specific instruction ("Your ID photo was blurry…"), and a generic catalog line would mask it. Closing that needs the classifier's stable action code on the wire — an api-ts change.Locales
Keys added to en / es-419 / pt-BR. es-AR takes voseo overrides only where the es-419 string it inherits carries a tuteo verb (
vuelve→volvé,reconoces→reconocés,contacta→contactá) — the glossary test checks es-AR resolved, so tuteo leaking through the fallback would fail.Verification
pnpm jest— all suites green (note:git submodule update --init src/contentis required or three suites fail on missing content)tsc --noEmitcleaneslint .— 0 errorsprettier --check .— clean