Skip to content

feat: add ar, fi, nb, ta, vi locales to dynamic checkout#265

Open
charles-elissa-cko wants to merge 1 commit into
masterfrom
feat/add-locales-ar-fi-nb-ta-vi
Open

feat: add ar, fi, nb, ta, vi locales to dynamic checkout#265
charles-elissa-cko wants to merge 1 commit into
masterfrom
feat/add-locales-ar-fi-nb-ta-vi

Conversation

@charles-elissa-cko

Copy link
Copy Markdown

Summary

Adds translations for five new locales to the dynamic checkout:

  • ar — Arabic
  • fi — Finnish
  • nb — Norwegian Bokmål
  • ta — Tamil
  • vi — Vietnamese

Arabic includes RTL layout support: a dir="rtl" attribute is set on the widget wrapper when the locale is ar, with accompanying style overrides for payment-method buttons, the CVC input/icon, scheme logos, and the delete-payment-method button.

Changes

  • New locale files under src/dynamic-checkout/locales/
  • Registered new locales in references.ts and the Translations.localeTranslationsMap
  • RTL wrapper attribute in dynamic-checkout.ts and [dir="rtl"] style overrides in styles/default.ts
  • Bumped version to 1.9.6

🤖 Generated with Claude Code

Add translations for Arabic, Finnish, Norwegian Bokmål, Tamil, and
Vietnamese. Arabic gets RTL layout support via a `dir="rtl"` attribute
on the widget wrapper plus accompanying style overrides.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 8, 2026 07:32

Copilot AI 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.

Pull request overview

This PR adds five new translation locales to the Dynamic Checkout widget (ar, fi, nb, ta, vi) and introduces RTL layout handling for Arabic by setting dir="rtl" on the widget wrapper, with corresponding CSS overrides.

Changes:

  • Added new locale translation files for ar, fi, nb, ta, vi.
  • Registered the new locales in references.ts and Translations.localeTranslationsMap.
  • Added RTL handling for Arabic via dir="rtl" on the widget wrapper and RTL-specific style overrides.
  • Bumped package version to 1.9.6.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/dynamic-checkout/utils/translations.ts Registers the five new locales in the translation map.
src/dynamic-checkout/styles/default.ts Adds RTL CSS overrides intended for Arabic.
src/dynamic-checkout/references.ts Adds TS reference paths for the new locale files.
src/dynamic-checkout/locales/ar.ts Adds Arabic translations (used with RTL).
src/dynamic-checkout/locales/fi.ts Adds Finnish translations.
src/dynamic-checkout/locales/nb.ts Adds Norwegian Bokmål translations.
src/dynamic-checkout/locales/ta.ts Adds Tamil translations.
src/dynamic-checkout/locales/vi.ts Adds Vietnamese translations.
src/dynamic-checkout/dynamic-checkout.ts Sets dir="rtl" on the widget wrapper when locale is ar.
package.json Bumps version from 1.9.5 to 1.9.6.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +933 to +957
/* Right-to-left layout overrides (e.g. Arabic locale) */
[dir="rtl"] .dco-payment-method-button-wrapper {
padding-right: 0;
padding-left: 10px;
}

[dir="rtl"] .dco-payment-method-card-form-input-cvc {
padding-right: 0;
padding-left: 40px;
}

[dir="rtl"] .dco-card-cvc-icon {
right: auto;
left: 10px;
}

[dir="rtl"] .dco-card-scheme-logo {
right: auto;
left: 10px;
}

[dir="rtl"] .dco-delete-payment-method-button {
margin-left: 0;
margin-right: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants