Idiomas

Cómo funcionan el sitio web y el panel en inglés y árabe, cómo cambiar cualquier texto y qué cambiar para añadir un idioma.

Para el paquete Full Stack

Los idiomas incluidos

Inglés y árabe, en las tres aplicaciones. El nombre del producto en árabe es تيكيتوري. El árabe dispone toda la interfaz de derecha a izquierda, con tipografías árabes para el texto y los titulares, y las cifras, los precios, las fechas y los números de asiento siguen en dígitos latinos en ambos idiomas.

Aplicación	Inglés	Árabe
Sitio web	`/en/…`	`/ar/…`
Panel del organizador	`/en/…`	`/ar/…`
API	`Accept-Language: en`	`Accept-Language: ar`

El inglés es el idioma por defecto. El título, el resumen, la descripción y el programa de un evento, el título y la descripción de un tipo de entrada, y el nombre, la accesibilidad y las notas de transporte de un recinto se guardan en ambos idiomas y se introducen lado a lado en el panel. Un título necesita su versión en inglés; el árabe puede llegar más tarde. Los datos de ejemplo rellenan el árabe de los cuatro organizadores de ejemplo.

Cómo se elige el idioma

El idioma es la primera parte de la dirección. Una ruta sin él va a /en (la raíz del panel va a /en/dashboard).
El menú de idioma cambia esa parte de la dirección y mantiene la página.
Ambos frontends envían el idioma de la página a la API, así que sus mensajes vuelven en el mismo idioma. El Accept-Language del pago se guarda en el pedido como locale (en o ar), y los correos de entradas, reembolsos, cancelación y recordatorio sobre ese pedido se escriben en él, con el título del evento en el mismo idioma.
El mapa del sitio web lista cada página pública en ambos idiomas, cada una con su alternativa, para que los buscadores muestren la correcta.

Cambia un texto

Cada palabra visible está en messages/<namespace>/en.json y ar.json, en la carpeta de cada frontend. Cambia el valor, conserva la clave y cámbialo en ambos archivos.

Aplicación	Espacios de nombres
Sitio web	`account`, `auth`, `checkout`, `common`, `contact`, `event`, `events`, `faq`, `home`, `layouts`, `legal`, `orders`, `organisers`, `pricing`, `saved`, `seats`, `venues`
Panel del organizador	`ai-assistant`, `auth`, `common`, `dashboard` (con una carpeta por página: `attendees`, `check-in`, `domain`, `event-editor`, `events`, `leads`, `notifications`, `orders`, `overview`, `reports`, `roles`, `seating`, `settings`, `studio`, `team`, `venues`), `demo-credentials`, `layouts`

Una clave que falta en ar.json aparece como mensaje ausente en la versión árabe, así que mantén los dos archivos sincronizados.
El texto entre llaves {curly} lo rellena la aplicación, por ejemplo {count} o {name}. Mantén esas palabras tal cual en los dos idiomas.
Las etiquetas de estado, categoría y rol del panel también son mensajes, en messages/dashboard/domain y messages/dashboard/roles.

Qué traduce la API

Los mensajes de error y el message de una escritura correcta vuelven en el idioma de la cabecera Accept-Language. ar-SA cuenta como árabe; cualquier idioma que la API no tenga recurre al inglés.
Sus propios textos son archivos JSON en back-end/src/i18n/translations/en/ y ar/, uno por área: admin, auth, common, lead, mail, roles, settings, ticketing. Los textos de los correos están en mail.json.
Los eventos, los tipos de entrada y los recintos llegan con ambos idiomas, como { "en": "…", "ar": "…" }, y el frontend elige uno.

Añade un idioma al sitio web

Los dos idiomas están escritos en unos pocos archivos, así que añadir un tercero afecta a cada uno de ellos. Las rutas están dentro de storefront/.

Añade el código a locales en src/config/i18n.ts y en src/proxy.ts.
Copia cada messages/<namespace>/en.json a un archivo con el nombre del nuevo código y traduce los valores, incluido meta.siteName en messages/layouts.
Si el idioma se escribe de derecha a izquierda, amplía directionOf en src/config/i18n.ts, que solo conoce ar.
Añade un lockup para él a lockups en src/config/brand.config.ts.
El código que elige un texto guardado o un formato de fecha según el idioma, como src/lib/utils/pickLocalized.ts, src/lib/format/intlLocale.ts y src/lib/format/formatEventDate.ts, elige entre en y ar. Busca "ar" en src/ y trata también ahí el nuevo código.

Añade un idioma al panel

Añade el código a locales en src/config/locales.ts (y a RTL_LOCALES si se escribe de derecha a izquierda) y en src/proxy.ts. Un idioma añadido ahí también añade su pestaña a cada campo que se guarda en varios idiomas.
Copia cada messages/**/en.json a un archivo con el nombre del nuevo código y traduce los valores.
Añade su escritura del nombre a src/config/brand.config.ts y un lockup a BRAND_LOCKUPS.
Busca en src/ el texto "ar" para encontrar los pocos lugares que aún nombran directamente los dos idiomas.
Un tercer idioma en los textos guardados también necesita que la API lo acepte.

Añade un idioma a la API

La API conoce en y ar en back-end/src/i18n/i18n.service.ts. Añade ahí el nuevo código, copia src/i18n/translations/en/ a una carpeta con su nombre y traduce los archivos; el servicio de correo también elige entre en y ar en src/modules/mail/mail.service.ts. Los textos guardados son un par { en, ar }, validado por src/common/dto/localized.dto.ts, así que un tercer idioma en los datos es un cambio en esas clases, en las entidades y en los datos de ejemplo.