hs-onedirect-translate

HS - Onedirect Translator Module

This is a module developed to be used for the Onedirect developers when adding translatable texts to HS ui extensions.

1. Installing

Go to your UI extension module and the following to the package.json:

{
  ...
  "dependencies": {
    ...
    "onedirect-hubspot-translations": "latest",
    ...
  },
  ...
}

Then run:

npm install

2. Usage

If the text used is already in our repo, it will be translated. In case it is a new text, please follow the step 3.

Import and initialize:

First import the module to your project file:

import { od } from "onedirect-hubspot-translations";

Then initialize the locale in the entry point of your code:

od.setLocale(context.user.locale);

Simple translation

To add a translatable text, use like this:

<Text>{od.t('Hello world.')}</Text>

Inside props

Or it can also be used as component props this:

<EmptyState title={od.t("Hello world.")} layout="vertical" reverseOrder={true}>

Using with functions

It can also be used within functions:

const handleErr = (msg, title, missingProperty = null) => {
    setIsSuccess(false);
    setErrorTitle(title);
    setErrorMessage(msg);
    setMissingProperty(missingProperty ? missingProperty : '');
    setIsLoading(false);
  }
  
const someFunction = () => {
    ...
    if (err) {
        return handleErr(
            od.t('Error message.'),
            od.t('Error Title')
        );
    }
    ...
} 

Using args to translate only parts of the string

If there are parts of the text that can't be translated, such like property names, for example, you can do it like the following:

od.t("The property $1 of the user $2 can't be updated", "contact_erp_code", "John Doe");
//Example output in Spanish: 
// La propiedad contact_erp_code del usuario John Doe no puede ser actualizada 

3. Generating translations

Dependencies

Before starting, install dependencies

sudo apt-get install jq
sudo apt-get install gh

Download project

First clone the project in your local environment using a personal GitHub token (replace with the token):

git clone https://<your-personal-token>@github.com/onedirect-webdev/hs-onedirect-translate.git

Adding Deepl Token

Create in the root of your project a .env file and add the Deepl token that will be used for translating:

DEEPL_AUTH_KEY=<your-deepl-token>

Prepare your environment

With the same token you have cloned the project, authenticate yourself using:

gh auth login

Make the release file executable:

chmod +x increment_version.sh

Generate translations

Within the repo there is a folder called translations_input. Any file inside this folder will be used to generate translations. You can use as many as files as needed.

The files can be named anyway you want and must be of type .txt

Each text translations must be in a new line

After added the texts, simply run the following command and wait

node translate.js

This command should generate all translations automatically and create a new release version automatically.

Wait a few minutes and got back to your HS module folder and run npm update so the newly generated translations will be available.

4. Bonus

If you want to select all contents that have od.t("xxx") in a fil, using the following regexp:

od\.t\("([^"]*)"