Show state, add mgmt url

src/screens/Settings/Settings.tsx

@@ -162,6 +162,12 @@ export function SettingsScreen({}: Props) {
               <Trans>Moderation</Trans>
             </SettingsList.ItemText>
           </SettingsList.LinkItem>
+          <SettingsList.LinkItem to="/subscriptions" label={_(msg`Subscriptions`)}>
+            <SettingsList.ItemIcon icon={HandIcon} />
+            <SettingsList.ItemText>
+              <Trans>Subscriptions</Trans>
+            </SettingsList.ItemText>
+          </SettingsList.LinkItem>
           <SettingsList.LinkItem
             to="/settings/content-and-media"
             label={_(msg`Content and media`)}>

src/screens/Subscriptions/index.tsx

@@ -1,20 +1,24 @@
 import React from 'react'
 import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {CommonNavigatorParams} from '#/lib/routes/types'
-import {useEntitlements} from '#/state/purchases/subscriptions/useEntitlements'
+import {useSubscriptionsState} from '#/state/purchases/subscriptions/useSubscriptionsState'
+import {useManageSubscription} from '#/state/purchases/subscriptions/useManageSubscription'
+import {Subscription} from '#/state/purchases/subscriptions/types'
 import {CenteredView} from '#/view/com/util/Views'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {BlueskyPlus} from '#/components/dialogs/BlueskyPlus'
-import {Logotype} from '#/components/icons/BlueskyPlus'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import * as Layout from '#/components/Layout'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
+import {useCurrencyFormatter} from '#/lib/currency'
+import {InlineLinkText, createStaticClick} from '#/components/Link'
 
 export type ScreenProps = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -23,26 +27,23 @@ export type ScreenProps = NativeStackScreenProps<
 
 export function Subscriptions(_props: ScreenProps) {
   const {_} = useLingui()
-  const {data: entitlements, isLoading: isEntitlementsLoading} =
+  const {data: state, isLoading: isStateLoading} =
-    useEntitlements()
+    useSubscriptionsState()
-  const isSubscribed = entitlements?.some(e => e.id === 'core')
+  const isSubscribed = state?.entitlements?.some(e => e.id === 'core')
   const control = useDialogControl()
 
   return (
     <Layout.Screen>
+      <Layout.Header title={_(msg`Subscriptions`)} />
+
       <CenteredView sideBorders={true} style={[a.util_screen_outer]}>
         <View style={[a.px_xl, a.py_xl, a.gap_lg]}>
-          <Logotype width={200} fill="nordic" />
+            {isStateLoading ? (
-
-          <View style={[a.pt_xl]}>
-            {isEntitlementsLoading ? (
               <Loader />
             ) : (
               <>
                 {isSubscribed ? (
-                  <View>
+                  <CoreSubscriptions subscriptions={state!.subscriptions} />
-                    <Text>You're subscribed!</Text>
-                  </View>
                 ) : (
                   <>
                     <Button
@@ -59,9 +60,45 @@ export function Subscriptions(_props: ScreenProps) {
                 )}
               </>
             )}
-          </View>
         </View>
       </CenteredView>
     </Layout.Screen>
   )
 }
+
+function CoreSubscriptions(props: { subscriptions: Subscription[] }) {
+  const t = useTheme()
+  const {_, i18n} = useLingui()
+  const { format } = useCurrencyFormatter()
+  const {mutateAsync: manageSubscription} = useManageSubscription()
+
+  return props.subscriptions.map(sub => (
+    <View style={[a.p_lg, a.rounded_md, a.border, a.gap_xs, t.atoms.border_contrast_low]}>
+      <Text style={[a.text_lg, a.font_heavy]}>Bluesky+</Text>
+
+      <Text style={[a.text_sm]}>
+        <Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}><Trans>Status:</Trans></Text>{' '}
+        <Text style={[a.text_sm]}>{sub.status}</Text>
+      </Text>
+
+      {sub.renewalStatus === 'will_renew' ? (
+        <Text style={[a.text_sm]}>
+          <Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}><Trans>Renews:</Trans></Text>{' '}
+          <Text style={[a.text_sm]}>{i18n.date(new Date(sub.endsAt), { dateStyle: "medium", timeStyle: "medium" })}</Text>
+        </Text>
+      ) : (
+        <Text style={[a.text_sm]}>
+          <Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}><Trans>Ends:</Trans></Text>{' '}
+          <Text style={[a.text_sm]}>{i18n.date(new Date(sub.endsAt), { dateStyle: "medium" })}</Text>
+        </Text>
+      )}
+
+      <InlineLinkText
+        label={_('Manage subscription')}
+        {...createStaticClick(() => {manageSubscription()})}
+      >
+        <Trans>Manage subscription</Trans>
+      </InlineLinkText>
+    </View>
+  ))
+}

src/state/purchases/subscriptions/types.ts

@@ -34,3 +34,12 @@ export type Offering =
         priceId: string
       }
     }
+
+export type Subscription = {
+  group: SubscriptionGroupId
+  platform: PlatformId
+  status: string
+  startsAt: number
+  endsAt: number
+  renewalStatus: string
+}

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

@@ -0,0 +1,17 @@
+import {Linking} from 'react-native'
+import {useMutation} from '@tanstack/react-query'
+import Purchases from 'react-native-purchases'
+
+export function useManageSubscription() {
+  return useMutation({
+    async mutationFn() {
+      const customer = await Purchases.getCustomerInfo()
+
+      if (customer.managementURL) {
+        Linking.openURL(customer.managementURL)
+      } else {
+        // TODO
+      }
+    },
+  })
+}

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

@@ -0,0 +1,30 @@
+import {Linking} from 'react-native'
+import {useMutation} from '@tanstack/react-query'
+
+import {IS_DEV} from '#/env'
+import {useSession} from '#/state/session'
+import {api} from '#/state/purchases/subscriptions/api'
+
+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)
+    },
+  })
+}

src/state/purchases/subscriptions/useSubscriptionsState.ts

@@ -0,0 +1,28 @@
+import {useQuery} from '@tanstack/react-query'
+
+import {useSession} from '#/state/session'
+import {api} from '#/state/purchases/subscriptions/api'
+import {SubscriptionGroupId, PlatformId, Subscription} from '#/state/purchases/subscriptions/types'
+
+export function useSubscriptionsState() {
+  const {currentAccount} = useSession()
+
+  return useQuery({
+    enabled: !!currentAccount,
+    queryKey: ['subscriptions-state', currentAccount?.did],
+    refetchOnWindowFocus: true,
+    async queryFn() {
+      const url = `/account?did=${currentAccount!.did}`
+      const {data, error} = await api<{
+        subscriptions: Subscription[]
+        entitlements: {id: 'core'; platform: 'web'}[]
+      }>(url).json()
+
+      if (error || !data) {
+        throw new Error('Failed to fetch subscriptions state')
+      }
+
+      return data
+    },
+  })
+}