Localisation embed - docV

[ayinloya]

User description

Add localisation support in docV

---

PR Type

Enhancement

---

Description

• Add comprehensive localization support for document verification embed with translation keys

• Implement dynamic page translation system with data-i18n attributes and applyPageTranslations() function

• Add Arabic (ar-EG) and English (en-GB) translation files with page-specific strings

• Set document language and direction attributes based on selected locale

• Prevent flash of untranslated content by hiding main element until translations load

---

File Walkthrough

	Relevant files
Enhancement	doc-verification.js Implement dynamic translation system and localize UI strings packages/embed/src/js/doc-verification.js Import translation functions (t, getDirection) from localization module Add applyPageTranslations() function to translate elements with data-i18n attributes Set document language, direction, and apply translations on configuration load Replace hardcoded strings with translation keys using t() function Hide main content until translations are applied to prevent content flicker +43/-8    doc-verification.html Add translation attributes to HTML elements                            packages/embed/src/doc-verification.html Add data-i18n attributes to all user-facing text elements Set main element to hidden initially to prevent untranslated content flash Replace hardcoded text with translatable elements across all screens Add translation keys for loading, ID selection, upload, complete, and error screens +53/-18
Documentation	ar-EG.json Add Arabic translations for document verification pages    packages/web-components/locales/ar-EG.json Add Arabic translations for loading, ID selection, upload, complete, and error pages Include translations for all user-facing messages and labels Add country not supported error message with variable interpolation +34/-0    en-GB.json Add English translations for document verification pages  packages/web-components/locales/en-GB.json Add English translations for loading, ID selection, upload, complete, and error pages Include translations for all user-facing messages and labels Add country not supported error message with variable interpolation +34/-0

---

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[prfectionist]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review SVG Preservation Logic The applyPageTranslations() function attempts to preserve SVG elements when applying translations by removing all text content and re-appending the SVG. This approach may fail if there are multiple child elements or text nodes, potentially losing content. Consider using innerHTML manipulation or a more robust DOM traversal method. function applyPageTranslations() { // Apply translations to all elements with data-i18n attribute document.querySelectorAll('[data-i18n]').forEach((element) => { const key = element.getAttribute('data-i18n'); const translation = t(key); // For elements with child SVGs (buttons), preserve the SVG const svg = element.querySelector('svg'); if (svg) { element.textContent = translation; element.appendChild(svg); } else { element.textContent = translation; } }); Race Condition Risk The main element is hidden initially and revealed after translations load. If setCurrentLocale() fails or takes too long, the page remains hidden indefinitely with no error handling or timeout mechanism. Consider adding error handling and a fallback to show content even if translations fail to load. Missing Translation Key The error message uses a translation key with interpolation t('pages.error.countryNotSupported', { country: countryCode }), but the translation files show the key as {{country}} placeholder. Verify that the localization library correctly handles this interpolation format and that the parameter name matches.

[beastawakens]

One query, everything else looks fine!

[beastawakens]

LGTM!