kiosk: lf all the strings

[eanders-ms]

Wrap all strings in lf. Locale remains hard-coded to en for now.

[srietkerk]

I don't think we want the kioskId to be in this lf, unless lf doesn't do anything to random alpha-numeric strings. I'm pretty sure that the backend will always generate a code that has letters in English, so if any of the alpha characters are translated, users would never be able to upload to their kiosk.

[jwunderl]

kioskId just gets substituted in here, not translated -- only first parameter in lf / rlf is pulled for translation

[srietkerk]

Oh, I figured that the whole string would get translated once the kioskId was passed in. So that means if you have a string that possibly changes, like maybe a string that changes with state, you would need to wrap that string in lf to make sure that the string stored as a different variable gets translated?

Ex:

const [stateString, setStateString] = useState(lf("hello"));
<>
<p>
{ lf("Kiosk {0}", stateString) }
</p>
</>

So in this example, if stateString didn't have that lf, then stateString would just be in English when the Kiosk {stateString} string is translated?

[eanders-ms]

The first argument to lf (the string literal) is sent to translation. But this doesn't happen at runtime. How I think it works:

1. As part of the gulp ci build, the strings are sent off to translation.
2. We get translated strings back and upload them to CDN.
3. The app downloads the strings for its locale at startup.
4. The app falls back to the original string literal for any non-translated strings.

[jwunderl]

kioskId just gets substituted in here, not translated -- only first parameter in lf / rlf is pulled for translation