Localisation basic kyc

[ayinloya]

PR Type

Enhancement

---

Description

• Add internationalization (i18n) support to Basic KYC flow with translation keys

• Implement dynamic page translations using data-i18n attributes

• Add translated validation messages for form fields

• Set document direction based on locale and hide main content until translations load

---

File Walkthrough

Relevant files

Enhancement

basic-kyc.js Implement i18n translation system for Basic KYC flow          packages/embed/src/js/basic-kyc.js Import translation utilities (translate, translateHtml, getDirection) from localisation module Add applyPageTranslations() function to translate elements with data-i18n attributes Update locale initialization to be async and set document direction Replace hardcoded strings with translation keys for ID selection placeholders, bank search, and validation messages Add field translation key mapping and getTranslatedValidationMessage() for form validation Translate completion message with country and ID type parameters +57/-8    basic-kyc.html Add i18n attributes to HTML elements for translation support packages/embed/src/basic-kyc.html Add data-i18n attributes to all user-facing text elements (headings, labels, buttons, messages) Set main element to hidden initially until translations are loaded Add translation keys for loading screen, ID selection, ID info form, and completion screen Replace hardcoded text with translation-ready markup across all form fields and UI elements +117/-26

---

---

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 Error Handling The applyPageTranslations function catches translation errors but only logs them to console. Elements with failed translations will have empty textContent, potentially leaving the UI with blank labels. Consider providing fallback text or more robust error handling. 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); } } }); } Race Condition The main content is hidden initially and revealed after translations load. If setCurrentLocale fails or takes too long, the main content remains hidden indefinitely with no timeout or error recovery mechanism, leaving users with a blank screen. await setCurrentLocale(config.translation?.language || 'en'); document.documentElement.dir = getDirection(); applyPageTranslations(); document.querySelector('main').hidden = false; Missing Translation The getTranslatedValidationMessage function doesn't handle the case where translateHtml might fail or return an error. If the translation key 'pages.validation.isRequired' is missing, this could cause runtime errors when validation messages are displayed. function getTranslatedValidationMessage(field) { const fieldKey = fieldTranslationKeys[field]; const fieldLabel = fieldKey ? translate(fieldKey) : field; return translateHtml('pages.validation.isRequired', { field: fieldLabel }); }

[prfectionist]

Suggestion: The applyPageTranslations function overwrites textContent, which will remove any child HTML elements. This could break elements that contain nested HTML like icons or spans. Consider using translateHtml for elements that may contain HTML, or check if the element has child nodes before replacing content. [possible issue, importance: 8]

Suggested change

	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);
	}
	}
	});
	}
	function applyPageTranslations() {
	document.querySelectorAll('[data-i18n]').forEach((el) => {
	const key = el.getAttribute('data-i18n');
	if (key) {
	try {
	if (el.children.length > 0) {
	el.innerHTML = translateHtml(key);
	} else {
	el.textContent = translate(key);
	}
	} catch (e) {
	console.error(`Translation failed for key: ${key}`, e);
	}
	}
	});
	}

[prfectionist]

Suggestion: The code assumes document.querySelector('main') will always return an element, but if the main element doesn't exist, this will throw a TypeError when trying to set the hidden property. Add a null check before accessing the element's properties. [possible issue, importance: 7]

Suggested change

	await setCurrentLocale(config.translation?.language || 'en');
	document.documentElement.dir = getDirection();
	applyPageTranslations();
	document.querySelector('main').hidden = false;
	await setCurrentLocale(config.translation?.language || 'en');
	document.documentElement.dir = getDirection();
	applyPageTranslations();
	const mainElement = document.querySelector('main');
	if (mainElement) {
	mainElement.hidden = false;
	}