Merge pull request #267 from iteratehq/matt/translations

feat: Handle translations for prompt message and button text

src/components/Prompt/index.tsx

@@ -23,6 +23,7 @@ import Iterate from '../../iterate';
 import markdown from '../../markdown';
 import { InteractionEvents } from '../../interaction-events';
 import type { InteractionEventSource } from '../../interaction-events';
+import { useTranslation } from '../../language';
 
 type Props = {
   dispatchShowSurvey: (Survey: Survey) => void;
@@ -147,6 +148,11 @@ const Prompt: (Props: Props) => JSX.Element = ({
       : null,
   ];
 
+  const promptText =
+    useTranslation('survey.prompt.text') ?? survey?.prompt?.message;
+  const promptButtonText =
+    useTranslation('survey.prompt.buttonText') ?? survey?.prompt?.button_text;
+
   return (
     <Animated.View
       style={{
@@ -170,7 +176,7 @@ const Prompt: (Props: Props) => JSX.Element = ({
       >
         <View style={{ paddingBottom }}>
           <CloseButton onPress={onDismissAnimated} survey={survey} />
-          {markdown.Render(survey?.prompt?.message ?? '', {
+          {markdown.Render(promptText ?? '', {
             body: [
               promptTextStyle,
               {
@@ -186,11 +192,9 @@ const Prompt: (Props: Props) => JSX.Element = ({
               textDecorationLine: 'none',
               color: survey?.color ?? '#7457be',
             },
-          }) || (
-            <Text style={promptTextStyle}>{survey?.prompt?.message ?? ''}</Text>
-          )}
+          }) || <Text style={promptTextStyle}>{promptText ?? ''}</Text>}
           <PromptButton
-            text={`${survey?.prompt?.button_text || ''}`}
+            text={`${promptButtonText || ''}`}
             color={`${survey?.color || '#7457be'}`}
             colorDark={survey?.color_dark}
             onPress={showSurveyButtonClicked}

src/language.tsx

@@ -0,0 +1,66 @@
+import { NativeModules, Platform } from 'react-native';
+import type {
+  Language,
+  Survey,
+  TranslationItemKey,
+  UserTraitsContext,
+} from './types';
+import { useSelector } from 'react-redux';
+import type { State } from './redux';
+
+const availableLanguages = (survey: Survey): Language[] => {
+  const languages = survey.translations?.map((t) => t.language) ?? [];
+  if (survey.primary_language) {
+    languages.unshift(survey.primary_language);
+  }
+
+  return languages;
+};
+
+const getPreferredLanguage = (
+  survey: Survey,
+  userTraits?: UserTraitsContext
+): Language => {
+  const deviceLanguageWithRegion =
+    Platform.OS === 'ios'
+      ? NativeModules.SettingsManager.settings.AppleLocale ??
+        NativeModules.SettingsManager.settings.AppleLanguages[0] // iOS 13
+      : NativeModules.I18nManager.localeIdentifier;
+  const deviceLanguage = deviceLanguageWithRegion.substring(0, 2);
+
+  const userTraitLanguage = userTraits?.language as Language;
+
+  if (
+    userTraitLanguage != null &&
+    availableLanguages(survey).includes(userTraitLanguage)
+  ) {
+    return userTraitLanguage;
+  }
+
+  if (availableLanguages(survey).includes(deviceLanguage)) {
+    return deviceLanguage;
+  }
+
+  return 'en';
+};
+
+const getTranslationForKey = (
+  key: TranslationItemKey,
+  survey: Survey,
+  userTraits?: UserTraitsContext
+): string | undefined => {
+  const language = getPreferredLanguage(survey, userTraits);
+  const translation = survey.translations?.find((t) => t.language === language);
+
+  return translation?.items?.[key]?.text;
+};
+
+export const useTranslation = (key: TranslationItemKey) => {
+  const survey = useSelector((state: State) => state.survey);
+  const userTraits = useSelector((state: State) => state.userTraits);
+  if (survey == null) {
+    return undefined;
+  }
+
+  return getTranslationForKey(key, survey, userTraits);
+};

src/types.tsx

@@ -89,8 +89,10 @@ export type Survey = {
   color_dark?: string;
   company_id: string;
   id: string;
+  primary_language?: Language;
   prompt?: Prompt;
   title: string;
+  translations?: Translation[];
 };
 
 export type Prompt = {
@@ -171,3 +173,20 @@ export type Question = {
   id: string;
   prompt: string;
 };
+
+export type Translation = {
+  language: Language;
+  items?: TranslationItems;
+};
+
+export type TranslationItems = { [K in TranslationItemKey]: TranslationItem };
+
+export type TranslationItem = {
+  text?: string;
+};
+
+export type TranslationItemKey =
+  | 'survey.prompt.text'
+  | 'survey.prompt.buttonText';
+
+export type Language = string;