Add displayCloseButton and onDismiss options to paywall views (#913)

Depends on:
- RevenueCat/purchases-ios#3708
- RevenueCat/purchases-ios#3738
- RevenueCat/purchases-hybrid-common#746

With this PR, there's a change in functionality in the way the dismissal
of the paywall works in iOS.

In iOS I noticed there was a bug that prevented the `onDismiss` callback
from getting called when using `PaywallView` after dismissal of the
paywall, and I also noticed that the paywall was getting automatically
dismissed. In Android, I noticed the behavior was different, and the
paywall wouldn't close by itself and the `onDismiss` would be called, so
the `PaywallView` could be _dismissed_ by the developer.

Taking into account the way React Native views work, I think the
developer should have the responsability of not showing the paywall
(dimissing it). So I consider Android implemntation's the correct one.

Those PRs (RevenueCat/purchases-ios#3738 and
RevenueCat/purchases-hybrid-common#746) make
some changes in the way iOS behaves, so if the view is created from
`PaywallProxy`, which is what React Native uses to create a
`PaywallView` the view wouldn't close itself after the close button is
pressed (or a successful purchase happens). It's a change in behavior,
but I think it's a actually something we overlooked in iOS
implementation's. Also, take into account that `PaywallView` in iOS used
to do `self.dismiss`, which I believe would only work if the PaywallView
in React Native is being presented using something like Navigator, where
the dismiss event would bubble up and close the container controller.

Author: vegaro

apitesters/paywalls.tsx

@@ -70,6 +70,7 @@ function checkFullScreenPaywallViewOptions(
 ) {
   const offering: PurchasesOffering | undefined | null = options.offering;
   const fontFamily: string | undefined | null = options.fontFamily;
+  const displayCloseButton: boolean | undefined = options.displayCloseButton;
 }
 
 function checkFooterPaywallViewOptions(options: FooterPaywallViewOptions) {

examples/purchaseTesterTypescript/app/screens/FooterPaywallScreen.tsx

@@ -12,7 +12,7 @@ import {
 
 type Props = NativeStackScreenProps<RootStackParamList, 'FooterPaywall'>;
 
-const FooterPaywallScreen: React.FC<Props> = ({route}: Props) => {
+const FooterPaywallScreen: React.FC<Props> = ({route, navigation}: Props) => {
   // Example handlers for the events
   const onPurchaseCompleted = ({customerInfo, storeTransaction}: {
     customerInfo: CustomerInfo, storeTransaction: PurchasesStoreTransaction
@@ -46,6 +46,7 @@ const FooterPaywallScreen: React.FC<Props> = ({route}: Props) => {
 
   const onDismiss = () => {
     console.log('Dismissed');
+    navigation.pop();
   };
 
   return (

examples/purchaseTesterTypescript/app/screens/PaywallScreen.tsx

@@ -12,7 +12,7 @@ import {
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Paywall'>;
 
-const PaywallScreen: React.FC<Props> = ({route}: Props) => {
+const PaywallScreen: React.FC<Props> = ({route, navigation}: Props) => {
   // Example handlers for the events
   const onPurchaseCompleted = ({customerInfo, storeTransaction}: {
     customerInfo: CustomerInfo, storeTransaction: PurchasesStoreTransaction
@@ -46,6 +46,7 @@ const PaywallScreen: React.FC<Props> = ({route}: Props) => {
 
   const onDismiss = () => {
     console.log('Dismissed');
+    navigation.pop();
   };
 
   const styles = StyleSheet.create({
@@ -60,6 +61,7 @@ const PaywallScreen: React.FC<Props> = ({route}: Props) => {
         options={{
           offering: route.params.offering,
           fontFamily: route.params.fontFamily,
+          displayCloseButton: true,
         }}
         onPurchaseStarted={onPurchaseStarted}
         onPurchaseCompleted={onPurchaseCompleted}

react-native-purchases-ui/android/src/main/java/com/revenuecat/purchases/react/ui/BasePaywallViewManager.kt

@@ -23,6 +23,8 @@ internal abstract class BasePaywallViewManager<T : View> : SimpleViewManager<T>(
 
     abstract fun setOfferingId(view: T, identifier: String)
 
+    abstract fun setDisplayDismissButton(view: T, display: Boolean)
+
     override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any>? {
         return MapBuilder.builder<String, Any>()
             .putEvent(PaywallEvent.ON_PURCHASE_STARTED)
@@ -44,6 +46,7 @@ internal abstract class BasePaywallViewManager<T : View> : SimpleViewManager<T>(
         options?.let { props ->
             setOfferingIdProp(view, props)
             setFontFamilyProp(view, props)
+            setDisplayCloseButton(view, props)
         }
     }
 
@@ -60,7 +63,12 @@ internal abstract class BasePaywallViewManager<T : View> : SimpleViewManager<T>(
             FontAssetManager.getFontFamily(fontFamilyName = it, view.resources.assets)?.let {
                 setFontFamily(view, CustomFontProvider(it))
             }
+        }
+    }
 
+    private fun setDisplayCloseButton(view: T, options: ReadableMap) {
+        options.takeIf { it.hasKey("displayCloseButton") }?.let {
+            setDisplayDismissButton(view, it.getBoolean("displayCloseButton"))
         }
     }
 

react-native-purchases-ui/android/src/main/java/com/revenuecat/purchases/react/ui/PaywallFooterViewManager.kt

@@ -68,4 +68,9 @@ internal class PaywallFooterViewManager : BasePaywallViewManager<PaywallFooterVi
     override fun setFontFamily(view: PaywallFooterView, customFontProvider: CustomFontProvider) {
         view.setFontProvider(customFontProvider)
     }
+
+    override fun setDisplayDismissButton(view: PaywallFooterView, display: Boolean) {
+        // No-op since PaywallFooterView doesn't have a dismiss button
+    }
+
 }

react-native-purchases-ui/android/src/main/java/com/revenuecat/purchases/react/ui/PaywallViewManager.kt

@@ -34,4 +34,9 @@ internal class PaywallViewManager : BasePaywallViewManager<PaywallView>() {
     override fun setFontFamily(view: PaywallView, customFontProvider: CustomFontProvider) {
         view.setFontProvider(customFontProvider)
     }
+
+    override fun setDisplayDismissButton(view: PaywallView, display: Boolean) {
+        view.setDisplayDismissButton(display)
+    }
+
 }

react-native-purchases-ui/ios/PaywallViewWrapper.m

@@ -89,6 +89,12 @@ - (void)setOptions:(NSDictionary *)options {
         if (fontFamily && [fontFamily isKindOfClass:[NSString class]] && fontFamily.length > 0) {
             [self.paywallViewController updateFontWithFontName:fontFamily];
         }
+
+        NSNumber *displayCloseButtonValue = options[@"displayCloseButton"];
+        BOOL displayCloseButton = [displayCloseButtonValue isKindOfClass:[NSNumber class]] ? [displayCloseButtonValue boolValue] : NO;
+        if (displayCloseButton) {
+            [self.paywallViewController updateWithDisplayCloseButton:displayCloseButton];
+        }
     } else {
         NSLog(@"Error: attempted to present paywalls on unsupported iOS version.");
     }
@@ -139,7 +145,7 @@ - (void)paywallViewController:(RCPaywallViewController *)controller
     });
 }
 
-- (void)paywallViewControllerWasDismissed:(RCPaywallViewController *)controller API_AVAILABLE(ios(15.0)) {
+- (void)paywallViewControllerRequestedDismissal:(RCPaywallViewController *)controller API_AVAILABLE(ios(15.0)) {
     self.onDismiss(nil);
 }
 

react-native-purchases-ui/src/index.tsx

@@ -85,7 +85,7 @@ export interface PaywallViewOptions {
 }
 
 export interface FullScreenPaywallViewOptions extends PaywallViewOptions {
-  // Additional properties for FullScreenPaywallViewOptions can be added here if needed in the future
+  displayCloseButton?: boolean | false;
 }
 
 // Currently the same as the base type, but can be extended later if needed