quivio-transaction-processor 1.23.2 → 1.23.3-beta

package/src/emvPaymentProvider/EMVPaymentProvider.tsx

@@ -34,9 +34,21 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
     'onTransactionCancelled',
   ];
 
+  // Initialization Flag
+  const [isLibraryInitialized, setIsInitialzed] = useState(false);
+
   // Device Connected State
   const { isDeviceConnected } = useUSBDevice();
 
+  const [deviceSerialNumber, setDeviceSerialNumber] = useState('');
+
+  // Buffered Device Connection Flag
+  const [isIDTECHConnected, setIDTECHConnected] = useState(isDeviceConnected);
+
+  const disconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null,
+  );
+
   // Show Display Message Cache
   const [displayMessage, setDisplayMessage] = useState('');
 
@@ -62,55 +74,59 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
     Map<EMVEventName, Set<(payload: any) => void>>
   >(new Map());
 
-  // Ref to maintain timeout during configuration
-  // Because after a successfull EMVParamDownload
-  // Device reboots which leads to USB disconnection
-  // and connection
-  const unconfigureTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
+  const clearDisconnectTimeout = () => {
+    if (disconnectTimeoutRef.current) {
+      clearTimeout(disconnectTimeoutRef.current);
+      disconnectTimeoutRef.current = null;
+    }
+  };
 
-  // Ref to maintain device connection/disconnection
-  const isDeviceConnectedRef = useRef<boolean>(isDeviceConnected);
+  useEffect(() => {
+    pushLog('PAYMENT LIBRARY', `SERIAL NUMBER: ${deviceSerialNumber}`);
+  }, [deviceSerialNumber]);
 
   useEffect(() => {
-    // Always sync ref first
-    isDeviceConnectedRef.current = isDeviceConnected;
+    // Stop already running timeout
+    clearDisconnectTimeout();
+
+    // If device connects -> update immediately
+    if (isDeviceConnected) {
+      setIDTECHConnected(true);
+      return;
+    }
 
-    // Handle disconnect logic
-    if (!isDeviceConnected) {
-      unconfigureDevice(false);
+    // If device disconnects -> delay 1500ms
+    disconnectTimeoutRef.current = setTimeout(() => {
+      setIDTECHConnected(false);
+    }, 2000);
+
+    return () => {
+      clearDisconnectTimeout();
+    };
+  }, [isDeviceConnected]);
+
+  useEffect(() => {
+    if (!isIDTECHConnected) {
+      setIsConfigured(false);
       setConfigurationInProgress(false);
       setTransactionCurrentlyRunning(false);
       setCancellationRunning(false);
+      setDeviceSerialNumber('');
+      setDisplayMessage('');
     }
-  }, [isDeviceConnected]);
+  }, [isIDTECHConnected]);
 
   // Logging helper
   const pushLog = (type: string, payload: any) => {
     setLogs(prev => [...prev, { type, payload, timestamp: Date.now() }]);
   };
 
-  // Exposed Method to unconfigure Device
-  const unconfigureDevice = (immediate: boolean = false) => {
-    // Cancel any pending delayed unconfigure
-    if (unconfigureTimeoutRef.current) {
-      clearTimeout(unconfigureTimeoutRef.current);
-      unconfigureTimeoutRef.current = null;
-    }
-
-    if (immediate) {
-      setIsConfigured(false);
-      return;
-    }
-
-    // Delayed unconfigure (handles IDTECH reboot)
-    unconfigureTimeoutRef.current = setTimeout(() => {
-      if (!isDeviceConnectedRef.current) {
-        setIsConfigured(false);
-      }
-    }, 2000);
-  };
+  // Clean up timeout references
+  useEffect(() => {
+    return () => {
+      clearDisconnectTimeout();
+    };
+  }, []);
 
   // Native to Provider EMV event listening
   useEffect(() => {
@@ -142,7 +158,7 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
         if (TRANSACTION_RESPONSE_EVENTS.includes(eventName)) {
           setTransactionCurrentlyRunning(false);
           setCancellationRunning(false);
-          setDisplayMessage("")
+          setDisplayMessage('');
         }
 
         const callbacks = subscriptionsRef.current.get(eventName);
@@ -159,7 +175,7 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
   // Exposed method to run EMV configuration
   const runConfiguration = (config: EMVConfig) => {
     const title = 'CONFIGURATION DENIED';
-    const message = !isDeviceConnected
+    const message = !isIDTECHConnected
       ? 'IDTECH device is not connected via USB'
       : config.merchantID == ''
       ? 'Merchant ID not found'
@@ -167,6 +183,8 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
       ? 'Operator ID not Found'
       : config.secureDeviceName == '' || config.posPackageID == ''
       ? 'Some configuration parameters are missing'
+      : !isLibraryInitialized
+      ? 'Payment Library not initialized. Call initializePaymentLib() first'
       : '';
 
     if (message != '') {
@@ -175,54 +193,82 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
     }
 
     setConfigurationInProgress(true);
-    console.log(
-      'Initialising::: ConfugurationProgress:',
-      isConfigurationInProgress,
-      'isDeviceConnected: ',
-      isDeviceConnected,
-    );
-    DsiEMVManagerBridge.clearTransactionListener();
-    DsiEMVManagerBridge.initialize(config);
+    DsiEMVManagerBridge.setMerchantDetails(config);
     DsiEMVManagerBridge.configureDevice();
   };
 
+  const setMerchantDetails = (config: EMVConfig) => {
+    DsiEMVManagerBridge.setMerchantDetails(config);
+  };
+  // Initialize payment library
+  const initializePaymentLib = () => {
+    if (!isLibraryInitialized) {
+      DsiEMVManagerBridge.initializeLib();
+      setIsInitialzed(true);
+      pushLog('PAYMENT LIBRARY', 'Payment library has been initialised!');
+    } else {
+      pushLog('PAYMENT LIBRARY', 'Already initialized!');
+    }
+  };
   // Exposed method to run EMV CC Sale
   const creditCardSale = (amount: string) => {
-    if (!isDeviceConnected || !isConfigured) return;
+    if (!isIDTECHConnected || !isConfigured) return;
 
     setTransactionCurrentlyRunning(true);
     DsiEMVManagerBridge.runSaleTransaction(amount);
+    pushLog('EMV TRANSACTION', 'Credit card sale transaction initiated');
   };
 
   // Exposed method to run In House/ Prepaid Card Read
   const prepaidCardRead = () => {
-    if (!isDeviceConnected || !isConfigured) return;
+    if (!isIDTECHConnected || !isConfigured) return;
 
     setTransactionCurrentlyRunning(true);
     DsiEMVManagerBridge.collectCardDetails();
+    pushLog('PREPAID TRANSACTION', 'Prepaid card read initiated');
   };
 
   // Exposed method to run EMV CC Sale for Sale
   const creditCardRecurringSale = (amount: string) => {
-    if (!isDeviceConnected || !isConfigured) return;
+    if (!isIDTECHConnected || !isConfigured) return;
 
     setTransactionCurrentlyRunning(true);
     DsiEMVManagerBridge.runRecurringTransaction(amount);
+    pushLog(
+      'EMV TRANSACTION',
+      'Credit card sale transaction for recurring initiated',
+    );
   };
 
   // Exposed method to run EMV CC Zero Auth
   const zeroAuthTransaction = () => {
-    if (!isDeviceConnected || !isConfigured) return;
+    if (!isIDTECHConnected || !isConfigured) return;
 
     setTransactionCurrentlyRunning(true);
     DsiEMVManagerBridge.replaceCardInRecurring();
+    pushLog('EMV TRANSACTION', 'Zero auth transaction has been initiated');
   };
 
   // Exposed method to fetch device details
-  const getDeviceDetails = () => {
-    if (!isDeviceConnected) return;
-    DsiEMVManagerBridge.getDeviceDetails();
-  };
+  const getDeviceDetails = async (): Promise<string | null> => {
+  if (!isIDTECHConnected) return null;
+
+  try {
+    if (!deviceSerialNumber?.trim()) {
+      const extractedSerialNumber = await DsiEMVManagerBridge.getDeviceDetails();
+
+      setDeviceSerialNumber(extractedSerialNumber ?? "");
+      pushLog('PAYMENT LIBRARY', 'Retrieving IDTECH device details');
+
+      return extractedSerialNumber;
+    }
+    return deviceSerialNumber;
+
+  } catch (error) {
+    pushLog('PAYMENT LIBRARY', `Error fetching device details: ${error}`);
+    return null;
+  }
+};
 
   // Exposed method to cancel transaction
   const cancelOperation = () => {
@@ -230,6 +276,7 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
     setConfigurationInProgress(false);
     setCancellationRunning(true);
     DsiEMVManagerBridge.cancelTransaction();
+    pushLog('PAYMENT LIBRARY', 'Current Transaction cancelled by User');
   };
 
   // Exposed method to remove all attached listener
@@ -267,25 +314,19 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
     [],
   );
 
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (unconfigureTimeoutRef.current) {
-        clearTimeout(unconfigureTimeoutRef.current);
-      }
-    };
-  }, []);
-
   // Context value builder
   const value: EMVPaymentContextType = {
     logs,
-    isDeviceConnected,
+    isDeviceConnected: isIDTECHConnected,
     isConfigured,
+    deviceSerialNumber,
     isTransactionCurrentlyRunning,
     isConfigurationInProgress,
     isCancellationRunning,
     displayMessage,
-    unconfigureDevice,
+    setIsConfigured,
+    setMerchantDetails,
+    initializePaymentLib,
     creditCardSale,
     prepaidCardRead,
     creditCardRecurringSale,

package/src/emvPaymentProvider/types.ts

@@ -24,17 +24,20 @@ export interface CallbackLog {
 export interface EMVPaymentHook {
     logs: CallbackLog[];
     isDeviceConnected: boolean;
+    deviceSerialNumber: string,
     isConfigured: boolean;
     isTransactionCurrentlyRunning: boolean,
     isConfigurationInProgress: boolean,
     isCancellationRunning: boolean,
     displayMessage: string,
-    unconfigureDevice: (immediate: boolean) => void,
+    setMerchantDetails: (config: EMVConfig) => void,
+    setIsConfigured: (isConfigured: boolean) => void,
+    initializePaymentLib: () => void,
     creditCardSale: (amount: string) => void;
     prepaidCardRead: () => void;
     creditCardRecurringSale: (amount: string) => void;
     zeroAuthTransaction: () => void;
-    getDeviceDetails: () => void;
+    getDeviceDetails: () => Promise<string | null>;
     runConfiguration: (config: EMVConfig) => void;
     removeAllListeners: () => void;
     cancelOperation: () => void;

package/src/example/EMVPaymentScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   View,
   Text,
@@ -16,12 +16,14 @@ import { USBDeviceProvider } from '../usb/USBDeviceContext';
 import { EMVPaymentProvider } from '../emvPaymentProvider/EMVPaymentProvider';
 import { useEMVPayment } from '../emvPaymentProvider/useEMVPayment';
 import { EMVConfig } from '../emvPaymentProvider/types';
+import { getDeviceBySerial } from './helper/deviceStore';
 
 type IconCallback = {
   onPress: () => void;
 };
 
 type PaymentScreenIconsCallback = {
+  config: EMVConfig | null;
   onPressExternalSystem: () => void;
   onPressSettings: () => void;
 };
@@ -46,8 +48,8 @@ const CrossIcon = () => (
   <Text style={{ color: 'red', fontSize: 18, marginRight: 6 }}>❌</Text>
 );
 
-const EMVPaymentScreenExample = () => {
-  const [config, setConfig] = useState<EMVConfig | null>(null);
+const EMVPaymentScreenExample = ({ posConfig }: { posConfig: EMVConfig }) => {
+  const [config, setConfig] = useState<EMVConfig | null>(posConfig);
   const [showSettingsScreen, setShowSettingsScreen] = useState(false);
   const [showExternalSystemScreen, setShowExternalSystemScreen] =
     useState(false);
@@ -81,6 +83,7 @@ const EMVPaymentScreenExample = () => {
 
     return (
       <ExampleContent
+        config={config}
         onPressSettings={toggleSettingsScreen}
         onPressExternalSystem={toggleExternalSystemScreen}
       />
@@ -95,22 +98,77 @@ const EMVPaymentScreenExample = () => {
 };
 
 const ExampleContent = ({
+  config,
   onPressExternalSystem,
   onPressSettings,
 }: PaymentScreenIconsCallback) => {
   const [infoVisible, setInfoVisible] = useState(false);
   const {
     logs,
+    isDeviceConnected,
+    deviceSerialNumber,
+    initializePaymentLib,
+    setMerchantDetails,
     isConfigured,
     creditCardSale,
     prepaidCardRead,
     creditCardRecurringSale,
     zeroAuthTransaction,
     cancelOperation,
+    setIsConfigured,
     getDeviceDetails,
     isTransactionCurrentlyRunning,
-    displayMessage
+    displayMessage,
   } = useEMVPayment();
+  //Device Connected -> Serial Received -> Lookup Local Config -> Auto Configure -> Enable Transactions
+  // useEffect(() => {
+  //   if (deviceSerialNumber) {
+  //     const matchedDevice = getDeviceBySerial(deviceSerialNumber);
+
+  //     if (matchedDevice?.isConfigured) {
+  //       setIsConfigured(true);
+  //     } else {
+  //       setIsConfigured(false);
+  //     }
+  //   } else {
+  //     setIsConfigured(false);
+  //   }
+  // }, [deviceSerialNumber]);
+
+  useEffect(() => {
+    const fetchDeviceDetails = async () => {
+      if (isDeviceConnected) {
+        if (!isConfigured) {
+          if (!deviceSerialNumber.trim()) {
+            const serialNumber = await getDeviceDetails();
+            console.log('EXTRACTED SERIAL NUMBER:::: ', serialNumber);
+            if (serialNumber) {
+              const storedDevice = getDeviceBySerial(serialNumber);
+              console.log('STORED DEVICE DETAILS::::', serialNumber);
+
+              if (storedDevice?.isConfigured) {
+                setIsConfigured(true);
+                console.log('SERIAL NUMBER ALREADY EXISTS');
+              } else {
+                setIsConfigured(false);
+                console.log("SERIAL NUMBER DOESN'T EXISTS");
+              }
+            } else {
+              setIsConfigured(false);
+              console.log('NOT ABLE TO EXTRACT SERIAL NUMBER');
+            }
+          }
+        }
+      }
+    };
+    fetchDeviceDetails();
+  }, [isDeviceConnected]);
+
+  // Library initialisation and Param sent
+  useEffect(() => {
+    initializePaymentLib();
+    if (config != null) setMerchantDetails(config);
+  }, []);
 
   const showAlertIfNotConfigured = () => {
     if (isConfigured) return false;
@@ -140,7 +198,6 @@ const ExampleContent = ({
 
       {/** Button Row 1 */}
       <View style={styles.buttonRow}>
-
         <TouchableOpacity
           style={[
             styles.ctaButton,
@@ -164,10 +221,9 @@ const ExampleContent = ({
               : styles.ctaButtonEnabled,
           ]}
           onPress={() => {
-             if(!showAlertIfNotConfigured())
-              creditCardRecurringSale('1.50')
-            }}
-          disabled={isTransactionCurrentlyRunning }
+            if (!showAlertIfNotConfigured()) creditCardRecurringSale('1.50');
+          }}
+          disabled={isTransactionCurrentlyRunning}
         >
           <Text style={styles.ctaButtonText}>CC Sale (Recurring)</Text>
         </TouchableOpacity>
@@ -182,7 +238,7 @@ const ExampleContent = ({
           onPress={() => {
             if (!showAlertIfNotConfigured()) prepaidCardRead();
           }}
-          disabled={isTransactionCurrentlyRunning }
+          disabled={isTransactionCurrentlyRunning}
         >
           <Text style={styles.ctaButtonText}>Read Prepaid Card</Text>
         </TouchableOpacity>
@@ -197,11 +253,10 @@ const ExampleContent = ({
               ? styles.ctaButtonDisabled
               : styles.ctaButtonEnabled,
           ]}
-          onPress={()=> {
-             if(!showAlertIfNotConfigured())
-              zeroAuthTransaction()
+          onPress={() => {
+            if (!showAlertIfNotConfigured()) zeroAuthTransaction();
           }}
-          disabled={isTransactionCurrentlyRunning }
+          disabled={isTransactionCurrentlyRunning}
         >
           <Text style={styles.ctaButtonText}>CC $0 Auth</Text>
         </TouchableOpacity>
@@ -213,8 +268,8 @@ const ExampleContent = ({
               ? styles.ctaButtonDisabled
               : styles.ctaButtonEnabled,
           ]}
-          onPress={()=> {
-              getDeviceDetails()
+          onPress={() => {
+            getDeviceDetails();
           }}
           disabled={isTransactionCurrentlyRunning}
         >
@@ -232,7 +287,9 @@ const ExampleContent = ({
         <View style={styles.modalOverlay}>
           <View style={styles.modalContent}>
             <ActivityIndicator size="large" color="#007AFF" />
-            <Text style={styles.modalText}>Processing...\n{displayMessage}</Text>
+            <Text style={styles.modalText}>
+              Processing...\n{displayMessage}
+            </Text>
             <TouchableOpacity
               style={styles.cancelButton}
               onPress={cancelOperation}
@@ -451,7 +508,7 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 14,
     borderRadius: 6,
-  }
+  },
 });
 
 export default EMVPaymentScreenExample;

package/src/example/EMVSettingsScreen.tsx

@@ -8,7 +8,6 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-import { useEMVPayment } from '../emvPaymentProvider/useEMVPayment';
 import { EMVConfig } from '../emvPaymentProvider/types';
 
 type ConfigUpdateCallback = {
@@ -17,9 +16,8 @@ type ConfigUpdateCallback = {
 };
 
 const EMVSettingsScreen = ({ onConfigUpdate, data }: ConfigUpdateCallback) => {
-  const { unconfigureDevice } = useEMVPayment();
-  const [paymentMID, setPaymentMID] = useState('');
-  const [operatorID, setOperatorID] = useState('');
+  const [paymentMID, setPaymentMID] = useState(data?.merchantID ?? "");
+  const [operatorID, setOperatorID] = useState(data?.operatorID ?? "");
   const [secureDeviceName] = useState('EMV_VP3350_DATACAP');
   const [isSandbox, setIsSandbox] = useState(true);
 
@@ -31,7 +29,7 @@ const handleApplyChanges = () => {
       operatorID,
       posPackageID: 'test.package.id',
     };
-    unconfigureDevice(true);
+    
     onConfigUpdate(config); 
   };