From 67eaf1baa776fab8745734f98afa335a221ca56c Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Mon, 28 Oct 2024 14:35:41 -0500
Subject: [PATCH] Add route and basic UI

---
 bskyweb/cmd/bskyweb/server.go       |  3 ++
 src/Navigation.tsx                  |  6 +++
 src/lib/routes/types.ts             |  1 +
 src/routes.ts                       |  1 +
 src/screens/Subscriptions/index.tsx | 77 +++++++++++++++++++++++++++++
 5 files changed, 88 insertions(+)
 create mode 100644 src/screens/Subscriptions/index.tsx

diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go
index d0d6b4c494..730c57595f 100644
--- a/bskyweb/cmd/bskyweb/server.go
+++ b/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)
 
diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 436f2488a5..f2e559456b 100644
--- a/src/Navigation.tsx
+++ b/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}}
+      />
     </>
   )
 }
diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts
index e699a47d33..47f981062d 100644
--- a/src/lib/routes/types.ts
+++ b/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 & {
diff --git a/src/routes.ts b/src/routes.ts
index 58e9a3abc8..fe2486c5a6 100644
--- a/src/routes.ts
+++ b/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',
 })
diff --git a/src/screens/Subscriptions/index.tsx b/src/screens/Subscriptions/index.tsx
new file mode 100644
index 0000000000..e71e6726df
--- /dev/null
+++ b/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>
+  )
+}