internet reader no upgrade plan (#145)

stripe · Mar 11, 2022 · 2dbc99b · 2dbc99b
1 parent 45e1708
commit 2dbc99b
Showing 1 changed file with 75 additions and 24 deletions.
diff --git a/example/src/screens/DiscoverReadersScreen.tsx b/example/src/screens/DiscoverReadersScreen.tsx
@@ -1,5 +1,14 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { StyleSheet, Text, ScrollView, Alert, Platform } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  ScrollView,
+  Alert,
+  Modal,
+  View,
+  TouchableWithoutFeedback,
+  Platform,
+} from 'react-native';
 import {
   useStripeTerminal,
   Location,
@@ -26,6 +35,7 @@ export default function DiscoverReadersScreen() {
   const { params } = useRoute();
   const [discoveringLoading, setDiscoveringLoading] = useState(true);
   const [connectingReader, setConnectingReader] = useState<Reader.Type>();
+  const [showPicker, setShowPicker] = useState(false);
 
   const { simulated, discoveryMethod } = params as Record<string, any>;
 
@@ -224,24 +234,32 @@ export default function DiscoverReadersScreen() {
         )}
       </List>
 
-      {simulated && (
+      {simulated && discoveryMethod !== 'internet' && (
         <List title="SIMULATED UPDATE PLAN">
-          <Picker
-            selectedValue={selectedUpdatePlan}
-            style={styles.picker}
-            itemStyle={styles.pickerItem}
-            testID="update-plan-picker"
-            onValueChange={(itemValue) => handleChangeUpdatePlan(itemValue)}
-          >
-            {SIMULATED_UPDATE_PLANS.map((plan) => (
-              <Picker.Item
-                key={plan}
-                label={mapToPlanDisplayName(plan)}
-                testID={plan}
-                value={plan}
-              />
-            ))}
-          </Picker>
+          {Platform.OS !== 'ios' ? (
+            <Picker
+              selectedValue={selectedUpdatePlan}
+              style={styles.picker}
+              itemStyle={styles.pickerItem}
+              testID="update-plan-picker"
+              onValueChange={(itemValue) => handleChangeUpdatePlan(itemValue)}
+            >
+              {SIMULATED_UPDATE_PLANS.map((plan) => (
+                <Picker.Item
+                  key={plan}
+                  label={mapToPlanDisplayName(plan)}
+                  testID={plan}
+                  value={plan}
+                />
+              ))}
+            </Picker>
+          ) : (
+            <ListItem
+              testID="update-plan-picker"
+              onPress={() => setShowPicker(true)}
+              title={mapToPlanDisplayName(selectedUpdatePlan)}
+            />
+          )}
         </List>
       )}
 
@@ -259,6 +277,33 @@ export default function DiscoverReadersScreen() {
           />
         ))}
       </List>
+
+      <Modal visible={showPicker} transparent>
+        <TouchableWithoutFeedback
+          testID="close-picker"
+          onPress={() => setShowPicker(false)}
+        >
+          <View style={styles.modalOverlay} />
+        </TouchableWithoutFeedback>
+
+        <View style={styles.pickerContainer} testID="picker-container">
+          <Picker
+            selectedValue={selectedUpdatePlan}
+            style={styles.picker}
+            itemStyle={styles.pickerItem}
+            onValueChange={(itemValue) => handleChangeUpdatePlan(itemValue)}
+          >
+            {SIMULATED_UPDATE_PLANS.map((plan) => (
+              <Picker.Item
+                key={plan}
+                label={mapToPlanDisplayName(plan)}
+                testID={plan}
+                value={plan}
+              />
+            ))}
+          </Picker>
+        </View>
+      </Modal>
     </ScrollView>
   );
 }
@@ -269,8 +314,10 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   pickerContainer: {
+    position: 'absolute',
+    bottom: 0,
     backgroundColor: colors.white,
-    color: colors.dark_gray,
+    left: 0,
     width: '100%',
     ...Platform.select({
       ios: {
@@ -303,11 +350,15 @@ const styles = StyleSheet.create({
   },
   picker: {
     width: '100%',
-    color: colors.slate,
-    fontSize: 13,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    backgroundColor: colors.white,
+    ...Platform.select({
+      android: {
+        color: colors.slate,
+        fontSize: 13,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        backgroundColor: colors.white,
+      },
+    }),
   },
   pickerItem: {
     fontSize: 16,