Langues

Les langues livrées

Anglais et arabe, dans les trois applications. L'arabe dispose toute l'interface de droite à gauche avec une police arabe pour le texte, et les chiffres et les prix restent en chiffres latins dans les deux langues. Une suite de caractères latins dans un texte arabe, comme un numéro de téléphone, une référence de réservation ou un prix, garde sa propre direction pour ne jamais être réordonnée.

L'anglais est la langue par défaut. Le titre d'un séjour, sa description courte, sa description, son indication de lieu, son règlement intérieur et ses textes SEO, le nom, le slogan et la description d'une destination, les questions de la page d'accueil, ainsi que le slogan, la description, la ligne d'adresse et la politique d'annulation de la société sont stockés dans les deux langues et saisis côte à côte dans le tableau de bord ; l'anglais est obligatoire pour un titre, et l'arabe peut suivre plus tard. Un séjour n'est publié que lorsque les deux langues sont remplies. Le seed remplit l'arabe pour la société de démonstration.

Comment la langue est choisie

• La langue est la première partie de l'adresse. Un chemin sans langue va vers /en (la racine du tableau de bord va vers /en/dashboard).
• Le menu de langue remplace cette partie de l'adresse et garde la page.
• Les deux frontends envoient la langue de la page à l'API, donc ses messages reviennent dans la même langue, et une réservation garde en mémoire la langue dans laquelle elle a été faite.

Modifier un texte

Chaque mot visible se trouve dans messages/<namespace>/en.json et ar.json, dans le dossier de chaque frontend. Changez la valeur, gardez la clé, et faites la modification dans les deux fichiers.

• Une clé absente de ar.json apparaît comme un message manquant côté arabe : gardez donc les deux fichiers synchronisés.
• Le texte entre accolades {curly} est rempli par l'application, comme {count} ou {name}. Gardez ces mots tels quels dans les deux langues.
• Les libellés de statut, de paiement et de motif de blocage dans le tableau de bord sont aussi des messages, dans messages/dashboard/domain.

Ce que l'API traduit

• Les messages d'erreur et le message d'une écriture réussie reviennent dans la langue de l'en-tête Accept-Language. ar-AE compte comme de l'arabe ; toute langue que l'API n'a pas retombe sur l'anglais.
• Ses propres textes sont des fichiers JSON dans back-end/src/i18n/translations/en/ et ar/, un par zone : admin, auth, availability, booking, common, destination, faq, inquiry, payment, review, roles, settings, stay.
• Les séjours, les destinations et les questions de la page d'accueil reviennent avec les deux langues, sous la forme { "en": "…", "ar": "…" }, et le frontend en choisit une.

Ajouter une langue au site

Les deux langues sont inscrites dans quelques fichiers, donc en ajouter une troisième touche chacun d'eux. Les chemins sont dans storefront/.

1. Ajoutez le code à locales dans src/config/i18n.ts et dans src/proxy.ts.
2. Copiez chaque messages/<namespace>/en.json dans un fichier nommé d'après le nouveau code, et traduisez les valeurs.
3. Si la langue s'écrit de droite à gauche, étendez directionOf dans src/config/i18n.ts, qui ne connaît que ar.
4. Ajoutez ses textes à name, tagline et description dans src/config/brand.config.ts.
5. Le code qui choisit un texte stocké selon la langue, comme src/lib/utils/pickLocalized.ts, choisit entre en et ar. Dans src/, cherchez "ar" et traitez-y aussi le nouveau code.

Ajouter une langue au tableau de bord

1. Ajoutez le code à locales dans src/config/locales.ts (et à RTL_LOCALES si elle s'écrit de droite à gauche) et dans src/proxy.ts. Une langue ajoutée à cet endroit ajoute aussi son onglet à chaque champ conservé en plusieurs langues.
2. Copiez chaque messages/**/en.json dans un fichier nommé d'après le nouveau code, et traduisez les valeurs.
3. Cherchez "ar" dans src/ pour les quelques endroits qui nomment encore directement les deux langues.
4. Une troisième langue dans les textes stockés demande aussi que l'API l'accepte.

Ajouter une langue à l'API

L'API connaît en et ar dans back-end/src/i18n/i18n.service.ts. Ajoutez-y le nouveau code, copiez src/i18n/translations/en/ dans un dossier portant son nom, et traduisez les fichiers. Les textes stockés sont une paire { en, ar }, validée par src/common/dto/localized.dto.ts, donc une troisième langue dans les données est une modification de ces classes, des entités, de la vérification de publication et du seed.