listion to purchase events on startup of the app

ApplicationRoot.js

@@ -25,6 +25,7 @@ import { HEADER_HEIGHT } from './constants/Layout';
 import Entypo from 'react-native-vector-icons/Entypo';
 import { t } from 'i18next';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import useIAPConnection from './hooks/useIAPConnection';
 const Stack = createNativeStackNavigator();
 
 /*import { LogBox } from 'react-native'; // enabled for recording demos
@@ -40,6 +41,7 @@ export default function App() {
       setIsPalettesLoaded(true);
     })();
   }, []);
+  useIAPConnection();
 
   const spinner = (
     <View style={{ flex: 1, marginTop: '20%' }}>

android/build.gradle

@@ -9,6 +9,7 @@ buildscript {
         ndkVersion = "21.4.7075529"
         androidXAnnotation = "1.1.0"
         androidXBrowser = "1.0.0"
+        supportLibVersion = "28.0.0"
     }
     repositories {
         google()

hooks/useIAPConnection.ts

@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+import {
+  initConnection,
+  purchaseErrorListener,
+  purchaseUpdatedListener,
+  type SubscriptionPurchase,
+  type ProductPurchase,
+  type PurchaseError,
+  flushFailedPurchasesCachedAsPendingAndroid,
+  finishTransaction,
+} from 'react-native-iap';
+import { notifyMessage } from  '../libs/Helpers';
+// https://react-native-iap.dooboolab.com/docs/guides/purchases
+// TODO: We need to implement this properly with server side validation.
+const useIAPConnection = () => {
+  useEffect(() => {
+    let purchaseUpdateSubscription = null;
+    let purchaseErrorSubscription = null;
+
+    initConnection().then(() => {
+      flushFailedPurchasesCachedAsPendingAndroid()
+        .catch(() => {
+          // exception can happen here if:
+          // - there are pending purchases that are still pending (we can't consume a pending purchase)
+          // in any case, you might not want to do anything special with the error
+        })
+        .then(() => {
+          purchaseUpdateSubscription = purchaseUpdatedListener(
+            async (purchase: SubscriptionPurchase | ProductPurchase) => {
+              console.log('purchaseUpdatedListener', purchase);
+              const receipt = purchase.transactionReceipt;
+              if (receipt) {
+
+                // Tell the store that you have delivered what has been paid for.
+                // Failure to do this will result in the purchase being refunded on Android and
+                // the purchase event will reappear on every relaunch of the app until you succeed
+                // in doing the below. It will also be impossible for the user to purchase consumables
+                // again until you do this.
+
+                // If consumable (can be purchased again)
+                //await finishTransaction({purchase, isConsumable: true});
+                // If not consumable
+
+                await finishTransaction({purchase, isConsumable: false});
+                notifyMessage('Purchase successful');
+              }
+            },
+          );
+          purchaseErrorSubscription = purchaseErrorListener(
+            (error: PurchaseError) => {
+              console.warn('purchaseErrorListener', error);
+            },
+          );
+        });
+    });
+
+    return () => {
+      if (purchaseUpdateSubscription) {
+        purchaseUpdateSubscription.remove();
+      }
+
+      if (purchaseErrorSubscription) {
+        purchaseErrorSubscription.remove();
+      }
+    };
+  }, []);
+};
+
+export default useIAPConnection;

libs/Helpers.js

@@ -33,7 +33,6 @@ const purchase = async function (setPurchase, productSKU) {
       andDangerouslyFinishTransactionAutomatically: true
     });
     await setPurchase(details);
-    RNIap.finishTransaction(details, false);
     logEvent('purchase_successful');
     notifyMessage('Congrats, You are now a pro user!');
   } catch (err) {

screens/ChatSessionScreen.js

@@ -16,7 +16,7 @@ import { logEvent } from '../libs/Helpers';
 import { createChatSession, followUpChatSession, getChatSession } from '../network/chat_session';
 import ChatCard from '../components/ChatCard';
 import LoginScreen from './LoginScreen';
-import useUserData from '../Hooks/getUserData';
+import useUserData from '../hooks/getUserData';
 
 // eslint-disable-next-line no-undef
 const bgImage = require('../assets/images/colorful_background.jpg');