refactor: native feature management (#2350)

packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx

@@ -9,6 +9,7 @@ import {
   TagMutator,
   TagPreferences,
   VectorIconNameOrEmoji,
+  PrefDefaults,
 } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useEffect, useState } from 'react'
@@ -16,7 +17,6 @@ import Icon from '@/Components/Icon/Icon'
 import Menu from '@/Components/Menu/Menu'
 import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
 import { DisplayOptionsMenuProps } from './DisplayOptionsMenuProps'
-import { PrefDefaults } from '@/Constants/PrefDefaults'
 import NewNotePreferences from './NewNotePreferences'
 import { PreferenceMode } from './PreferenceMode'
 import { classNames } from '@standardnotes/utils'
@@ -93,7 +93,7 @@ const DisplayOptionsMenu: FunctionComponent<DisplayOptionsMenuProps> = ({
     : selectedTag.preferences
   const [currentMode, setCurrentMode] = useState<PreferenceMode>(selectedTagPreferences ? 'tag' : 'global')
   const [preferences, setPreferences] = useState<TagPreferences>({})
-  const hasSubscription = application.features.hasFirstPartySubscription()
+  const hasSubscription = application.controllers.subscriptionController.hasFirstPartyOnlineOrOfflineSubscription
   const controlsDisabled = currentMode === 'tag' && !hasSubscription
   const isDailyEntry = selectedTagPreferences?.entryMode === 'daily'
 

packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx

@@ -7,10 +7,11 @@ import {
   isSmartView,
   isSystemView,
   SystemViewId,
+  PrefDefaults,
+  FeatureStatus,
 } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
-import { PrefDefaults } from '@/Constants/PrefDefaults'
 import Dropdown from '@/Components/Dropdown/Dropdown'
 import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
 import { WebApplication } from '@/Application/WebApplication'
@@ -27,6 +28,8 @@ import { EditorOption, getDropdownItemsForAllEditors } from '@/Utils/DropdownIte
 import { classNames } from '@standardnotes/utils'
 import { NoteTitleFormatOptions } from './NoteTitleFormatOptions'
 
+import { usePremiumModal } from '@/Hooks/usePremiumModal'
+
 const PrefChangeDebounceTimeInMs = 25
 
 const HelpPageUrl = 'https://day.js.org/docs/en/display/format#list-of-all-available-formats'
@@ -46,6 +49,8 @@ const NewNotePreferences: FunctionComponent<Props> = ({
   changePreferencesCallback,
   disabled,
 }: Props) => {
+  const premiumModal = usePremiumModal()
+
   const isSystemTag = isSmartView(selectedTag) && isSystemView(selectedTag)
   const selectedTagPreferences = isSystemTag
     ? application.getPreference(PrefKey.SystemViewPreferences)?.[selectedTag.uuid as SystemViewId]
@@ -114,8 +119,15 @@ const NewNotePreferences: FunctionComponent<Props> = ({
     setEditorItems(getDropdownItemsForAllEditors(application))
   }, [application])
 
-  const setDefaultEditor = useCallback(
+  const selectEditorForNewNoteDefault = useCallback(
     (value: EditorOption['value']) => {
+      if (application.features.getFeatureStatus(value) !== FeatureStatus.Entitled) {
+        const editorItem = editorItems.find((item) => item.value === value)
+        if (editorItem) {
+          premiumModal.activate(editorItem.label)
+        }
+        return
+      }
       setDefaultEditorIdentifier(value as FeatureIdentifier)
 
       if (mode === 'global') {
@@ -124,7 +136,7 @@ const NewNotePreferences: FunctionComponent<Props> = ({
         void changePreferencesCallback({ editorIdentifier: value })
       }
     },
-    [application, changePreferencesCallback, mode],
+    [application, mode, editorItems, premiumModal, changePreferencesCallback],
   )
 
   const debounceTimeoutRef = useRef<number>()
@@ -158,7 +170,7 @@ const NewNotePreferences: FunctionComponent<Props> = ({
             label="Select the default note type"
             items={editorItems}
             value={defaultEditorIdentifier}
-            onChange={(value) => setDefaultEditor(value as EditorOption['value'])}
+            onChange={(value) => selectEditorForNewNoteDefault(value as EditorOption['value'])}
           />
         </div>
       </div>

packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx

@@ -16,6 +16,7 @@ import { getIconAndTintForNoteType } from '@/Utils/Items/Icons/getIconAndTintFor
 import ListItemVaultInfo from './ListItemVaultInfo'
 import { NoteDragDataFormat } from '../Tags/DragNDrop'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import useItem from '@/Hooks/useItem'
 
 const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
   application,
@@ -33,8 +34,11 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
   isNextItemTiled,
 }) => {
   const listItemRef = useRef<HTMLDivElement>(null)
+  const liveItem = useItem<SNNote>(item.uuid)
+
+  const editor = liveItem ? application.componentManager.editorForNote(liveItem) : undefined
+  const noteType = liveItem?.noteType ? liveItem.noteType : editor ? editor.noteType : undefined
 
-  const noteType = item.noteType || application.componentManager.editorForNote(item)?.package_info.note_type
   const [icon, tint] = getIconAndTintForNoteType(noteType)
   const hasFiles = application.items.itemsReferencingItem(item).filter(isFile).length > 0