fix(comments): update commentsEnabledContextValue

packages/sanity/src/structure/comments/plugin/document-layout/CommentsDocumentLayout.tsx

@@ -21,7 +21,7 @@ export function CommentsDocumentLayout(props: DocumentLayoutProps) {
 
 function CommentsDocumentLayoutInner(props: DocumentLayoutProps) {
   const {documentId, documentType} = props
-  const commentsEnabled = useCommentsEnabled()
+  const {enabled} = useCommentsEnabled()
   const {openInspector, inspector} = useDocumentPane()
 
   const handleOpenCommentsInspector = useCallback(() => {
@@ -31,7 +31,7 @@ function CommentsDocumentLayoutInner(props: DocumentLayoutProps) {
   }, [inspector?.name, openInspector])
 
   // If comments are not enabled, render the default document layout
-  if (!commentsEnabled) {
+  if (!enabled) {
     return props.renderDefault(props)
   }
 

packages/sanity/src/structure/comments/plugin/field/CommentsField.tsx

@@ -29,9 +29,9 @@ const HIGHLIGHT_BLOCK_VARIANTS: Variants = {
 }
 
 export function CommentsField(props: FieldProps) {
-  const isEnabled = useCommentsEnabled()
+  const {enabled} = useCommentsEnabled()
 
-  if (!isEnabled) {
+  if (!enabled) {
     return props.renderDefault(props)
   }
 
@@ -155,7 +155,7 @@ function CommentFieldInner(props: FieldProps) {
       return
     }
 
-    if (commentsEnabled === 'read-only') {
+    if (commentsEnabled.reason === 'upsell') {
       if (upsellData) {
         setUpsellDialogOpen(true)
       } else {

packages/sanity/src/structure/comments/plugin/inspector/CommentsInspector.tsx

@@ -38,9 +38,9 @@ const RootLayer = styled(Layer)`
 `
 
 export function CommentsInspector(props: DocumentInspectorProps) {
-  const isEnabled = useCommentsEnabled()
+  const {enabled} = useCommentsEnabled()
 
-  if (!isEnabled) return null
+  if (!enabled) return null
 
   // We wrap the comments inspector in a Layer in order to know when the comments inspector
   // is the top layer (that is, if there is e.g. a popover open). This is used to determine
@@ -337,7 +337,7 @@ function CommentsInspectorInner(props: DocumentInspectorProps) {
             view={status}
           />
         </CommentsOnboardingPopover>
-        {commentsEnabled === 'read-only' && <UpsellPanel />}
+        {commentsEnabled.reason === 'upsell' && <UpsellPanel />}
 
         {currentUser && (
           <CommentsList
@@ -361,7 +361,7 @@ function CommentsInspectorInner(props: DocumentInspectorProps) {
             status={status}
           />
         )}
-        {commentsEnabled === 'enabled' && <CommentsInspectorFeedbackFooter />}
+        {commentsEnabled.reason !== 'upsell' && <CommentsInspectorFeedbackFooter />}
       </Flex>
     </Fragment>
   )

packages/sanity/src/structure/comments/plugin/inspector/CommentsInspectorHeader.tsx

@@ -56,11 +56,11 @@ export const CommentsInspectorHeader = forwardRef(function CommentsInspectorHead
                   onClick={handleSetResolvedView}
                   text="Resolved comments"
                   tooltipProps={
-                    commentsEnabled === 'read-only'
+                    commentsEnabled.reason === 'upsell'
                       ? {content: 'Upgrade to see resolved comments'}
                       : undefined
                   }
-                  disabled={commentsEnabled !== 'enabled'}
+                  disabled={commentsEnabled.reason === 'upsell'}
                 />
               </Menu>
             }

packages/sanity/src/structure/comments/plugin/inspector/index.ts

@@ -5,10 +5,10 @@ import {CommentsInspector} from './CommentsInspector'
 import {DocumentInspectorMenuItem, defineDocumentInspector} from 'sanity'
 
 function useMenuItem(): DocumentInspectorMenuItem {
-  const isEnabled = useCommentsEnabled()
+  const {enabled} = useCommentsEnabled()
 
   return {
-    hidden: !isEnabled,
+    hidden: !enabled,
     icon: CommentIcon,
     showAsAction: true,
     title: 'Comments',

packages/sanity/src/structure/comments/src/components/list/CommentsListItem.tsx

@@ -333,8 +333,8 @@ export const CommentsListItem = React.memo(function CommentsListItem(props: Comm
               onDiscardConfirm={confirmDiscard}
               onKeyDown={handleInputKeyDown}
               onSubmit={handleReplySubmit}
-              placeholder={commentsEnabled === 'read-only' ? 'Upgrade to reply' : 'Reply'}
-              readOnly={readOnly || commentsEnabled === 'read-only'}
+              placeholder={commentsEnabled.reason === 'upsell' ? 'Upgrade to reply' : 'Reply'}
+              readOnly={readOnly || commentsEnabled.reason === 'upsell'}
               ref={replyInputRef}
               value={value}
             />

packages/sanity/src/structure/comments/src/components/list/CommentsListItemContextMenu.tsx

@@ -29,7 +29,7 @@ const renderMenuButton = ({
     mode="bleed"
     selected={open}
     tooltipProps={
-      commentsEnabled === 'read-only'
+      commentsEnabled.reason === 'upsell'
         ? {content: 'Upgrade to add reactions'}
         : {content: 'Add reaction'}
     }
@@ -125,11 +125,11 @@ export function CommentsListItemContextMenu(props: CommentsListItemContextMenuPr
                   onClick={onEditStart}
                   text="Edit comment"
                   tooltipProps={
-                    commentsEnabled === 'read-only'
+                    commentsEnabled.reason === 'upsell'
                       ? {content: 'Upgrade to edit comments'}
                       : undefined
                   }
-                  disabled={commentsEnabled === 'read-only'}
+                  disabled={commentsEnabled.reason === 'upsell'}
                 />
 
                 <MenuItem

packages/sanity/src/structure/comments/src/components/list/CommentsListStatus.tsx

@@ -58,7 +58,7 @@ export function CommentsListStatus(props: CommentsListStatusProps) {
     return <LoadingBlock showText title="Loading comments" />
   }
 
-  if (hasNoComments && commentsEnabled === 'enabled') {
+  if (hasNoComments && commentsEnabled.reason !== 'upsell') {
     return (
       <Flex align="center" justify="center" flex={1} sizing="border">
         <Container width={0} padding={4}>

packages/sanity/src/structure/comments/src/components/list/CreateNewThreadInput.tsx

@@ -75,7 +75,7 @@ export function CreateNewThreadInput(props: CreateNewThreadInputProps) {
   }, [])
 
   const placeholder =
-    commentsEnabled === 'read-only' ? (
+    commentsEnabled.reason === 'upsell' ? (
       <>Upgrade to add comment</>
     ) : (
       <>
@@ -96,7 +96,7 @@ export function CreateNewThreadInput(props: CreateNewThreadInputProps) {
       onFocus={onFocus}
       onSubmit={handleSubmit}
       placeholder={placeholder}
-      readOnly={readOnly || commentsEnabled === 'read-only'}
+      readOnly={readOnly || commentsEnabled.reason === 'upsell'}
       ref={commentInputHandle}
       value={value}
     />

packages/sanity/src/structure/comments/src/components/reactions/CommentReactionsBar.tsx

@@ -68,7 +68,9 @@ const renderMenuButton = ({
       <Flex paddingX={3} paddingY={2}>
         <Tooltip
           animate
-          content={commentsEnabled === 'read-only' ? 'Upgrade to add reactions' : 'Add reaction'}
+          content={
+            commentsEnabled.reason === 'upsell' ? 'Upgrade to add reactions' : 'Add reaction'
+          }
           disabled={open}
         >
           <Text size={1}>
@@ -160,7 +162,7 @@ export const CommentReactionsBar = React.memo(function CommentReactionsBar(
             >
               <TransparentCard tone="default">
                 <UIButton
-                  disabled={readOnly || commentsEnabled === 'read-only'}
+                  disabled={readOnly || commentsEnabled.reason === 'upsell'}
                   mode="ghost"
                   // eslint-disable-next-line react/jsx-no-bind
                   onClick={() => handleSelect(name)}

packages/sanity/src/structure/comments/src/components/reactions/CommentReactionsMenuButton.tsx

@@ -81,7 +81,7 @@ export function CommentReactionsMenuButton(props: CommentReactionsMenuButtonProp
       id: 'reactions-menu-button',
       onClick: handleClick,
       ref: setButtonElement,
-      disabled: readOnly || commentsEnabled === 'read-only',
+      disabled: readOnly || commentsEnabled.reason === 'upsell',
     })
   }, [handleClick, open, readOnly, renderMenuButton, commentsEnabled])
 

packages/sanity/src/structure/comments/src/components/upsell/UpsellDialog.tsx

@@ -59,7 +59,10 @@ const UpsellDialog = () => {
               text: upsellData.secondaryButton.text,
               mode: 'bleed',
               tone: 'default',
-              onClick: handleClose,
+              href: upsellData.secondaryButton.url,
+              target: '_blank',
+              rel: 'noopener noreferrer',
+              as: 'a',
             }
           : undefined,
         confirmButton: {

packages/sanity/src/structure/comments/src/components/upsell/UpsellPanel.tsx

@@ -33,6 +33,10 @@ const UpsellPanel = () => {
                 text={upsellData.secondaryButton.text}
                 tone="primary"
                 iconRight={LaunchIcon}
+                href={upsellData.secondaryButton.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                as="a"
               />
               <Button
                 text={upsellData.ctaButton.text}

packages/sanity/src/structure/comments/src/context/comments/CommentsProvider.tsx

@@ -56,7 +56,7 @@ export const CommentsProvider = memo(function CommentsProvider(props: CommentsPr
   const commentsEnabled = useCommentsEnabled()
   const [status, setStatus] = useState<CommentStatus>('open')
   const [upsellDialogOpen, setUpsellDialogOpen] = useState(false)
-  const upsellData = useCommentsUpsellData(commentsEnabled === 'read-only')
+  const upsellData = useCommentsUpsellData(commentsEnabled.reason === 'upsell')
   const {client, runSetup, isRunningSetup} = useCommentsSetup()
   const publishedId = getPublishedId(documentId)
   const editState = useEditState(publishedId, documentType, 'low')
@@ -80,7 +80,7 @@ export const CommentsProvider = memo(function CommentsProvider(props: CommentsPr
   const handleSetStatus = useCallback(
     (newStatus: CommentStatus) => {
       // Avoids going to "resolved" when using links to comments
-      if (commentsEnabled === 'read-only' && newStatus === 'resolved') {
+      if (commentsEnabled.reason === 'upsell' && newStatus === 'resolved') {
         return null
       }
       return setStatus(newStatus)
@@ -107,18 +107,11 @@ export const CommentsProvider = memo(function CommentsProvider(props: CommentsPr
       documentValue,
     })
 
-    return items.reduce(
-      (acc: ThreadItemsByStatus, item) => {
-        if (item.parentComment.status === 'open') {
-          acc.open.push(item)
-        } else if (commentsEnabled === 'enabled') {
-          acc.resolved.push(item)
-        }
-        return acc
-      },
-      {open: [], resolved: []},
-    )
-  }, [currentUser, data, documentValue, schemaType, commentsEnabled])
+    return {
+      open: items.filter((item) => item.parentComment.status === 'open'),
+      resolved: items.filter((item) => item.parentComment.status === 'resolved'),
+    }
+  }, [currentUser, data, documentValue, schemaType])
 
   const getThreadLength = useCallback(
     (threadId: string) => {
@@ -293,7 +286,7 @@ export const CommentsProvider = memo(function CommentsProvider(props: CommentsPr
   return (
     <CommentsContext.Provider value={ctxValue}>
       {children}
-      {commentsEnabled === 'read-only' && <UpsellDialog />}
+      {commentsEnabled.reason === 'upsell' && <UpsellDialog />}
     </CommentsContext.Provider>
   )
 })

packages/sanity/src/structure/comments/src/context/enabled/CommentsEnabledProvider.tsx

@@ -13,9 +13,7 @@ export const CommentsEnabledProvider = React.memo(function CommentsEnabledProvid
 ) {
   const {children, documentId, documentType} = props
 
-  const isEnabled = useResolveCommentsEnabled(documentId, documentType)
+  const value = useResolveCommentsEnabled(documentId, documentType)
 
-  return (
-    <CommentsEnabledContext.Provider value={isEnabled}>{children}</CommentsEnabledContext.Provider>
-  )
+  return <CommentsEnabledContext.Provider value={value}>{children}</CommentsEnabledContext.Provider>
 })

packages/sanity/src/structure/comments/src/context/enabled/types.ts

@@ -1 +1,4 @@
-export type CommentsEnabledContextValue = 'enabled' | 'read-only' | false
+export type CommentsEnabledContextValue = {
+  enabled: boolean
+  reason: 'upsell' | null
+}

packages/sanity/src/structure/comments/src/hooks/useResolveCommentsEnabled.ts

@@ -1,4 +1,5 @@
 import {useMemo} from 'react'
+import {CommentsEnabledContextValue} from '../context/enabled/types'
 import {getPublishedId, useFeatureEnabled, useSource} from 'sanity'
 
 /**
@@ -9,7 +10,7 @@ import {getPublishedId, useFeatureEnabled, useSource} from 'sanity'
 export function useResolveCommentsEnabled(
   documentId: string,
   documentType: string,
-): false | 'enabled' | 'read-only' {
+): CommentsEnabledContextValue {
   // Check if the projects plan has the feature enabled
   const {enabled: featureEnabled, isLoading} = useFeatureEnabled('studioComments')
 
@@ -20,8 +21,10 @@ export function useResolveCommentsEnabled(
     [documentId, documentType, enabled],
   )
 
-  // If the feature is disabled to the project, because they are not in the correct plan we want to show the read-only view
-  const featureStatus = featureEnabled ? 'enabled' : 'read-only'
-
-  return !isLoading && enabledFromConfig ? featureStatus : false
+  return {
+    enabled: !isLoading && enabledFromConfig,
+    // TODO: Restore
+    // reason: featureEnabled ? null : 'upsell',
+    reason: 'upsell',
+  }
 }

packages/sanity/src/structure/comments/src/types.ts

@@ -241,7 +241,7 @@ export interface CommentsUpsellData {
     url: string
   }
   secondaryButton: {
-    rightIcon: string
+    url: string
     text: string
   }
 }