feat: upsell content releases (#8457)

Co-authored-by: pedrobonamin <[email protected]>

packages/sanity/src/_singletons/context/ReleasesUpsellContext.ts

@@ -0,0 +1,12 @@
+import {createContext} from 'sanity/_createContext'
+
+import type {ReleasesUpsellContextValue} from '../../core/releases/contexts/upsell/types'
+
+/**
+ * @beta
+ * @hidden
+ */
+export const ReleasesUpsellContext = createContext<ReleasesUpsellContextValue | null>(
+  'sanity/_singletons/context/releases-upsell',
+  null,
+)

packages/sanity/src/_singletons/index.ts

@@ -55,6 +55,7 @@ export * from './context/ReferenceInputOptionsContext'
 export * from './context/ReferenceItemRefContext'
 export * from './context/ReleasesMetadataContext'
 export * from './context/ReleasesTableContext'
+export * from './context/ReleasesUpsellContext'
 export * from './context/ResourceCacheContext'
 export * from './context/ReviewChangesContext'
 export * from './context/RouterContext'

packages/sanity/src/core/perspective/navbar/ReleasesList.tsx

@@ -5,6 +5,7 @@ import {css, styled} from 'styled-components'
 
 import {MenuItem} from '../../../ui-components/menuItem/MenuItem'
 import {useTranslation} from '../../i18n/hooks/useTranslation'
+import {useReleasesUpsell} from '../../releases/contexts/upsell/useReleasesUpsell'
 import {type ReleaseDocument, type ReleaseType} from '../../releases/store/types'
 import {useActiveReleases} from '../../releases/store/useActiveReleases'
 import {LATEST} from '../../releases/util/const'
@@ -57,12 +58,14 @@ export function ReleasesList({
   setCreateBundleDialogOpen: (open: boolean) => void
   scrollElementRef: RefObject<ScrollElement>
 }): React.JSX.Element {
+  const {guardWithReleaseLimitUpsell, mode} = useReleasesUpsell()
   const {loading, data: releases} = useActiveReleases()
   const {t} = useTranslation()
-  /* create new release */
-  const handleCreateBundleClick = useCallback(() => {
-    setCreateBundleDialogOpen(true)
-  }, [setCreateBundleDialogOpen])
+
+  const handleCreateBundleClick = useCallback(
+    () => guardWithReleaseLimitUpsell(() => setCreateBundleDialogOpen(true)),
+    [guardWithReleaseLimitUpsell, setCreateBundleDialogOpen],
+  )
 
   const sortedReleaseTypeReleases = useMemo(
     () =>
@@ -153,6 +156,7 @@ export function ReleasesList({
           <MenuDivider />
           <MenuItem
             icon={AddIcon}
+            disabled={mode === 'disabled'}
             onClick={handleCreateBundleClick}
             text={t('release.action.create-new')}
             data-testid="create-new-release-button"

packages/sanity/src/core/perspective/navbar/__tests__/ReleasesList.test.tsx

@@ -8,12 +8,17 @@ import {
   activeScheduledRelease,
   activeUndecidedRelease,
 } from '../../../releases/__fixtures__/release.fixture'
+import {useReleasesUpsellMockReturn} from '../../../releases/contexts/upsell/__mocks__/useReleasesUpsell.mock'
 import {
   mockUseActiveReleases,
   useActiveReleasesMockReturn,
 } from '../../../releases/store/__tests__/__mocks/useActiveReleases.mock'
 import {ReleasesList} from '../ReleasesList'
 
+vi.mock('../../../releases/contexts/upsell/useReleasesUpsell', () => ({
+  useReleasesUpsell: vi.fn(() => useReleasesUpsellMockReturn),
+}))
+
 vi.mock('../../../releases/store/useActiveReleases', () => ({
   useActiveReleases: vi.fn(() => useActiveReleasesMockReturn),
 }))

packages/sanity/src/core/perspective/navbar/__tests__/ReleasesNav.test.tsx

@@ -9,10 +9,15 @@ import {
   activeScheduledRelease,
   scheduledRelease,
 } from '../../../releases/__fixtures__/release.fixture'
+import {useReleasesUpsellMockReturn} from '../../../releases/contexts/upsell/__mocks__/useReleasesUpsell.mock'
 import {useActiveReleasesMockReturn} from '../../../releases/store/__tests__/__mocks/useActiveReleases.mock'
 import {LATEST} from '../../../releases/util/const'
 import {ReleasesNav} from '../ReleasesNav'
 
+vi.mock('../../../releases/contexts/upsell/useReleasesUpsell', () => ({
+  useReleasesUpsell: vi.fn(() => useReleasesUpsellMockReturn),
+}))
+
 vi.mock('../../../perspective/usePerspective', () => ({
   usePerspective: vi.fn(() => usePerspectiveMockReturn),
 }))

packages/sanity/src/core/perspective/navbar/currentGlobalPerspectiveLabel.tsx

@@ -16,6 +16,7 @@ import {type SelectedPerspective} from '../types'
 const AnimatedMotionDiv = ({children, ...props}: PropsWithChildren<any>) => (
   <motion.div
     {...props}
+    layout="preserve-aspect"
     initial={{width: 0, opacity: 0}}
     animate={{width: 'auto', opacity: 1}}
     exit={{width: 0, opacity: 0}}

packages/sanity/src/core/releases/components/dialog/CreateReleaseDialog.tsx

@@ -7,6 +7,7 @@ import {Button, Dialog} from '../../../../ui-components'
 import {useTranslation} from '../../../i18n'
 import {CreatedRelease, type OriginInfo} from '../../__telemetry__/releases.telemetry'
 import {releasesLocaleNamespace} from '../../i18n'
+import {isReleaseLimitError} from '../../store/isReleaseLimitError'
 import {type EditableReleaseDocument} from '../../store/types'
 import {useReleaseOperations} from '../../store/useReleaseOperations'
 import {DEFAULT_RELEASE_TYPE} from '../../util/const'
@@ -75,23 +76,28 @@ export function CreateReleaseDialog(props: CreateReleaseDialogProps): React.JSX.
         }
         await createRelease(submitValue)
         telemetry.log(CreatedRelease, {origin})
-      } catch (err) {
-        console.error(err)
-        toast.push({
-          closable: true,
-          status: 'error',
-          title: t('release.toast.create-release-error.title'),
-        })
-      } finally {
+
         // TODO: Remove this! temporary fix to give some time for the release to be created and the releases store state updated before closing the dialog.
         await new Promise((resolve) => setTimeout(resolve, 1000))
         // TODO: Remove the upper part
 
-        setIsSubmitting(false)
         onSubmit(getReleaseIdFromReleaseDocumentId(release._id))
+      } catch (err) {
+        if (isReleaseLimitError(err)) {
+          onCancel()
+        } else {
+          console.error(err)
+          toast.push({
+            closable: true,
+            status: 'error',
+            title: t('release.toast.create-release-error.title'),
+          })
+        }
+      } finally {
+        setIsSubmitting(false)
       }
     },
-    [release, toast, tRelease, createRelease, telemetry, origin, t, onSubmit],
+    [release, toast, tRelease, createRelease, telemetry, origin, onCancel, t, onSubmit],
   )
 
   const handleOnChange = useCallback((changedValue: EditableReleaseDocument) => {

packages/sanity/src/core/releases/components/documentHeader/VersionChip.tsx

@@ -23,6 +23,7 @@ import {css, styled} from 'styled-components'
 
 import {Popover, Tooltip} from '../../../../ui-components'
 import {getVersionId} from '../../../util/draftUtils'
+import {useReleasesUpsell} from '../../contexts/upsell/useReleasesUpsell'
 import {useVersionOperations} from '../../hooks/useVersionOperations'
 import {type ReleaseDocument, type ReleaseState} from '../../store/types'
 import {getReleaseIdFromReleaseDocumentId} from '../../util/getReleaseIdFromReleaseDocumentId'
@@ -109,6 +110,7 @@ export const VersionChip = memo(function VersionChip(props: {
   const popoverRef = useRef<HTMLDivElement | null>(null)
   const [isDiscardDialogOpen, setIsDiscardDialogOpen] = useState(false)
   const [isCreateReleaseDialogOpen, setIsCreateReleaseDialogOpen] = useState(false)
+  const {guardWithReleaseLimitUpsell} = useReleasesUpsell()
 
   const chipRef = useRef<HTMLButtonElement | null>(null)
 
@@ -152,9 +154,10 @@ export const VersionChip = memo(function VersionChip(props: {
     setIsDiscardDialogOpen(true)
   }, [setIsDiscardDialogOpen])
 
-  const openCreateReleaseDialog = useCallback(() => {
-    setIsCreateReleaseDialogOpen(true)
-  }, [setIsCreateReleaseDialogOpen])
+  const openCreateReleaseDialog = useCallback(
+    () => guardWithReleaseLimitUpsell(() => setIsCreateReleaseDialogOpen(true)),
+    [guardWithReleaseLimitUpsell],
+  )
 
   const handleAddVersion = useCallback(
     async (targetRelease: string) => {

packages/sanity/src/core/releases/components/documentHeader/contextMenu/VersionContextMenu.tsx

@@ -8,6 +8,7 @@ import {MenuGroup} from '../../../../../ui-components/menuGroup/MenuGroup'
 import {MenuItem} from '../../../../../ui-components/menuItem/MenuItem'
 import {useTranslation} from '../../../../i18n/hooks/useTranslation'
 import {isPublishedId} from '../../../../util/draftUtils'
+import {useReleasesUpsell} from '../../../contexts/upsell/useReleasesUpsell'
 import {type ReleaseDocument} from '../../../store/types'
 import {isReleaseScheduledOrScheduling} from '../../../util/util'
 import {VersionContextMenuItem} from './VersionContextMenuItem'
@@ -43,6 +44,7 @@ export const VersionContextMenu = memo(function VersionContextMenu(props: {
     locked,
   } = props
   const {t} = useTranslation()
+  const {mode} = useReleasesUpsell()
   const isPublished = isPublishedId(documentId) && !isVersion
   const optionsReleaseList = releases.map((release) => ({
     value: release,
@@ -91,6 +93,7 @@ export const VersionContextMenu = memo(function VersionContextMenu(props: {
             onClick={onCreateRelease}
             text={t('release.action.new-release')}
             icon={AddIcon}
+            disabled={mode === 'disabled'}
           />
         </MenuGroup>
         {!isPublished && (

packages/sanity/src/core/releases/components/documentHeader/dialog/CopyToNewReleaseDialog.tsx

@@ -9,6 +9,7 @@ import {useTranslation} from '../../../../i18n/hooks/useTranslation'
 import {Preview} from '../../../../preview/components/Preview'
 import {CreatedRelease} from '../../../__telemetry__/releases.telemetry'
 import {releasesLocaleNamespace} from '../../../i18n'
+import {isReleaseLimitError} from '../../../store/isReleaseLimitError'
 import {type EditableReleaseDocument} from '../../../store/types'
 import {useReleaseOperations} from '../../../store/useReleaseOperations'
 import {DEFAULT_RELEASE_TYPE} from '../../../util/const'
@@ -85,17 +86,21 @@ export function CopyToNewReleaseDialog(props: {
       await handleAddVersion()
       telemetry.log(CreatedRelease, {origin: 'document-panel'})
     } catch (err) {
-      console.error(err)
-      toast.push({
-        closable: true,
-        status: 'error',
-        title: t('release.toast.create-release-error.title'),
-        description: err.message,
-      })
+      if (isReleaseLimitError(err)) {
+        onClose()
+      } else {
+        console.error(err)
+        toast.push({
+          closable: true,
+          status: 'error',
+          title: t('release.toast.create-release-error.title'),
+          description: err.message,
+        })
+      }
     } finally {
       setIsSubmitting(false)
     }
-  }, [release, toast, createRelease, handleAddVersion, telemetry, t])
+  }, [release, createRelease, handleAddVersion, telemetry, onClose, toast, t])
 
   return (
     <Dialog