feat: Add CustomerCenter for flutter and RN (#660)

Author: facumenzella

docs/tools/customer-center.mdx

@@ -42,13 +42,9 @@ To use Customer Center, simply:
 
 1. [Install](/tools/customer-center/customer-center-installation) the RevenueCat UI SDK:
 
-| RevenueCat SDK           | Version required for Customer Center | 
-| :----------------------- | :----------------------------------- |
-| [purchases-ios](https://github.com/RevenueCat/purchases-ios)             | 5.14.0 and up                 |
-| [purchases-android](https://github.com/RevenueCat/purchases-android)         | 8.12.0 and up                 |
-| [react-native-purchases-ui](https://github.com/RevenueCat/react-native-purchases) | Coming soon                      |
-| [purchases-flutter](https://github.com/RevenueCat/purchases-flutter)         | Coming soon                      |
-| [purchases-kmp](https://github.com/RevenueCat/purchases-kmp)             | Coming soon                      |
+import CustomerCenterSDKTable from '@site/src/components/CustomerCenter/CustomerCenterSDKTable';
+
+<CustomerCenterSDKTable />
 
 2. [Integrate](/tools/customer-center/customer-center-integration) the Customer Center into your app
 

docs/tools/customer-center/customer-center-flutter.mdx

@@ -0,0 +1,25 @@
+---
+title: Integrating Customer Center on Flutter
+sidebar_label: Flutter Integration
+slug: customer-center-flutter
+hidden: false
+---
+
+## Installation
+
+[![Release](https://img.shields.io/github/release/RevenueCat/purchases-flutter.svg?style=flat)](https://github.com/RevenueCat/purchases-flutter/releases)
+
+- Add `purchases-ui-flutter` in your `pubspec.yaml`:
+```yaml
+dependencies:
+  purchases_flutter: <latest version>
+  purchases_ui_flutter: <latest version>
+```
+
+## Integration
+
+Opening the customer center is as simple as:
+
+```dart
+  await RevenueCatUI.presentCustomerCenter();
+```

docs/tools/customer-center/customer-center-installation.mdx

@@ -1,19 +1,17 @@
 ---
 title: Installing the SDK
 sidebar_label: Installation
+slug: customer-center-installation
+hidden: false
 ---
 
 Customer Center is included as part of the RevenueCatUI package in the RevenueCat SDK. You'll need to install the RevenueCatUI package in your project to use it.
 
 #### Supported SDK versions
 
-| RevenueCat SDK           | Version required for Customer Center | 
-| :----------------------- | :----------------------------------- |
-| [purchases-ios](https://github.com/RevenueCat/purchases-ios)             | 5.14.0 and up                 |
-| [purchases-android](https://github.com/RevenueCat/purchases-android)         | 8.12.0 and up                 |
-| [react-native-purchases-ui](https://github.com/RevenueCat/react-native-purchases) | Coming soon                      |
-| [purchases-flutter](https://github.com/RevenueCat/purchases-flutter)         | Coming soon                      |
-| [purchases-kmp](https://github.com/RevenueCat/purchases-kmp)             | Coming soon                      |
+import CustomerCenterSDKTable from '@site/src/components/CustomerCenter/CustomerCenterSDKTable';
+
+<CustomerCenterSDKTable />
 
 Within the SDKs, Customer Center is available on the following platforms:
 - ✅ iOS 15.0 and higher

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

@@ -0,0 +1,28 @@
+---
+title: Integrating Customer Center on React Native
+sidebar_label: React Native Integration
+slug: customer-center-react-native
+hidden: false
+---
+
+## Installation
+
+[![Release](https://img.shields.io/github/release/RevenueCat/react-native-purchases.svg?style=flat)](https://github.com/RevenueCat/react-native-purchases/releases)
+
+- Update your `package.json` to include `react-native-purchases-ui`:
+```json
+{
+  "dependencies": {
+    "react-native-purchases": "<latest version>",
+    "react-native-purchases-ui": "<latest version>"
+  }
+}
+```
+
+## Integration
+
+Opening the customer center is as simple as:
+
+```tsx
+await RevenueCatUI.presentCustomerCenter();
+```

sidebars.js

@@ -331,9 +331,11 @@ const customersCategory = Category({
       itemsPathPrefix: "tools/customer-center/",
       items: [
         Page({ slug: "customer-center-installation" }),
+        Page({ slug: "customer-center-configuration" }),
         Page({ slug: "customer-center-integration" }),
         Page({ slug: "customer-center-integration-android" }),
-        Page({ slug: "customer-center-configuration" }),
+        Page({ slug: "customer-center-flutter" }),
+        Page({ slug: "customer-center-react-native" }),
       ],
     }),
     Page({ slug: "dashboard-and-metrics/customer-lists" }),

src/components/CustomerCenter/CustomerCenterSDKTable.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+export const CustomerCenterSDKTable: React.FC = () => {
+  const sdkData = [
+    {
+      name: "purchases-ios",
+      link: "https://github.com/RevenueCat/purchases-ios",
+      version: "5.14.0 and higher",
+    },
+    {
+      name: "purchases-android",
+      link: "https://github.com/RevenueCat/purchases-android",
+      version: "8.12.1 and higher",
+    },
+    {
+      name: "react-native-purchases-ui",
+      link: "https://github.com/RevenueCat/react-native-purchases",
+      version: "8.6.0 and higher",
+    },
+    {
+      name: "purchases-flutter",
+      link: "https://github.com/RevenueCat/purchases-flutter",
+      version: "8.7.0 and higher",
+    },
+    {
+      name: "purchases-kmp",
+      link: "https://github.com/RevenueCat/purchases-kmp",
+      version: "Coming soon",
+    },
+  ];
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>RevenueCat SDK</th>
+          <th>Required Version</th>
+        </tr>
+      </thead>
+      <tbody>
+        {sdkData.map(({ name, link, version }) => (
+          <tr key={name}>
+            <td>
+              <a href={link} target="_blank" rel="noopener noreferrer">
+                {name}
+              </a>
+            </td>
+            <td>{version}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default CustomerCenterSDKTable;