Customer center various improvements (#700)

* react native

* remove useless text

* add samples

* rc-ignore-offer

* fix custom_url case

* fix sentence

* fix headers

* Update docs/tools/customer-center/customer-center-integration-android.mdx

Co-authored-by: JayShortway <[email protected]>

* fix type

* Update code_blocks/tools/customer-center-events-android-global.kt

Co-authored-by: JayShortway <[email protected]>

* fix showcustomercenter

* add import

---------

Co-authored-by: JayShortway <[email protected]>

Author: vegaro

code_blocks/tools/customer-center-events-android-base.kt

@@ -0,0 +1,38 @@
+private fun createCustomerCenterListener(): CustomerCenterListener {
+    return object : CustomerCenterListener {
+        override fun onManagementOptionSelected(action: CustomerCenterManagementOption) {
+            when (action) {
+                CustomerCenterManagementOption.MissingPurchase -> {
+                    // User selected missing purchase option
+                }
+                CustomerCenterManagementOption.Cancel -> {
+                    // User selected cancel option
+                }
+                is CustomerCenterManagementOption.CustomUrl -> {
+                    val uri: Uri = action.uri
+                    // User selected a custom URL option
+                }
+            }
+        }
+
+        override fun onRestoreStarted() {
+            // Restore purchases process started
+        }
+
+        override fun onRestoreCompleted(customerInfo: CustomerInfo) {
+            // Restore purchases completed successfully
+        }
+
+        override fun onRestoreFailed(error: PurchasesError) {
+            // Restore purchases failed
+        }
+
+        override fun onShowingManageSubscriptions() {
+            // Manage subscriptions screen is displayed
+        }
+
+        override fun onFeedbackSurveyCompleted(feedbackSurveyOptionId: String) {
+            // User completed a feedback survey
+        }
+    }
+} 

code_blocks/tools/customer-center-events-android-global.kt

@@ -0,0 +1,3 @@
+// Create and set the global listener
+val customerInfoListener = createCustomerCenterListener()
+Purchases.sharedInstance.customerCenterListener = customerInfoListener 

code_blocks/tools/customer-center-events-android-local.kt

@@ -0,0 +1,13 @@
+val customerCenterListener = remember { createCustomerCenterListener() }
+
+if (isCustomerCenterVisible) {
+    CustomerCenter(
+        modifier = Modifier.fillMaxSize(),
+        options = CustomerCenterOptions.Builder()
+            .setListener(customerCenterListener)
+            .build(),
+    ) {
+        isCustomerCenterVisible = false
+    }
+    return
+} 

code_blocks/tools/customer-center-events-react-native.tsx

@@ -0,0 +1,40 @@
+import { RevenueCatUI } from 'react-native-purchases-ui';
+import { CustomerInfo, PurchasesError, REFUND_REQUEST_STATUS, CustomerCenterManagementOptionEvent } from 'react-native-purchases';
+
+await RevenueCatUI.presentCustomerCenter({
+  callbacks: {
+    onFeedbackSurveyCompleted: ({ feedbackSurveyOptionId }: { feedbackSurveyOptionId: string }) => {
+      // User completed a feedback survey
+    },
+    onShowingManageSubscriptions: () => {
+      // Manage subscriptions screen is displayed
+    },
+    onRestoreStarted: () => {
+      // Restore purchases process started
+    },
+    onRestoreCompleted: ({ customerInfo }: { customerInfo: CustomerInfo }) => {
+      // Restore purchases completed successfully
+    },
+    onRestoreFailed: ({ error }: { error: PurchasesError }) => {
+      // Restore purchases failed
+    },
+    onRefundRequestStarted: ({ productIdentifier }: { productIdentifier: string }) => {
+      // iOS only
+      // Refund request initiated
+    },
+    onRefundRequestCompleted: ({ 
+        productIdentifier, 
+        refundRequestStatus 
+    }: { 
+        productIdentifier: string; 
+        refundRequestStatus: REFUND_REQUEST_STATUS 
+    }) => {
+      // iOS only
+      // Refund request completed
+    },
+    onManagementOptionSelected: ({option, url}: CustomerCenterManagementOptionEvent) => {
+      // User selected a management option
+      // url is only present for custom_url options
+    },
+  }
+}); 

code_blocks/tools/customer-center-usage-2.kt

@@ -0,0 +1,11 @@
+import com.revenuecat.purchases.ui.revenuecatui.customercenter.ShowCustomerCenter
+
+class MyActivity : ComponentActivity() {
+    private val customerCenter = registerForActivityResult(ShowCustomerCenter()) {
+        // Handle the dismissal
+    }
+    
+    fun showCustomerCenter() {
+        customerCenter.launch()
+    }
+}

code_blocks/tools/customer-center-usage-3.kt

@@ -0,0 +1,13 @@
+import androidx.compose.material3.MaterialTheme
+
+val isDarkTheme = isSystemInDarkTheme()
+val colorScheme = if (isDarkTheme) darkColorScheme() else lightColorScheme()
+
+MaterialTheme(
+    colorScheme = colorScheme,
+) {
+    CustomerCenter(
+        modifier = Modifier.fillMaxSize(),
+        onDismiss = { isCustomerCenterVisible = false }
+    )
+} 

docs/tools/customer-center/customer-center-integration-android.mdx

@@ -28,6 +28,76 @@ import usageViewKotlin from "!!raw-loader!@site/code_blocks/tools/customer-cente
   ]}
 />
 
+Alternatively, you can instantiate the Customer Center as an Activity:
+
+import usageActivityKotlin from "!!raw-loader!@site/code_blocks/tools/customer-center-usage-2.kt";
+
+<RCCodeBlock
+  tabs={[
+    { type: "kotlin", content: usageActivityKotlin, name: "Kotlin" },
+  ]}
+/>
+
+### Ensuring Proper Theming for Customer Center
+
+To ensure that Customer Center displays correctly with the right colors, contrast, and theme consistency, it needs to be wrapped in Material 3's `MaterialTheme`.
+This allows it to dynamically adapt to dark and light mode while applying the correct Material Design colors to all UI elements.
+If your app already uses Material 3's `MaterialTheme` with appropriate color schemes for dark and light mode, no additional changes are needed.
+However, if CustomerCenter is the only composable in your hierarchy, if you're using Material 2, or if you're using another theming system, you may need to explicitly wrap it in Material 3's `MaterialTheme` to ensure proper theming.
+
+import usageThemeKotlin from "!!raw-loader!@site/code_blocks/tools/customer-center-usage-3.kt";
+
+<RCCodeBlock
+  tabs={[
+    { type: "kotlin", content: usageThemeKotlin, name: "Kotlin" },
+  ]}
+/>
+
+### Listening to Customer Center Events
+
+You can listen to Customer Center events in two ways: using a global listener, or using a local listener through the CustomerCenter composable options.
+
+First, create a CustomerCenterListener implementation:
+
+import eventsBaseKotlin from "!!raw-loader!@site/code_blocks/tools/customer-center-events-android-base.kt";
+
+<RCCodeBlock
+  tabs={[
+    { type: "kotlin", content: eventsBaseKotlin, name: "Kotlin" },
+  ]}
+/>
+
+Then, you can use it in one of two ways:
+
+1. As a global listener that will be called for all Customer Center instances:
+
+import eventsGlobalKotlin from "!!raw-loader!@site/code_blocks/tools/customer-center-events-android-global.kt";
+
+<RCCodeBlock
+  tabs={[
+    { type: "kotlin", content: eventsGlobalKotlin, name: "Kotlin" },
+  ]}
+/>
+
+2. As a local listener through the CustomerCenter composable options:
+
+import eventsLocalKotlin from "!!raw-loader!@site/code_blocks/tools/customer-center-events-android-local.kt";
+
+<RCCodeBlock
+  tabs={[
+    { type: "kotlin", content: eventsLocalKotlin, name: "Kotlin" },
+  ]}
+/>
+
+The following events are available:
+
+- `onManagementOptionSelected`: Called when a user selects a management option (missing purchase, cancel, or custom URL)
+- `onRestoreStarted`: Called when the restore process begins
+- `onRestoreCompleted`: Called when the restore process completes successfully
+- `onRestoreFailed`: Called when the restore process fails
+- `onShowingManageSubscriptions`: Called when the manage subscriptions screen is shown
+- `onFeedbackSurveyCompleted`: Called when a user completes a feedback survey
+
 ## Setup promotional offers
 
 Promotional Offers allow developers to apply custom pricing and trials to new customers and to existing and lapsed subscriptions. Unique promotional offers can be assigned to different paths and survey responses in the Customer Center, but first they must be setup in Google Play Console.

docs/tools/customer-center/customer-center-integration-ios.mdx

@@ -69,9 +69,9 @@ import usageModifier from "!!raw-loader!@site/code_blocks/tools/customer-center-
   tabs={[{ type: "swift", content: usageModifier, name: "SwiftUI" }]}
 />
 
-#### Listening to events
+### Listening to events
 
-We've added a way to listen to events that occur within the `CustomerCenterView`. For now, we are not posting any event to our backend (like feedback survey selections). We are going to be adding way more events in the future, but these are what are available for now:
+We've added a way to listen to events that occur within the `CustomerCenterView`:
 
 import customerCenterEvents from "!!raw-loader!@site/code_blocks/tools/customer-center-events.swift";
 

docs/tools/customer-center/customer-center-promo-offers-google.mdx

@@ -7,15 +7,15 @@ hidden: false
 
 Promotional Offers allow developers to apply custom pricing and trials to new customers and to existing and lapsed subscriptions. Unique promotional offers can be assigned to different paths and survey responses in the Customer Center, but first they must be setup in Play Store.
 
-The Customer Center will automatically show offers based on specific user actions. By default we have defined it for cancellations but it can be modified to any of the defined paths. Here’s how it works:
+The Customer Center will automatically show offers based on specific user actions. By default we have defined it for cancellations but it can be modified to any of the defined paths. Here's how it works:
 
 ![Promotional Offers Configuration](/images/customer-center-promo-offers-config.png)
 
 - **Cancellation Retention Discount**: By default, for responses in the cancellation survey, RevenueCat will use a promotional offer that you can customize in the Offers tab of the Customer Center settings.
 
-This setup enables RevenueCat to automatically match the right offer based on a user’s actions, providing a seamless experience when user tries to cancel their active subscription.
+This setup enables RevenueCat to automatically match the right offer based on a user's actions, providing a seamless experience when user tries to cancel their active subscription.
 
-The SDK will automatically match the right offer based on a user’s actions and its active subscription. If the SDK cannot locate a matching promotional offer id for the currently active user's subscription, it will bypass the survey and proceed with the user’s requested action—either canceling or refunding the subscription.
+The SDK will automatically match the right offer based on a user's actions and its active subscription. If the SDK cannot locate a matching promotional offer id for the currently active user's subscription, it will bypass the survey and proceed with the user's requested action—either canceling or refunding the subscription.
 
 **These promotional offers must be created in App Store Connect and Google Play Store in order to be shown to customers**
 
@@ -29,10 +29,12 @@ Unique promotional offers can be assigned to different paths and survey response
 
 Offers on the Play Store allow you to provide a custom price or a trial (or both) for a product. There are [different types of offers](/subscription-guidance/subscription-offers/google-play-offers#eligibility-criteria) that can be created in the Play Store. For the Customer Center, you will be using the **Developer determined** type.
 
-Additionally, **add the `rc-customer-center` tag** to the developer determined offer from your product so that the offer is only available to Customer Center **and not used as a default offer when purchasing the product**. 
+Additionally, **add both the `rc-customer-center` and `rc-ignore-offer` tags** to the developer determined offer from your product. The `rc-customer-center` tag ensures the offer is only available to Customer Center **and not used as a default offer when purchasing the product**, while the `rc-ignore-offer` tag prevents the offer from being shown to users with older SDK versions.
 
 :::warning Offers must be created in Google Play Console and tagged
-Don't forget to add the tag `rc-customer-center` to the offer so that the offer is only available to Customer Center and not used as a default offer when purchasing the product or in Paywalls.
+Don't forget to add both tags:
+- `rc-customer-center`: Makes the offer only available in the Customer Center and not used as a default offer when purchasing the product or in Paywalls
+- `rc-ignore-offer`: Prevents the offer from being shown to users with older SDK versions that don't support the Customer Center
 :::
 
 ![Play Store Offer Setup](/images/customer-center/play-store-offer.png)

docs/tools/customer-center/customer-center-react-native.mdx

@@ -29,6 +29,16 @@ Opening the customer center is as simple as:
 await RevenueCatUI.presentCustomerCenter();
 ```
 
+### Listening to events
+
+We've added a way to listen to events that occur within the Customer Center. For now, we are not posting any event to our backend (like feedback survey selections). We are going to be adding way more events in the future, but these are what are available for now:
+
+import customerCenterEventsReactNative from "!!raw-loader!@site/code_blocks/tools/customer-center-events-react-native.tsx";
+
+<RCCodeBlock
+  tabs={[{ type: "tsx", content: customerCenterEventsReactNative, name: "React Native" }]}
+/>
+
 ## Setup promotional offers
 
 Promotional Offers allow developers to apply custom pricing and trials to new customers and to existing and lapsed subscriptions. Unique promotional offers can be assigned to different paths and survey responses in the Customer Center, but first they must be setup in App Store Connect and Google Play Store.