Langues

Comment le site et le tableau de bord fonctionnent en anglais et en arabe, comment changer n'importe quel texte, et ce qu'il faut modifier pour ajouter une langue.

Pour le pack Full Stack

Les langues livrées

Anglais et arabe, dans les trois applications. Le nom arabe du produit est تيكيتوري. L'arabe dispose toute l'interface de droite à gauche, avec des polices arabes pour le texte et les titres, et les chiffres, prix, dates et numéros de place restent en chiffres latins dans les deux langues.

Application	Anglais	Arabe
Site	`/en/…`	`/ar/…`
Tableau de bord organisateur	`/en/…`	`/ar/…`
API	`Accept-Language: en`	`Accept-Language: ar`

L'anglais est la langue par défaut. Le titre, le résumé, la description et le programme d'un événement, le titre et la description d'un type de billet, ainsi que le nom, l'accessibilité et les notes de transport d'un lieu sont stockés dans les deux langues et saisis côte à côte dans le tableau de bord. Un titre exige son anglais ; l'arabe peut suivre plus tard. Les données d'exemple remplissent l'arabe pour les quatre organisateurs d'exemple.

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, dont les messages reviennent donc dans la même langue. L'Accept-Language du paiement est stocké sur la commande comme locale (en ou ar), et les e-mails de billet, de remboursement, d'annulation et de rappel concernant cette commande sont rédigés dans cette langue, avec le titre de l'événement dans la même langue.
Le sitemap du site liste chaque page publique dans les deux langues, chacune avec sa variante, pour que les moteurs de recherche affichent la bonne.

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.

Application	Namespaces
Site	`account`, `auth`, `checkout`, `common`, `contact`, `event`, `events`, `faq`, `home`, `layouts`, `legal`, `orders`, `organisers`, `pricing`, `saved`, `seats`, `venues`
Tableau de bord organisateur	`ai-assistant`, `auth`, `common`, `dashboard` (avec un dossier par page : `attendees`, `check-in`, `domain`, `event-editor`, `events`, `leads`, `notifications`, `orders`, `overview`, `reports`, `roles`, `seating`, `settings`, `studio`, `team`, `venues`), `demo-credentials`, `layouts`

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 d'état, de catégorie et de rôle du tableau de bord sont aussi des messages, dans messages/dashboard/domain et messages/dashboard/roles.

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-SA compte comme de l'arabe ; toute langue que l'API ne possède pas se replie sur l'anglais.
Ses propres textes sont des fichiers JSON dans back-end/src/i18n/translations/en/ et ar/, un par zone : admin, auth, common, lead, mail, roles, settings, ticketing. La formulation des e-mails est dans mail.json.
Les événements, types de billets et lieux reviennent dans 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/.

Ajoutez le code à locales dans src/config/i18n.ts et dans src/proxy.ts.
Copiez chaque messages/<namespace>/en.json dans un fichier nommé d'après le nouveau code, et traduisez les valeurs, meta.siteName dans messages/layouts compris.
Si la langue s'écrit de droite à gauche, étendez directionOf dans src/config/i18n.ts, qui ne connaît que ar.
Ajoutez-lui un logo dans lockups de src/config/brand.config.ts.
Le code qui choisit un texte stocké ou un format de date selon la langue, comme src/lib/utils/pickLocalized.ts, src/lib/format/intlLocale.ts et src/lib/format/formatEventDate.ts, choisit entre en et ar. Cherchez "ar" dans src/ et gérez-y aussi le nouveau code.

Ajouter une langue au tableau de bord

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.
Copiez chaque messages/**/en.json dans un fichier nommé d'après le nouveau code, et traduisez les valeurs.
Ajoutez son orthographe du nom à src/config/brand.config.ts et un logo à BRAND_LOCKUPS.
Cherchez "ar" dans src/ pour les quelques endroits qui nomment encore directement les deux langues.
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 nommé d'après lui, et traduisez les fichiers ; le service d'e-mail choisit aussi entre en et ar dans src/modules/mail/mail.service.ts. Les textes stockés sont une paire { en, ar }, validée par src/common/dto/localized.dto.ts : une troisième langue dans les données est donc une modification de ces classes, des entités et des données d'exemple.