Localisation biometric kyc

[ayinloya]

PR Type

Enhancement

---

Description

• Localize biometric KYC page with translation support

• Add dynamic translations for UI elements and messages

• Implement RTL support with direction detection

• Update locale files with new translation keys

---

File Walkthrough

Relevant files

Enhancement

biometric-kyc.js Implement translation system for biometric KYC                      packages/embed/src/js/biometric-kyc.js Import translation utilities (translate, translateHtml, getDirection) Add applyPageTranslations() function to translate DOM elements Set document direction and apply translations on locale initialization Replace hardcoded strings with translate() calls for dynamic content +34/-6    biometric-kyc.html Add translation keys to HTML elements                                        packages/embed/src/biometric-kyc.html Add data-i18n attributes to all translatable elements Hide main content initially until translations load Replace hardcoded text with translation keys Update button labels and messages with localization support +88/-29  ar-EG.json Add Arabic translations for new keys                                          packages/web-components/locales/ar-EG.json Add idInfo section with form field translations Add processingInfo and defaultMessage to complete section Include translations for firstName, lastName, dateOfBirth fields +12/-1    en-GB.json Add English translations for new keys                                        packages/web-components/locales/en-GB.json Add idInfo section with form field translations Add processingInfo and defaultMessage to complete section Include translations for firstName, lastName, dateOfBirth fields +12/-1

---

---

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 Race Condition Risk The applyPageTranslations() function is called immediately after setCurrentLocale() without awaiting locale loading completion. If locale data hasn't fully loaded, translations may fail silently with only console errors, leaving UI elements untranslated. await setCurrentLocale(config.translation?.language || 'en'); document.documentElement.dir = getDirection(); applyPageTranslations(); Error Handling Gap The applyPageTranslations() function catches and logs translation errors but doesn't provide fallback text. This could leave UI elements empty or with raw translation keys if translation fails, degrading user experience. function applyPageTranslations() { document.querySelectorAll('[data-i18n]').forEach((el) => { const key = el.getAttribute('data-i18n'); if (key) { try { el.textContent = translate(key); } catch (e) { console.error(`Translation failed for key: ${key}`, e); } } }); } Hidden Main Element The main element is now hidden by default and only shown after translations are applied. If the translation setup fails or the message event doesn't fire, users will see a blank page with no feedback or error message. <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-biometric-kyc/smart-camera-web.js
✅ Preview URL for Embed:
https://cdn.smileidentity.com/inline/preview-localisation-biometric-kyc/js/script.min.js
✅ Preview URL for Web Client:
https://drepgqa4xe463.cloudfront.net