Virufy PWA

Translations

Translations files are located in src/locales folder. For each language there is a file with the json extension. The name matches the ISO 639-1 language code for the language being translated.

To translate a line of text, open the corresponding language file and search for the text to be replaced. In order to keep these files clean, translation groups are separated by the screen they appear in. When translating make sure the text is surrounded by double quotes.

"selectCountry":  "Selecciona país",

If you need to use double quotes inside the text follow this example (add backslash before them):

"paragraph2":  "\"Collection of Smartphone Data for Screening of COVID-19\"",

Consent forms

Adding a consent form for a new country

To add a new country go over this steps:

Go to src/data/country.ts and add a new line following this example that shows how to add United States:

export const countryData = [
  { name: 'Argentina', val: 'Argentina'},
  { name: 'Brazil', val: 'Brazil' },
  { name: 'Colombia', val: 'Colombia' },
  { name: 'Peru', val: 'Peru' },
  { name: 'United States', val: 'UnitedStates' }
];

The bold text represents the new line added.

The name field is the text that the end user will see in the application. This will appear in COVID-19 Data Collection Form screen dropdown and will be selectable. Note that the name of the country in the val field can't have any spaces between words and they all must start with an upper-case letter.

Go to public -> static -> consent folder and create a new folder inside for the added country. The name of the folder must match exactly what was entered in the val field in the previous step.
Inside the newly created folder add the consent file as an HTML document. The language of this document must be the default for the country (it may be the main spoken language). For example, english for the United States. Steps to convert a Microsoft Word document to an HTML file are detailed in the next section.

The name of the file must be default.html

Deploy the application as instructed in the build and deploy section.

NOTE: If the user selects a language that doesn't have an associated consent form in the folder named as the country, the default.html file content will be presented. In order to prevent this, add a new language as detailed in next section.

Adding a new consent form for an existing country

To add a new consent form for a country that was already created and has its default.html consent, the following steps are to be followed:

Go to src/data/lang.ts and add a line following this example

export const languageData = [
  { code: 'en', label: 'English' },
  { code: 'es', label: 'Español' },
  { code: 'pt', label: 'Português' },
  { code: 'fr', label: 'Français' }
];

The bold text represents the new line added. It will add french as a new language.

The code fields represents the ISO 639-1 language code and the label field represents the text to be displayed to the user in the dropdown to select languages in the COVID-19 Data Collection Form screen.

Export the consent form as an HTML document as detailed in the next section. It should be named exactly like the language code entered in the previous step. For example, to add french, a resulting file would be fr.html.
Add the document to the corresponding folder of the country that is to have a new consent. For example, if adding french to United States, the file should be placed in src/public/static/consent/UnitedStates folder along with the default.html that has to be created before as detailed in the previous section.

Exporting Microsoft Word document to HTML file

Consent forms need to be HTML files. If they are exported from a .doc extension (Microsoft Word) they need to be exported with UTF-8 encoding. The required steps to save a Word document as an HTML file are:

Go to File -> Export

Click "Change Type"

Select "Save as another type"

In the following "Save as" window, select "Web Page" from the "Save as type" dropdown.

Click "Tools" -> "Save options..."

In the "Encoding" tab, select "Unicode(UTF-8)".

Accept and save the file

Available Scripts

In the project directory, you can run:

`npm run start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm run test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`npm run eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

virufy / study

readme