Merge pull request #1155 from smart-village-solutions/feature/SUE-76-…

…update-alerts-according-to-location-permissions feat(sue): update alerts according to location permissions
smart-village-solutions · Jul 26, 2024 · 4aa8723 · 4aa8723
2 parents 8fc1a41 + 2dc1c35
commit 4aa8723
Show file tree

Hide file tree

Showing 19 changed files with 739 additions and 389 deletions.
diff --git a/package.json b/package.json
@@ -58,21 +58,21 @@
     "apollo-link-context": "1.0.20",
     "apollo-link-http": "1.5.17",
     "apollo-link-rest": "~0.7.3",
-    "expo": "~51.0.16",
+    "expo": "~51.0.17",
     "expo-application": "~5.9.1",
     "expo-asset": "~10.0.10",
     "expo-av": "~14.0.6",
     "expo-barcode-scanner": "~13.0.1",
     "expo-blur": "~13.0.2",
     "expo-build-properties": "~0.12.3",
-    "expo-camera": "~15.0.12",
+    "expo-camera": "~15.0.13",
     "expo-clipboard": "~6.0.3",
     "expo-constants": "~16.0.2",
     "expo-dev-client": "~4.0.19",
     "expo-device": "~6.0.2",
     "expo-document-picker": "~12.0.2",
     "expo-font": "~12.0.7",
-    "expo-image-picker": "~15.0.6",
+    "expo-image-picker": "~15.0.7",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-localization": "~15.0.3",
@@ -100,7 +100,7 @@
     "react-apollo": "~3.1.5",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.12.2",
-    "react-native": "0.74.2",
+    "react-native": "0.74.3",
     "react-native-app-intro-slider": "^4.0.4",
     "react-native-autocomplete-input": "^5.1.0",
     "react-native-calendars": "1.1293.0",

diff --git a/src/ConfigurationsProvider.tsx b/src/ConfigurationsProvider.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, createContext, useContext, useEffect, useState } from 'react';
+import React, { ReactNode, createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 
 import { SettingsContext } from './SettingsProvider';
@@ -48,15 +48,19 @@ export const ConfigurationsProvider = ({ children }: { children?: ReactNode }) =
     type: 'json'
   });
 
-  useEffect(() => {
+  const mergedConfig = useMemo(() => {
     const config = {
       appDesignSystem,
       sueConfig: { ...sue, ...sueConfigData, sueProgress }
     };
 
-    setConfigurations((prev) => mergeDefaultConfiguration(prev, config));
-    storageHelper.setConfigurations(config);
-  }, [sueConfigData]);
+    return mergeDefaultConfiguration({ ...defaultConfiguration }, config);
+  }, [appDesignSystem, sue, sueConfigData, sueProgress]);
+
+  useEffect(() => {
+    setConfigurations(mergedConfig);
+    storageHelper.setConfigurations(mergedConfig);
+  }, [mergedConfig]);
 
   return (
     <ConfigurationsContext.Provider value={configurations}>

diff --git a/src/components/CardListItem.js b/src/components/CardListItem.js
@@ -109,14 +109,21 @@ const renderCardContent = (item, horizontal, sue) => {
 /* eslint-enable complexity */
 
 export const CardListItem = memo(({ navigation, horizontal, item, sue }) => {
-  const { appDesignSystem = {}, params, routeName: name, subtitle, title } = item;
+  const {
+    appDesignSystem = {},
+    navigation: itemNavigation = {},
+    params,
+    routeName: name,
+    subtitle,
+    title
+  } = item;
   const { containerStyle, contentContainerStyle } = appDesignSystem;
 
   return (
     <Touchable
       accessibilityLabel={`${subtitle} (${title}) ${consts.a11yLabel.button}`}
-      onPress={() => navigation && navigation.push(name, params)}
-      disabled={!navigation}
+      onPress={() => navigation && !!itemNavigation && navigation.push(name, params)}
+      disabled={!navigation || !itemNavigation}
     >
       <Card containerStyle={[styles.container, !!containerStyle && containerStyle]}>
         <View

diff --git a/src/components/ImageMessage.js b/src/components/ImageMessage.js
@@ -15,7 +15,8 @@ export const ImageMessage = ({ message }) => (
 const styles = StyleSheet.create({
   containerStyle: {
     bottom: normalize(24),
-    left: normalize(14)
+    marginLeft: normalize(14),
+    marginRight: normalize(14)
   }
 });
 

diff --git a/src/components/ImagesCarousel.js b/src/components/ImagesCarousel.js
@@ -1,3 +1,4 @@
+import { useIsFocused } from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { Query } from 'react-apollo';
@@ -39,6 +40,13 @@ export const ImagesCarousel = ({
   const [carouselImageIndex, setCarouselImageIndex] = useState(0);
 
   const carouselRef = useRef();
+  const isFocused = useIsFocused();
+
+  if (isFocused) {
+    carouselRef.current?.startAutoplay();
+  } else {
+    carouselRef.current?.stopAutoplay();
+  }
 
   useEffect(() => {
     isPaused ? carouselRef.current?.stopAutoplay() : carouselRef.current?.startAutoplay();

diff --git a/src/components/SUE/report/SueReportDescription.tsx b/src/components/SUE/report/SueReportDescription.tsx
@@ -1,5 +1,5 @@
 import * as Location from 'expo-location';
-import React, { useRef } from 'react';
+import React, { memo, useMemo, useRef } from 'react';
 import { Controller, UseFormSetValue } from 'react-hook-form';
 import { StyleSheet, View } from 'react-native';
 
@@ -11,6 +11,8 @@ import { Input } from '../../form';
 
 const { IMAGE_SELECTOR_TYPES, IMAGE_SELECTOR_ERROR_TYPES, INPUT_KEYS } = consts;
 
+const MemoizedImageSelector = memo((props) => <ImageSelector {...props} />);
+
 export const SueReportDescription = ({
   areaServiceData,
   configuration,
@@ -37,6 +39,41 @@ export const SueReportDescription = ({
   const titleRef = useRef();
   const descriptionRef = useRef();
 
+  const imageSelectorProps = useMemo(
+    () => ({
+      configuration,
+      control,
+      coordinateCheck: {
+        areaServiceData,
+        errorMessage,
+        selectedPosition,
+        setSelectedPosition,
+        setShowCoordinatesFromImageAlert,
+        setUpdateRegionFromImage,
+        setValue
+      },
+      isMultiImages: true,
+      selectorType: IMAGE_SELECTOR_TYPES.SUE,
+      errorType: IMAGE_SELECTOR_ERROR_TYPES.SUE,
+      item: {
+        name: INPUT_KEYS.SUE.IMAGES,
+        infoText: texts.sue.report.imageHint(configuration?.limitation?.maxFileUploads?.value),
+        buttonTitle: texts.sue.report.addImage
+      }
+    }),
+    [
+      configuration,
+      control,
+      areaServiceData,
+      errorMessage,
+      selectedPosition,
+      setSelectedPosition,
+      setShowCoordinatesFromImageAlert,
+      setUpdateRegionFromImage,
+      setValue
+    ]
+  );
+
   return (
     <View style={styles.container}>
       <Wrapper style={styles.noPaddingTop}>
@@ -66,34 +103,7 @@ export const SueReportDescription = ({
       <Wrapper style={styles.noPaddingTop}>
         <Controller
           name={INPUT_KEYS.SUE.IMAGES}
-          render={({ field }) => (
-            <ImageSelector
-              {...{
-                configuration,
-                control,
-                coordinateCheck: {
-                  areaServiceData,
-                  errorMessage,
-                  selectedPosition,
-                  setSelectedPosition,
-                  setShowCoordinatesFromImageAlert,
-                  setUpdateRegionFromImage,
-                  setValue
-                },
-                field,
-                isMultiImages: true,
-                selectorType: IMAGE_SELECTOR_TYPES.SUE,
-                errorType: IMAGE_SELECTOR_ERROR_TYPES.SUE,
-                item: {
-                  name: INPUT_KEYS.SUE.IMAGES,
-                  infoText: texts.sue.report.imageHint(
-                    configuration?.limitation?.maxFileUploads?.value
-                  ),
-                  buttonTitle: texts.sue.report.addImage
-                }
-              }}
-            />
-          )}
+          render={({ field }) => <MemoizedImageSelector {...imageSelectorProps} field={field} />}
           control={control}
         />
       </Wrapper>

diff --git a/src/components/SUE/report/SueReportLocation.tsx b/src/components/SUE/report/SueReportLocation.tsx
@@ -1,9 +1,9 @@
 import { useNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
 import * as Location from 'expo-location';
-import moment from 'moment';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { UseFormGetValues, UseFormSetValue } from 'react-hook-form';
-import { Alert, StyleSheet, View } from 'react-native';
+import { Alert, Linking, StyleSheet, View } from 'react-native';
 import { useQuery } from 'react-query';
 
 import { ConfigurationsContext } from '../../../ConfigurationsProvider';
@@ -18,7 +18,7 @@ import {
   useSystemPermission
 } from '../../../hooks';
 import { QUERY_TYPES, getQuery } from '../../../queries';
-import { TValues, mapToMapMarkers } from '../../../screens';
+import { SETTINGS_SCREENS, TValues, mapToMapMarkers } from '../../../screens';
 import { MapMarker, ScreenName } from '../../../types';
 import { LoadingSpinner } from '../../LoadingSpinner';
 import { RegularText } from '../../Text';
@@ -29,6 +29,43 @@ import { getLocationMarker } from '../../settings';
 
 const { INPUT_KEYS } = consts;
 
+export const locationServiceEnabledAlert = ({
+  currentPosition,
+  locationServiceEnabled,
+  navigation
+}: {
+  currentPosition?: Location.LocationObject;
+  locationServiceEnabled?: Boolean;
+  navigation: StackNavigationProp<any>;
+}) => {
+  if (!locationServiceEnabled || !currentPosition) {
+    Alert.alert(
+      texts.settingsTitles.locationService,
+      !locationServiceEnabled
+        ? texts.settingsContents.locationService.onLocationServiceMissing
+        : texts.settingsContents.locationService.onSystemPermissionMissing,
+      [
+        {
+          text: texts.sue.report.alerts.imageSelectAlert.cancel
+        },
+        {
+          text: texts.sue.report.alerts.settings,
+          onPress: () => {
+            if (!locationServiceEnabled) {
+              navigation.navigate(ScreenName.Settings, {
+                setting: SETTINGS_SCREENS.LOCATION,
+                title: texts.settingsContents.locationService.setting
+              });
+            } else if (!currentPosition) {
+              Linking.openSettings();
+            }
+          }
+        }
+      ]
+    );
+  }
+};
+
 enum SueStatus {
   IN_PROCESS = 'TICKET_STATUS_IN_PROCESS',
   INVALID = 'TICKET_STATUS_INVALID',
@@ -63,19 +100,21 @@ export const SueReportLocation = ({
 }) => {
   const reverseGeocode = useReverseGeocode();
   const navigation = useNavigation();
-  const { locationSettings } = useLocationSettings();
+  const { locationSettings = {} } = useLocationSettings();
+  const { locationService: locationServiceEnabled } = locationSettings;
   const { globalSettings } = useContext(SettingsContext);
   const { settings = {} } = globalSettings;
   const { locationService } = settings;
   const systemPermission = useSystemPermission();
   const { appDesignSystem = {} } = useContext(ConfigurationsContext);
   const { sueStatus = {} } = appDesignSystem;
   const { statusViewColors = {}, statusTextColors = {} } = sueStatus;
-  const now = moment();
 
-  const { position } = usePosition(systemPermission?.status !== Location.PermissionStatus.GRANTED);
+  const { position } = usePosition(
+    systemPermission?.status !== Location.PermissionStatus.GRANTED || !locationServiceEnabled
+  );
   const { position: lastKnownPosition } = useLastKnownPosition(
-    systemPermission?.status !== Location.PermissionStatus.GRANTED
+    systemPermission?.status !== Location.PermissionStatus.GRANTED || !locationServiceEnabled
   );
   const currentPosition = position || lastKnownPosition;
 
@@ -138,18 +177,13 @@ export const SueReportLocation = ({
     }
   }, []);
 
-  const handleGeocode = async (position: { latitude: number; longitude: number }) => {
-    try {
-      await reverseGeocode({
-        areaServiceData,
-        errorMessage,
-        position,
-        setValue
-      });
-    } catch (error) {
-      throw new Error(error.message);
-    }
-  };
+  const handleGeocode = async (position: { latitude: number; longitude: number }) =>
+    await reverseGeocode({
+      areaServiceData,
+      errorMessage,
+      position,
+      setValue
+    });
 
   if (!systemPermission) {
     return <LoadingSpinner loading />;
@@ -192,7 +226,7 @@ export const SueReportLocation = ({
       } catch (error) {
         setSelectedPosition(undefined);
         Alert.alert(texts.sue.report.alerts.hint, error.message);
-        throw new Error(error.message);
+        return { error: error.message };
       }
     }
   };
@@ -206,6 +240,12 @@ export const SueReportLocation = ({
         {
           text: texts.sue.report.alerts.yes,
           onPress: async () => {
+            locationServiceEnabledAlert({
+              currentPosition,
+              locationServiceEnabled,
+              navigation
+            });
+
             if (currentPosition) {
               setSelectedPosition(currentPosition.coords);
               setUpdatedRegion(true);
@@ -232,7 +272,6 @@ export const SueReportLocation = ({
         } catch (error) {
           setSelectedPosition(undefined);
           Alert.alert(texts.sue.report.alerts.hint, error.message);
-          throw new Error(error.message);
         }
       }
     }

diff --git a/src/components/SUE/report/SueReportSend.tsx b/src/components/SUE/report/SueReportSend.tsx
@@ -31,8 +31,8 @@ export const SueReportSend = ({
   navigation: any;
 }) => {
   const { sueConfig = {} } = useContext(ConfigurationsContext);
-  const { sueReportScreen = {}, showFeedbackSection } = sueConfig;
-  const { reportSendDone = {}, reportSendLoading = {} } = sueReportScreen;
+  const { sueReportScreen = {} } = sueConfig;
+  const { reportSendDone = {}, reportSendLoading = {}, showFeedbackSection } = sueReportScreen;
   const { title: loadingTitle = '', subtitle: loadingSubtitle = '' } = reportSendLoading;
   const { title: doneTitle = '', subtitle: doneSubtitle = '' } = reportSendDone;