Skip to content

feat: add i18n support to My Account components#3270

Draft
caetano-vtex wants to merge 1 commit intodevfrom
feat/my-account-i18n
Draft

feat: add i18n support to My Account components#3270
caetano-vtex wants to merge 1 commit intodevfrom
feat/my-account-i18n

Conversation

@caetano-vtex
Copy link
Copy Markdown

Introduce react-intl-based internationalization across all My Account components, including new LocaleSelector, MyAccountIntlProvider, and locale message files for en-US and pt-BR.

Made-with: Cursor

What's the purpose of this pull request?

My Account components had all user-facing strings hardcoded in English, making it impossible to serve shoppers in other languages. This PR lays the i18n foundation for the My Account area — enabling merchants to reach customers in their native language, starting with English and Brazilian Portuguese.

How it works?

This PR introduces a react-intl-based internationalization layer wrapping the entire My Account section:

  • MyAccountIntlProvider — a context provider that wraps all My Account components with react-intl's IntlProvider. It reads the active locale from a useMyAccountLocale hook and resolves the matching message bundle (en-US or pt-BR), falling back to English when no match is found.
  • LocaleSelector — a native <select> component (with a data-fs-locale-selector attribute for styling) that lets users switch between supported locales at runtime. It is rendered inside MyAccountHeader.
  • Message bundles — two JSON files (en-US.json and pt-BR.json) covering all translatable strings across the My Account area: navigation menu, profile, security, orders list, order details (status, summary, payment, delivery, budgets, buying policy alerts), and user details.
  • All existing My Account components have been updated to consume strings via useIntl().formatMessage() instead of hardcoded literals, covering components such as MyAccountListOrders, MyAccountOrderDetails, MyAccountStatusCard, MyAccountBuyingPolicyAlert, MyAccountPaymentCard, and more.

How to test it?

  • Navigate to the My Account area of the storefront.
  • Use the language selector in the header to switch between English and Português.
  • Verify that all labels, buttons, status names, and messages update to the selected language without a page reload.
  • Check the Orders list and open an Order Details page — confirm statuses, payment info, delivery info, and buying policy alerts all render in the selected language.
  • Switch locales while a modal (e.g. cancel order confirmation) is open and confirm it re-renders correctly.

Starters Deploy Preview

NA

References

Checklist

PR Title and Commit Messages

  • PR title and commit messages follow the Conventional Commits specification
    • Available prefixes: feat, fix, chore, docs, style, refactor, ci and test

PR Description

  • Added a label according to the PR goal - breaking change, bug, contributing, performance, documentation..

Dependencies

  • Committed the pnpm-lock.yaml file when there were changes to the packages

Documentation

  • PR description
  • For documentation changes, ping @Mariana-Caetano to review and update (Or submit a doc request)

Introduce react-intl-based internationalization across all My Account
components, including new LocaleSelector, MyAccountIntlProvider, and
locale message files for en-US and pt-BR.

Made-with: Cursor
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 13, 2026

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 67d5c002-0d17-4e86-99aa-eba636445ce0

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/my-account-i18n

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.

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