From 0d41e046405e6b7094d5b702e6a490879876ba4b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 8 May 2024 16:43:01 +0800
Subject: [PATCH] Add enable Digest button

---
 .../queries/useGetUserPersonalization.tsx     |  1 -
 packages/web/pages/settings/account.tsx       | 53 ++++++++++++++++---
 packages/web/pages/settings/features/beta.tsx |  2 +-
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/packages/web/lib/networking/queries/useGetUserPersonalization.tsx b/packages/web/lib/networking/queries/useGetUserPersonalization.tsx
index 3d4fc0eae..bbcf1f958 100644
--- a/packages/web/lib/networking/queries/useGetUserPersonalization.tsx
+++ b/packages/web/lib/networking/queries/useGetUserPersonalization.tsx
@@ -80,7 +80,6 @@ export function useGetUserPersonalization(): UserPersonalizationResult {
       response.getUserPersonalization?.userPersonalization.digestConfig
     )
   ) {
-    console.log('invalid digest config')
     return {
       mutate,
       isLoading: false,
diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx
index 9115815a7..bf5640818 100644
--- a/packages/web/pages/settings/account.tsx
+++ b/packages/web/pages/settings/account.tsx
@@ -34,6 +34,7 @@ import {
 } from '../../lib/networking/queries/useGetUserPersonalization'
 import { updateDigestConfigMutation } from '../../lib/networking/mutations/updateDigestConfigMutation'
 import { scheduleDigest } from '../../lib/networking/mutations/scheduleDigest'
+import { optInFeature } from '../../lib/networking/mutations/optIntoFeatureMutation'
 
 const ACCOUNT_LIMIT = 50_000
 
@@ -524,6 +525,7 @@ const BetaFeaturesSection = (): JSX.Element => {
 }
 
 const DigestSection = (): JSX.Element => {
+  const { viewerData, isLoading, mutate } = useGetViewerQuery()
   const [channelState, setChannelState] = useState({
     push: false,
     email: false,
@@ -532,7 +534,7 @@ const DigestSection = (): JSX.Element => {
   const {
     userPersonalization,
     isLoading: isDigestConfigLoading,
-    mutate,
+    mutate: mutatePersonalization,
   } = useGetUserPersonalization()
 
   useEffect(() => {
@@ -545,6 +547,10 @@ const DigestSection = (): JSX.Element => {
     setChannelState({ ...initialState })
   }, [userPersonalization])
 
+  const hasDigest = useMemo(() => {
+    return viewerData?.me?.featureList?.some((f) => f.name === 'ai-digest')
+  }, [viewerData])
+
   const handleDigestCheckboxChange = useCallback(
     (name: DigestChannel, checked: boolean) => {
       ;(async () => {
@@ -588,11 +594,23 @@ const DigestSection = (): JSX.Element => {
           console.log('deleting daily digest job')
         }
 
-        mutate()
+        mutatePersonalization()
       })()
     },
     [channelState]
   )
+
+  const requestDigestAccess = useCallback(() => {
+    ;(async () => {
+      const result = await optInFeature({ name: 'ai-digest' })
+      if (!result) {
+        showErrorToast('Error enabling digest')
+        return
+      }
+      mutate()
+    })()
+  }, [])
+
   return (
     <VStack
       css={{
@@ -616,13 +634,23 @@ const DigestSection = (): JSX.Element => {
       >
         Omnivore Digest is a free daily digest of some of your best recent
         library items. Omnivore filters and ranks all the items recently added
-        them to your library, uses AI to summarize them, and creates a short
-        email for you to review, or a daily podcast you can listen to in our iOS
-        app. Note that if you sign up for Digest, your recent library items will
-        be processed by an AI service (Anthropic, or OpenAI). Your highlights,
+        to your library, uses AI to summarize them, and creates a short library
+        item, email, or a daily podcast you can listen to in our iOS app.
+      </StyledText>
+      <StyledText
+        style="footnote"
+        css={{
+          display: 'flex',
+          gap: '5px',
+          lineHeight: '22px',
+          mt: '0px',
+        }}
+      >
+        Note that if you sign up for Digest, your recent library items will be
+        processed by an AI service (Anthropic, or OpenAI). Your highlights,
         notes, and labels will not be sent to the AI service
       </StyledText>
-      {!isDigestConfigLoading && (
+      {hasDigest && (
         <>
           <StyledText
             style="footnote"
@@ -668,6 +696,17 @@ const DigestSection = (): JSX.Element => {
           </StyledText>
         </>
       )}
+      {!hasDigest && (
+        <Button
+          style="ctaDarkYellow"
+          onClick={(event) => {
+            requestDigestAccess()
+            event.preventDefault()
+          }}
+        >
+          Enable Digest
+        </Button>
+      )}
     </VStack>
   )
 }
diff --git a/packages/web/pages/settings/features/beta.tsx b/packages/web/pages/settings/features/beta.tsx
index 720a48c2d..c88fec98a 100644
--- a/packages/web/pages/settings/features/beta.tsx
+++ b/packages/web/pages/settings/features/beta.tsx
@@ -18,7 +18,7 @@ const StyledLabel = styled('label', {
   marginBottom: '5px',
 })
 
-export default function Account(): JSX.Element {
+export default function BetaFeatures(): JSX.Element {
   const { viewerData, isLoading, mutate } = useGetViewerQuery()
   const [pageLoading, setPageLoading] = useState(false)