From 2cf2dea638562fc95df2bbc77a734ecf5c460597 Mon Sep 17 00:00:00 2001 From: Guillermo Machado Date: Fri, 10 Jan 2025 14:57:29 -0300 Subject: [PATCH 1/4] feat: add webview to open terms and conditions --- .env.sample | 2 + env.js | 16 ++++--- package.json | 1 + pnpm-lock.yaml | 16 +++++++ src/app/(app)/settings.tsx | 50 ++++++++----------- src/app/(app)/style.tsx | 2 + src/app/_layout.tsx | 7 +++ src/app/onboarding.tsx | 2 +- src/app/www.tsx | 58 +++++++++++++++++++++++ src/components/settings/language-item.tsx | 2 +- 10 files changed, 118 insertions(+), 38 deletions(-) create mode 100644 src/app/www.tsx diff --git a/.env.sample b/.env.sample index 7ab0b11d7..98d134ee0 100644 --- a/.env.sample +++ b/.env.sample @@ -2,3 +2,5 @@ API_URL= VAR_NUMBER= VAR_BOOL= SECRET_KEY= +WEBSITE_URL= +TERMS_AND_CONDITIONS_URL= diff --git a/env.js b/env.js index fb55db37b..b69ced365 100644 --- a/env.js +++ b/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 ', ); } diff --git a/package.json b/package.json index 0611459da..a33534a76 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ad36a838d..41bca8f4b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -128,6 +128,9 @@ importers: react-native-web: specifier: ~0.19.12 version: 0.19.12(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + react-native-webview: + specifier: 13.8.6 + version: 13.8.6(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.2.0))(react@18.2.0) react-query-kit: specifier: ^3.3.0 version: 3.3.0(@tanstack/react-query@5.52.2(react@18.2.0)) @@ -6430,6 +6433,12 @@ packages: react: ^18.0.0 react-dom: ^18.0.0 + react-native-webview@13.8.6: + resolution: {integrity: sha512-jtZ9OgB2AN6rhDwto6dNL3PtOtl/SI4VN93pZEPbMLvRjqHfxiUrilGllL5fKAXq5Ry5FJyfUi82A4Ii8olZ7A==} + peerDependencies: + react: '*' + react-native: '*' + react-native@0.74.5: resolution: {integrity: sha512-Bgg2WvxaGODukJMTZFTZBNMKVaROHLwSb8VAGEdrlvKwfb1hHg/3aXTUICYk7dwgAnb+INbGMwnF8yeAgIUmqw==} engines: {node: '>=18'} @@ -15912,6 +15921,13 @@ snapshots: transitivePeerDependencies: - encoding + react-native-webview@13.8.6(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.2.0))(react@18.2.0): + dependencies: + escape-string-regexp: 2.0.0 + invariant: 2.2.4 + react: 18.2.0 + react-native: 0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.2.0) + react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.2.0): dependencies: '@jest/create-cache-key-function': 29.7.0 diff --git a/src/app/(app)/settings.tsx b/src/app/(app)/settings.tsx index 857e45a4a..27be46bb4 100644 --- a/src/app/(app)/settings.tsx +++ b/src/app/(app)/settings.tsx @@ -1,5 +1,7 @@ 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'; @@ -7,7 +9,7 @@ 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() { - - - - - - - } - onPress={() => {}} - /> - } - onPress={() => {}} - /> - } - onPress={() => {}} - /> - - - {}} /> - {}} /> } - 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}`); + }} /> } - onPress={() => {}} + onPress={() => { + const url = encodeURIComponent(Env.WEBSITE_URL); + const title = encodeURIComponent('Website'); + + router.push(`/www?url=${url}&title=${title}`); + }} /> + + + + diff --git a/src/app/(app)/style.tsx b/src/app/(app)/style.tsx index 0a85afa6f..fbc2d3679 100644 --- a/src/app/(app)/style.tsx +++ b/src/app/(app)/style.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { Buttons } from '@/components/buttons'; import { Colors } from '@/components/colors'; import { Inputs } from '@/components/inputs'; diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx index 9fafc0531..391f68efd 100644 --- a/src/app/_layout.tsx +++ b/src/app/_layout.tsx @@ -35,6 +35,13 @@ export default function RootLayout() { + ); diff --git a/src/app/onboarding.tsx b/src/app/onboarding.tsx index 4be554745..d450365b8 100644 --- a/src/app/onboarding.tsx +++ b/src/app/onboarding.tsx @@ -35,7 +35,7 @@ export default function Onboarding() {