Merge pull request #3729 from omnivore-app/fix/notion

remove Auto Sync switch from notion integration page

packages/api/src/services/features.ts

@@ -13,6 +13,7 @@ export enum FeatureName {
   AISummaries = 'ai-summaries',
   YouTubeTranscripts = 'youtube-transcripts',
   UltraRealisticVoice = 'ultra-realistic-voice',
+  Notion = 'notion',
 }
 
 export const getFeatureName = (name: string): FeatureName | undefined => {
@@ -36,8 +37,11 @@ export const optInFeature = async (
         uid,
         MAX_YOUTUBE_TRANSCRIPT_USERS
       )
+    case FeatureName.Notion:
+      return optInLimitedFeature(FeatureName.Notion, uid, 1)
+    default:
+      return undefined
   }
-  return undefined
 }
 
 const optInLimitedFeature = async (

packages/web/lib/featureFlag.ts

@@ -1,11 +1,5 @@
 import { UserBasicData } from './networking/queries/useGetViewerQuery'
 
-const VIP_USERS = ['jacksonh', 'satindar', 'hongbo', 'nat']
-
-export const isVipUser = (user: UserBasicData): boolean => {
-  return VIP_USERS.includes(user.profile.username)
-}
-
 export const userHasFeature = (
   user: UserBasicData | undefined,
   feature: string

packages/web/pages/settings/features/beta.tsx

@@ -1,29 +1,15 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Spinner } from 'phosphor-react'
+import { useCallback, useMemo, useState } from 'react'
 import { Toaster } from 'react-hot-toast'
 import { Button } from '../../../components/elements/Button'
-import {
-  Box,
-  HStack,
-  SpanBox,
-  VStack,
-} from '../../../components/elements/LayoutPrimitives'
+import { HStack, VStack } from '../../../components/elements/LayoutPrimitives'
 import { StyledText } from '../../../components/elements/StyledText'
 import { SettingsLayout } from '../../../components/templates/SettingsLayout'
-import { styled, theme } from '../../../components/tokens/stitches.config'
-import { updateEmailMutation } from '../../../lib/networking/mutations/updateEmailMutation'
-import { updateUserMutation } from '../../../lib/networking/mutations/updateUserMutation'
-import { updateUserProfileMutation } from '../../../lib/networking/mutations/updateUserProfileMutation'
-import { useGetLibraryItemsQuery } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { styled } from '../../../components/tokens/stitches.config'
+import { optInFeature } from '../../../lib/networking/mutations/optIntoFeatureMutation'
 import { useGetViewerQuery } from '../../../lib/networking/queries/useGetViewerQuery'
-import { useValidateUsernameQuery } from '../../../lib/networking/queries/useValidateUsernameQuery'
 import { applyStoredTheme } from '../../../lib/themeUpdater'
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
-import { ConfirmationModal } from '../../../components/patterns/ConfirmationModal'
-import { ProgressBar } from '../../../components/elements/ProgressBar'
-import { emptyTrashMutation } from '../../../lib/networking/mutations/emptyTrashMutation'
-import { ProgressIndicator } from '@radix-ui/react-progress'
-import { Spinner } from 'phosphor-react'
-import { optInFeature } from '../../../lib/networking/mutations/optIntoFeatureMutation'
 
 const ACCOUNT_LIMIT = 50_000
 
@@ -62,6 +48,10 @@ export default function Account(): JSX.Element {
     )
   }, [viewerData])
 
+  const hasNotion = useMemo(() => {
+    return (viewerData?.me?.features.indexOf('notion') ?? -1) !== -1
+  }, [viewerData])
+
   applyStoredTheme()
 
   return (
@@ -121,7 +111,8 @@ export default function Account(): JSX.Element {
                   )
                 })}
 
-                {!hasYouTube /* || !hasAISummaries || !hasDigest */ && (
+                {(!hasYouTube ||
+                  !hasNotion) /* || !hasAISummaries || !hasDigest */ && (
                   <StyledLabel css={{ mt: '25px' }}>
                     Available beta features
                   </StyledLabel>
@@ -154,6 +145,31 @@ export default function Account(): JSX.Element {
                     </VStack>
                   )}
 
+                  {!hasNotion && (
+                    <VStack
+                      alignment="start"
+                      distribution="start"
+                      css={{ width: '100%' }}
+                    >
+                      <StyledText
+                        style="footnote"
+                        css={{ display: 'flex', gap: '5px' }}
+                      >
+                        - Notion integration: Export your items and highlights
+                        to Notion.
+                      </StyledText>
+                      <Button
+                        style="ctaDarkYellow"
+                        onClick={(event) => {
+                          requestFeatureAccess('notion')
+                          event.preventDefault()
+                        }}
+                      >
+                        Request feature
+                      </Button>
+                    </VStack>
+                  )}
+
                   {/* <VStack
                     alignment="start"
                     distribution="start"

packages/web/pages/settings/integrations.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../components/elements/LayoutPrimitives'
 import { SettingsLayout } from '../../components/templates/SettingsLayout'
 import { fetchEndpoint } from '../../lib/appConfig'
+import { userHasFeature } from '../../lib/featureFlag'
 import { deleteIntegrationMutation } from '../../lib/networking/mutations/deleteIntegrationMutation'
 import { importFromIntegrationMutation } from '../../lib/networking/mutations/importFromIntegrationMutation'
 import {
@@ -27,8 +28,8 @@ import {
   Integration,
   useGetIntegrationsQuery,
 } from '../../lib/networking/queries/useGetIntegrationsQuery'
+import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { useGetWebhooksQuery } from '../../lib/networking/queries/useGetWebhooksQuery'
-import { applyStoredTheme } from '../../lib/themeUpdater'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 // Styles
 const Header = styled(Box, {
@@ -74,7 +75,8 @@ type integrationsCard = {
   }
 }
 export default function Integrations(): JSX.Element {
-  applyStoredTheme()
+  const { viewerData } = useGetViewerQuery()
+
   const { integrations, revalidate } = useGetIntegrationsQuery()
   const { webhooks } = useGetWebhooksQuery()
 
@@ -202,7 +204,7 @@ export default function Integrations(): JSX.Element {
   }, [router])
 
   useEffect(() => {
-    setIntegrationsArray([
+    const integrationsArray = [
       {
         icon: '/static/icons/logseq.svg',
         title: 'Logseq',
@@ -267,22 +269,6 @@ export default function Integrations(): JSX.Element {
           ],
         },
       },
-      {
-        icon: '/static/icons/notion.png',
-        title: 'Notion',
-        subText:
-          'Notion is an all-in-one workspace. Use our Notion integration to sync your Omnivore items to Notion.',
-        button: {
-          text: isConnected('NOTION') ? 'Settings' : 'Connect',
-          icon: <Link size={16} weight={'bold'} />,
-          style: isConnected('NOTION') ? 'ctaWhite' : 'ctaDarkYellow',
-          action: () => {
-            isConnected('NOTION')
-              ? router.push('/settings/integrations/notion')
-              : redirectToIntegration('NOTION')
-          },
-        },
-      },
       {
         icon: '/static/icons/webhooks.svg',
         title: 'Webhooks',
@@ -310,7 +296,27 @@ export default function Integrations(): JSX.Element {
           },
         },
       },
-    ])
+    ]
+
+    userHasFeature(viewerData?.me, 'notion') &&
+      integrationsArray.push({
+        icon: '/static/icons/notion.png',
+        title: 'Notion',
+        subText:
+          'Notion is an all-in-one workspace. Use our Notion integration to sync your Omnivore items to Notion.',
+        button: {
+          text: isConnected('NOTION') ? 'Settings' : 'Connect',
+          icon: <Link size={16} weight={'bold'} />,
+          style: isConnected('NOTION') ? 'ctaWhite' : 'ctaDarkYellow',
+          action: () => {
+            isConnected('NOTION')
+              ? router.push('/settings/integrations/notion')
+              : redirectToIntegration('NOTION')
+          },
+        },
+      })
+
+    setIntegrationsArray(integrationsArray)
   }, [pocketConnected, readwiseConnected, webhooks, integrations])
 
   return (

packages/web/pages/settings/integrations/notion.tsx

@@ -7,7 +7,6 @@ import {
   message,
   Space,
   Spin,
-  Switch,
 } from 'antd'
 import 'antd/dist/antd.compact.css'
 import { CheckboxValueType } from 'antd/lib/checkbox/Group'
@@ -16,7 +15,6 @@ import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState } from 'react'
 import { HStack, VStack } from '../../../components/elements/LayoutPrimitives'
 import { PageMetaData } from '../../../components/patterns/PageMetaData'
-import { Beta } from '../../../components/templates/Beta'
 import { Header } from '../../../components/templates/settings/SettingsTable'
 import { SettingsLayout } from '../../../components/templates/SettingsLayout'
 import { deleteIntegrationMutation } from '../../../lib/networking/mutations/deleteIntegrationMutation'
@@ -34,7 +32,6 @@ import { showSuccessToast } from '../../../lib/toastHelpers'
 type FieldType = {
   parentPageId?: string
   parentDatabaseId?: string
-  enabled: boolean
   properties?: string[]
 }
 
@@ -52,7 +49,6 @@ export default function Notion(): JSX.Element {
     form.setFieldsValue({
       parentPageId: notion.settings?.parentPageId,
       parentDatabaseId: notion.settings?.parentDatabaseId,
-      enabled: notion.enabled,
       properties: notion.settings?.properties,
     })
   }, [form, notion])
@@ -71,7 +67,7 @@ export default function Notion(): JSX.Element {
       name: notion.name,
       type: notion.type,
       token: notion.token,
-      enabled: values.enabled,
+      enabled: true,
       settings: values,
     })
   }
@@ -159,7 +155,6 @@ export default function Notion(): JSX.Element {
               height={75}
             />
             <Header>Notion integration settings</Header>
-            <Beta />
           </HStack>
 
           <div style={{ width: '100%', marginTop: '40px' }}>
@@ -194,15 +189,6 @@ export default function Notion(): JSX.Element {
                   <Input disabled />
                 </Form.Item>
 
-                <Form.Item<FieldType>
-                  label="Automatic Sync"
-                  name="enabled"
-                  valuePropName="checked"
-                  help="Once connected all new items will be exported to Notion"
-                >
-                  <Switch />
-                </Form.Item>
-
                 <Form.Item<FieldType>
                   label="Properties to Export"
                   name="properties"