Support localization

[rodmaia]

Botflow needs to support multiple languages. For now we will target PT-BR, and EN-US should be supported soon. To accomplish that we will have to prepare the front end to load strings from a localization file.

Tasks

• Add the i18nlib to the project (https://medium.com/reactbrasil/internacionaliza%C3%A7%C3%A3o-em-react-native-77fb1a56f8e9)
• Define naming convention for strings
• Create EN-US and PT-BR locales
• Localize existing content
• Document naming conventions on the wiki

Acceptance criteria

• Existing front-end is correctly localized when changing language parameter (no need to build UI for that)
• Changes are available on the Dev environment

[mansogf]

Translations are in the following path:

translate   
│   └───languages
│       │   en.js
│       │   index.js
│       │   pt.js
│       index.js

In the case of adding more languages, the file must be created in the languages folder.

The structure of the translation file must be according to the name of the page/component and the string as the following example:

const messages = {
  en: {
    translations: { // Mesmo valor usado nas configurações (defaultNS)
      menu_nav_bar: {
        dialogues: 'Dialogues',
        questions: 'Questions',
        answers: 'Answers'
      },
      stories_page: {
        create_dialogue: "Create",
        filter: 'Filter'
      },
      stories_edit_page: {
        questions: 'Questions',
        answers: 'Answers',
        filter: 'Filter'
      },
      deleted: "Item deleted",
      no_result: "No items found",
      repeated_name: "Try a different name, it already exists",
      no_special_char: "Use only letters without accents, numbers or _",
      no_dialogs: "Click on the questions and answers to set up a dialogue with expected interaction examples",
      delete_confirmation: "Delete item?",
      exportar_conteudo: 'Export content',
      story: {
        created: "Dialogue created",
        deleted: "Dialogue deleted",
        updated: "Dialogue updated",
        create_button: "Create new dialogue",
        first_element: "The dialogue must begin with a question",
        two_intents: "Add an answer after each question",
      },
    intent: {
        created: "Question created",
        deleted: "Question deleted",
        updated: "Updated question",
        toolbar_name: "Question title",
        list_filter: "Registered questions",
        create_button: "Create new question",
        placeholder: "Ex: Gen_Greet, How_To_Reg_Serv",
        name_good_pratice: "To identify the questions clearly, indicate the main subject and then the type of question, separated by '_'",
      },
    utter: {
        created: "Answer created",
        deleted: "Answer deleted",
        selection: "Balloons appear:",
        sequence_text: "sequentially",
        updated: "Answer updated",
        toolbar_name: "Answer title",
        create_button: "Create new answer",
        list_filter: "Answers registered",
        alternatives_text: "as alternative",
        placeholder: "Ex: Ans_Gen_Greet, Ans_How_To_Reg_Serv",
        name_good_pratice: "To identify the answers clearly, use 'Resp_' and the title of the corresponding question, if any",
      },
      toolbar_name: "Save",
      list_filter: 'Filter',
      intent_form: {
        new_question: 'New question'
      },
      uttter_form: {
        new_balloon: 'New answer balloon'
      },
      example_story:  'Example:'
    }
  }
}

export { messages }

[rodmaia]

Fantastic work @gabrielfilipe7unb! I just did a quick update on some strings to follow RASA standard of "story", "intent" and "utter".

There are two places that remain unlocalized: the "Desfazer" button that appears on snackbars (e.g. after you delete something) and the "Apagar" button that appears inside the overflow menu of each section (right beside the save button).

[mansogf]

I think now we are good to go!

[rodmaia]

EN strings look OK, but when I run the app in PT-BR...

[mansogf]

Here we go!

[rodmaia]

Confirmed! 👍🏻