Add translation to enhanced document verification

[ayinloya]

PR Type

Enhancement

---

Description

• Add internationalization support to enhanced document verification flow

• Implement dynamic translation for UI elements using data-i18n attributes

• Add RTL language support with automatic text direction detection

• Update locale files with new translation keys for ID selection and error pages

---

File Walkthrough

Relevant files

Enhancement

enhanced-document-verification.js Implement translation system and replace hardcoded strings packages/embed/src/js/enhanced-document-verification.js Import translation utilities (translate, getDirection) from localisation module Add applyPageTranslations() function to translate elements with data-i18n attributes Set document text direction and apply translations after locale initialization Replace hardcoded strings with translate() calls for ID selection placeholders and error messages +28/-5    enhanced-document-verification.html Add translation attributes to HTML elements                            packages/embed/src/enhanced-document-verification.html Add data-i18n attributes to all user-facing text elements across all screens Hide main content initially until translations are loaded Update loading, ID selection, upload, error, and completion screens with translation keys Add translation keys to close buttons and form labels +22/-22  ar-EG.json Clean up duplicates and add Arabic translation key              packages/web-components/locales/ar-EG.json Remove duplicate fileUpload error translation block Add selectCountryFirst translation key to pages.idSelection section +1/-8      en-GB.json Clean up duplicates and add English translation key            packages/web-components/locales/en-GB.json Remove duplicate fileUpload error translation block Add selectCountryFirst translation key to pages.idSelection section +1/-8

---

---

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: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Race Condition Risk The applyPageTranslations() function is called immediately after setCurrentLocale(), but setCurrentLocale() is an async function that is not awaited. This could lead to translations being applied before the locale is fully loaded, resulting in untranslated content being displayed. await setCurrentLocale(config.translation?.language || 'en'); document.documentElement.dir = getDirection(); applyPageTranslations(); Missing Error Handling The applyPageTranslations() function doesn't handle cases where translate() might return undefined or fail. If a translation key is missing, element.textContent will be set to undefined, potentially breaking the UI display. function applyPageTranslations() { document.querySelectorAll('[data-i18n]').forEach((element) => { const key = element.getAttribute('data-i18n'); if (key) { element.textContent = translate(key); } }); } Content Flash Issue The main element is initially hidden and only shown after translations are applied. However, if translation loading fails or takes too long, users will see a blank screen indefinitely with no feedback or fallback mechanism. <main hidden>

[github-actions]

This branch has been deployed to s3 / cloudfront.

✅ Preview URL for Smart Camera Web:
https://cdn.smileidentity.com/js/preview-localisation-enhanhanced-docv/smart-camera-web.js
✅ Preview URL for Embed:
https://cdn.smileidentity.com/inline/preview-localisation-enhanhanced-docv/js/script.min.js
✅ Preview URL for Web Client:
https://d1xoqnbu22767j.cloudfront.net

[beastawakens]

LGTM