@situm/react-native 3.0.0-beta.0

package/src/sdk/utils.ts

@@ -0,0 +1,16 @@
+/**
+ * Small utility that can be used as an error handler. You cannot just pass
+ * `console.error` as a failure callback - it's not properly bound.  If passes an
+ * `Error` object, it will print the message and stack.
+ */
+export const logError = __DEV__
+  ? function (response: unknown) {
+      if (response instanceof String) {
+        console.log(response);
+      } else {
+        console.log(JSON.stringify(response));
+      }
+    }
+  : function (_response) {
+      // do nothing
+    };

package/src/utils/requestPermission.ts

@@ -0,0 +1,94 @@
+import { Platform } from "react-native";
+import {
+  PERMISSIONS,
+  request,
+  requestMultiple,
+  RESULTS,
+} from "react-native-permissions";
+
+// TODO: can requestMultiple be used ?
+const checkIOSPermissions = async () => {
+  let granted = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE);
+
+  if (granted === RESULTS.GRANTED) {
+    console.info("LOCATION_WHEN_IN_USE permission granted");
+
+    //@ts-ignore
+    if (parseInt(Platform.Version, 10) > 12) {
+      granted = await request(PERMISSIONS.IOS.BLUETOOTH_PERIPHERAL);
+
+      if (granted === RESULTS.GRANTED) {
+        console.info("BLUETOOTH_PERIPHERAL permission granted");
+        return true;
+      } else {
+        throw "BLUETOOTH_PERIPHERAL permission not granted";
+      }
+    } else {
+      console.warn("BLUETOOTH_PERIPHERAL permissions not required");
+      return true;
+    }
+  } else {
+    throw "ACCESS_FINE_LOCATION denied";
+  }
+};
+
+const checkAndroidPermissions = async () => {
+  let granted;
+  //@ts-ignore
+  if (Platform.Version > 30) {
+    console.log("ANDROID VERSION > 30");
+    granted = await requestMultiple([
+      PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
+      PERMISSIONS.ANDROID.BLUETOOTH_CONNECT,
+      PERMISSIONS.ANDROID.BLUETOOTH_SCAN,
+    ]);
+
+    if (
+      granted["android.permission.ACCESS_FINE_LOCATION"] === RESULTS.GRANTED &&
+      granted["android.permission.BLUETOOTH_CONNECT"] === RESULTS.GRANTED &&
+      granted["android.permission.BLUETOOTH_SCAN"] === RESULTS.GRANTED
+    ) {
+      console.info(
+        "ACCESS_FINE_LOCATION, BLUETOOTH_CONNECT and ACCESS_FINE_LOCATION permissions granted"
+      );
+      return true;
+    }
+
+    throw "ACCESS_FINE_LOCATION, BLUETOOTH_CONNECT and ACCESS_FINE_LOCATION permissions not granted";
+  } else {
+    console.info("ANDROID VERSION < 30");
+    granted = await request(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION);
+
+    if (granted === RESULTS.GRANTED) {
+      console.info("ACCESS_FINE_LOCATION granted");
+      return true;
+    } else {
+      throw "ACCESS_FINE_LOCATION permission not granted";
+    }
+  }
+};
+
+const requestPermission = () =>
+  // eslint-disable-next-line no-async-promise-executor
+  new Promise<void>(async (resolve, reject) => {
+    console.log("Retrieving permissions for platform " + Platform.OS);
+    if (Platform.OS === "ios") {
+      await checkIOSPermissions()
+        .then(() => resolve())
+        .catch((e: string) => {
+          console.warn(e);
+          reject(e);
+        });
+    } else if (Platform.OS === "android") {
+      await checkAndroidPermissions()
+        .then(() => resolve())
+        .catch((e: string) => {
+          console.warn(e);
+          reject(e);
+        });
+    }
+
+    reject(`Platform ${Platform.OS} not supported`);
+  });
+
+export default requestPermission;

package/src/wayfinding/components/MapView.tsx

@@ -0,0 +1,312 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React, { useEffect, useRef, useState } from "react";
+import { Platform, StyleSheet } from "react-native";
+import WebView from "react-native-webview";
+import {
+  WebViewErrorEvent,
+  WebViewMessageEvent,
+} from "react-native-webview/lib/WebViewTypes";
+
+//This icon should either be inside plugin or not be used rat all
+import useSitum from "../hooks";
+import {
+  NavigationStatus,
+  NavigationUpdateType,
+  setWebViewRef,
+} from "../store";
+import { useDispatch } from "../store/utils";
+import {
+  MapViewError,
+  OnFloorChangedResult,
+  OnNavigationResult,
+  OnPoiDeselectedResult,
+  OnPoiSelectedResult,
+  WayfindingResult,
+} from "../types/index.d";
+import { sendMessageToViewer } from "../utils";
+import Mapper from "../utils/mapper";
+
+const SITUM_BASE_DOMAIN = "https://map-viewer.situm.com";
+
+// Define class that handles errors
+export enum ErrorName {
+  ERR_INTERNET_DISCONNECTED = "ERR_INTERNET_DISCONNECTED",
+  ERR_INTERNAL_SERVER_ERROR = "ERR_INTERNAL_SERVER_ERROR",
+}
+
+const NETWORK_ERROR_CODE = {
+  android: -2,
+  ios: -1009,
+  // These platforms are unhandled
+  windows: 0,
+  macos: 0,
+  web: 0,
+};
+
+export interface MapViewProps {
+  domain?: string;
+  user?: string;
+  apikey?: string;
+  configuration?: {
+    buildingIdentifier?: string;
+    enablePoiClustering?: boolean;
+    showPoiNames?: boolean;
+    useRemoteConfig?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    initialZoom?: number;
+    useDashboardTheme?: boolean;
+  };
+  googleApikey?: string;
+  onLoadError?: (event: MapViewError) => void;
+  onLoad?: (event: WayfindingResult) => void;
+  onFloorChanged?: (event: OnFloorChangedResult) => void;
+  onPoiSelected?: (event: OnPoiSelectedResult) => void;
+  onPoiDeselected?: (event: OnPoiDeselectedResult) => void;
+  onNavigationRequested?: (event: OnNavigationResult) => void;
+  onNavigationStarted?: (event: OnNavigationResult) => void;
+  onNavigationError?: (event: OnNavigationResult) => void;
+  onNavigationFinished?: (event: OnNavigationResult) => void;
+  style?: any;
+  iOSMapViewIndex?: string;
+}
+
+const viewerStyles = StyleSheet.create({
+  webview: {
+    minHeight: "100%",
+    minWidth: "100%",
+  },
+});
+
+const MapView: React.FC<MapViewProps> = ({
+  domain,
+  // user,
+  // apikey,
+  configuration,
+  onLoad = () => {},
+  onLoadError = () => {},
+  onFloorChanged = () => {},
+  onPoiSelected = () => {},
+  onPoiDeselected = () => {},
+  onNavigationRequested = () => {},
+  onNavigationStarted = () => {},
+  onNavigationError = () => {},
+  onNavigationFinished = () => {},
+  style,
+  //iOSMapViewIndex,
+}) => {
+  const dispatch = useDispatch();
+  const webViewRef = useRef();
+  // Local states
+  const [mapLoaded, setMapLoaded] = useState<boolean>(false);
+
+  const {
+    user: fullUser,
+    location,
+    directions,
+    navigation,
+    currentBuilding,
+    initializeBuildingById,
+    calculateRoute,
+    startNavigation,
+    stopNavigation,
+    error,
+  } = useSitum();
+
+  const sendFollowUser = () => {
+    if (
+      webViewRef.current &&
+      mapLoaded &&
+      location?.position?.buildingIdentifier ===
+        configuration?.buildingIdentifier
+    ) {
+      sendMessageToViewer(webViewRef.current, Mapper.followUser(true));
+    }
+  };
+
+  useEffect(() => {
+    configuration.buildingIdentifier &&
+      initializeBuildingById(configuration.buildingIdentifier);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configuration.buildingIdentifier]);
+
+  useEffect(() => {
+    if (error) {
+      console.error(
+        "Error code:",
+        error.code ? error.code : " no code provided"
+      );
+      console.error("Error detected:", error.message);
+    }
+  }, [error]);
+
+  // Updated SDK location
+  useEffect(() => {
+    if (!webViewRef.current || !location) return;
+    //console.debug('location', location);
+
+    sendMessageToViewer(webViewRef.current, Mapper.location(location));
+  }, [location]);
+
+  // Updated SDK navigation
+  useEffect(() => {
+    if (!webViewRef.current || !navigation) return;
+
+    sendMessageToViewer(webViewRef.current, Mapper.navigation(navigation));
+
+    if (navigation.status === NavigationStatus.START) {
+      onNavigationStarted({
+        navigation: Mapper.routeToResult(navigation),
+      } as OnNavigationResult);
+    }
+    if (navigation?.type === NavigationUpdateType.destinationReached) {
+      onNavigationFinished({
+        navigation: Mapper.navigationToResult(navigation),
+      } as OnNavigationResult);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navigation]);
+
+  // Updated SDK route
+  useEffect(() => {
+    if (!webViewRef.current || !directions) return;
+
+    sendMessageToViewer(webViewRef.current, Mapper.route(directions));
+  }, [directions]);
+
+  useEffect(() => {
+    if (webViewRef.current && mapLoaded) {
+      sendMessageToViewer(
+        webViewRef.current,
+        Mapper.initialConfiguration(
+          style,
+          configuration.enablePoiClustering,
+          configuration.showPoiNames,
+          configuration.minZoom,
+          configuration.maxZoom,
+          configuration.initialZoom,
+          configuration.useDashboardTheme
+        )
+      );
+    }
+  }, [
+    webViewRef,
+    mapLoaded,
+    style,
+    configuration.enablePoiClustering,
+    configuration.showPoiNames,
+    configuration.minZoom,
+    configuration.maxZoom,
+    configuration.initialZoom,
+    configuration.useDashboardTheme,
+  ]);
+
+  const handleRequestFromViewer = (event: WebViewMessageEvent) => {
+    const eventParsed = JSON.parse(event.nativeEvent.data);
+    switch (eventParsed.type) {
+      case "app.map_is_ready":
+        onLoad({
+          status: "SUCCESS",
+          message: "Map is ready!",
+        } as WayfindingResult);
+        sendFollowUser();
+        break;
+      case "directions.requested":
+        calculateRoute({
+          originId: JSON.parse(event.nativeEvent.data).payload.originIdentifier,
+          destinationId: JSON.parse(event.nativeEvent.data).payload
+            .destinationIdentifier,
+          directionsOptions: JSON.parse(event.nativeEvent.data).payload
+            .directionsOptions,
+        });
+        break;
+      case "navigation.requested":
+        startNavigation({
+          originId: JSON.parse(event.nativeEvent.data).payload.originIdentifier,
+          destinationId: JSON.parse(event.nativeEvent.data).payload
+            .destinationIdentifier,
+          directionsOptions: JSON.parse(event.nativeEvent.data).payload
+            .directionsOptions,
+          callback: (status, _navigation?) =>
+            status === "success" && navigation
+              ? onNavigationRequested({
+                  navigation: Mapper.routeToResult(_navigation),
+                } as OnNavigationResult)
+              : status === "error" &&
+                onNavigationError({} as OnNavigationResult),
+        });
+        break;
+      case "navigation.stopped":
+        stopNavigation();
+        break;
+      case "cartography.poi_selected":
+        onPoiSelected(eventParsed?.payload);
+        break;
+      case "cartography.poi_deselected":
+        onPoiDeselected(eventParsed?.payload);
+        break;
+      case "cartography.floor_changed":
+        onFloorChanged(eventParsed?.payload);
+        break;
+      case "cartography.building_selected":
+        if (
+          !eventParsed.payload.identifier ||
+          (currentBuilding &&
+            eventParsed.payload.identifier.toString() ===
+              currentBuilding.buildingIdentifier)
+        ) {
+          return;
+        }
+
+        initializeBuildingById(eventParsed.payload.identifier.toString());
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <WebView
+      ref={webViewRef}
+      source={{
+        uri: `${domain || SITUM_BASE_DOMAIN}/?email=${fullUser?.email}&apikey=${
+          fullUser?.apiKey
+        }&wl=true&global=true&mode=embed${
+          configuration.buildingIdentifier
+            ? `&buildingid=${configuration.buildingIdentifier}`
+            : ""
+        }&show=rts`,
+      }}
+      style={viewerStyles.webview}
+      javaScriptEnabled={true}
+      domStorageEnabled={true}
+      startInLoadingState={true}
+      onMessage={handleRequestFromViewer}
+      // This is called on a lot of interactions with the map because of url change probably
+      onLoadEnd={() => {
+        if (!webViewRef.current) return;
+        dispatch(setWebViewRef(webViewRef));
+        setMapLoaded(true);
+      }}
+      onError={(evt: WebViewErrorEvent) => {
+        const { nativeEvent } = evt;
+        // TODO: on render error should probably still try to render an html
+        if (nativeEvent.code === NETWORK_ERROR_CODE[Platform.OS]) {
+          onLoadError({
+            name: ErrorName.ERR_INTERNET_DISCONNECTED,
+            description: nativeEvent.description,
+          });
+        } else {
+          // TODO: handle more errors
+          onLoadError({
+            name: ErrorName.ERR_INTERNAL_SERVER_ERROR,
+            description: nativeEvent.description,
+          });
+        }
+      }}
+    />
+  );
+};
+
+export default MapView;