subscription dialog

src/components/dialogs/SubscriptionsDialog.tsx

@@ -0,0 +1,269 @@
+import React from 'react'
+import {Linking, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useCreateCheckout} from '#/state/purchases/subscriptions/useCreateCheckout'
+import {useSession} from '#/state/session'
+import * as Toast from '#/view/com/util/Toast'
+import {atoms as a, tokens, useBreakpoints, useTheme, web} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import * as Toggle from '#/components/forms/Toggle'
+import {GradientFill} from '#/components/GradientFill'
+import {Full as BlueskyPlusLogo} from '#/components/icons/BlueskyPlus'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
+import {InlineLinkText} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+export function SubscriptionsDialog({
+  control,
+}: {
+  control: Dialog.DialogControlProps
+}) {
+  return (
+    <Dialog.Outer control={control}>
+      <DialogInner />
+    </Dialog.Outer>
+  )
+}
+
+function DialogInner() {
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+  const {currentAccount} = useSession()
+  const t = useTheme()
+  const [plan, setPlan] = React.useState<'monthly' | 'annual'>('monthly')
+
+  const {mutateAsync: createCheckout, isPending} = useCreateCheckout()
+
+  const onPressSubscribe = async () => {
+    try {
+      if (!currentAccount) return
+      const data = await createCheckout({
+        did: currentAccount.did,
+        email: currentAccount.email!,
+        price:
+          plan === 'monthly'
+            ? 'price_1QLsNLAwTlpRxHkAhuUwbnlL'
+            : 'price_1QLsOjAwTlpRxHkAcrV8DL2P',
+      })
+
+      if (!data?.checkoutUrl) {
+        throw new Error('No checkout URL')
+      }
+
+      Linking.openURL(data.checkoutUrl)
+    } catch (e: any) {
+      Toast.show(_(msg`Could not take you to checkout`), 'xmark')
+    }
+  }
+
+  return (
+    <Dialog.Inner label={_(msg`Bluesky Plus`)} style={[web({maxWidth: 1000})]}>
+      <View style={[a.flex_1, a.gap_xl, gtMobile && a.flex_row]}>
+        <View
+          style={[
+            a.flex_1,
+            a.gap_md,
+            a.rounded_xs,
+            a.relative,
+            a.overflow_hidden,
+          ]}>
+          <GradientFill gradient={tokens.gradients.nordic} rotate="270deg" />
+          <View style={[a.px_xl, a.py_4xl, a.gap_md]}>
+            <MarketingBlurb />
+          </View>
+        </View>
+        <View style={[a.flex_1, a.justify_end, a.gap_md]}>
+          <Text style={[a.font_bold, a.text_3xl]}>
+            <Trans>Early bird discount!</Trans>
+          </Text>
+          <Text style={[a.text_lg, a.leading_snug]}>
+            <Trans>Support Bluesky now and get a 25% discount for a year</Trans>
+          </Text>
+          <Toggle.Group
+            type="radio"
+            label={_(msg`Choose plan`)}
+            values={[plan]}
+            onChange={values => setPlan(values[0] as 'monthly' | 'annual')}
+            style={[a.w_full, a.gap_md, a.my_xl]}>
+            <Toggle.Item name="monthly" label={_(msg`Monthly plan`)}>
+              {({selected}) => (
+                <View
+                  style={[
+                    a.w_full,
+                    a.p_sm,
+                    a.rounded_sm,
+                    a.flex_row,
+                    a.gap_md,
+                    a.border,
+                    selected
+                      ? {borderColor: t.palette.primary_500}
+                      : t.atoms.border_contrast_medium,
+                  ]}>
+                  <Toggle.Radio />
+                  <View style={[a.flex_1, a.gap_xs]}>
+                    <View
+                      style={[
+                        a.flex_row,
+                        a.flex_wrap,
+                        a.justify_between,
+                        a.gap_sm,
+                      ]}>
+                      <Text style={[a.text_lg, a.leading_normal, a.font_bold]}>
+                        <Trans>Monthly plan</Trans>
+                      </Text>
+                      <Text style={[a.text_lg, a.leading_normal, a.font_bold]}>
+                        <Trans>$6/month</Trans>
+                      </Text>
+                    </View>
+                    <Text
+                      style={[
+                        a.text_sm,
+                        a.leading_normal,
+                        t.atoms.text_contrast_medium,
+                      ]}>
+                      <Trans>
+                        Billed monthly, cancel anytime. $8/month after 12 months
+                      </Trans>
+                    </Text>
+                  </View>
+                </View>
+              )}
+            </Toggle.Item>
+            <Toggle.Item name="annual" label={_(msg`Annual plan`)}>
+              {({selected}) => (
+                <View
+                  style={[
+                    a.w_full,
+                    a.p_sm,
+                    a.rounded_sm,
+                    a.flex_row,
+                    a.gap_md,
+                    a.border,
+                    selected
+                      ? {borderColor: t.palette.primary_500}
+                      : t.atoms.border_contrast_medium,
+                  ]}>
+                  <Toggle.Radio />
+                  <View style={[a.flex_1, a.gap_xs]}>
+                    <View
+                      style={[
+                        a.flex_row,
+                        a.flex_wrap,
+                        a.justify_between,
+                        a.gap_sm,
+                      ]}>
+                      <Text style={[a.text_lg, a.leading_normal, a.font_bold]}>
+                        <Trans>Annual plan</Trans>
+                      </Text>
+                      <Text style={[a.text_lg, a.leading_normal, a.font_bold]}>
+                        <Trans>$60/year</Trans>
+                      </Text>
+                    </View>
+                    <Text
+                      style={[
+                        a.text_sm,
+                        a.leading_normal,
+                        t.atoms.text_contrast_medium,
+                      ]}>
+                      <Trans>Billed annually, renews at $80/year</Trans>
+                    </Text>
+                  </View>
+                </View>
+              )}
+            </Toggle.Item>
+          </Toggle.Group>
+          <Button
+            label={_(msg`Subscribe`)}
+            variant="solid"
+            color="primary"
+            size="large"
+            onPress={onPressSubscribe}
+            disabled={isPending}>
+            <ButtonText>
+              <Trans>Subscribe</Trans>
+            </ButtonText>
+            <ButtonIcon icon={isPending ? Loader : ChevronRightIcon} />
+          </Button>
+          <Text>
+            <InlineLinkText to="#" label="TODO REPLACE">
+              Terms and Conditions
+            </InlineLinkText>{' '}
+            &middot;{' '}
+            <InlineLinkText to="#" label="TODO REPLACE">
+              Privacy Policy
+            </InlineLinkText>{' '}
+            &middot;{' '}
+            <InlineLinkText to="#" label="TODO REPLACE">
+              EULA
+            </InlineLinkText>
+          </Text>
+        </View>
+      </View>
+      <Dialog.Close />
+    </Dialog.Inner>
+  )
+}
+
+function MarketingBlurb() {
+  return (
+    <>
+      <BlueskyPlusLogo width={200} fill="white" style={[a.mt_5xl]} />
+
+      <Text style={[a.text_lg, a.leading_normal, {color: 'white'}]}>
+        <Trans>
+          Here's the thing: we don't have any premium features yet because all
+          our servers are on fire. Support us now so we can put the fires out
+          and get working on those features!
+        </Trans>
+      </Text>
+
+      <Text
+        style={[a.text_lg, a.leading_normal, a.font_bold, {color: 'white'}]}>
+        <Trans>What you'll get now:</Trans>
+      </Text>
+      <View role="list" style={[a.gap_xs]}>
+        <Text
+          role="listitem"
+          style={[a.text_lg, a.leading_normal, {color: 'white'}]}>
+          {' '}
+          &middot; <Trans>A supporter badge on your profile</Trans>
+        </Text>
+        <Text
+          role="listitem"
+          style={[a.text_lg, a.leading_normal, {color: 'white'}]}>
+          {' '}
+          &middot; <Trans>A warm fuzzy feeling knowing you helped us out</Trans>
+        </Text>
+      </View>
+
+      <Text
+        style={[a.text_lg, a.leading_normal, a.font_bold, {color: 'white'}]}>
+        <Trans>What you'll get soon: </Trans>
+      </Text>
+      <View role="list" style={[a.gap_xs]}>
+        <Text
+          role="listitem"
+          style={[a.text_lg, a.leading_normal, {color: 'white'}]}>
+          {' '}
+          &middot; <Trans>Custom profile colors</Trans>
+        </Text>
+        <Text
+          role="listitem"
+          style={[a.text_lg, a.leading_normal, {color: 'white'}]}>
+          {' '}
+          &middot; <Trans>Longer and higher quality videos</Trans>
+        </Text>
+        <Text
+          role="listitem"
+          style={[a.text_lg, a.leading_normal, {color: 'white'}]}>
+          {' '}
+          &middot; <Trans>Custom app icons</Trans>
+        </Text>
+      </View>
+    </>
+  )
+}

src/components/forms/Toggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, View, ViewStyle} from 'react-native'
+import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
 import Animated, {LinearTransition} from 'react-native-reanimated'
 
 import {HITSLOP_10} from '#/lib/constants'
@@ -57,6 +57,7 @@ export type GroupProps = React.PropsWithChildren<{
   disabled?: boolean
   onChange: (value: string[]) => void
   label: string
+  style?: StyleProp<ViewStyle>
 }>
 
 export type ItemProps = ViewStyleProp & {
@@ -82,6 +83,7 @@ export function Group({
   type = 'checkbox',
   maxSelections,
   label,
+  style,
 }: GroupProps) {
   const groupRole = type === 'radio' ? 'radiogroup' : undefined
   const values = type === 'radio' ? providedValues.slice(0, 1) : providedValues
@@ -134,7 +136,7 @@ export function Group({
   return (
     <GroupContext.Provider value={context}>
       <View
-        style={[a.w_full]}
+        style={[a.w_full, style]}
         role={groupRole}
         {...(groupRole === 'radiogroup'
           ? {

src/components/icons/BlueskyPlus.tsx

@@ -8,6 +8,8 @@ import Svg, {
   Stop,
   SvgProps,
 } from 'react-native-svg'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {useTheme} from '#/alf'
 
@@ -24,15 +26,20 @@ export function Full(props: Props) {
   const {fill, ...rest} = props
   const gradient = fill === 'nordic'
   const styles = StyleSheet.flatten(props.style)
-  const _fill = gradient ? 'url(#nordic)' : fill || styles?.color || t.palette.primary_500
+  const _fill = gradient
+    ? 'url(#nordic)'
+    : fill || styles?.color || t.palette.primary_500
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 100)
   const ratio = 90 / 448
+  const {_} = useLingui()
 
   return (
     <Svg
       fill="none"
       viewBox="0 0 448 90"
+      accessibilityLabel={_(msg`Bluesky Plus`)}
+      accessibilityHint=""
       {...rest}
       style={[styles, {width: size, height: size * ratio}]}>
       {gradient && <Gradients />}
@@ -54,15 +61,20 @@ export function Logotype(props: Props) {
   const {fill, ...rest} = props
   const gradient = fill === 'nordic'
   const styles = StyleSheet.flatten(props.style)
-  const _fill = gradient ? 'url(#nordic)' : fill || styles?.color || t.palette.primary_500
+  const _fill = gradient
+    ? 'url(#nordic)'
+    : fill || styles?.color || t.palette.primary_500
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 100)
   const ratio = 78 / 330
+  const {_} = useLingui()
 
   return (
     <Svg
       fill="none"
       viewBox="0 0 330 78"
+      accessibilityLabel={_(msg`Bluesky Plus`)}
+      accessibilityHint=""
       {...rest}
       style={[styles, {width: size, height: size * ratio}]}>
       {gradient && <Gradients />}

src/screens/Subscriptions/index.tsx

@@ -1,24 +1,20 @@
 import React from 'react'
-import {View, Linking} from 'react-native'
+import {View} from 'react-native'
-import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
-// import {isAndroid, isIOS} from '#/platform/detection'
 import {CommonNavigatorParams} from '#/lib/routes/types'
+import {useEntitlements} from '#/state/purchases/subscriptions/useEntitlements'
 import {CenteredView} from '#/view/com/util/Views'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {SubscriptionsDialog} from '#/components/dialogs/SubscriptionsDialog'
+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 {Button, ButtonText, ButtonIcon} from '#/components/Button'
 import {Text} from '#/components/Typography'
-// import {Divider} from '#/components/Divider'
-import {CheckThick_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
-import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
-import {Logotype} from '#/components/icons/BlueskyPlus'
-import {useEntitlements} from '#/state/purchases/subscriptions/useEntitlements'
-import {useCreateCheckout} from '#/state/purchases/subscriptions/useCreateCheckout'
-import {useSession} from '#/state/session'
 
 export type ScreenProps = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -26,54 +22,17 @@ export type ScreenProps = NativeStackScreenProps<
 >
 
 export function Subscriptions(_props: ScreenProps) {
-  const t = useTheme()
   const {_} = useLingui()
-  const {currentAccount} = useSession()
+  const {data: entitlements, isLoading: isEntitlementsLoading} =
-  const {data: entitlements, isLoading: isEntitlementsLoading} = useEntitlements()
+    useEntitlements()
   const isSubscribed = entitlements?.some(e => e.id === 'core')
-
+  const control = useDialogControl()
-  const {mutateAsync: createCheckout} = useCreateCheckout()
-  const isPending = false
-
-  const onPressMonthly = async () => {
-    try {
-      const data = await createCheckout({
-        did: currentAccount!.did,
-        email: currentAccount!.email!,
-        price: 'price_1QLsNLAwTlpRxHkAhuUwbnlL',
-      })
-
-      if (!data?.checkoutUrl) {
-        throw new Error('No checkout URL')
-      }
-
-      Linking.openURL(data.checkoutUrl)
-    } catch (e: any) {
-    }
-  }
-  const onPressAnnual = async () => {
-    try {
-      const data = await createCheckout({
-        did: currentAccount!.did,
-        email: currentAccount!.email!,
-        price: 'price_1QLsOjAwTlpRxHkAcrV8DL2P',
-      })
-
-      if (!data?.checkoutUrl) {
-        throw new Error('No checkout URL')
-      }
-
-      Linking.openURL(data.checkoutUrl)
-    } catch (e: any) {
-    }
-  }
-
 
   return (
     <Layout.Screen>
       <CenteredView sideBorders={true} style={[a.util_screen_outer]}>
         <View style={[a.px_xl, a.py_xl, a.gap_lg]}>
-          <Logotype width={200} fill='nordic' />
+          <Logotype width={200} fill="nordic" />
 
           <View style={[a.pt_xl]}>
             {isEntitlementsLoading ? (
@@ -85,28 +44,18 @@ export function Subscriptions(_props: ScreenProps) {
                     <Text>You're subscribed!</Text>
                   </View>
                 ) : (
-                  <View style={[a.flex_row, a.gap_md]}>
+                  <>
                     <Button
                       label={_('Subscribe')}
-                      onPress={onPressMonthly}
+                      onPress={() => control.open()}
-                      size='large'
+                      size="large"
-                      variant='solid'
+                      variant="solid"
-                      color='primary'
+                      color="primary">
-                    >
+                      <ButtonText>Subscribe</ButtonText>
-                      <ButtonText>Subscribe ($6/month)</ButtonText>
+                      <ButtonIcon icon={Plus} />
-                      <ButtonIcon icon={isPending ? Loader : Plus} />
                     </Button>
-                    <Button
+                    <SubscriptionsDialog control={control} />
-                      label={_('Subscribe')}
+                  </>
-                      onPress={onPressAnnual}
-                      size='large'
-                      variant='solid'
-                      color='secondary'
-                    >
-                      <ButtonText>Subscribe ($60/year)</ButtonText>
-                      <ButtonIcon icon={isPending ? Loader : Plus} />
-                    </Button>
-                  </View>
                 )}
               </>
             )}

src/state/purchases/subscriptions/useCreateCheckout.ts

@@ -1,23 +1,21 @@
 import {useMutation} from '@tanstack/react-query'
 
-import {IS_DEV} from '#/env'
 import {api} from '#/state/purchases/subscriptions/api'
+import {IS_DEV} from '#/env'
 
 export function useCreateCheckout() {
   return useMutation({
-    async mutationFn(props: {
+    async mutationFn(props: {price: string; did: string; email: string}) {
-      price: string,
-      did: string,
-      email: string,
-    }) {
       const {data, error} = await api<{
         checkoutUrl: string
       }>('/checkout/create', {
         method: 'POST',
         json: {
           ...props,
-          redirectUrl: IS_DEV ? `http://localhost:19006/subscriptions` : `https://bsky.app/subscriptions`,
+          redirectUrl: IS_DEV
-        }
+            ? `http://localhost:19006/subscriptions`
+            : `https://bsky.app/subscriptions`,
+        },
       }).json()
 
       if (error) {

src/view/shell/desktop/RightNav.tsx

@@ -6,22 +6,26 @@ import {useLingui} from '@lingui/react'
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
+import {useEntitlements} from '#/state/purchases/subscriptions/useEntitlements'
 import {useSession} from '#/state/session'
 import {DesktopFeeds} from '#/view/shell/desktop/Feeds'
 import {DesktopSearch} from '#/view/shell/desktop/Search'
-import {atoms as a, tokens,useTheme, web} from '#/alf'
+import {atoms as a, tokens, useTheme, web} from '#/alf'
+import {Button} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {SubscriptionsDialog} from '#/components/dialogs/SubscriptionsDialog'
 import {GradientFill} from '#/components/GradientFill'
 import {Logotype} from '#/components/icons/BlueskyPlus'
-import {InlineLinkText, Link} from '#/components/Link'
+import {InlineLinkText} from '#/components/Link'
 import {ProgressGuideList} from '#/components/ProgressGuide/List'
 import {Text} from '#/components/Typography'
-import {useEntitlements} from '#/state/purchases/subscriptions/useEntitlements'
 
 export function DesktopRightNav({routeName}: {routeName: string}) {
   const t = useTheme()
   const {_} = useLingui()
   const {hasSession, currentAccount} = useSession()
-  const {data: entitlements, isLoading: isEntitlementsLoading} = useEntitlements()
+  const subscriptionsDialogControl = useDialogControl()
+  const {data: entitlements} = useEntitlements()
   const isSubscribed = entitlements?.some(e => e.id === 'core')
 
   const kawaii = useKawaiiMode()
@@ -66,11 +70,14 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
         {/* TODO NUX this */}
         {!isSubscribed && (
           <View style={[a.pb_lg]}>
-            <Link
+            <Button
-              to="/subscriptions"
+              onPress={() => subscriptionsDialogControl.open()}
               label={_(msg`Subscribe to Bluesky Plus`)}
               style={[a.p_lg, a.overflow_hidden, a.rounded_md]}>
-              <GradientFill gradient={tokens.gradients.nordic} rotate="270deg" />
+              <GradientFill
+                gradient={tokens.gradients.nordic}
+                rotate="270deg"
+              />
               <View
                 style={[
                   a.absolute,
@@ -81,7 +88,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               />
 
               <View style={[a.flex_1, a.relative, a.z_10]}>
-                <Logotype width={100} fill='white' />
+                <Logotype width={100} fill="white" />
 
                 <View style={[a.pt_xs]}>
                   <Text style={[a.text_sm, a.leading_tight, {color: 'white'}]}>
@@ -91,7 +98,8 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
                   </Text>
                 </View>
               </View>
-            </Link>
+            </Button>
+            <SubscriptionsDialog control={subscriptionsDialogControl} />
           </View>
         )}