Deploy

app.config.js

@@ -16,6 +16,7 @@ export default {
     ios: {
       supportsTablet: false,
       bundleIdentifier: 'com.agustinoberg.nebulai',
+      usesAppleSignIn: true,
     },
     android: {
       adaptiveIcon: {
@@ -44,6 +45,8 @@ export default {
           organization: 'nebulai',
         },
       ],
+      'expo-localization',
+      'expo-apple-authentication',
     ],
     experiments: {
       typedRoutes: true,

app/(app)/(challenge)/attempt/results.tsx

@@ -10,12 +10,14 @@ import Button from '@/components/ui/button';
 import Text from '@/components/ui/text';
 import { useAttempt } from '@/hooks/attempt/useAttempt';
 import { useAttemptCarousel } from '@/hooks/attempt/useAttemptCarousel';
+import { useLang } from '@/language/useLang';
 import { getResults } from '@/utils/challenge.utils';
 
 const Results = () => {
   const { styles } = useStyles(stylesheet);
-  const { answers, questions, seeResults } = useAttempt();
+  const { answers, questions, seeResults, challenge } = useAttempt();
   const { reset: resetCarousel } = useAttemptCarousel();
+  const { t } = useLang();
   const results = useMemo(
     () => getResults(questions, answers),
     [questions, answers],
@@ -27,7 +29,7 @@ const Results = () => {
 
   const goToResponses = () => {
     resetCarousel();
-    seeResults();
+    seeResults(challenge, answers);
   };
 
   return (
@@ -40,7 +42,9 @@ const Results = () => {
             animate={{ opacity: 1, translateY: 0 }}
             transition={{ type: 'timing', duration: 500, delay: 200 }}
           >
-            <Text size={16}>Tu resultado es...</Text>
+            <Text size={16} translate>
+              yourResults
+            </Text>
           </MotiView>
           <MotiView
             from={{ opacity: 0, translateY: -50, scale: 0.8 }}
@@ -58,9 +62,11 @@ const Results = () => {
           >
             <>
               <Text size={16} align="center">
-                Contestaste correctamente{' '}
-                <Text weight="800">{results.correctAnswers}</Text> de las{' '}
-                <Text weight="800">{results.totalQuestions}</Text> preguntas
+                {t('resultsDescription.answeredCorrectly')}{' '}
+                <Text weight="800">{results.correctAnswers}</Text>{' '}
+                {t('resultsDescription.outOf')}{' '}
+                <Text weight="800">{results.totalQuestions}</Text>{' '}
+                {t('resultsDescription.questions')}
               </Text>
             </>
           </MotiView>
@@ -76,11 +82,17 @@ const Results = () => {
           variant="tertiary"
           onPress={goToResponses}
           eventName="go_to_responses"
+          translate
         >
-          Ver respuestas
+          viewResponses
         </Button>
-        <Button variant="text" onPress={goToHome} eventName="finish_challenge">
-          Finalizar
+        <Button
+          variant="text"
+          onPress={goToHome}
+          eventName="finish_challenge"
+          translate
+        >
+          finish
         </Button>
       </MotiView>
     </View>

app/(app)/(challenge)/creation/choose-difficulty.tsx

@@ -10,14 +10,16 @@ import Star from '@/animations/components/star';
 import CloseTab from '@/components/shared/close-tab';
 import Button from '@/components/ui/button';
 import Text from '@/components/ui/text';
+import { useUserProfile } from '@/data/fetchers/auth.fetcher';
 import { useChallengeState } from '@/data/state/challenge.context';
+import { isOldUser } from '@/utils/user.utils';
 
 const ANIMATION_HEIGHT = 400;
 
 const ChooseDifficulty = () => {
   const { styles } = useStyles(stylesheet);
   const { setDifficulty, difficulty, file } = useChallengeState();
-
+  const { data: user } = useUserProfile();
   const onSelectStar = (star: number) => {
     Analytics.trackEvent(Prefix.Actions.Press + 'select_difficulty', {
       difficulty: star,
@@ -30,7 +32,7 @@ const ChooseDifficulty = () => {
   };
   return (
     <>
-      <CloseTab />
+      {isOldUser(user) && <CloseTab />}
       <View style={styles.animationContainer}>
         <SpaceRide />
       </View>
@@ -42,8 +44,9 @@ const ChooseDifficulty = () => {
             size={30}
             style={styles.text}
             align="center"
+            translate
           >
-            ¿Qué tan difícil quieres el reto?
+            chooseDifficulty
           </Text>
         </View>
         <FlatList
@@ -71,8 +74,9 @@ const ChooseDifficulty = () => {
             mode="gradient"
             onPress={goToNext}
             eventName="go_to_next_step"
+            translate
           >
-            Siguiente
+            next
           </Button>
         </View>
       </View>

app/(app)/(challenge)/creation/index.tsx

@@ -18,9 +18,11 @@ const AttemptCreationScreen = () => {
   const { setDifficulty } = useChallengeState();
 
   const handleSelect = useCallback(async () => {
-    await selectFile();
-    setDifficulty(0);
-    router.replace('/(app)/(challenge)/creation/choose-difficulty');
+    try {
+      await selectFile();
+      setDifficulty(0);
+      router.replace('/(app)/(challenge)/creation/choose-difficulty');
+    } catch (error) {}
   }, [selectFile, setDifficulty]);
 
   return (
@@ -41,12 +43,13 @@ const AttemptCreationScreen = () => {
               mode="gradient"
               onPress={handleSelect}
               eventName="attempt_creation_select_file"
+              translate
             >
-              Elegir Archivo
+              chooseFile
             </Button>
           </MotiView>
-          <Text align="center" size={13} color="disabled">
-            *Solo se aceptan archivos con extensión .pdf
+          <Text align="center" size={13} color="disabled" translate>
+            fileWarning
           </Text>
         </View>
       </View>

app/(app)/(challenge)/creation/preparing.tsx

@@ -9,11 +9,7 @@ import Text from '@/components/ui/text';
 import { useAttempt } from '@/hooks/attempt/useAttempt';
 import { useAutoChallengeCreation } from '@/hooks/useAutoChallengeCreation';
 
-const LOADING_TEXTS = [
-  '🚀 Encendiendo los motores...',
-  '🌌Despegando hacia el conocimiento...',
-  '🔭 Explorando nuevas galaxias de preguntas...',
-];
+const LOADING_TEXTS = ['loading0', 'loading1', 'loading2'];
 
 const PreparingScreen = () => {
   const { styles } = useStyles(stylesheet);
@@ -30,8 +26,14 @@ const PreparingScreen = () => {
       </View>
       <View style={styles.screenContainer}>
         <View>
-          <Text color="secondary" size={30} weight="700" align="center">
-            Preparando tu Misión
+          <Text
+            color="secondary"
+            size={30}
+            weight="700"
+            align="center"
+            translate
+          >
+            preparingMission
           </Text>
 
           <FlatList
@@ -44,7 +46,7 @@ const PreparingScreen = () => {
                 delay={(index + 0.5) * 2500}
                 style={styles.item}
               >
-                <Text color="secondary" size={20} numberOfLines={2}>
+                <Text color="secondary" size={20} numberOfLines={2} translate>
                   {item}
                 </Text>
               </MotiView>
@@ -61,7 +63,9 @@ const PreparingScreen = () => {
             }}
           >
             <Spinner size="small" />
-            <Text color="secondary">Creando tu desafío...</Text>
+            <Text color="secondary" translate>
+              loadingMore
+            </Text>
           </MotiView>
         </View>
       </View>

app/(app)/(tabs)/_layout.tsx

@@ -10,7 +10,6 @@ import { isNewUser } from '@/utils/user.utils';
 const _layout = () => {
   const { styles } = useStyles(stylesheet);
   const { data: user } = useUserProfile();
-
   if (isNewUser(user)) {
     return <Redirect href="/(app)/(challenge)/creation" />;
   }

app/(app)/(tabs)/profile.tsx

@@ -15,12 +15,11 @@ const ProfileScreen = () => {
   return (
     <View style={styles.container}>
       <ScreenBackground />
-
       <ProfileHeader />
       <ProfileOptions />
       <View style={styles.footer}>
-        <Button variant="text" onPress={logout}>
-          Cerrar sesión
+        <Button variant="text" onPress={logout} translate>
+          logout
         </Button>
       </View>
       <Feather

app/(app)/_layout.tsx

@@ -14,6 +14,7 @@ const _layout = () => {
     <Stack screenOptions={{ headerShown: false }}>
       <Stack.Screen name="(tabs)" />
       <Stack.Screen name="(challenge)" />
+      <Stack.Screen name="language" />
       <Stack.Screen
         name="about"
         options={{ presentation: 'transparentModal', animation: 'fade' }}

app/(app)/language.tsx

@@ -0,0 +1,90 @@
+import { useCallback } from 'react';
+import { FlatList, Pressable, View } from 'react-native';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+
+import HeaderWithBack from '@/components/shared/header-with-back';
+import ScreenBackground from '@/components/shared/screen-background';
+import Text from '@/components/ui/text';
+import { useChangeLangOnUnmount } from '@/language/useChangeLangOnUnmount';
+import { useLang } from '@/language/useLang';
+import { hex2rgba } from '@/utils/ui.utils';
+
+interface Option {
+  key: string;
+  label: string;
+}
+
+const options: Option[] = [
+  { key: 'es', label: 'Español' },
+  { key: 'en', label: 'English' },
+  { key: 'pt', label: 'Português' },
+  { key: 'fr', label: 'Français' },
+  { key: 'it', label: 'Italiano' },
+];
+
+const LanguageScreen = () => {
+  const { styles } = useStyles(stylesheet);
+  useChangeLangOnUnmount();
+  const { changeLanguage, currentLanguage, t } = useLang();
+  const renderItem = useCallback(
+    ({ item }: { item: Option }) => (
+      <Pressable
+        onPress={() => changeLanguage(item.key)}
+        style={styles.option}
+        disabled={currentLanguage === item.key}
+      >
+        <Text size={17}>{`${item.label} ${
+          currentLanguage === item.key ? `(${t('current')})` : ''
+        }`}</Text>
+      </Pressable>
+    ),
+    [styles, changeLanguage, currentLanguage, t],
+  );
+  const spacer = useCallback(
+    () => <View style={styles.spacer} />,
+    [styles.spacer],
+  );
+
+  return (
+    <>
+      <View style={styles.container}>
+        <HeaderWithBack title={'language'} />
+        <ScreenBackground />
+        <FlatList
+          data={options}
+          ItemSeparatorComponent={spacer}
+          renderItem={renderItem}
+          contentContainerStyle={styles.content}
+        />
+      </View>
+    </>
+  );
+};
+
+export default LanguageScreen;
+
+const stylesheet = createStyleSheet((theme) => ({
+  container: {
+    flex: 1,
+    backgroundColor: '#2A3164',
+    gap: 20,
+  },
+  content: {
+    backgroundColor: hex2rgba('#191E47', 0.8),
+    padding: 20,
+    borderRadius: 20,
+    marginHorizontal: theme.sizes.screenPadding,
+  },
+  option: {
+    flexDirection: 'row',
+    gap: 12,
+    alignItems: 'center',
+  },
+  spacer: {
+    height: 2,
+    width: '100%',
+    marginVertical: 16,
+    backgroundColor: '#2A3164',
+    opacity: 0.34,
+  },
+}));