Add reconnecting popup (#685)

* add reconnection popup. * expose method of cancelReaderConnection
stripe · May 6, 2024 · d9d12f8 · d9d12f8
1 parent eba1372
commit d9d12f8
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 54 deletions.
diff --git a/dev-app/src/screens/HomeScreen.tsx b/dev-app/src/screens/HomeScreen.tsx
@@ -30,63 +30,83 @@ export default function HomeScreen() {
   const { account } = useContext(AppContext);
   const [simulated, setSimulated] = useState<boolean>(true);
   const [online, setOnline] = useState<boolean>(true);
+  const [connectionStatus, setConnectionStatus] = useState<string>('');
   const [discoveryMethod, setDiscoveryMethod] =
     useState<Reader.DiscoveryMethod>('bluetoothScan');
-  const { disconnectReader, connectedReader, rebootReader } = useStripeTerminal(
-    {
-      onDidChangeOfflineStatus(status: OfflineStatus) {
-        console.log(status);
-        setOnline(status.sdk.networkStatus === 'online' ? true : false);
-      },
-      onDidForwardingFailure(error) {
-        console.log('onDidForwardingFailure ' + error?.message);
-        let toast = Toast.show(
-          error?.message ? error.message : 'unknown error',
-          {
-            duration: Toast.durations.LONG,
-            position: Toast.positions.BOTTOM,
-            shadow: true,
-            animation: true,
-            hideOnPress: true,
-            delay: 0,
-          }
-        );
+  const {
+    disconnectReader,
+    connectedReader,
+    rebootReader,
+    cancelReaderReconnection,
+  } = useStripeTerminal({
+    onDidChangeConnectionStatus(status) {
+      setConnectionStatus(status);
+    },
+    onDidChangeOfflineStatus(status: OfflineStatus) {
+      console.log(status);
+      setOnline(status.sdk.networkStatus === 'online' ? true : false);
+    },
+    onDidForwardingFailure(error) {
+      console.log('onDidForwardingFailure ' + error?.message);
+      let toast = Toast.show(error?.message ? error.message : 'unknown error', {
+        duration: Toast.durations.LONG,
+        position: Toast.positions.BOTTOM,
+        shadow: true,
+        animation: true,
+        hideOnPress: true,
+        delay: 0,
+      });
 
-        setTimeout(function () {
-          Toast.hide(toast);
-        }, 3000);
-      },
-      onDidForwardPaymentIntent(paymentIntent, error) {
-        let toastMsg = 'Payment Intent ' + paymentIntent.id + ' forwarded. ';
-        if (error) {
-          toastMsg +
-            'ErrorCode = ' +
-            error.code +
-            '. ErrorMsg = ' +
-            error.message;
-        }
-        console.log(toastMsg);
-        let toast = Toast.show(toastMsg, {
-          duration: Toast.durations.LONG,
-          position: Toast.positions.BOTTOM,
-          shadow: true,
-          animation: true,
-          hideOnPress: true,
-          delay: 0,
-        });
+      setTimeout(function () {
+        Toast.hide(toast);
+      }, 3000);
+    },
+    onDidForwardPaymentIntent(paymentIntent, error) {
+      let toastMsg = 'Payment Intent ' + paymentIntent.id + ' forwarded. ';
+      if (error) {
+        toastMsg +
+          'ErrorCode = ' +
+          error.code +
+          '. ErrorMsg = ' +
+          error.message;
+      }
+      console.log(toastMsg);
+      let toast = Toast.show(toastMsg, {
+        duration: Toast.durations.LONG,
+        position: Toast.positions.BOTTOM,
+        shadow: true,
+        animation: true,
+        hideOnPress: true,
+        delay: 0,
+      });
 
-        setTimeout(function () {
-          Toast.hide(toast);
-        }, 3000);
-      },
-      onDidDisconnect(reason) {
-        Alert.alert(
-          'Reader disconnected!',
-          'Reader disconnected with reason ' + reason
-        );
-      },
-    }
-  );
+      setTimeout(function () {
+        Toast.hide(toast);
+      }, 3000);
+    },
+    onDidDisconnect(reason) {
+      Alert.alert(
+        'Reader disconnected!',
+        'Reader disconnected with reason ' + reason
+      );
+    },
+    onDidStartReaderReconnect() {
+      Alert.alert('Reconnecting...', 'Reader has disconneted.', [
+        {
+          text: 'Cancel',
+          onPress: async () => {
+            await cancelReaderReconnection();
+          },
+        },
+      ]);
+    },
+    onDidSucceedReaderReconnect() {
+      Alert.alert('Reconnected!', 'We were able to reconnect to the reader.');
+    },
+    onDidFailReaderReconnect() {
+      Alert.alert('Reader Disconnected', 'Reader reconnection failed!');
+    },
+  });
   const batteryPercentage =
     (connectedReader?.batteryLevel ? connectedReader?.batteryLevel : 0) * 100;
   const batteryStatus = batteryPercentage
@@ -219,7 +239,7 @@ export default function HomeScreen() {
 
           <Text style={styles.readerName}>{deviceType}</Text>
           <Text style={styles.connectionStatus}>
-            Connected{simulated && <Text>, simulated</Text>}
+            {connectionStatus} {simulated && <Text>, simulated</Text>}
           </Text>
           <Text style={styles.connectionStatus}>
             {batteryStatus} {chargingStatus}

diff --git a/ios/StripeTerminalReactNative.m b/ios/StripeTerminalReactNative.m
@@ -84,6 +84,11 @@ @interface RCT_EXTERN_MODULE(StripeTerminalReactNative, RCTEventEmitter)
                   rejecter: (RCTPromiseRejectBlock)reject
                   )
 
+RCT_EXTERN_METHOD(
+                  cancelReaderReconnection:(RCTPromiseResolveBlock)resolve
+                  rejecter: (RCTPromiseRejectBlock)reject
+                  )
+
 RCT_EXTERN_METHOD(
                   cancelPaymentIntent:(NSDictionary *)paymentIntentJson
                   resolver: (RCTPromiseResolveBlock)resolve

diff --git a/src/StripeTerminalSdk.tsx b/src/StripeTerminalSdk.tsx
@@ -153,6 +153,9 @@ export interface StripeTerminalSdkType {
   cancelCollectInputs(): Promise<{
     error?: StripeError;
   }>;
+  cancelReaderReconnection(): Promise<{
+    error?: StripeError;
+  }>;
 }
 
 export default StripeTerminalReactNative as StripeTerminalSdkType;
diff --git a/src/__tests__/__snapshots__/functions.test.ts.snap b/src/__tests__/__snapshots__/functions.test.ts.snap
@@ -9,6 +9,7 @@ Object {
   "cancelDiscovering": [Function],
   "cancelInstallingUpdate": [Function],
   "cancelPaymentIntent": [Function],
+  "cancelReaderReconnection": [Function],
   "cancelSetupIntent": [Function],
   "clearCachedCredentials": [Function],
   "clearReaderDisplay": [Function],

diff --git a/src/functions.ts b/src/functions.ts
@@ -831,3 +831,18 @@ export async function cancelCollectInputs(): Promise<{
     }
   }, 'cancelCollectInputs')();
 }
+
+export async function cancelReaderReconnection(): Promise<{
+  error?: StripeError;
+}> {
+  return Logger.traceSdkMethod(async () => {
+    try {
+      await StripeTerminalSdk.cancelReaderReconnection();
+      return {};
+    } catch (error) {
+      return {
+        error: error as any,
+      };
+    }
+  }, 'cancelReaderReconnection')();
+}
diff --git a/src/hooks/__tests__/__snapshots__/useStripeTerminal.test.tsx.snap b/src/hooks/__tests__/__snapshots__/useStripeTerminal.test.tsx.snap
@@ -10,6 +10,7 @@ Object {
     "cancelDiscovering": [Function],
     "cancelInstallingUpdate": [Function],
     "cancelPaymentIntent": [Function],
+    "cancelReaderReconnection": [Function],
     "cancelSetupIntent": [Function],
     "clearCachedCredentials": [Function],
     "clearReaderDisplay": [Function],

diff --git a/src/hooks/useStripeTerminal.tsx b/src/hooks/useStripeTerminal.tsx
@@ -61,6 +61,7 @@ import {
   setReaderSettings,
   collectInputs,
   cancelCollectInputs,
+  cancelReaderReconnection,
 } from '../functions';
 import { StripeTerminalContext } from '../components/StripeTerminalContext';
 import { useListener } from './useListener';
@@ -929,6 +930,20 @@ export function useStripeTerminal(props?: Props) {
     return response;
   }, [_isInitialized, setLoading]);
 
+  const _cancelReaderReconnection = useCallback(async () => {
+    if (!_isInitialized()) {
+      console.error(NOT_INITIALIZED_ERROR_MESSAGE);
+      throw Error(NOT_INITIALIZED_ERROR_MESSAGE);
+    }
+    setLoading(true);
+
+    const response = await cancelReaderReconnection();
+
+    setLoading(false);
+
+    return response;
+  }, [_isInitialized, setLoading]);
+
   return {
     initialize: _initialize,
     discoverReaders: _discoverReaders,
@@ -968,6 +983,7 @@ export function useStripeTerminal(props?: Props) {
     setReaderSettings: _setReaderSettings,
     collectInputs: _collectInputs,
     cancelCollectInputs: _cancelCollectInputs,
+    cancelReaderReconnection: _cancelReaderReconnection,
     emitter: emitter,
     discoveredReaders,
     connectedReader,