Idiomas

Cómo funciona el negocio de reservas 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 árabe dispone toda la interfaz de derecha a izquierda con una tipografía árabe para el texto, y las cifras y los precios siguen en dígitos latinos en ambos idiomas. Un fragmento latino dentro de un texto en árabe, como un número de teléfono, una referencia de reserva o un precio, mantiene su propia dirección para que nunca se reordene.

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

El inglés es el predeterminado. El título, la descripción corta, la descripción, la pista de ubicación, las normas de la casa y los textos SEO de un alojamiento, el nombre, el eslogan y la descripción de un destino, las preguntas de la página de inicio, y el eslogan, la descripción, la línea de dirección y la política de cancelación de la empresa se guardan en ambos idiomas y se introducen lado a lado en el panel; el inglés es obligatorio para un título, y el árabe puede venir después. Un alojamiento se publica solo cuando ambos idiomas están completos. La carga inicial rellena el árabe de la empresa de demostración.

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, y una reserva recuerda el idioma en el que se hizo.

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 de alojamientos	`about`, `booking`, `checkout`, `common`, `contact`, `destinations`, `home`, `inquiry`, `layouts`, `privacy`, `saved`, `stay`, `stays`
Panel de reservas	`ai-assistant`, `auth`, `common`, `dashboard` (con una carpeta por página: `bookings`, `calendar`, `domain`, `inquiries`, `overview`, `reviews`, `settings`, `stay-editor`, `stays`), `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, de pago y de motivo de bloqueo del panel también son mensajes, en messages/dashboard/domain.

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-AE cuenta como árabe; cualquier idioma que la API no tenga vuelve al inglés.
Sus propios textos son archivos JSON en back-end/src/i18n/translations/en/ y ar/, uno por área: admin, auth, availability, booking, common, destination, faq, inquiry, payment, review, roles, settings, stay.
Los alojamientos, los destinos y las preguntas de la página de inicio vuelven 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.
Si el idioma se escribe de derecha a izquierda, amplía directionOf en src/config/i18n.ts, que solo conoce ar.
Añade sus textos a name, tagline y description en src/config/brand.config.ts.
El código que elige un texto guardado según el idioma, como src/lib/utils/pickLocalized.ts, elige entre en y ar. Busca en src/ el texto "ar" y gestiona también el nuevo código allí.

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.
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. 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, en la comprobación de publicación y en la carga inicial.