add DatabaseScreen.

stripe · Nov 16, 2023 · b02f5ea · b02f5ea
1 parent 0b128d7
commit b02f5ea
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 5 deletions.
diff --git a/dev-app/src/App.tsx b/dev-app/src/App.tsx
@@ -36,6 +36,7 @@ import {
 import { Alert, LogBox } from 'react-native';
 
 import { AppContext } from './AppContext';
+import DatabaseScreen from './screens/DatabaseScreen';
 
 export type RouteParamList = {
   UpdateReader: {
@@ -214,6 +215,11 @@ export default function App() {
               options={{ headerTitle: 'Merchant Select' }}
               component={MerchantSelectScreen}
             />
+            <Stack.Screen
+              name="DatabaseScreen"
+              options={{ headerTitle: 'DatabaseScreen' }}
+              component={DatabaseScreen}
+            />
             <Stack.Screen
               name="DiscoverReadersScreen"
               options={{ headerTitle: 'Discovery' }}

diff --git a/dev-app/src/screens/DatabaseScreen.tsx b/dev-app/src/screens/DatabaseScreen.tsx
@@ -0,0 +1,90 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { ScrollView, StyleSheet, Text } from 'react-native';
+import type { OfflinePaymentStatus } from 'src/types';
+import { colors } from '../colors';
+import List from '../components/List';
+import ListItem from '../components/ListItem';
+import { AppContext } from '../AppContext';
+import { useStripeTerminal } from '@stripe/stripe-terminal-react-native';
+
+export default function DatabaseScreen() {
+  const { account } = useContext(AppContext);
+  const [offlinePaymentStatus, setOfflinePaymentStatus] =
+    useState<OfflinePaymentStatus | null>(null);
+  const currencySymbols = [
+    { value: 'usd', label: '$' },
+    { value: 'gbp', label: '￡' },
+    { value: 'cad', label: 'C$' },
+    { value: 'sgd', label: 'S$' },
+    { value: 'eur', label: '€' },
+    { value: 'aud', label: 'A$' },
+    { value: 'nzd', label: 'NZ$' },
+    { value: 'dkk', label: 'DKr' },
+    { value: 'sek', label: 'Kr' },
+  ];
+  const { getOfflineStatus } = useStripeTerminal();
+  function getCurrencySymbols(currency: string): string {
+    console.log('getCurrencySymbols = ' + currency);
+    let currencySymbol = '$';
+    currencySymbols.map((a) => {
+      if (currency === a.value) {
+        currencySymbol = a.label;
+      }
+    });
+    return currencySymbol;
+  }
+
+  useEffect(() => {
+    async function getOfflinePaymentStatus() {
+      const status = await getOfflineStatus();
+      setOfflinePaymentStatus(status);
+    }
+    getOfflinePaymentStatus();
+  }, [getOfflineStatus]);
+
+  return (
+    <ScrollView style={styles.container}>
+      <List bolded={false} topSpacing={false} title="PUBLIC INTERFACE SUMMARY">
+        {offlinePaymentStatus &&
+        offlinePaymentStatus.sdk.offlinePaymentsCount > 0 ? (
+          Object.keys(
+            offlinePaymentStatus.sdk.offlinePaymentAmountsByCurrency
+          ).map((key) => (
+            <ListItem
+              title={
+                getCurrencySymbols(key) +
+                ' ' +
+                (Number(offlinePaymentStatus.sdk.offlinePaymentAmountsByCurrency[key]) / 100).toFixed(2)
+              }
+            />
+          ))
+        ) : (
+          <></>
+        )}
+      </List>
+      <Text style={styles.infoText}>
+        {' '}
+        {String(
+          offlinePaymentStatus
+            ? offlinePaymentStatus.sdk.offlinePaymentsCount
+            : 0
+        ) +
+          ' payment intent(s) for ' +
+          account?.settings?.dashboard.display_name}{' '}
+      </Text>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.light_gray,
+    height: '100%',
+    paddingVertical: 22,
+  },
+  infoText: {
+    color: colors.dark_gray,
+    paddingHorizontal: 16,
+    marginVertical: 16,
+  },
+});
diff --git a/dev-app/src/screens/HomeScreen.tsx b/dev-app/src/screens/HomeScreen.tsx
@@ -37,6 +37,7 @@ export default function HomeScreen() {
       setOnline(status.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,
@@ -51,6 +52,7 @@ export default function HomeScreen() {
       }, 3000);
     },
     onDidForwardPaymentIntent(paymentIntent) {
+      console.log('onDidForwardPaymentIntent = ' + paymentIntent.id);
       let toast = Toast.show(
         'Payment Intent ' + paymentIntent.id + ' forwarded',
         {
@@ -135,6 +137,14 @@ export default function HomeScreen() {
           }}
         />
       </List>
+      <List title="DATABASE">
+        <ListItem
+          title="Database"
+          onPress={async () => {
+            navigation.navigate('DatabaseScreen');
+          }}
+        />
+      </List>
     </>
   );
 
@@ -177,7 +187,7 @@ export default function HomeScreen() {
         renderConnectedContent
       ) : (
         <>
-          <List title="MERCHANT SELECTION">
+          <List topSpacing={false} title="MERCHANT SELECTION">
             <ListItem
               title="Set Merchant"
               color={colors.blue}
@@ -207,7 +217,18 @@ export default function HomeScreen() {
             />
           </List>
 
-          <List title="DISCOVERY METHOD">
+          <List topSpacing={false} title="DATABASE">
+            <ListItem
+              title="Database"
+              testID="database"
+              color={colors.blue}
+              onPress={async () => {
+                navigation.navigate('DatabaseScreen');
+              }}
+            />
+          </List>
+
+          <List topSpacing={false} title="DISCOVERY METHOD">
             <ListItem
               title={mapFromDiscoveryMethod(discoveryMethod)}
               testID="discovery-method-button"
@@ -301,7 +322,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderWidth: 1,
     borderColor: colors.gray,
-    marginVertical: 30,
+    marginVertical: 10,
   },
   infoText: {
     paddingHorizontal: 16,
@@ -312,7 +333,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   accountContainer: {
-    marginTop: 20,
+    marginTop: 10,
     alignItems: 'center',
     flex: 1,
     flexDirection: 'row',
@@ -331,6 +352,6 @@ const styles = StyleSheet.create({
     width: 20,
     height: 20,
     borderRadius: 20,
-    backgroundColor: colors.green,
+    backgroundColor: colors.red,
   },
 });