Merge pull request #1059 from JGreenlee/onboarding-fix-oct6

🐛 Onboarding Fixes Oct 6

www/i18n/en.json

@@ -284,10 +284,7 @@
             },
             "ignorebatteryopt": {
                 "name": "Ignore battery optimizations",
-                "description": {
-                    "android-disable": "On the optimization page, go to all apps, search for this app and turn off optimizations.",
-                    "ios": "Please allow."
-                }
+                "description": "Please allow."
             }
         },
         "permissions": {
@@ -362,6 +359,8 @@
         "survey-missing-formpath": "Error while fetching resources in config: survey_info.surveys has a survey without a formPath"
     },
     "errors": {
+      "registration-check-token": "User registration error. Please check your token and try again.",
+      "not-registered-cant-contact": "User is not registered, so the server cannot be contacted.",
       "while-populating-composite": "Error while populating composite trips",
       "while-loading-another-week": "Error while loading travel of {{when}} week",
       "while-loading-specific-week": "Error while loading travel for the week of {{day}}",

www/js/App.tsx

@@ -10,6 +10,7 @@ import OnboardingStack from './onboarding/OnboardingStack';
 import { OnboardingRoute, OnboardingState, getPendingOnboardingState } from './onboarding/onboardingHelper';
 import { setServerConnSettings } from './config/serverConn';
 import AppStatusModal from './control/AppStatusModal';
+import usePermissionStatus from './usePermissionStatus';
 
 const defaultRoutes = (t) => [
   { key: 'label', title: t('diary.label-tab'), focusedIcon: 'check-bold', unfocusedIcon: 'check-outline' },
@@ -26,6 +27,7 @@ const App = () => {
   const [onboardingState, setOnboardingState] = useState<OnboardingState|null>(null);
   const [permissionsPopupVis, setPermissionsPopupVis] = useState(false);
   const appConfig = useAppConfig();
+  const permissionStatus = usePermissionStatus();
   const { colors } = useTheme();
   const { t } = useTranslation();
 
@@ -55,6 +57,7 @@ const App = () => {
   const appContextValue = {
     appConfig,
     onboardingState, setOnboardingState, refreshOnboardingState,
+    permissionStatus,
     permissionsPopupVis, setPermissionsPopupVis,
   }
 

www/js/appstatus/PermissionsControls.tsx

@@ -1,17 +1,19 @@
 //component to view and manage permission settings
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { StyleSheet, ScrollView, View } from "react-native";
 import { Button, Text } from 'react-native-paper';
 import { useTranslation } from "react-i18next";
 import PermissionItem from "./PermissionItem";
-import usePermissionStatus, { refreshAllChecks } from "../usePermissionStatus";
+import { refreshAllChecks } from "../usePermissionStatus";
 import ExplainPermissions from "./ExplainPermissions";
 import AlertBar from "../control/AlertBar";
+import { AppContext } from "../App";
 
 const PermissionsControls = ({ onAccept }) => {
     const { t } = useTranslation();
     const [explainVis, setExplainVis] = useState<boolean>(false);
-    const { checkList, overallStatus, error, errorVis, setErrorVis, explanationList } = usePermissionStatus();
+    const { permissionStatus } = useContext(AppContext);
+    const { checkList, overallStatus, error, errorVis, setErrorVis, explanationList } = permissionStatus;
 
     return (
         <>
@@ -62,4 +64,4 @@ const styles = StyleSheet.create({
     }
   });
 
-export default PermissionsControls;
+export default PermissionsControls;

www/js/control/AppStatusModal.tsx

@@ -1,14 +1,15 @@
-import React, { useEffect } from "react";
+import React, { useContext, useEffect } from "react";
 import { Modal,  useWindowDimensions } from "react-native";
 import { Dialog, useTheme } from 'react-native-paper';
 import PermissionsControls from "../appstatus/PermissionsControls";
-import usePermissionStatus from "../usePermissionStatus";
 import { settingStyles } from "./ProfileSettings";
+import { AppContext } from "../App";
 //TODO -- import settings styles for dialog
 
 const AppStatusModal = ({ permitVis, setPermitVis }) => {
     const { height: windowHeight } = useWindowDimensions();
-    const { overallStatus, checkList } = usePermissionStatus();
+    const { permissionStatus } = useContext(AppContext);
+    const { overallStatus, checkList } = permissionStatus;
     const { colors } = useTheme();
 
     /* Listen for permissions status changes to determine if we should show the modal. */

www/js/onboarding/SaveQrPage.tsx

@@ -3,19 +3,20 @@ import { View, StyleSheet } from "react-native";
 import { ActivityIndicator, Button, Surface, Text } from "react-native-paper";
 import { registerUserDone, setRegisterUserDone, setSaveQrDone } from "./onboardingHelper";
 import { AppContext } from "../App";
-import usePermissionStatus from "../usePermissionStatus";
 import { getAngularService } from "../angular-react-helper";
 import { displayError, logDebug } from "../plugin/logger";
 import { useTranslation } from "react-i18next";
 import QrCode, { shareQR } from "../components/QrCode";
 import { onboardingStyles } from "./OnboardingStack";
 import { preloadDemoSurveyResponse } from "./SurveyPage";
+import { resetDataAndRefresh } from "../config/dynamicConfig";
+import i18next from "i18next";
 
 const SaveQrPage = ({  }) => {
 
   const { t } = useTranslation();
-  const { onboardingState, refreshOnboardingState } = useContext(AppContext);
-  const { overallStatus } = usePermissionStatus();
+  const { permissionStatus, onboardingState, refreshOnboardingState } = useContext(AppContext);
+  const { overallStatus } = permissionStatus;
 
   useEffect(() => {
     if (overallStatus == true && !registerUserDone) {
@@ -42,7 +43,10 @@ const SaveQrPage = ({  }) => {
         logDebug("registered user in CommHelper result " + successResult);
         refreshOnboardingState();
       }, function(errorResult) {
-        displayError(errorResult, "User registration error");
+        /* if registration fails, we should take the user back to the welcome page
+          so they can try again with a valid token */
+        displayError(errorResult, i18next.t('errors.registration-check-token'));
+        resetDataAndRefresh();
       });
     }).catch((e) => {
       displayError(e, "Sign in error");

www/js/onboarding/SurveyPage.tsx

@@ -5,14 +5,20 @@ import EnketoModal from "../survey/enketo/EnketoModal";
 import { DEMOGRAPHIC_SURVEY_DATAKEY, DEMOGRAPHIC_SURVEY_NAME } from "../control/DemographicsSettingRow";
 import { loadPreviousResponseForSurvey } from "../survey/enketo/enketoHelper";
 import { AppContext } from "../App";
-import { markIntroDone } from "./onboardingHelper";
+import { markIntroDone, registerUserDone } from "./onboardingHelper";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { onboardingStyles } from "./OnboardingStack";
+import { displayErrorMsg } from "../plugin/logger";
+import i18next from "i18next";
 
 let preloadedResponsePromise: Promise<any> = null;
 export const preloadDemoSurveyResponse = () => {
   if (!preloadedResponsePromise) {
+    if (!registerUserDone) {
+      displayErrorMsg(i18next.t('errors.not-registered-cant-contact'));
+      return Promise.resolve(null);
+    }
     preloadedResponsePromise = loadPreviousResponseForSurvey(DEMOGRAPHIC_SURVEY_DATAKEY);
   }
   return preloadedResponsePromise;

www/js/onboarding/WelcomePage.tsx

@@ -58,6 +58,7 @@ const WelcomePage = () => {
       <Surface elevation={1} style={s.appIconWrapper(colors)}>
         <Image style={s.appIcon(colors)} source={require('../../../resources/icon.png')} />
       </Surface>
+      <ScrollView>
       <Text variant='headlineSmall' style={s.welcomeTitle}>
         <Trans i18nKey='join.welcome-to-app' values={{appName: t('join.app-name')}}
         components={{b: <Text style={{fontWeight: 'bold'}}> </Text>}} />
@@ -81,6 +82,7 @@ const WelcomePage = () => {
           <Text style={{ textAlign: 'center', margin: 'auto' }}>{t('join.paste-hint')}</Text>
         </View>
       </View>
+      </ScrollView>
     </Surface>
     <Modal visible={pasteModalVis} transparent={true} onDismiss={() => setPasteModalVis(false)}>
       <Dialog visible={pasteModalVis} onDismiss={() => setPasteModalVis(false)}>

www/js/usePermissionStatus.ts

@@ -283,7 +283,7 @@ const usePermissionStatus = () => {
         }
         let ignoreBatteryOptCheck = {
             name: t("intro.appstatus.ignorebatteryopt.name"),
-            desc: t("intro.appstatus.ignorebatteryopt.description.android-disable"),
+            desc: t("intro.appstatus.ignorebatteryopt.description"),
             fix: fixBatteryOpt,
             refresh: checkBatteryOpt
         }
@@ -299,11 +299,6 @@ const usePermissionStatus = () => {
         let locExplanation = t('intro.appstatus.overall-loc-description');
         if(window['device'].platform.toLowerCase() == "ios") {
             overallFitnessName = t('intro.appstatus.overall-fitness-name-ios');
-            if(window['device'].version.split(".")[0] < 13) {
-                locExplanation = (t("intro.permissions.locationPermExplanation-ios-lt-13"));
-            } else {
-                locExplanation = (t("intro.permissions.locationPermExplanation-ios-gte-13"));
-            }
         }
         tempExplanations.push({name: t('intro.appstatus.overall-loc-name'), desc: locExplanation});
         tempExplanations.push({name: overallFitnessName, desc: t('intro.appstatus.overall-fitness-description')});