Languages

The languages that ship

English and Arabic, in all three apps. The product's Arabic name is تيكيتوري. Arabic lays the whole interface out right to left, with Arabic faces for the text and the headlines, and figures, prices, dates and seat numbers stay in Latin digits in both languages.

English is the default. An event's title, summary, description and programme, a ticket type's title and description, and a venue's name, accessibility and transit notes are stored in both languages and entered side by side in the dashboard. A title needs its English; the Arabic can follow later. The seed fills in the Arabic for the four sample organisers.

How the language is chosen

• The language is the first part of the address. A path without one goes to /en (the dashboard's root goes to /en/dashboard).
• The language menu swaps that part of the address and keeps the page.
• Both frontends send the page's language to the API, so its messages come back in the same language. Checkout's Accept-Language is stored on the order as locale (en or ar), and the ticket, refund, cancellation and reminder emails about that order are written in it, with the event's title in the same language.
• The website's sitemap lists every public page in both languages, each with its alternate, so search engines show the right one.

Change a text

Every visible word lives in messages/<namespace>/en.json and ar.json, in each frontend's folder. Change the value, keep the key, and change it in both files.

• A key missing from ar.json shows as a missing message on the Arabic side, so keep the two files in step.
• Text inside {curly} braces is filled in by the app, such as {count} or {name}. Keep those words as they are in both languages.
• Status, category and role labels in the dashboard are messages too, in messages/dashboard/domain and messages/dashboard/roles.

What the API translates

• Error messages and the message of a successful write come back in the language of the Accept-Language header. ar-SA counts as Arabic; any language the API does not have falls back to English.
• Its own texts are JSON files in back-end/src/i18n/translations/en/ and ar/, one per area: admin, auth, common, lead, mail, roles, settings, ticketing. The emails' wording is in mail.json.
• Events, ticket types and venues come back with both languages, as { "en": "…", "ar": "…" }, and the frontend picks one.

Add a language to the website

The two languages are written into a few files, so adding a third touches each of them. Paths are inside storefront/.

1. Add the code to locales in src/config/i18n.ts and in src/proxy.ts.
2. Copy every messages/<namespace>/en.json to a file named after the new code, and translate the values, meta.siteName in messages/layouts included.
3. If the language is written right to left, extend directionOf in src/config/i18n.ts, which only knows ar.
4. Add a lockup for it to lockups in src/config/brand.config.ts.
5. Code that picks a stored text or a date format by language, such as src/lib/utils/pickLocalized.ts, src/lib/format/intlLocale.ts and src/lib/format/formatEventDate.ts, chooses between en and ar. Search src/ for "ar" and handle the new code there too.

Add a language to the dashboard

1. Add the code to locales in src/config/locales.ts (and to RTL_LOCALES if it is written right to left) and in src/proxy.ts. A locale added there also adds its tab to every field kept in several languages.
2. Copy every messages/**/en.json to a file named after the new code, and translate the values.
3. Add its spelling of the name to src/config/brand.config.ts and a lockup to BRAND_LOCKUPS.
4. Search src/ for "ar" for the few places that still name the two languages directly.
5. A third language in the stored texts also needs the API to accept it.

Add a language to the API

The API knows en and ar in back-end/src/i18n/i18n.service.ts. Add the new code there, copy src/i18n/translations/en/ to a folder named after it, and translate the files; the mail service also chooses between en and ar in src/modules/mail/mail.service.ts. Stored texts are an { en, ar } pair, validated by src/common/dto/localized.dto.ts, so a third language in the data is a change to those classes, the entities and the seed.