Discussions

Ask a Question
Back to All

onPurchaseCompleted Not firing "2.7.0-canary.1"

import React, { useEffect, useState } from 'react'
import { StyleSheet, Image, View, ActivityIndicator } from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { adapty } from 'react-native-adapty' // "2.7.0-canary.1"
import { createPaywallView } from '@adapty/react-native-ui' //"^2.0.0-canary.1"
import { useAppDispatch } from '../state/store'
import { loadLessonsAsync } from '../state/slices/lessonSlice' 

const LandingPage = () => {
  const navigation = useNavigation()
  const thunkDispatch = useAppDispatch()
  let unsubscribe: (() => void) | undefined
  const [isLoading, setIsLoading] = useState(false)

  const loadLessons = async () => {
    thunkDispatch(loadLessonsAsync())
  }

  const showPaywall = async () => {
    setIsLoading(true)
    try {
      const id = 'onboarding.v1'
      const locale = 'en'
      const paywall = await adapty.getPaywall(id, locale)
      // const products = await adapty.getPaywallProducts(paywall)
      const view = await createPaywallView(paywall)
      unsubscribe = view.registerEventHandlers({
        onCloseButtonPress() {
          console.log('close button press')
          // view.dismiss();
          return true
        },
        onProductSelected() {
          console.log('product selected')
        },
        onLoadingProductsFailed(error) {
          console.log('loading products failed', error)
        },
        onPurchaseCancelled() {
          console.log('purchase cancelled')
        },
        onPurchaseCompleted(profile) {
          console.log('purchase completed ', profile)
          loadLessons().then(() => {
            navigation.navigate('Dashboard' as never)
          })
          return true
        },
        onPurchaseFailed(error) {
          console.log('purchase error ', error)
        },
        onPurchaseStarted() {
          console.log('purchase started')
        },
        onRenderingFailed(error) {
          console.log('error rendering ', error)
        },
        onRestoreCompleted(profile) {
          console.log('restore completed ', profile)
          console.log(profile)
          loadLessons().then(() => {
            navigation.navigate('Dashboard' as never)
          })
          return true
        },
        onRestoreFailed(error) {
          console.log('restore failed', error)
        },
        onAction(action) {
          console.log('action', action)
        },
      })
      await view.present()
    } catch (error) {
      console.error(error)
    } finally {
      setIsLoading(false)
    }
  }

  useEffect(() => {
    // will check if not subscribed in future
    // after the user subscribes, if we can get enough info to have them in firebase
    // then we can add them automatically and drop them on the dashboard
    showPaywall()

    return () => {
      if (unsubscribe) {
        unsubscribe()
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <View style={styles.pageContainer}>
      {isLoading && (
        <View style={styles.spinnerOverlay}>
          <ActivityIndicator size="large" color="#ffffff" />
        </View>
      )}
      <Image
        source={require('../../assets/images/appIcon.png')}
        resizeMode="contain"
        style={styles.image}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  pageContainer: {
    backgroundColor: '#6B53FF',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    resizeMode: 'contain',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  spinnerOverlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(107,83,255,0.8)',
    zIndex: 1000,
    justifyContent: 'center',
    alignItems: 'center',
  },
})

export default LandingPage

Hi I am trying to render a paywall that I built in adapty. It is rendering fine and I am able to make a purchase that gets reflected in the adapty dashboard and in my sandbox ios settings. However most of my event handlers never get called. The main one I need is onPurchaseCompleted. This never gets called even after a successful purchase. The only ones that ever get called are onProductSelected, onPurchaseStarted, and onRestoreCompleted (when I restore). Any help would be greatly appreciated