Add route and basic UI

bskyweb/cmd/bskyweb/server.go

@@ -294,6 +294,9 @@ func serve(cctx *cli.Context) error {
 	e.GET("/starter-pack-short/:code", server.WebGeneric)
 	e.GET("/start/:handleOrDID/:rkey", server.WebStarterPack)
 
+	// subscription
+	e.GET("/subscriptions", server.WebGeneric)
+
 	// ipcc
 	e.GET("/ipcc", server.WebIpCC)
 

src/Navigation.tsx

@@ -92,6 +92,7 @@ import {
   StarterPackScreenShort,
 } from '#/screens/StarterPack/StarterPackScreen'
 import {Wizard} from '#/screens/StarterPack/Wizard'
+import {Subscriptions} from '#/screens/Subscriptions'
 import {useTheme} from '#/alf'
 import {router} from '#/routes'
 import {Referrer} from '../modules/expo-bluesky-swiss-army'
@@ -407,6 +408,11 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => Wizard}
         options={{title: title(msg`Edit your starter pack`), requireAuth: true}}
       />
+      <Stack.Screen
+        name="Subscriptions"
+        getComponent={() => Subscriptions}
+        options={{title: title(msg`Subscriptions`), requireAuth: true}}
+      />
     </>
   )
 }

src/lib/routes/types.ts

@@ -55,6 +55,7 @@ export type CommonNavigatorParams = {
   StarterPackShort: {code: string}
   StarterPackWizard: undefined
   StarterPackEdit: {rkey?: string}
+  Subscriptions: undefined
 }
 
 export type BottomTabNavigatorParams = CommonNavigatorParams & {

src/routes.ts

@@ -62,4 +62,5 @@ export const router = new Router({
   StarterPack: '/starter-pack/:name/:rkey',
   StarterPackShort: '/starter-pack-short/:code',
   StarterPackWizard: '/starter-pack/create',
+  Subscriptions: '/subscriptions',
 })

src/screens/Subscriptions/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+
+import {CommonNavigatorParams} from '#/lib/routes/types'
+import {
+  useMainSubscriptions,
+  usePurchaseSubscription,
+} from '#/state/purchases/subscriptions'
+import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {CenteredView} from '#/view/com/util/Views'
+import {atoms as a} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Layout from '#/components/Layout'
+import {Text} from '#/components/Typography'
+
+export type ScreenProps = NativeStackScreenProps<
+  CommonNavigatorParams,
+  'Subscriptions'
+>
+
+export function Subscriptions(_props: ScreenProps) {
+  const {_} = useLingui()
+
+  const {data: subscriptions} = useMainSubscriptions()
+  const {mutateAsync: purchaseSubscription} = usePurchaseSubscription()
+
+  return (
+    <Layout.Screen>
+      <CenteredView sideBorders={true}>
+        <ViewHeader title={_(msg`Liked By`)} />
+        <View style={[a.px_xl, a.py_xl, a.gap_lg]}>
+          <Text style={[a.text_2xl]}>Subs</Text>
+
+          <View style={[a.gap_sm]}>
+            {subscriptions?.monthly.map(s => (
+              <View key={s.id}>
+                <Button
+                  label={s.id}
+                  size="small"
+                  variant="solid"
+                  color={s.status === 'active' ? 'primary' : 'secondary'}
+                  onPress={() => {
+                    purchaseSubscription(s.product)
+                  }}>
+                  <ButtonText>
+                    {s.id} ({s.price.formatted})
+                  </ButtonText>
+                </Button>
+              </View>
+            ))}
+          </View>
+          <View style={[a.gap_sm]}>
+            {subscriptions?.annual.map(s => (
+              <View key={s.id}>
+                <Button
+                  label={s.id}
+                  size="small"
+                  variant="solid"
+                  color={s.status === 'active' ? 'primary' : 'secondary'}
+                  onPress={() => {
+                    purchaseSubscription(s.product)
+                  }}>
+                  <ButtonText>
+                    {s.id} ({s.price.formatted})
+                  </ButtonText>
+                </Button>
+              </View>
+            ))}
+          </View>
+        </View>
+      </CenteredView>
+    </Layout.Screen>
+  )
+}