Add font support to presentPaywall and presentPaywallIfNeeded (#948)

vegaro · web-flow · commit 2896deeb5ab1 · 2024-03-27T15:58:03.000+01:00
Depends on RevenueCat/purchases-hybrid-common#769 and https://github.com/RevenueCat/purchases-android/pull/1650/files Similar to #916 but with presentPaywall functions
diff --git a/apitesters/paywalls.tsx b/apitesters/paywalls.tsx
@@ -30,6 +30,11 @@ async function checkPresentPaywall(offering: PurchasesOffering) {
     offering: offering,
     displayCloseButton: false,
   });
+  paywallResult = await RevenueCatUI.presentPaywall({
+    offering: offering,
+    displayCloseButton: false,
+    fontFamily: 'Ubuntu',
+  });
 }
 
 async function checkPresentPaywallIfNeeded(offering: PurchasesOffering) {
@@ -51,6 +56,12 @@ async function checkPresentPaywallIfNeeded(offering: PurchasesOffering) {
     offering: offering,
     displayCloseButton: false,
   });
+  paywallResult = await RevenueCatUI.presentPaywallIfNeeded({
+    requiredEntitlementIdentifier: "entitlement",
+    offering: offering,
+    displayCloseButton: false,
+    fontFamily: 'Ubuntu',
+  });
 }
 
 function checkPresentPaywallParams(params: PresentPaywallIfNeededParams) {
diff --git a/react-native-purchases-ui/android/src/main/java/com/revenuecat/purchases/react/ui/FontAssetManager.kt b/react-native-purchases-ui/android/src/main/java/com/revenuecat/purchases/react/ui/FontAssetManager.kt
@@ -5,11 +5,16 @@ import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
+import com.revenuecat.purchases.ui.revenuecatui.ExperimentalPreviewRevenueCatUIPurchasesAPI
+import com.revenuecat.purchases.ui.revenuecatui.fonts.PaywallFont
+import com.revenuecat.purchases.ui.revenuecatui.fonts.PaywallFontFamily
 
 
+@OptIn(ExperimentalPreviewRevenueCatUIPurchasesAPI::class)
 internal object FontAssetManager {
     @get:Synchronized
     private var fontFamilyCache = mapOf<String, FontFamily>()
+    private var paywallFontFamilyCache = mapOf<String, PaywallFontFamily>()
     private val FILE_EXTENSIONS = arrayOf(".ttf", ".otf")
 
     private const val FONT_PATH = "fonts/"
@@ -39,23 +44,16 @@ internal object FontAssetManager {
         if (cachedFontFamily != null) {
             return cachedFontFamily
         }
-        val existingFontFileNames = assetManager.list(FONT_PATH)?.toList() ?: emptyList()
-        val fontsInFamily = mutableListOf<Font>()
-        FontStyleExtension.values().forEach { styleExtension ->
-            FILE_EXTENSIONS.forEach { fileNameExtension ->
-                val fileName = "$fontFamilyName${styleExtension.extension}$fileNameExtension"
-                if (existingFontFileNames.contains(fileName)) {
-                    fontsInFamily.add(
-                        Font(
-                            path = FONT_PATH + fileName,
-                            assetManager = assetManager,
-                            weight = styleExtension.weight,
-                            style = styleExtension.style
-                        )
-                    )
-                }
+
+        val fontsInFamily =
+            getFontsInFamily(fontFamilyName, assetManager) { fileName, styleExtension ->
+                Font(
+                    path = FONT_PATH + fileName,
+                    assetManager = assetManager,
+                    weight = styleExtension.weight,
+                    style = styleExtension.style
+                )
             }
-        }
 
         return if (fontsInFamily.isNotEmpty()) {
             val fontFamily = FontFamily(fontsInFamily)
@@ -65,4 +63,50 @@ internal object FontAssetManager {
             null
         }
     }
+
+    @Synchronized
+    fun getPaywallFontFamily(
+        fontFamilyName: String,
+        assetManager: AssetManager
+    ): PaywallFontFamily? {
+        val cachedPaywallFontFamily = paywallFontFamilyCache[fontFamilyName]
+        if (cachedPaywallFontFamily != null) {
+            return cachedPaywallFontFamily
+        }
+
+        val paywallFontsInFamily =
+            getFontsInFamily(fontFamilyName, assetManager) { fileName, styleExtension ->
+                PaywallFont.AssetFont(
+                    path = FONT_PATH + fileName,
+                    fontWeight = styleExtension.weight,
+                    fontStyle = styleExtension.style.value
+                )
+            }
+
+        return if (paywallFontsInFamily.isNotEmpty()) {
+            val fontFamily = PaywallFontFamily(paywallFontsInFamily)
+            paywallFontFamilyCache = paywallFontFamilyCache + (fontFamilyName to fontFamily)
+            fontFamily
+        } else {
+            null
+        }
+    }
+
+    private fun <T> getFontsInFamily(
+        fontFamilyName: String,
+        assetManager: AssetManager,
+        createFont: (String, FontStyleExtension) -> T
+    ): List<T> {
+        val existingFontFileNames = assetManager.list(FONT_PATH)?.toList() ?: emptyList()
+        val fontsInFamily = mutableListOf<T>()
+        FontStyleExtension.values().forEach { styleExtension ->
+            FILE_EXTENSIONS.forEach { fileNameExtension ->
+                val fileName = "$fontFamilyName${styleExtension.extension}$fileNameExtension"
+                if (existingFontFileNames.contains(fileName)) {
+                    fontsInFamily.add(createFont(fileName, styleExtension))
+                }
+            }
+        }
+        return fontsInFamily
+    }
 }
diff --git a/react-native-purchases-ui/android/src/main/java/com/revenuecat/purchases/react/ui/RNPaywallsModule.kt b/react-native-purchases-ui/android/src/main/java/com/revenuecat/purchases/react/ui/RNPaywallsModule.kt
@@ -10,6 +10,9 @@ import com.revenuecat.purchases.hybridcommon.ui.PaywallResultListener
 import com.revenuecat.purchases.hybridcommon.ui.PaywallSource
 import com.revenuecat.purchases.hybridcommon.ui.PresentPaywallOptions
 import com.revenuecat.purchases.hybridcommon.ui.presentPaywallFromFragment
+import com.revenuecat.purchases.ui.revenuecatui.ExperimentalPreviewRevenueCatUIPurchasesAPI
+import com.revenuecat.purchases.ui.revenuecatui.fonts.PaywallFont
+import com.revenuecat.purchases.ui.revenuecatui.fonts.PaywallFontFamily
 
 internal class RNPaywallsModule(reactContext: ReactApplicationContext) :
     ReactContextBaseJavaModule(reactContext) {
@@ -36,12 +39,14 @@ internal class RNPaywallsModule(reactContext: ReactApplicationContext) :
     fun presentPaywall(
         offeringIdentifier: String?,
         displayCloseButton: Boolean?,
+        fontFamily: String?,
         promise: Promise
     ) {
         presentPaywall(
             null,
             offeringIdentifier,
             displayCloseButton,
+            fontFamily,
             promise
         )
     }
@@ -51,12 +56,14 @@ internal class RNPaywallsModule(reactContext: ReactApplicationContext) :
         requiredEntitlementIdentifier: String,
         offeringIdentifier: String?,
         displayCloseButton: Boolean,
+        fontFamily: String?,
         promise: Promise
     ) {
         presentPaywall(
             requiredEntitlementIdentifier,
             offeringIdentifier,
             displayCloseButton,
+            fontFamily,
             promise
         )
     }
@@ -71,14 +78,18 @@ internal class RNPaywallsModule(reactContext: ReactApplicationContext) :
         // Keep: Required for RN built in Event Emitter Calls.
     }
 
+    @OptIn(ExperimentalPreviewRevenueCatUIPurchasesAPI::class)
     private fun presentPaywall(
         requiredEntitlementIdentifier: String?,
         offeringIdentifier: String?,
         displayCloseButton: Boolean?,
+        fontFamilyName: String?,
         promise: Promise
     ) {
         val fragment = currentActivityFragment ?: return
-
+        val fontFamily = fontFamilyName?.let {
+            FontAssetManager.getPaywallFontFamily(fontFamilyName = it, fragment.resources.assets)
+        }
         presentPaywallFromFragment(
             fragment = fragment,
             PresentPaywallOptions(
@@ -91,7 +102,8 @@ internal class RNPaywallsModule(reactContext: ReactApplicationContext) :
                     override fun onPaywallResult(paywallResult: String) {
                         promise.resolve(paywallResult)
                     }
-                }
+                },
+                fontFamily = fontFamily
             )
         )
     }
diff --git a/react-native-purchases-ui/ios/RNPaywalls.m b/react-native-purchases-ui/ios/RNPaywalls.m
@@ -63,19 +63,21 @@ - (PaywallProxy *)paywalls API_AVAILABLE(ios(15.0)){
 
 RCT_EXPORT_METHOD(presentPaywall:(nullable NSString *)offeringIdentifier
                   shouldDisplayCloseButton:(BOOL)displayCloseButton
+                  withFontFamily:(nullable NSString *)fontFamily
                   withResolve:(RCTPromiseResolveBlock)resolve
                   reject:(RCTPromiseRejectBlock)reject) {
     if (@available(iOS 15.0, *)) {
+        NSMutableDictionary *options = [NSMutableDictionary dictionary];
         if (offeringIdentifier != nil) {
-            [self.paywalls presentPaywallWithOfferingIdentifier:offeringIdentifier
-                                             displayCloseButton:displayCloseButton
-                                           paywallResultHandler:^(NSString *result) {
-                resolve(result);
-            }];
-            return;
+            options[PaywallOptionsKeys.offeringIdentifier] = offeringIdentifier;
         }
-        [self.paywalls presentPaywallWithDisplayCloseButton:displayCloseButton
-                                       paywallResultHandler:^(NSString *result) {
+        options[PaywallOptionsKeys.displayCloseButton] = @(displayCloseButton);
+        if (fontFamily) {
+            options[PaywallOptionsKeys.fontName] = fontFamily;
+        }
+
+        [self.paywalls presentPaywallWithOptions:options
+                            paywallResultHandler:^(NSString *result) {
             resolve(result);
         }];
     } else {
@@ -86,21 +88,22 @@ - (PaywallProxy *)paywalls API_AVAILABLE(ios(15.0)){
 RCT_EXPORT_METHOD(presentPaywallIfNeeded:(NSString *)requiredEntitlementIdentifier
                   withOfferingIdentifier:(nullable NSString *)offeringIdentifier
                   shouldDisplayCloseButton:(BOOL)displayCloseButton
+                  withFontFamily:(nullable NSString *)fontFamily
                   withResolve:(RCTPromiseResolveBlock)resolve
                   reject:(RCTPromiseRejectBlock)reject) {
     if (@available(iOS 15.0, *)) {
+        NSMutableDictionary *options = [NSMutableDictionary dictionary];
         if (offeringIdentifier != nil) {
-            [self.paywalls presentPaywallIfNeededWithRequiredEntitlementIdentifier:requiredEntitlementIdentifier
-                                                                offeringIdentifier:offeringIdentifier
-                                                                displayCloseButton:displayCloseButton
-                                                              paywallResultHandler:^(NSString *result) {
-                resolve(result);
-            }];
-            return;
+            options[PaywallOptionsKeys.offeringIdentifier] = offeringIdentifier;
         }
-        [self.paywalls presentPaywallIfNeededWithRequiredEntitlementIdentifier:requiredEntitlementIdentifier
-                                                            displayCloseButton:displayCloseButton
-                                                          paywallResultHandler:^(NSString *result) {
+        options[PaywallOptionsKeys.requiredEntitlementIdentifier] = requiredEntitlementIdentifier;
+        options[PaywallOptionsKeys.displayCloseButton] = @(displayCloseButton);
+        if (fontFamily) {
+            options[PaywallOptionsKeys.fontName] = fontFamily;
+        }
+
+        [self.paywalls presentPaywallIfNeededWithOptions:options
+                                    paywallResultHandler:^(NSString *result) {
             resolve(result);
         }];
     } else {
diff --git a/react-native-purchases-ui/src/index.tsx b/react-native-purchases-ui/src/index.tsx
@@ -56,6 +56,18 @@ export interface PresentPaywallParams {
    * The offering to load the paywall with. This will be the "current" offering by default.
    */
   offering?: PurchasesOffering;
+
+  /**
+   * The fontFamily name to use in the Paywall. In order to add a font family, add it in the react native app and make
+   * sure to run `npx react-native-asset` so it's added to the native components.
+   * Supported font types are `.ttf` and `.otf`.
+   * Make sure the file names follow the convention:
+   * - Regular: MyFont.ttf/MyFont.otf
+   * - Bold: MyFont_bold.ttf/MyFont_bold.otf
+   * - Italic: MyFont_italic.ttf/MyFont_italic.otf
+   * - Bold and Italic: MyFont_bold_italic.ttf/MyFont_bold_italic.otf
+   */
+  fontFamily?: string | null;
 }
 
 export type PresentPaywallIfNeededParams = PresentPaywallParams & {
@@ -152,9 +164,14 @@ export default class RevenueCatUI {
    */
   public static presentPaywall({
                                  offering,
-                                 displayCloseButton = RevenueCatUI.Defaults.PRESENT_PAYWALL_DISPLAY_CLOSE_BUTTON
+                                 displayCloseButton = RevenueCatUI.Defaults.PRESENT_PAYWALL_DISPLAY_CLOSE_BUTTON,
+                                 fontFamily,
                                }: PresentPaywallParams = {}): Promise<PAYWALL_RESULT> {
-    return RNPaywalls.presentPaywall(offering?.identifier ?? null, displayCloseButton)
+    return RNPaywalls.presentPaywall(
+      offering?.identifier ?? null,
+      displayCloseButton,
+      fontFamily,
+    )
   }
 
   /**
@@ -173,9 +190,15 @@ export default class RevenueCatUI {
   public static presentPaywallIfNeeded({
                                          requiredEntitlementIdentifier,
                                          offering,
-                                         displayCloseButton = RevenueCatUI.Defaults.PRESENT_PAYWALL_DISPLAY_CLOSE_BUTTON
+                                         displayCloseButton = RevenueCatUI.Defaults.PRESENT_PAYWALL_DISPLAY_CLOSE_BUTTON,
+                                         fontFamily,
                                        }: PresentPaywallIfNeededParams): Promise<PAYWALL_RESULT> {
-    return RNPaywalls.presentPaywallIfNeeded(requiredEntitlementIdentifier, offering?.identifier ?? null, displayCloseButton)
+    return RNPaywalls.presentPaywallIfNeeded(
+      requiredEntitlementIdentifier,
+      offering?.identifier ?? null,
+      displayCloseButton,
+      fontFamily,
+    )
   }
 
   public static Paywall: React.FC<FullScreenPaywallViewProps> = ({
