diff --git a/src/screens/Settings/Settings.tsx b/src/screens/Settings/Settings.tsx
index 126a1bc88e..f2e24523d9 100644
--- a/src/screens/Settings/Settings.tsx
+++ b/src/screens/Settings/Settings.tsx
@@ -162,6 +162,12 @@ export function SettingsScreen({}: Props) {
Moderation
+
+
+
+ Subscriptions
+
+
diff --git a/src/screens/Subscriptions/index.tsx b/src/screens/Subscriptions/index.tsx
index 95442f2c5f..557ca88593 100644
--- a/src/screens/Subscriptions/index.tsx
+++ b/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} =
- useEntitlements()
- const isSubscribed = entitlements?.some(e => e.id === 'core')
+ const {data: state, isLoading: isStateLoading} =
+ useSubscriptionsState()
+ const isSubscribed = state?.entitlements?.some(e => e.id === 'core')
const control = useDialogControl()
return (
+
+
-
-
-
- {isEntitlementsLoading ? (
+ {isStateLoading ? (
) : (
<>
{isSubscribed ? (
-
- You're subscribed!
-
+
) : (
<>
)}
-
)
}
+
+function CoreSubscriptions(props: { subscriptions: Subscription[] }) {
+ const t = useTheme()
+ const {_, i18n} = useLingui()
+ const { format } = useCurrencyFormatter()
+ const {mutateAsync: manageSubscription} = useManageSubscription()
+
+ return props.subscriptions.map(sub => (
+
+ Bluesky+
+
+
+ Status:{' '}
+ {sub.status}
+
+
+ {sub.renewalStatus === 'will_renew' ? (
+
+ Renews:{' '}
+ {i18n.date(new Date(sub.endsAt), { dateStyle: "medium", timeStyle: "medium" })}
+
+ ) : (
+
+ Ends:{' '}
+ {i18n.date(new Date(sub.endsAt), { dateStyle: "medium" })}
+
+ )}
+
+ {manageSubscription()})}
+ >
+ Manage subscription
+
+
+ ))
+}
diff --git a/src/state/purchases/subscriptions/types.ts b/src/state/purchases/subscriptions/types.ts
index 8629602cb2..8b467a43ca 100644
--- a/src/state/purchases/subscriptions/types.ts
+++ b/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
+}
diff --git a/src/state/purchases/subscriptions/useManageSubscription/index.ts b/src/state/purchases/subscriptions/useManageSubscription/index.ts
new file mode 100644
index 0000000000..c0d34871ba
--- /dev/null
+++ b/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
+ }
+ },
+ })
+}
diff --git a/src/state/purchases/subscriptions/useManageSubscription/index.web.ts b/src/state/purchases/subscriptions/useManageSubscription/index.web.ts
new file mode 100644
index 0000000000..41db909d97
--- /dev/null
+++ b/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)
+ },
+ })
+}
diff --git a/src/state/purchases/subscriptions/useSubscriptionsState.ts b/src/state/purchases/subscriptions/useSubscriptionsState.ts
new file mode 100644
index 0000000000..c4b02e6f05
--- /dev/null
+++ b/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
+ },
+ })
+}