diff --git a/src/screens/Subscriptions/index.tsx b/src/screens/Subscriptions/index.tsx
index 9a2ae71fd1..c07393944e 100644
--- a/src/screens/Subscriptions/index.tsx
+++ b/src/screens/Subscriptions/index.tsx
@@ -19,7 +19,7 @@ import {
APISubscription,
NativePurchaseRestricted,
} from '#/state/purchases/types'
-import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, tokens, useBreakpoints, useGutters,useTheme} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {useDialogControl} from '#/components/Dialog'
@@ -46,6 +46,7 @@ export type ScreenProps = NativeStackScreenProps<
>
export function Subscriptions(_props: ScreenProps) {
+ const gutters = useGutters(['base', 'base'])
const insets = useSafeAreaInsets()
const purchases = usePurchases()
const {refetch} = usePurchasesApi()
@@ -86,7 +87,7 @@ export function Subscriptions(_props: ScreenProps) {
refreshControl={
}>
-
+
{purchases.status === 'loading' || loading ? (
) : purchases.status === 'error' ? (
@@ -110,22 +111,20 @@ function Core({
restricted: NativePurchaseRestricted
}) {
const t = useTheme()
- const coreSubscriptions = state.subscriptions
- .filter(s => s.group === SubscriptionGroupId.Core)
- .filter(s => {
- return ['active', 'paused'].includes(s.status)
- })
- const isSubscribedToCore = coreSubscriptions.length > 0
+ const coreSubscriptions = state.subscriptions.filter(
+ s => s.group === SubscriptionGroupId.Core,
+ )
+ const activeCoreSubscriptions = coreSubscriptions.filter(
+ s => s.status === 'active' || s.status === 'paused',
+ )
+ const inactiveCoreSubscriptions = coreSubscriptions.filter(
+ s => s.status !== 'active' && s.status !== 'paused',
+ )
+ const hasActiveSubscriptions = activeCoreSubscriptions.length > 0
+ const hasInactiveCoreSubscriptions = inactiveCoreSubscriptions.length > 0
return (
-
- {/*
-
-
-
-
- */}
-
+
{restricted === 'yes' ? (
@@ -133,31 +132,51 @@ function Core({
Please subscribe additional accounts through our web application.
- ) : isSubscribedToCore ? null : (
+ ) : hasActiveSubscriptions ? null : hasInactiveCoreSubscriptions ? (
+
+ ) : (
)}
- {isSubscribedToCore ? (
- <>
+
+
+ {hasActiveSubscriptions && (
+
My subscriptions
-
+
- {coreSubscriptions.map(sub => (
+ {activeCoreSubscriptions.map(sub => (
))}
-
-
-
-
- >
- ) : null}
+
+ )}
-
+ {hasInactiveCoreSubscriptions && (
+
+
+ Past subscriptions
+
+
+
+
+ {inactiveCoreSubscriptions.map(sub => (
+
+ ))}
+
+
+
+ )}
+
+
+
+
+
+
- Features
+ Included in subscription
{activeFeatures.map(f => (
@@ -264,6 +283,43 @@ function InfoCards() {
)
}
+function Repurchase() {
+ const {_} = useLingui()
+ const control = useDialogControl()
+
+ return (
+
+
+ You're part of something bigger.
+
+
+
+
+
+ Subscribing to Bluesky+ helps ensure that our work to build an open,
+ secure, and user-first internet can continue.
+
+
+
+
+
+
+
+ )
+}
+
function Purchase() {
const t = useTheme()
const {_} = useLingui()
@@ -272,7 +328,7 @@ function Purchase() {
return (
<>
-
+
Building a better internet needs your support.
@@ -413,6 +469,7 @@ export function Subscription({
(isWeb && sub.platform === PlatformId.Web) ||
(isIOS && sub.platform === PlatformId.Ios) ||
(isAndroid && sub.platform === PlatformId.Android)
+ const showManage = canManage && sub.status !== 'expired'
const statusStyles = React.useMemo(() => {
return {
@@ -490,7 +547,7 @@ export function Subscription({
- {canManage && (
+ {showManage && (