Allow managing web subscriptions from native

src/screens/Subscriptions/index.tsx

@@ -6,7 +6,7 @@ import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {CommonNavigatorParams} from '#/lib/routes/types'
-import {isAndroid, isIOS, isWeb} from '#/platform/detection'
+import {isAndroid, isIOS, isNative,isWeb} from '#/platform/detection'
 import {PurchasesState, usePurchases, usePurchasesApi} from '#/state/purchases'
 import {useManageSubscription} from '#/state/purchases/hooks/useManageSubscription'
 import {useNativeUserState} from '#/state/purchases/hooks/useNativeUserState'
@@ -411,14 +411,17 @@ export function Subscription({
 }) {
   const t = useTheme()
   const {_} = useLingui()
-  const {mutateAsync: manageSubscription} = useManageSubscription()
+  const {mutateAsync: manageSubscription} = useManageSubscription({
+    platform: sub.platform,
+  })
   const ui = useSubscriptionUI({subscription: sub})
   const isExpired = sub.status !== 'active' && sub.status !== 'paused'
 
   const canManage =
     (isWeb && sub.platform === PlatformId.Web) ||
     (isIOS && sub.platform === PlatformId.Ios) ||
-    (isAndroid && sub.platform === PlatformId.Android)
+    (isAndroid && sub.platform === PlatformId.Android) ||
+    (isNative && sub.platform === PlatformId.Web)
   const showManage = canManage && !isExpired
 
   const statusStyles = React.useMemo<TextStyle>(() => {

src/state/purchases/hooks/useManageSubscription/index.ts

@@ -2,15 +2,23 @@ import {Linking} from 'react-native'
 import Purchases from 'react-native-purchases'
 import {useMutation} from '@tanstack/react-query'
 
-export function useManageSubscription() {
+import {useManageSubscription as useManageWebSubscription} from '#/state/purchases/hooks/useManageSubscription/web'
+import {PlatformId} from '#/state/purchases/types'
+
+export function useManageSubscription({platform}: {platform: PlatformId}) {
+  const web = useManageWebSubscription({platform})
   return useMutation({
     async mutationFn() {
-      const customer = await Purchases.getCustomerInfo()
-
-      if (customer.managementURL) {
-        Linking.openURL(customer.managementURL)
+      if (platform === PlatformId.Web) {
+        await web.mutateAsync()
       } else {
-        // TODO
+        const customer = await Purchases.getCustomerInfo()
+
+        if (customer.managementURL) {
+          Linking.openURL(customer.managementURL)
+        } else {
+          // TODO
+        }
       }
     },
   })

src/state/purchases/hooks/useManageSubscription/index.web.ts

@@ -1,32 +1 @@
-import {Linking} from 'react-native'
-import {useMutation} from '@tanstack/react-query'
-
-import {api} from '#/state/purchases/api'
-import {useSession} from '#/state/session'
-import {IS_DEV} from '#/env'
-
-export function useManageSubscription() {
-  const {currentAccount} = useSession()
-
-  return useMutation({
-    async mutationFn() {
-      const {data, error} = await api<{
-        managementUrl: string
-      }>('/account/create-management-url', {
-        method: 'POST',
-        json: {
-          did: currentAccount!.did,
-          redirecturl: IS_DEV
-            ? 'http://localhost:19006/subscriptions'
-            : 'https://bsky.app/subscriptions',
-        },
-      }).json()
-
-      if (error || !data) {
-        throw new Error('Failed to fetch subscriptions state')
-      }
-
-      Linking.openURL(data.managementUrl)
-    },
-  })
-}
+export * from './web'

src/state/purchases/hooks/useManageSubscription/web.ts

@@ -0,0 +1,35 @@
+import {Linking} from 'react-native'
+import {useMutation} from '@tanstack/react-query'
+
+import {api} from '#/state/purchases/api'
+import {PlatformId} from '#/state/purchases/types'
+import {useSession} from '#/state/session'
+import {IS_DEV} from '#/env'
+
+export function useManageSubscription(_props: {platform: PlatformId}) {
+  const {currentAccount} = useSession()
+
+  return useMutation({
+    async mutationFn() {
+      const {data, error} = await api<{
+        managementUrl: string
+      }>('/account/create-management-url', {
+        method: 'POST',
+        json: {
+          did: currentAccount!.did,
+          redirecturl: IS_DEV
+            ? 'http://localhost:19006/subscriptions'
+            : 'https://bsky.app/subscriptions',
+        },
+      }).json()
+
+      console.log(error, data)
+
+      if (error || !data) {
+        throw new Error('Failed to fetch subscriptions state')
+      }
+
+      Linking.openURL(data.managementUrl)
+    },
+  })
+}