how to internationalize the dexie-cloud/email-templates

[retotito]

Hi i tried to send emails in different languages with this approach:

my-project-root/ └── dexie-cloud/ ├── email-templates/ │ ├── otp-subject.handlebars │ ├── otp-body-html.handlebars │ ├── otp-body-text.handlebars │ └── otp-testdata.json └── locales/ ├── en.json └── de.json

Then i have modified otp-body-html.handlebars to use the {{t "translation.key"}} helper for all translatable strings.

{{t "otp.your_otp_for"}} {{originName}}: <strong>{{otp}}</strong><br /><br /> <b><u>{{t "otp.warning_heading"}}</u></b><br/> ...

I have created en.json and de.json files in the dexie-cloud/locales/ directory with the corresponding translation keys and values that look like this:

{ "otp": { "your_otp_for": "Your One-Time Password for", "warning": "Important Warning", "warning_app": "Enter this OTP only in the mobile app", "and_never_on_a_web_site": "and NEVER on a website.", "warning_web": "Enter this OTP only on the website", "and_never_on_any_other_site": "and NEVER on any other site", "check_the_address_bar_before_entering_it": "Always check the address bar before entering it.", "your_selected_language_is": "Your selected language is" } }

I addet the "language" key to the otp-testdata.json:

{ "originName": "myapp.company.com", "otp": "ABCD1234", "otpId": "1234567890", "isApp": false, "email": "[email protected]", "language": "de" }

Then i tried to push all of that, but it did not push the locales folder and files:
dexie-cloud@latest templates push

Is there a documentation, how to do those translations?

Thanks for your answers.

[dfahlander]

There's no current support for internationalization of templates, but I would be happy to add that with your assistance if you would be ok with that? We could include i18next on the server and specify a convention similar to your suggestion (a t helper function) and specification of where to put the json files.

[retotito]

Great. How can i assist?

[dfahlander]

I'd appreciate any input about the requirement and evaluation of the implementation.

Some questions:

How should the language parameter be specified att runtime? My suggestion is both to store it on the user but also allow it as a parameter to the login flow. In some way, a user must have the possibility to update their own language setting.

This goes in a bit into another requirement of allowing a user to have offline, synced access to a subset of the user properties. In this case including the language property.

[retotito]

In my case, the first thing the user has to do, when he starts the app for the first time on a device, is choose a language.
The language is then stored on locale storage.
So he can change it in the settings, even when offline.
Register to Dexie Cloud is after he has chosen a Language.

Right in the beginning of the app,
before showing the Login form i added a condition if languageSelected == null --> show language selector.
After a language is chosen, i added another a condition else if accepttedTerms == null --> show Terms of Service & Privacy Policy
After this is accepted/confirmed --> show login Form with db.cloud.userInteraction.subscribe() function

Here how i check offline status and form to be shown again:

/** code is blocked here until result is resolved */ dexieJS.db.cloud.userInteraction.subscribe({ next: (result) => { // console.log("...Userinteraction: ", result) if( deviceIsOnline == true && doNotShowCloudLoginAgain !== true //do not show dialog if user has set to not show again && result !== undefined ) { const data = { ui: result } /** open a dialog box with a form */ setStateDialog("dialogDexieLogin", data, false) } else { if (result !== undefined) { result.onCancel() } } }, error: error => console.log("userinteraction error: ", error) }) /** end resolve result */