quivio-transaction-processor 1.23.2 → 1.23.3-beta

package/src/example/ExternalSystemsScreen.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 import { useEMVPayment } from '../emvPaymentProvider/useEMVPayment';
 import { EMVConfig } from '../emvPaymentProvider/types';
+import { addDevice } from './helper/deviceStore';
 
 type Props = {
   config: EMVConfig | null;
@@ -17,18 +18,22 @@ type Props = {
 };
 
 const ExternalSystemsScreen = ({ config, onBackPress }: Props) => {
-const {
+  const {
     isConfigured,
+    deviceSerialNumber,
     isDeviceConnected,
+    getDeviceDetails,
     isCancellationRunning,
     cancelOperation,
     runConfiguration,
     isConfigurationInProgress,
-    displayMessage
+    displayMessage,
   } = useEMVPayment();
-  
+
   const [deviceInfo] = useState('');
 
+  const [isFetchingDeviceDetails, setFetchingDeviceDetails] = useState(false);
+
   const [infoVisible, setInfoVisible] = useState(false);
 
   // Auto-close info modal when device connects
@@ -38,8 +43,75 @@ const {
     }
   }, [isDeviceConnected, infoVisible]);
 
+  // useEffect(() => {
+  //   let timer: NodeJS.Timeout;
+  //   if (isConfigured) {
+  //     if (deviceSerialNumber?.trim()) {
+  //       addDevice({
+  //         isConfigured: true,
+  //         isSandbox: true,
+  //         MerchantId: config?.merchantID ?? '',
+  //         serialNumber: deviceSerialNumber,
+  //       });
+  //     } else {
+  //       setFetchingDeviceDetails(true);
+  //       timer = setTimeout(() => {
+  //         getDeviceDetails();
+  //       }, 3000);
+  //     }
+  //   }
+  //   return () => {
+  //     if (timer) clearTimeout(timer);
+  //   };
+  // }, [isConfigured]);
+
+  // useEffect(() => {
+  //   if (deviceSerialNumber?.trim()) {
+  //     setFetchingDeviceDetails(false);
+  //     addDevice({
+  //       isConfigured: true,
+  //       isSandbox: true,
+  //       MerchantId: config?.merchantID ?? '',
+  //       serialNumber: deviceSerialNumber,
+  //     });
+  //   }
+  // }, [deviceSerialNumber]);
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    const handleSerial = async () => {
+      if (isConfigured) {
+        const serialNumberToBeStored = !deviceSerialNumber?.trim()
+          ? await getDeviceDetails()
+          : deviceSerialNumber;
+
+        if (serialNumberToBeStored) {
+          addDevice({
+            MerchantId: config?.merchantID ?? '',
+            isSandbox: config?.isSandBox ?? true,
+            isConfigured: true,
+            serialNumber: serialNumberToBeStored,
+          });
+        }
+      }
+      setFetchingDeviceDetails(false);
+    };
+
+    timer = setTimeout(() => {
+      setFetchingDeviceDetails(true);
+      handleSerial();
+    }, 3000);
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+        setFetchingDeviceDetails(false);
+      }
+    };
+  }, [isConfigured, deviceSerialNumber]);
+
   const onConfigureDevice = useCallback(() => {
     if (!config) return;
+
     runConfiguration(config);
   }, [config, runConfiguration]);
 
@@ -89,9 +161,8 @@ const {
       >
         <Pressable style={styles.modalContainer}>
           <Text style={styles.modalText}>
-            1. Do not disconnect the device
-            while configuring. \n2. Do not put app in the background while
-            configuring. \n
+            1. Do not disconnect the device while configuring. \n2. Do not put
+            app in the background while configuring. \n
             {displayMessage}
           </Text>
           <Pressable style={styles.closeButton} onPress={() => {}}>
@@ -102,6 +173,21 @@ const {
     </Modal>
   );
 
+  const DeviceDetailsModal = () => (
+    <Modal
+      visible={isFetchingDeviceDetails}
+      transparent
+      animationType="fade"
+      onRequestClose={() => {}}
+    >
+      <Pressable style={styles.modalBackground} onPress={() => {}}>
+        <Pressable style={styles.modalContainer}>
+          <Text style={styles.modalText}>Saving Device Details.....</Text>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+
   const CancelModal = () => (
     <Modal
       visible={isCancellationRunning}
@@ -126,30 +212,30 @@ const {
   );
 
   const InfoModal = () => (
-     <Modal
-          visible={infoVisible}
-          transparent
-          animationType="fade"
-          onRequestClose={() => setInfoVisible(false)}
-        >
+    <Modal
+      visible={infoVisible}
+      transparent
+      animationType="fade"
+      onRequestClose={() => setInfoVisible(false)}
+    >
+      <Pressable
+        style={styles.modalBackground}
+        onPress={() => setInfoVisible(false)}
+      >
+        <Pressable style={styles.modalContainer}>
+          <Text style={styles.modalText}>
+            Connect IDTECH VP3350 device via USB cable
+          </Text>
           <Pressable
-            style={styles.modalBackground}
+            style={styles.closeButton}
             onPress={() => setInfoVisible(false)}
           >
-            <Pressable style={styles.modalContainer}>
-              <Text style={styles.modalText}>
-                Connect IDTECH VP3350 device via USB cable
-              </Text>
-              <Pressable
-                style={styles.closeButton}
-                onPress={() => setInfoVisible(false)}
-              >
-                <Text style={styles.closeButtonText}>Close</Text>
-              </Pressable>
-            </Pressable>
+            <Text style={styles.closeButtonText}>Close</Text>
           </Pressable>
-        </Modal>
-  )
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
 
   const ConfigurationDetails = ({
     merchantId,
@@ -241,11 +327,14 @@ const {
         {/** Loader Modal */}
         <LoaderModal />
 
+        {/** Device Fetching Modal */}
+        <DeviceDetailsModal />
+
         {/** Cancel Modal */}
         <CancelModal />
 
         {/* Configure CTA */}
-        {isDeviceConnected && !isConfigured && <ConfigureCTA />}
+        {isDeviceConnected && <ConfigureCTA />}
 
         <BackCTA />
       </View>

package/src/example/MainScreen.tsx

@@ -7,7 +7,7 @@ const MainScreen: React.FC<{ config: EMVConfig }> = ({ config }) => {
   const [showEMV, setShowEMV] = useState(false);
 
   if (showEMV) {
-    return <EMVPaymentScreen />;
+    return <EMVPaymentScreen posConfig={config}/>;
   }
 
   return (

package/src/example/helper/deviceStore.ts

@@ -0,0 +1,40 @@
+export type DeviceConfig = {
+  serialNumber: string;
+  MerchantId: string;
+  isSandbox: boolean;
+  isConfigured: boolean;
+};
+
+export let IDTECH_LOCAL_DB: DeviceConfig[] = [
+  
+];
+
+export const addDevice = (device: DeviceConfig) => {
+  console.log('ADDING Device: ', device);
+  IDTECH_LOCAL_DB.push(device);
+  console.log('After Device ADDED : ', IDTECH_LOCAL_DB);
+};
+
+export const updateDevice = (
+  serialNumber: string,
+  updated: Partial<DeviceConfig>,
+) => {
+  const index = IDTECH_LOCAL_DB.findIndex(d => d.serialNumber === serialNumber);
+
+  if (index !== -1) {
+    IDTECH_LOCAL_DB[index] = {
+      ...IDTECH_LOCAL_DB[index],
+      ...updated,
+    };
+  }
+};
+
+export const deleteDevice = (serialNumber: string) => {
+  IDTECH_LOCAL_DB = IDTECH_LOCAL_DB.filter(
+    d => d.serialNumber !== serialNumber,
+  );
+};
+
+export const getDeviceBySerial = (serialNumber: string) => {
+  return IDTECH_LOCAL_DB.find(d => d.serialNumber === serialNumber);
+};