In app browser (#1286)

* Link to in-app full page webview on About * Add full page webview to login stack as well * Link to webview from sign-up page * Add strings * Link to webview for Donate buttons * Add strings * Use in app browser on help page * Skip a step that errors out for websites that link out directly after load or have an iframe
inaturalist · Mar 18, 2024 · 3430406 · 3430406
1 parent a9348f1
commit 3430406
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 76 deletions.
diff --git a/src/components/About.js b/src/components/About.js
@@ -1,5 +1,6 @@
 // @flow
 
+import { useNavigation } from "@react-navigation/native";
 import classnames from "classnames";
 import {
   Body1,
@@ -14,47 +15,47 @@ import { Image, View } from "components/styledComponents";
 import { t } from "i18next";
 import type { Node } from "react";
 import React, { useState } from "react";
-import { Alert, Linking } from "react-native";
 import { getBuildNumber, getVersion } from "react-native-device-info";
 import { useDebugMode } from "sharedHooks";
 
 const aboutID = "about";
 const teamID = "team";
 
 const About = (): Node => {
+  const navigation = useNavigation();
   const [activeTab, setActiveTab] = useState( aboutID );
   const appVersion = getVersion();
   const buildVersion = getBuildNumber();
   const { isDebug, toggleDebug } = useDebugMode( );
 
   const onTermsPressed = async () => {
     const url = "https://www.inaturalist.org/pages/terms";
-    const supported = await Linking.canOpenURL( url );
-    if ( supported ) {
-      await Linking.openURL( url );
-    } else {
-      Alert.alert( `Don't know how to open this URL: ${url}` );
-    }
+    navigation.navigate( "FullPageWebView", {
+      title: t( "Terms-of-Use" ),
+      initialUrl: url,
+      loggedIn: false,
+      openLinksInBrowser: true
+    } );
   };
 
   const onPrivacyPressed = async () => {
     const url = "https://www.inaturalist.org/pages/privacy";
-    const supported = await Linking.canOpenURL( url );
-    if ( supported ) {
-      await Linking.openURL( url );
-    } else {
-      Alert.alert( `Don't know how to open this URL: ${url}` );
-    }
+    navigation.navigate( "FullPageWebView", {
+      title: t( "Privacy-Policy" ),
+      initialUrl: url,
+      loggedIn: false,
+      openLinksInBrowser: true
+    } );
   };
 
   const onCommunityPressed = async () => {
     const url = "https://www.inaturalist.org/pages/community+guidelines";
-    const supported = await Linking.canOpenURL( url );
-    if ( supported ) {
-      await Linking.openURL( url );
-    } else {
-      Alert.alert( `Don't know how to open this URL: ${url}` );
-    }
+    navigation.navigate( "FullPageWebView", {
+      title: t( "Community-Guidelines" ),
+      initialUrl: url,
+      loggedIn: false,
+      openLinksInBrowser: true
+    } );
   };
 
   return (

diff --git a/src/components/Donate/Donate.js b/src/components/Donate/Donate.js
@@ -1,34 +1,36 @@
 // @flow
 
+import { useNavigation } from "@react-navigation/native";
 import {
   Body2, Button, Heading4, ScrollViewWrapper
 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import { t } from "i18next";
 import type { Node } from "react";
 import React from "react";
-import { Alert, Linking } from "react-native";
 import * as StoreReview from "react-native-store-review";
 
 const Donate = (): Node => {
+  const navigation = useNavigation( );
   const onDonatePress = async ( ) => {
     const url = "https://inaturalist.org/donate";
-    const supported = await Linking.canOpenURL( url );
-    if ( supported ) {
-      await Linking.openURL( url );
-    } else {
-      Alert.alert( `Don't know how to open this URL: ${url}` );
-    }
+    navigation.navigate( "FullPageWebView", {
+      title: t( "Donate-to-iNaturalist" ),
+      initialUrl: url,
+      loggedIn: false,
+      openLinksInBrowser: false,
+      skipSetSourceInShouldStartLoadWithRequest: true
+    } );
   };
 
   const onShopPress = async ( ) => {
     const url = "https://inaturalist.threadless.com";
-    const supported = await Linking.canOpenURL( url );
-    if ( supported ) {
-      await Linking.openURL( url );
-    } else {
-      Alert.alert( `Don't know how to open this URL: ${url}` );
-    }
+    navigation.navigate( "FullPageWebView", {
+      title: t( "Shop-iNaturalist-Merch" ),
+      initialUrl: url,
+      loggedIn: false,
+      openLinksInBrowser: true
+    } );
   };
 
   const onReviewPress = ( ) => {

diff --git a/src/components/FullPageWebView/FullPageWebView.js b/src/components/FullPageWebView/FullPageWebView.js
@@ -91,8 +91,8 @@ const FullPageWebView = ( ) => {
               return false;
             }
 
-            // Note: this will cause infinite re-renders if the page has
-            // iframes
+            if ( params.skipSetSourceInShouldStartLoadWithRequest ) return true;
+            // Note: this will cause infinite re-renders if the page has iframes
             setSource( { ...source, uri: request.url } );
             return true;
           }}

diff --git a/src/components/Help/Help.js b/src/components/Help/Help.js
@@ -1,5 +1,6 @@
 // @flow
 
+import { useNavigation } from "@react-navigation/native";
 import {
   Body2,
   Button,
@@ -13,14 +14,16 @@ import React from "react";
 import { Alert, Linking } from "react-native";
 
 const Help = (): Node => {
+  const navigation = useNavigation();
   const onHelpPressed = async () => {
     const url = "https://help.inaturalist.org/";
-    const supported = await Linking.canOpenURL( url );
-    if ( supported ) {
-      await Linking.openURL( url );
-    } else {
-      Alert.alert( `Don't know how to open this URL: ${url}` );
-    }
+    navigation.navigate( "FullPageWebView", {
+      title: t( "iNaturalist-Help" ),
+      initialUrl: url,
+      loggedIn: false,
+      openLinksInBrowser: false,
+      skipSetSourceInShouldStartLoadWithRequest: true
+    } );
   };
 
   const onContactPressed = async () => {
@@ -47,12 +50,12 @@ const Help = (): Node => {
 
   const onTeacherPressed = async () => {
     const url = "https://www.inaturalist.org/pages/teacher's+guide";
-    const supported = await Linking.canOpenURL( url );
-    if ( supported ) {
-      await Linking.openURL( url );
-    } else {
-      Alert.alert( `Don't know how to open this URL: ${url}` );
-    }
+    navigation.navigate( "FullPageWebView", {
+      title: t( "Teachers-Guide" ),
+      initialUrl: url,
+      loggedIn: false,
+      openLinksInBrowser: true
+    } );
   };
 
   const onForumPressed = async () => {

diff --git a/src/components/LoginSignUp/LicensePhotosForm.js b/src/components/LoginSignUp/LicensePhotosForm.js
@@ -7,50 +7,54 @@ import { View } from "components/styledComponents";
 import { t } from "i18next";
 import type { Node } from "react";
 import React, { useState } from "react";
-import { Alert, Linking } from "react-native";
 import { Checkbox, useTheme } from "react-native-paper";
 
 import {
   registerUser
 } from "./AuthenticationService";
 import Error from "./Error";
 
-const LicensePhotosForm = ( ): Node => {
-  const NONE = "NONE";
-  const LICENSES = "LICENSES";
-  const PERSONAL_INFO = "PERSONAL_INFO";
-  const INFO_TRANSFER = "INFO_TRANSFER";
+const NONE = "NONE";
+const LICENSES = "LICENSES";
+const PERSONAL_INFO = "PERSONAL_INFO";
+const INFO_TRANSFER = "INFO_TRANSFER";
 
+const LicensePhotosForm = ( ): Node => {
+  const navigation = useNavigation( );
+  const { params } = useRoute( );
+  const { user } = params;
+  const theme = useTheme( );
   const [learnSheet, setLearnSheet] = useState( NONE );
+  const [error, setError] = useState( null );
 
   const onTermsPressed = async () => {
     const url = "https://www.inaturalist.org/pages/terms";
-    const supported = await Linking.canOpenURL( url );
-    if ( supported ) {
-      await Linking.openURL( url );
-    } else {
-      Alert.alert( `Don't know how to open this URL: ${url}` );
-    }
+    navigation.navigate( "FullPageWebView", {
+      title: t( "Terms-of-Use" ),
+      initialUrl: url,
+      loggedIn: false,
+      openLinksInBrowser: true
+    } );
   };
 
   const onPrivacyPressed = async () => {
     const url = "https://www.inaturalist.org/pages/privacy";
-    const supported = await Linking.canOpenURL( url );
-    if ( supported ) {
-      await Linking.openURL( url );
-    } else {
-      Alert.alert( `Don't know how to open this URL: ${url}` );
-    }
+    navigation.navigate( "FullPageWebView", {
+      title: t( "Privacy-Policy" ),
+      initialUrl: url,
+      loggedIn: false,
+      openLinksInBrowser: true
+    } );
   };
 
   const onCommunityPressed = async () => {
     const url = "https://www.inaturalist.org/pages/community+guidelines";
-    const supported = await Linking.canOpenURL( url );
-    if ( supported ) {
-      await Linking.openURL( url );
-    } else {
-      Alert.alert( `Don't know how to open this URL: ${url}` );
-    }
+    navigation.navigate( "FullPageWebView", {
+      title: t( "Community-Guidelines" ),
+      initialUrl: url,
+      loggedIn: false,
+      openLinksInBrowser: true
+    } );
   };
 
   const initialCheckboxState = {
@@ -107,13 +111,7 @@ const LicensePhotosForm = ( ): Node => {
       checked: false
     }
   };
-
-  const { params } = useRoute( );
-  const { user } = params;
-  const navigation = useNavigation( );
-  const theme = useTheme( );
   const [checkboxes, setCheckboxes] = useState( initialCheckboxState );
-  const [error, setError] = useState( null );
 
   const register = async ( ) => {
     user.pi_consent = true;

diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
@@ -340,6 +340,8 @@ Do-not-collect-stability-and-usage-data-using-third-party-services = Do not coll
 
 DONATE = DONATE
 
+Donate-to-iNaturalist = Donate to iNaturalist
+
 DONATE-TO-INATURALIST = DONATE TO INATURALIST
 
 # Label for a button the user taps when a task is complete
@@ -492,6 +494,8 @@ INATURALIST-COMMUNITY = INATURALIST COMMUNITY
 
 INATURALIST-FORUM = INATURALIST FORUM
 
+iNaturalist-Help = iNaturalist Help
+
 INATURALIST-HELP-PAGE = INATURALIST HELP PAGE
 
 iNaturalist-helps-you-identify = iNaturalist helps you identify the plants and animals around you while generating data for science and conservation. Get connected with a community of millions scientists and naturalists who can help you learn more about nature!
@@ -933,6 +937,8 @@ Share-location = Share Location
 
 Share-location = Share Location
 
+Shop-iNaturalist-Merch = Shop iNaturalist Merch
+
 SHOP-INATURALIST-MERCH = SHOP INATURALIST MERCH
 
 Sign-out = Sign out
@@ -989,6 +995,8 @@ Taxonomy-Settings = Taxonomy Settings
 
 TEACHERS = TEACHERS
 
+Teachers-Guide = Teachers' Guide
+
 TEAM = TEAM
 
 The-iNaturalist-team-has-collaborated =  The iNaturalist team has collaborated with...

diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
@@ -191,6 +191,7 @@
   "Display-Name": "Display Name",
   "Do-not-collect-stability-and-usage-data-using-third-party-services": "Do not collect stability and usage data using third-party services",
   "DONATE": "DONATE",
+  "Donate-to-iNaturalist": "Donate to iNaturalist",
   "DONATE-TO-INATURALIST": "DONATE TO INATURALIST",
   "DONE": {
     "comment": "Label for a button the user taps when a task is complete",
@@ -286,6 +287,7 @@
   "iNaturalist-Applications": "iNaturalist Applications",
   "INATURALIST-COMMUNITY": "INATURALIST COMMUNITY",
   "INATURALIST-FORUM": "INATURALIST FORUM",
+  "iNaturalist-Help": "iNaturalist Help",
   "INATURALIST-HELP-PAGE": "INATURALIST HELP PAGE",
   "iNaturalist-helps-you-identify": "iNaturalist helps you identify the plants and animals around you while generating data for science and conservation. Get connected with a community of millions scientists and naturalists who can help you learn more about nature!",
   "iNaturalist-Network-Affiliation": "iNaturalist Network Affiliation",
@@ -599,6 +601,7 @@
   "Share": "Share",
   "SHARE-DEBUG-LOGS": "SHARE DEBUG LOGS",
   "Share-location": "Share Location",
+  "Shop-iNaturalist-Merch": "Shop iNaturalist Merch",
   "SHOP-INATURALIST-MERCH": "SHOP INATURALIST MERCH",
   "Sign-out": "Sign out",
   "Sign-Up": "Sign Up",
@@ -637,6 +640,7 @@
   },
   "Taxonomy-Settings": "Taxonomy Settings",
   "TEACHERS": "TEACHERS",
+  "Teachers-Guide": "Teachers' Guide",
   "TEAM": "TEAM",
   "The-iNaturalist-team-has-collaborated": "The iNaturalist team has collaborated with...",
   "The-iNaturalist-Network": "The iNaturalist network is a collection of localized websites that are fully connected to the global iNaturalist community. Network sites are supported by local institutions that promote local use and facilitate the use of data from iNaturalist to benefit local biodiversity.",

diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
@@ -340,6 +340,8 @@ Do-not-collect-stability-and-usage-data-using-third-party-services = Do not coll
 
 DONATE = DONATE
 
+Donate-to-iNaturalist = Donate to iNaturalist
+
 DONATE-TO-INATURALIST = DONATE TO INATURALIST
 
 # Label for a button the user taps when a task is complete
@@ -492,6 +494,8 @@ INATURALIST-COMMUNITY = INATURALIST COMMUNITY
 
 INATURALIST-FORUM = INATURALIST FORUM
 
+iNaturalist-Help = iNaturalist Help
+
 INATURALIST-HELP-PAGE = INATURALIST HELP PAGE
 
 iNaturalist-helps-you-identify = iNaturalist helps you identify the plants and animals around you while generating data for science and conservation. Get connected with a community of millions scientists and naturalists who can help you learn more about nature!
@@ -933,6 +937,8 @@ Share-location = Share Location
 
 Share-location = Share Location
 
+Shop-iNaturalist-Merch = Shop iNaturalist Merch
+
 SHOP-INATURALIST-MERCH = SHOP INATURALIST MERCH
 
 Sign-out = Sign out
@@ -989,6 +995,8 @@ Taxonomy-Settings = Taxonomy Settings
 
 TEACHERS = TEACHERS
 
+Teachers-Guide = Teachers' Guide
+
 TEAM = TEAM
 
 The-iNaturalist-team-has-collaborated =  The iNaturalist team has collaborated with...

diff --git a/src/navigation/StackNavigators/LoginStackNavigator.js b/src/navigation/StackNavigators/LoginStackNavigator.js
@@ -1,4 +1,5 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import FullPageWebView from "components/FullPageWebView/FullPageWebView";
 import ForgotPassword from "components/LoginSignUp/ForgotPassword";
 import LicensePhotos from "components/LoginSignUp/LicensePhotos";
 import Login from "components/LoginSignUp/Login";
@@ -56,6 +57,11 @@ const LoginStackNavigator = ( ): Node => (
       component={SignUpConfirmation}
       options={LOGIN_SCREEN_OPTIONS}
     />
+    <Stack.Screen
+      name="FullPageWebView"
+      component={FullPageWebView}
+      options={{ headerTitle: "" }}
+    />
   </Stack.Navigator>
 );