quivio-transaction-processor 1.23.2-beta → 1.23.2

package/src/emvPaymentProvider/EMVPaymentProvider.tsx

@@ -34,21 +34,9 @@ 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('');
 
@@ -74,59 +62,55 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
     Map<EMVEventName, Set<(payload: any) => void>>
   >(new Map());
 
-  const clearDisconnectTimeout = () => {
-    if (disconnectTimeoutRef.current) {
-      clearTimeout(disconnectTimeoutRef.current);
-      disconnectTimeoutRef.current = null;
-    }
-  };
+  // 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,
+  );
 
-  useEffect(() => {
-    pushLog('PAYMENT LIBRARY', `SERIAL NUMBER: ${deviceSerialNumber}`);
-  }, [deviceSerialNumber]);
+  // Ref to maintain device connection/disconnection
+  const isDeviceConnectedRef = useRef<boolean>(isDeviceConnected);
 
   useEffect(() => {
-    // Stop already running timeout
-    clearDisconnectTimeout();
-
-    // If device connects -> update immediately
-    if (isDeviceConnected) {
-      setIDTECHConnected(true);
-      return;
-    }
+    // Always sync ref first
+    isDeviceConnectedRef.current = isDeviceConnected;
 
-    // If device disconnects -> delay 1500ms
-    disconnectTimeoutRef.current = setTimeout(() => {
-      setIDTECHConnected(false);
-    }, 2000);
-
-    return () => {
-      clearDisconnectTimeout();
-    };
-  }, [isDeviceConnected]);
-
-  useEffect(() => {
-    if (!isIDTECHConnected) {
-      setIsConfigured(false);
+    // Handle disconnect logic
+    if (!isDeviceConnected) {
+      unconfigureDevice(false);
       setConfigurationInProgress(false);
       setTransactionCurrentlyRunning(false);
       setCancellationRunning(false);
-      setDeviceSerialNumber('');
-      setDisplayMessage('');
     }
-  }, [isIDTECHConnected]);
+  }, [isDeviceConnected]);
 
   // Logging helper
   const pushLog = (type: string, payload: any) => {
     setLogs(prev => [...prev, { type, payload, timestamp: Date.now() }]);
   };
 
-  // Clean up timeout references
-  useEffect(() => {
-    return () => {
-      clearDisconnectTimeout();
-    };
-  }, []);
+  // 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);
+  };
 
   // Native to Provider EMV event listening
   useEffect(() => {
@@ -158,7 +142,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);
@@ -175,7 +159,7 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
   // Exposed method to run EMV configuration
   const runConfiguration = (config: EMVConfig) => {
     const title = 'CONFIGURATION DENIED';
-    const message = !isIDTECHConnected
+    const message = !isDeviceConnected
       ? 'IDTECH device is not connected via USB'
       : config.merchantID == ''
       ? 'Merchant ID not found'
@@ -183,8 +167,6 @@ 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 != '') {
@@ -193,82 +175,54 @@ const EMVPaymentProvider: React.FC<{ children: React.ReactNode }> = ({
     }
 
     setConfigurationInProgress(true);
-    DsiEMVManagerBridge.setMerchantDetails(config);
+    console.log(
+      'Initialising::: ConfugurationProgress:',
+      isConfigurationInProgress,
+      'isDeviceConnected: ',
+      isDeviceConnected,
+    );
+    DsiEMVManagerBridge.clearTransactionListener();
+    DsiEMVManagerBridge.initialize(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 (!isIDTECHConnected || !isConfigured) return;
+    if (!isDeviceConnected || !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 (!isIDTECHConnected || !isConfigured) return;
+    if (!isDeviceConnected || !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 (!isIDTECHConnected || !isConfigured) return;
+    if (!isDeviceConnected || !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 (!isIDTECHConnected || !isConfigured) return;
+    if (!isDeviceConnected || !isConfigured) return;
 
     setTransactionCurrentlyRunning(true);
     DsiEMVManagerBridge.replaceCardInRecurring();
-    pushLog('EMV TRANSACTION', 'Zero auth transaction has been initiated');
   };
 
   // Exposed method to fetch device details
-  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;
-  }
-};
+  const getDeviceDetails = () => {
+    if (!isDeviceConnected) return;
+    DsiEMVManagerBridge.getDeviceDetails();
+  };
 
   // Exposed method to cancel transaction
   const cancelOperation = () => {
@@ -276,7 +230,6 @@ 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
@@ -314,19 +267,25 @@ 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: isIDTECHConnected,
+    isDeviceConnected,
     isConfigured,
-    deviceSerialNumber,
     isTransactionCurrentlyRunning,
     isConfigurationInProgress,
     isCancellationRunning,
     displayMessage,
-    setIsConfigured,
-    setMerchantDetails,
-    initializePaymentLib,
+    unconfigureDevice,
     creditCardSale,
     prepaidCardRead,
     creditCardRecurringSale,

package/src/emvPaymentProvider/types.ts

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

package/src/example/EMVPaymentScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
   View,
   Text,
@@ -16,14 +16,12 @@ 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;
 };
@@ -48,8 +46,8 @@ const CrossIcon = () => (
   <Text style={{ color: 'red', fontSize: 18, marginRight: 6 }}>❌</Text>
 );
 
-const EMVPaymentScreenExample = ({ posConfig }: { posConfig: EMVConfig }) => {
-  const [config, setConfig] = useState<EMVConfig | null>(posConfig);
+const EMVPaymentScreenExample = () => {
+  const [config, setConfig] = useState<EMVConfig | null>(null);
   const [showSettingsScreen, setShowSettingsScreen] = useState(false);
   const [showExternalSystemScreen, setShowExternalSystemScreen] =
     useState(false);
@@ -83,7 +81,6 @@ const EMVPaymentScreenExample = ({ posConfig }: { posConfig: EMVConfig }) => {
 
     return (
       <ExampleContent
-        config={config}
         onPressSettings={toggleSettingsScreen}
         onPressExternalSystem={toggleExternalSystemScreen}
       />
@@ -98,77 +95,22 @@ const EMVPaymentScreenExample = ({ posConfig }: { posConfig: EMVConfig }) => {
 };
 
 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;
@@ -198,6 +140,7 @@ const ExampleContent = ({
 
       {/** Button Row 1 */}
       <View style={styles.buttonRow}>
+
         <TouchableOpacity
           style={[
             styles.ctaButton,
@@ -221,9 +164,10 @@ 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>
@@ -238,7 +182,7 @@ const ExampleContent = ({
           onPress={() => {
             if (!showAlertIfNotConfigured()) prepaidCardRead();
           }}
-          disabled={isTransactionCurrentlyRunning}
+          disabled={isTransactionCurrentlyRunning }
         >
           <Text style={styles.ctaButtonText}>Read Prepaid Card</Text>
         </TouchableOpacity>
@@ -253,10 +197,11 @@ 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>
@@ -268,8 +213,8 @@ const ExampleContent = ({
               ? styles.ctaButtonDisabled
               : styles.ctaButtonEnabled,
           ]}
-          onPress={() => {
-            getDeviceDetails();
+          onPress={()=> {
+              getDeviceDetails()
           }}
           disabled={isTransactionCurrentlyRunning}
         >
@@ -287,9 +232,7 @@ 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}
@@ -508,7 +451,7 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 14,
     borderRadius: 6,
-  },
+  }
 });
 
 export default EMVPaymentScreenExample;

package/src/example/EMVSettingsScreen.tsx

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