release v1.10.0

android/app/build.gradle

@@ -133,8 +133,8 @@ android {
         applicationId "de.railslove.wfdcheckin"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 29
-        versionName "1.9.3"
+        versionCode 30
+        versionName "1.10.0"
 
         // Detox
         testBuildType System.getProperty('testBuildType', 'debug')  // This will later be used to control the test apk build type

ios/WFDCheckIn.xcodeproj/project.pbxproj

@@ -525,7 +525,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = 5AXEB2NPQJ;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = WFDCheckIn/Info.plist;
@@ -549,7 +549,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 29;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = 5AXEB2NPQJ;
 				INFOPLIST_FILE = WFDCheckIn/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";

ios/WFDCheckIn/Info.plist

@@ -17,11 +17,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.9.3</string>
+	<string>1.10.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>29</string>
+	<string>30</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>

ios/WFDCheckInTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.9.3</string>
+	<string>1.10.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>29</string>
+	<string>30</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "1.9.3",
+  "version": "1.10.0",
   "scripts": {
     "ios": "react-native run-ios",
     "start": "react-native start",
@@ -53,6 +53,7 @@
     "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^3.1.0",
     "react-native-svg": "^12.1.0",
+    "react-native-url-polyfill": "^1.3.0",
     "react-native-webview": "^11.3.2",
     "react-redux": "^7.2.1",
     "redux": "^4.0.5",

src/config.ts

@@ -0,0 +1,12 @@
+export const APP_ID = 'de.railslove.wfdcheckin';
+
+export const WEBVIEW_DEFAULT_HEADERS = {
+  'x-requested-with': APP_ID,
+};
+
+export const WEBVIEW_DEFAULT_QUERY_PARAMS = [
+  {
+    name: 'requestedWith',
+    value: APP_ID,
+  },
+];

src/features/check-ins/MyCheckInsScreen.tsx

@@ -15,6 +15,7 @@ import CheckInsList from 'src/features/check-ins/components/CheckInsList';
 import MyCheckInsEmpty from 'src/features/check-ins/components/MyCheckInsEmpty';
 import MyCheckInsLinks from 'src/features/check-ins/components/MyCheckInsLinks';
 import CheckInProviderLogos from 'src/features/check-ins/components/CheckInProviderLogos';
+import CHECK_IN_PROVIDER_LIST from 'src/shared/services/checkInProvidersList';
 
 const MyCheckInsScreen: React.FC = () => {
   const {t} = useTranslation('myCheckInsScreen');
@@ -46,7 +47,11 @@ const MyCheckInsScreen: React.FC = () => {
 
       <Space.V s={20} />
       <TextBox fontWeight="bold">{t('providerListHeader')}</TextBox>
-      <CheckInProviderLogos opacity={1} justifyContent="flex-start" />
+      <CheckInProviderLogos
+        displayCount={CHECK_IN_PROVIDER_LIST.length}
+        opacity={1}
+        justifyContent="flex-start"
+      />
 
       <MyCheckInsLinks />
       <Space.V s={10} />

src/features/check-ins/ProviderFormScreen.tsx

@@ -1,7 +1,8 @@
-import {useDispatch, useSelector} from 'react-redux';
 import {useTheme} from 'react-native-paper';
-import React, {useCallback} from 'react';
-import {WebViewMessageEvent} from 'react-native-webview';
+import {useDispatch, useSelector} from 'react-redux';
+import React, {useCallback, useState, useRef} from 'react';
+import {SafeAreaView, TouchableOpacity} from 'react-native';
+import WebView, {WebViewMessageEvent, WebViewNavigation} from 'react-native-webview';
 
 import {
   providerCheckInAction,
@@ -19,13 +20,41 @@ import NavigationService from 'src/features/navigation/services/NavigationServic
 
 import Box from 'src/shared/components/Layout/Box';
 import CachedWebView from 'src/shared/components/WebView/CachedWebView';
+import ArrowLeftIcon from 'src/shared/components/Icon/ArrowLeftIcon';
+import ArrowRightIcon from 'src/shared/components/Icon/ArrowRightIcon';
 
 const ProviderFormScreen = () => {
   const theme = useTheme();
   const dispatch = useDispatch();
+  const webviewRef = useRef<WebView>(null);
 
   const user = useSelector(state => state.user.item);
   const checkIn = useSelector(state => state.checkIns.current);
+  const [canGoBack, setCanGoBack] = useState<boolean>();
+  const [canGoForward, setCanGoForward] = useState<boolean>();
+
+  const {current: browserWindow} = webviewRef;
+
+  const handleGoBack = useCallback(() => {
+    if (!browserWindow || !canGoBack) {
+      return null;
+    }
+
+    browserWindow.goBack();
+  }, [canGoBack, browserWindow]);
+
+  const handleGoForward = useCallback(() => {
+    if (!browserWindow || !canGoForward) {
+      return null;
+    }
+
+    browserWindow.goForward();
+  }, [canGoForward, browserWindow]);
+
+  const handleNavigationStateChange = useCallback((ev: WebViewNavigation) => {
+    setCanGoBack(ev.canGoBack);
+    setCanGoForward(ev.canGoForward);
+  }, []);
 
   const handleMessage = useCallback(
     (ev: WebViewMessageEvent) => {
@@ -83,21 +112,51 @@ const ProviderFormScreen = () => {
     [checkIn, dispatch]
   );
 
-  if (!checkIn) {
+  if (checkIn == null) {
     return null;
   }
 
   const injectedJavaScript = user ? prepareFillFormInWebViewInject({user, __DEV__}) : undefined;
 
   return (
-    <Box flex={1} backgroundColor={theme.colors.surface}>
-      <CachedWebView
-        id={checkIn.id}
-        url={checkIn.url}
-        injectedJavaScript={injectedJavaScript}
-        onMessage={handleMessage}
-      />
-    </Box>
+    <SafeAreaView style={{flex: 1}}>
+      <Box flex={1} backgroundColor={theme.colors.surface} flexDirection="column">
+        {canGoBack || canGoForward ? (
+          <Box
+            display="flex"
+            flexDirection="row"
+            alignItems="flex-end"
+            justifyContent="space-between"
+            paddingVertical={10}
+            paddingHorizontal={15}
+          >
+            {canGoBack ? (
+              <TouchableOpacity onPress={handleGoBack}>
+                <ArrowLeftIcon />
+              </TouchableOpacity>
+            ) : (
+              <Box />
+            )}
+
+            {canGoForward ? (
+              <TouchableOpacity onPress={handleGoForward}>
+                <ArrowRightIcon />
+              </TouchableOpacity>
+            ) : (
+              <Box />
+            )}
+          </Box>
+        ) : null}
+        <CachedWebView
+          id={checkIn.id}
+          url={checkIn.url}
+          ref={webviewRef}
+          injectedJavaScript={injectedJavaScript}
+          onMessage={handleMessage}
+          onNavigationStateChange={handleNavigationStateChange}
+        />
+      </Box>
+    </SafeAreaView>
   );
 };
 

src/features/check-ins/components/CheckInItemCard.tsx

@@ -6,9 +6,9 @@ import {CompletedCheckInItem} from 'src/shared/models/Provider';
 
 import Box from 'src/shared/components/Layout/Box';
 import Space from 'src/shared/components/Layout/Space';
-import {formatItemDate} from 'src/shared/format/date';
-import ChevronRightIcon from 'src/shared/components/Icon/ChevronRightIcon';
 import CheckInLogo from 'src/features/check-ins/components/CheckInLogo';
+import {formatItemDate} from 'src/shared/format/date';
+import ChevronRightIcon from 'src/shared/components/Icon/ArrowRightIcon';
 
 const useStyles = () => {
   return StyleSheet.create({

src/features/check-ins/components/CheckInProviderLogos.tsx

@@ -6,7 +6,16 @@ import Box, {BoxProps} from 'src/shared/components/Layout/Box';
 import CheckInLogo from 'src/features/check-ins/components/CheckInLogo';
 import {EMPTY_CHECK_IN_LOGO_DIMENSIONS} from 'src/features/check-ins/components/constants';
 
-const CheckInProviderLogos: React.FC<BoxProps> = props => {
+export type CheckInProviderLogosProps = BoxProps & {
+  displayCount?: number;
+};
+
+const randomSort = () => 0.5 - Math.random();
+
+const CheckInProviderLogos: React.FC<CheckInProviderLogosProps> = ({
+  displayCount = 5,
+  ...props
+}) => {
   return (
     <Box
       opacity={0.8}
@@ -16,13 +25,16 @@ const CheckInProviderLogos: React.FC<BoxProps> = props => {
       justifyContent="center"
       {...props}
     >
-      {CHECK_IN_PROVIDER_LIST.slice(0, 5).map(el => {
-        return (
-          <Box key={el.name}>
-            <CheckInLogo src={el.logoUrl} dimensions={EMPTY_CHECK_IN_LOGO_DIMENSIONS} />
-          </Box>
-        );
-      })}
+      {CHECK_IN_PROVIDER_LIST.slice()
+        .sort(randomSort)
+        .slice(0, displayCount)
+        .map(el => {
+          return (
+            <Box key={el.name}>
+              <CheckInLogo src={el.logoUrl} dimensions={EMPTY_CHECK_IN_LOGO_DIMENSIONS} />
+            </Box>
+          );
+        })}
     </Box>
   );
 };

src/features/scan/constants.ts → src/features/check-ins/constants.ts

@@ -10,4 +10,4 @@ export enum PROVIDER_SITE_MESSAGE {
   parseMessageError = 'parseMessageError',
 }
 
-export type MessageKey = keyof typeof PROVIDER_SITE_MESSAGE;
+export type ProviderSiteMessageKey = keyof typeof PROVIDER_SITE_MESSAGE;

src/features/check-ins/providerFormLib.ts

@@ -1,8 +1,8 @@
 import WebView, {WebViewMessageEvent} from 'react-native-webview';
 
 import User from 'src/shared/models/User';
-import {MessageKey} from 'src/features/scan/constants';
 import {AutoCompleteValues} from 'src/shared/types/autoComplete';
+import {ProviderSiteMessageKey} from 'src/features/check-ins/constants';
 
 declare global {
   interface Window {
@@ -16,7 +16,7 @@ type InjectJSValues = {
 };
 
 export type ProviderFormMessage = {
-  key: MessageKey;
+  key: ProviderSiteMessageKey;
   value?: string;
 };
 
@@ -38,7 +38,7 @@ export function fillFormInWebView(values: InjectJSValues) {
     postMessage('start', JSON.stringify(state));
   }
 
-  function postMessage(key: MessageKey, value?: string) {
+  function postMessage(key: ProviderSiteMessageKey, value?: string) {
     const message = JSON.stringify({key, value});
     window.ReactNativeWebView.postMessage(message);
   }
@@ -174,24 +174,7 @@ export function fillFormInWebView(values: InjectJSValues) {
     };
   }
 
-  function waitForCheckout() {
-    if (!state.hasCheckOut) {
-      postMessage('checkOutSuccess');
-      state.hasCheckOut = true;
-    }
-  }
-
   try {
-    document.body.addEventListener('mousedown', (ev: any) => {
-      const el = ev.target?.closest('[data-wfd-action="check-out"], a, button, input, div');
-
-      if (isCheckOut(el)) {
-        findProviderLocation();
-        setTimeout(waitForCheckout, 0);
-        window.addEventListener('unload', waitForCheckout);
-      }
-    });
-
     // only once so we don't dispatch more actions
     // which then re-renders the screen => we might loose the website state
     setTimeout(() => {
@@ -201,14 +184,26 @@ export function fillFormInWebView(values: InjectJSValues) {
 
     const checkInterval = setInterval(() => {
       if (!state.hasFilledInputs && canCheckIn()) {
-        // Makes sure the bottom of the page has space enough to click on the check-in button
-        document.body.style.paddingBottom = document.body.style.paddingBottom || '100px';
-
         fillCheckInForm();
-      } else if (isCheckOut()) {
+        return;
+      }
+
+      const button = getButton();
+
+      if (button && isCheckOut(button)) {
+        clearInterval(checkInterval);
+
         findProviderLocation();
         postMessage('checkInSuccess');
-        clearInterval(checkInterval);
+
+        button.addEventListener('click', function wait() {
+          if (!state.hasCheckOut) {
+            findProviderLocation();
+            postMessage('checkOutSuccess');
+            state.hasCheckOut = true;
+          }
+          button.removeEventListener('click', wait);
+        });
       }
     }, 1000);
   } catch (error) {