Add timeout in discover reader (#818)

stripe · Sep 20, 2024 · 4bcc79d · 4bcc79d
1 parent f5badfe
commit 4bcc79d
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 7 deletions.
diff --git a/dev-app/src/App.tsx b/dev-app/src/App.tsx
@@ -61,6 +61,7 @@ export type RouteParamList = {
   DiscoverReaders: {
     simulated: boolean;
     discoveryMethod: Reader.DiscoveryMethod;
+    discoveryTimeout: number;
     setPendingUpdateInfo: (update: Reader.SoftwareUpdate | null) => void;
   };
   MerchantSelect: {

diff --git a/dev-app/src/components/List.tsx b/dev-app/src/components/List.tsx
@@ -9,6 +9,7 @@ type Props = {
   children: React.ReactElement | React.ReactElement[];
   topSpacing?: boolean;
   bolded?: boolean;
+  visible?: boolean;
 };
 
 export default function List({
@@ -18,7 +19,11 @@ export default function List({
   loading,
   topSpacing = true,
   bolded = true,
+  visible = true,
 }: Props) {
+  if (!visible) {
+    return <></>;
+  }
   return (
     <View style={[styles.container, topSpacing && styles.topSpacing]}>
       <View style={styles.titleContainer}>

diff --git a/dev-app/src/screens/DiscoverReadersScreen.tsx b/dev-app/src/screens/DiscoverReadersScreen.tsx
@@ -51,7 +51,8 @@ export default function DiscoverReadersScreen() {
     autoReconnectOnUnexpectedDisconnect,
     setAutoReconnectOnUnexpectedDisconnect,
   } = useContext(AppContext);
-  const { simulated, discoveryMethod, setPendingUpdateInfo } = params;
+  const { simulated, discoveryMethod, discoveryTimeout, setPendingUpdateInfo } =
+    params;
 
   const {
     cancelDiscovering,
@@ -159,7 +160,7 @@ export default function DiscoverReadersScreen() {
     const { error: discoverReadersError } = await discoverReaders({
       discoveryMethod,
       simulated,
-      timeout: 0,
+      timeout: discoveryTimeout,
     });
 
     if (discoverReadersError) {
@@ -169,7 +170,13 @@ export default function DiscoverReadersScreen() {
         navigation.goBack();
       }
     }
-  }, [navigation, discoverReaders, discoveryMethod, simulated]);
+  }, [
+    navigation,
+    discoverReaders,
+    discoveryMethod,
+    discoveryTimeout,
+    simulated,
+  ]);
 
   useEffect(() => {
     simulateReaderUpdate('none');

diff --git a/dev-app/src/screens/HomeScreen.tsx b/dev-app/src/screens/HomeScreen.tsx
@@ -4,9 +4,10 @@ import Toast from 'react-native-root-toast';
 import {
   StyleSheet,
   View,
-  ScrollView,
   Text,
   Image,
+  Platform,
+  TextInput,
   Switch,
   Alert,
 } from 'react-native';
@@ -25,7 +26,7 @@ import {
   useStripeTerminal,
   getSdkVersion,
 } from '@stripe/stripe-terminal-react-native';
-
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import AlertDialog from '../components/AlertDialog';
 
 export default function HomeScreen() {
@@ -41,6 +42,7 @@ export default function HomeScreen() {
   const [connectionStatus, setConnectionStatus] = useState<string>('');
   const [discoveryMethod, setDiscoveryMethod] =
     useState<Reader.DiscoveryMethod>('bluetoothScan');
+  const [discoveryTimeout, setDiscoveryTimeout] = useState<number>(0);
   const [innerSdkVersion, setInnerSdkVersion] = useState<string>('');
   const {
     disconnectReader,
@@ -148,6 +150,10 @@ export default function HomeScreen() {
     loadDiscSettings();
   }, []);
 
+  const validTimeoutMethod = () => {
+    return discoveryMethod === 'bluetoothScan' || discoveryMethod === 'usb';
+  };
+
   const renderConnectedContent = (
     <>
       <List title="READER CONNECTION">
@@ -282,7 +288,7 @@ export default function HomeScreen() {
     </>
   );
   return (
-    <ScrollView
+    <KeyboardAwareScrollView
       testID="home-screen"
       style={styles.container}
       contentInsetAdjustmentBehavior="automatic"
@@ -338,9 +344,11 @@ export default function HomeScreen() {
               color={colors.blue}
               disabled={!account}
               onPress={() => {
+                const timeout = validTimeoutMethod() ? discoveryTimeout : 0;
                 navigation.navigate('DiscoverReadersScreen', {
                   simulated,
                   discoveryMethod,
+                  discoveryTimeout: timeout,
                   setPendingUpdateInfo: (value: Reader.SoftwareUpdate) => {
                     setPendingUpdate(value);
                   },
@@ -387,6 +395,24 @@ export default function HomeScreen() {
             />
           </List>
 
+          <List
+            topSpacing={false}
+            title="TIMEOUT"
+            visible={validTimeoutMethod()}
+          >
+            <TextInput
+              keyboardType="numeric"
+              style={styles.input}
+              value={discoveryTimeout !== 0 ? discoveryTimeout.toString() : ''}
+              placeholderTextColor={colors.gray}
+              placeholder="0 => no timeout"
+              onChangeText={(value) => {
+                const data = parseInt(value, 10) || 0;
+                setDiscoveryTimeout(data);
+              }}
+            />
+          </List>
+
           <List>
             <ListItem
               title="Simulated"
@@ -427,7 +453,7 @@ export default function HomeScreen() {
           </List>
         </>
       )}
-    </ScrollView>
+    </KeyboardAwareScrollView>
   );
 }
 
@@ -479,6 +505,23 @@ const styles = StyleSheet.create({
     borderColor: colors.gray,
     marginVertical: 10,
   },
+  input: {
+    height: 44,
+    backgroundColor: colors.white,
+    color: colors.dark_gray,
+    paddingLeft: 16,
+    borderBottomColor: colors.gray,
+    ...Platform.select({
+      ios: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+      },
+      android: {
+        borderBottomWidth: 1,
+        borderBottomColor: `${colors.gray}66`,
+        color: colors.dark_gray,
+      },
+    }),
+  },
   versionText: {
     color: colors.dark_gray,
   },