feat: add webview to open terms and conditions

Author: Guillermo Machado

.env.sample

@@ -2,3 +2,5 @@ API_URL=
 VAR_NUMBER=
 VAR_BOOL=
 SECRET_KEY=
+WEBSITE_URL=
+TERMS_AND_CONDITIONS_URL=

env.js

@@ -30,7 +30,7 @@ const LOCAL_BUILD_SCRIPT_PATTERNS = [
   'expo export',
 ];
 const isLocalBuild = LOCAL_BUILD_SCRIPT_PATTERNS.some((pattern) =>
-  process.env.npm_lifecycle_script?.includes(pattern)
+  process.env.npm_lifecycle_script?.includes(pattern),
 );
 
 const EXPO_RUN_COMMANDS = ['expo start', 'expo run'];
@@ -44,13 +44,13 @@ const ENVIRONMENT_DEPENDANT_SCRIPTS = [
 ];
 
 const scriptIsEnvironmentDependant = ENVIRONMENT_DEPENDANT_SCRIPTS.some(
-  (script) => process.env.npm_lifecycle_script?.includes(script)
+  (script) => process.env.npm_lifecycle_script?.includes(script),
 );
 
 // Check if the environment file has to be validated for the current running script and build method
 const isBuilding = isEASBuild || isLocalBuild;
 const isRunning = EXPO_RUN_COMMANDS.some((script) =>
-  process.env.npm_lifecycle_script?.includes(script)
+  process.env.npm_lifecycle_script?.includes(script),
 );
 const shouldValidateEnv =
   (isBuilding && scriptIsEnvironmentDependant) || isRunning;
@@ -138,6 +138,8 @@ const clientEnvSchema = z.object({
   API_URL: z.string(),
   VAR_NUMBER: z.number(),
   VAR_BOOL: z.boolean(),
+  TERMS_AND_CONDITIONS_URL: z.string(),
+  WEBSITE_URL: z.string(),
 });
 
 const buildTimeEnvSchema = z.object({
@@ -162,6 +164,8 @@ const _clientEnv = {
   API_URL: parseString(process.env.API_URL),
   VAR_NUMBER: parseNumber(process.env.VAR_NUMBER),
   VAR_BOOL: parseBoolean(process.env.VAR_BOOL),
+  WEBSITE_URL: parseString(process.env.WEBSITE_URL),
+  TERMS_AND_CONDITIONS_URL: parseString(process.env.TERMS_AND_CONDITIONS_URL),
 };
 
 /**
@@ -212,19 +216,19 @@ if (shouldValidateEnv) {
 
     if (isLocalBuild) {
       messages.push(
-        `\n💡 Tip: If you recently updated the \x1b[1m\x1b[4m\x1b[31m${envFile}\x1b[0m file and the error still persists, try restarting the server with the -cc flag to clear the cache.`
+        `\n💡 Tip: If you recently updated the \x1b[1m\x1b[4m\x1b[31m${envFile}\x1b[0m file and the error still persists, try restarting the server with the -cc flag to clear the cache.`,
       );
     }
 
     if (isEASBuild) {
       messages.push(
-        `\n☁️ For \x1b[1m\x1b[32mEAS Build\x1b[0m deployments, ensure the secret\x1b[1m\x1b[4m\x1b[31m${environmentFiles[APP_ENV]} \x1b[0m is defined in Project Secrets and has the proper environment file attached.`
+        `\n☁️ For \x1b[1m\x1b[32mEAS Build\x1b[0m deployments, ensure the secret\x1b[1m\x1b[4m\x1b[31m${environmentFiles[APP_ENV]} \x1b[0m is defined in Project Secrets and has the proper environment file attached.`,
       );
     }
 
     console.error(...messages);
     throw new Error(
-      'Invalid environment variables, Check terminal for more details '
+      'Invalid environment variables, Check terminal for more details ',
     );
   }
 

package.json

@@ -103,6 +103,7 @@
     "react-native-screens": "~3.31.1",
     "react-native-svg": "~15.2.0",
     "react-native-web": "~0.19.12",
+    "react-native-webview": "13.8.6",
     "react-query-kit": "^3.3.0",
     "tailwind-variants": "^0.2.1",
     "zod": "^3.23.8",

pnpm-lock.yaml

@@ -1,13 +1,15 @@
 import { Env } from '@env';
+import { router } from 'expo-router';
 import { useColorScheme } from 'nativewind';
+import React from 'react';
 
 import { Item } from '@/components/settings/item';
 import { ItemsContainer } from '@/components/settings/items-container';
 import { LanguageItem } from '@/components/settings/language-item';
 import { ThemeItem } from '@/components/settings/theme-item';
 import { translate, useAuth } from '@/core';
 import { colors, FocusAwareStatusBar, ScrollView, Text, View } from '@/ui';
-import { Github, Rate, Share, Support, Website } from '@/ui/icons';
+import { Website } from '@/ui/icons';
 
 export default function Settings() {
   const signOut = useAuth.use.signOut();
@@ -29,44 +31,32 @@ export default function Settings() {
             <ThemeItem />
           </ItemsContainer>
 
-          <ItemsContainer title="settings.about">
-            <Item text="settings.app_name" value={Env.NAME} />
-            <Item text="settings.version" value={Env.VERSION} />
-          </ItemsContainer>
-
-          <ItemsContainer title="settings.support_us">
-            <Item
-              text="settings.share"
-              icon={<Share color={iconColor} />}
-              onPress={() => {}}
-            />
-            <Item
-              text="settings.rate"
-              icon={<Rate color={iconColor} />}
-              onPress={() => {}}
-            />
-            <Item
-              text="settings.support"
-              icon={<Support color={iconColor} />}
-              onPress={() => {}}
-            />
-          </ItemsContainer>
-
           <ItemsContainer title="settings.links">
-            <Item text="settings.privacy" onPress={() => {}} />
-            <Item text="settings.terms" onPress={() => {}} />
             <Item
-              text="settings.github"
-              icon={<Github color={iconColor} />}
-              onPress={() => {}}
+              text="settings.terms"
+              onPress={() => {
+                const url = encodeURIComponent(Env.TERMS_AND_CONDITIONS_URL);
+                const title = encodeURIComponent('Terms & Conditions');
+
+                router.push(`/www?url=${url}&title=${title}`);
+              }}
             />
             <Item
               text="settings.website"
               icon={<Website color={iconColor} />}
-              onPress={() => {}}
+              onPress={() => {
+                const url = encodeURIComponent(Env.WEBSITE_URL);
+                const title = encodeURIComponent('Website');
+
+                router.push(`/www?url=${url}&title=${title}`);
+              }}
             />
           </ItemsContainer>
 
+          <ItemsContainer title="settings.about">
+            <Item text="settings.version" value={Env.VERSION} />
+          </ItemsContainer>
+
           <View className="my-8">
             <ItemsContainer>
               <Item text="settings.logout" onPress={signOut} />

src/app/(app)/settings.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Buttons } from '@/components/buttons';
 import { Colors } from '@/components/colors';
 import { Inputs } from '@/components/inputs';

src/app/(app)/style.tsx

@@ -35,6 +35,13 @@ export default function RootLayout() {
         <Stack.Screen name="onboarding" options={{ headerShown: false }} />
         <Stack.Screen name="forgot-password" />
         <Stack.Screen name="sign-in" options={{ headerShown: false }} />
+        <Stack.Screen
+          name="www"
+          options={{
+            presentation: 'modal',
+            title: '', // Title will be overridden by the screen itself
+          }}
+        />
       </Stack>
     </Providers>
   );

src/app/_layout.tsx

@@ -35,7 +35,7 @@ export default function Onboarding() {
       </View>
       <SafeAreaView className="mt-6">
         <Button
-          label="Let's Get Started "
+          label="Let's Get Started"
           onPress={() => {
             setIsFirstTime(false);
             router.replace('/sign-in');

src/app/onboarding.tsx

@@ -0,0 +1,58 @@
+import { useLocalSearchParams, useNavigation, useRouter } from 'expo-router';
+import React, { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+
+import { Text } from '@/ui';
+
+export default function WWW() {
+  const router = useRouter();
+  const { url, title } = useLocalSearchParams();
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    if (title) {
+      navigation.setOptions({
+        title,
+      });
+    }
+  }, [navigation, title]);
+
+  if (!url || typeof url !== 'string') {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Invalid URL</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <WebView
+        source={{ uri: url }}
+        style={styles.webview}
+        onError={() => router.back()}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  webview: {
+    flex: 1,
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'white',
+  },
+  errorText: {
+    color: 'red',
+    fontSize: 16,
+  },
+});

src/app/www.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { translate, useSelectedLanguage } from '@/core';
 import type { Language } from '@/core/i18n/resources';