feat: allow 2 custom templates for every user

packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx

@@ -32,7 +32,6 @@ import NewMeetingSettingsToggleCheckIn from '../NewMeetingSettingsToggleCheckIn'
 import StyledError from '../StyledError'
 import FlatPrimaryButton from '../FlatPrimaryButton'
 import NewMeetingActionsCurrentMeetings from '../NewMeetingActionsCurrentMeetings'
-import RaisedButton from '../RaisedButton'
 import NewMeetingTeamPicker from '../NewMeetingTeamPicker'
 import {AdhocTeamMultiSelect, Option} from '../AdhocTeamMultiSelect/AdhocTeamMultiSelect'
 import {Select} from '../../ui/Select/Select'
@@ -78,7 +77,6 @@ const ActivityDetailsSidebar = (props: Props) => {
       fragment ActivityDetailsSidebar_viewer on User {
         featureFlags {
           adHocTeams
-          noTemplateLimit
         }
         ...AdhocTeamMultiSelect_viewer
         organizations {
@@ -295,14 +293,6 @@ const ActivityDetailsSidebar = (props: Props) => {
     </div>
   )
 
-  const handleUpgrade = () => {
-    SendClientSideEvent(atmosphere, 'Upgrade CTA Clicked', {
-      upgradeCTALocation: 'publicTemplate',
-      meetingType: type
-    })
-    history.push(`/me/organizations/${selectedTeam.orgId}/billing`)
-  }
-
   const meetingNamePlaceholder =
     type === 'retrospective'
       ? 'Retro'
@@ -396,42 +386,22 @@ const ActivityDetailsSidebar = (props: Props) => {
                 />
               )}
 
-              {selectedTeam.tier === 'starter' &&
-              !viewer.featureFlags.noTemplateLimit &&
-              !selectedTemplate.isFree ? (
-                <div className='flex grow flex-col'>
-                  <div className='my-auto text-center'>
-                    Upgrade to the <b>Team Plan</b> to create custom activities unlocking your
-                    team’s ideal workflow.
-                  </div>
-                  <RaisedButton
-                    palette='pink'
-                    className='h-12 w-full text-lg font-semibold text-white focus:outline-none focus:ring-2 focus:ring-offset-2'
-                    onClick={handleUpgrade}
-                  >
-                    Upgrade to Team Plan
-                  </RaisedButton>
-                </div>
-              ) : (
+              {type === 'retrospective' && (
                 <>
-                  {type === 'retrospective' && (
-                    <>
-                      <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.retroSettings} />
-                      <NewMeetingSettingsToggleTeamHealth
-                        settingsRef={selectedTeam.retroSettings}
-                        teamRef={selectedTeam}
-                      />
-                      <NewMeetingSettingsToggleAnonymity settingsRef={selectedTeam.retroSettings} />
-                    </>
-                  )}
-                  {type === 'poker' && (
-                    <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.pokerSettings} />
-                  )}
-                  {type === 'action' && (
-                    <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.actionSettings} />
-                  )}
+                  <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.retroSettings} />
+                  <NewMeetingSettingsToggleTeamHealth
+                    settingsRef={selectedTeam.retroSettings}
+                    teamRef={selectedTeam}
+                  />
+                  <NewMeetingSettingsToggleAnonymity settingsRef={selectedTeam.retroSettings} />
                 </>
               )}
+              {type === 'poker' && (
+                <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.pokerSettings} />
+              )}
+              {type === 'action' && (
+                <NewMeetingSettingsToggleCheckIn settingsRef={selectedTeam.actionSettings} />
+              )}
             </div>
           </div>
         </div>

packages/client/components/ActivityLibrary/CreateNewActivity/CreateNewActivity.tsx

@@ -95,9 +95,8 @@ const SUPPORTED_CUSTOM_ACTIVITIES: SupportedActivity[] = [
 const query = graphql`
   query CreateNewActivityQuery {
     viewer {
-      featureFlags {
-        noTemplateLimit
-      }
+      freeCustomRetroTemplatesRemaining
+      freeCustomPokerTemplatesRemaining
       preferredTeamId
       teams {
         id
@@ -135,12 +134,21 @@ export const CreateNewActivity = (props: Props) => {
     return selectedActivity
   })
   const {viewer} = data
-  const {teams, preferredTeamId, featureFlags} = viewer
+  const {
+    teams,
+    preferredTeamId,
+    freeCustomRetroTemplatesRemaining,
+    freeCustomPokerTemplatesRemaining
+  } = viewer
   const [selectedTeam, setSelectedTeam] = useState(
     teams.find((team) => team.id === preferredTeamId) ?? sortByTier(teams)[0]!
   )
   const {submitting, error, submitMutation, onError, onCompleted} = useMutationProps()
   const history = useHistory()
+  const freeCustomTemplatesRemaining =
+    selectedActivity.type === 'retrospective'
+      ? freeCustomRetroTemplatesRemaining
+      : freeCustomPokerTemplatesRemaining
 
   const handleCreateRetroTemplate = () => {
     if (submitting) {
@@ -284,16 +292,15 @@ export const CreateNewActivity = (props: Props) => {
         </div>
         {error && <div className='px-4 text-tomato-500'>{error.message}</div>}
         <div className='mt-auto flex w-full bg-slate-200 p-2 shadow-card-1'>
-          {selectedTeam.tier === 'starter' && !featureFlags.noTemplateLimit ? (
-            <div className='mx-auto flex h-12 items-center gap-24'>
-              <div className='w-96'>
-                Upgrade to the <b>Team Plan</b> to create custom activities unlocking your team’s
-                ideal workflow.
-              </div>
+          {selectedTeam.tier === 'starter' && freeCustomTemplatesRemaining === 0 ? (
+            <div className='flex w-full items-center justify-center gap-4'>
+              <span className='pr-4 text-center'>
+                Upgrade to the <b>Team Plan</b> to create more custom activities
+              </span>
 
               <RaisedButton
                 palette='pink'
-                className='mx-auto h-12 text-lg font-semibold text-white focus:outline-none focus:ring-2 focus:ring-offset-2'
+                className='h-12 px-4 text-lg font-semibold text-white focus:outline-none focus:ring-2 focus:ring-offset-2'
                 onClick={handleUpgrade}
               >
                 Upgrade to Team Plan

packages/client/modules/meeting/components/AddNewPokerTemplate.tsx

@@ -53,16 +53,17 @@ const AddNewPokerTemplate = (props: Props) => {
           id
           user {
             id
-            featureFlags {
-              noTemplateLimit
-            }
+            freeCustomPokerTemplatesRemaining
           }
         }
       }
     `,
     teamRef
   )
   const {id: teamId, tier, viewerTeamMember} = team
+  const {user} = viewerTeamMember || {}
+  const {freeCustomPokerTemplatesRemaining} = user || {}
+
   const {onError, onCompleted, submitMutation, submitting, error} = useMutationProps()
   const errorTimerId = useRef<undefined | number>()
   useEffect(() => {
@@ -71,7 +72,8 @@ const AddNewPokerTemplate = (props: Props) => {
     }
   }, [])
   const canEditTemplates =
-    tier !== 'starter' || viewerTeamMember?.user?.featureFlags?.noTemplateLimit
+    tier !== 'starter' ||
+    (freeCustomPokerTemplatesRemaining && freeCustomPokerTemplatesRemaining > 0)
   const addNewTemplate = () => {
     if (submitting) return
     if (!canEditTemplates) {

packages/client/modules/meeting/components/AddNewReflectTemplate.tsx

@@ -53,16 +53,16 @@ const AddNewReflectTemplate = (props: Props) => {
           id
           user {
             id
-            featureFlags {
-              noTemplateLimit
-            }
+            freeCustomRetroTemplatesRemaining
           }
         }
       }
     `,
     teamRef
   )
   const {id: teamId, tier, viewerTeamMember} = team
+  const {user} = viewerTeamMember || {}
+  const {freeCustomRetroTemplatesRemaining} = user || {}
   const {onError, onCompleted, submitMutation, submitting, error} = useMutationProps()
   const errorTimerId = useRef<undefined | number>()
   useEffect(() => {
@@ -71,7 +71,8 @@ const AddNewReflectTemplate = (props: Props) => {
     }
   }, [])
   const canEditTemplates =
-    tier !== 'starter' || viewerTeamMember?.user?.featureFlags?.noTemplateLimit
+    tier !== 'starter' ||
+    (freeCustomRetroTemplatesRemaining && freeCustomRetroTemplatesRemaining > 0)
   const addNewTemplate = () => {
     if (submitting) return
     if (!canEditTemplates) {

packages/client/mutations/AddPokerTemplateMutation.ts

@@ -10,6 +10,9 @@ import handleAddMeetingTemplate from './handlers/handleAddMeetingTemplate'
 
 graphql`
   fragment AddPokerTemplateMutation_team on AddPokerTemplatePayload {
+    user {
+      freeCustomPokerTemplatesRemaining
+    }
     pokerTemplate {
       ...TemplateSharing_template
       ...PokerTemplateDetailsTemplate

packages/client/mutations/AddReflectTemplateMutation.ts

@@ -9,6 +9,9 @@ import handleAddMeetingTemplate from './handlers/handleAddMeetingTemplate'
 
 graphql`
   fragment AddReflectTemplateMutation_team on AddReflectTemplatePayload {
+    user {
+      freeCustomRetroTemplatesRemaining
+    }
     reflectTemplate {
       ...TemplateSharing_template
       ...ReflectTemplateDetailsTemplate

packages/server/graphql/mutations/addPokerTemplate.ts

@@ -12,6 +12,7 @@ import AddPokerTemplatePayload from '../types/AddPokerTemplatePayload'
 import getTemplateIllustrationUrl from './helpers/getTemplateIllustrationUrl'
 import {analytics} from '../../utils/analytics/analytics'
 import {getFeatureTier} from '../types/helpers/getFeatureTier'
+import decrementFreeTemplatesRemaining from '../../postgres/queries/decrementFreeTemplatesRemaining'
 
 const addPokerTemplate = {
   description: 'Add a new poker template with a default dimension created',
@@ -51,9 +52,11 @@ const addPokerTemplate = {
     }
     if (
       getFeatureTier(viewerTeam) === 'starter' &&
-      !viewer.featureFlags.includes('noTemplateLimit')
+      viewer.freeCustomPokerTemplatesRemaining === 0
     ) {
-      return standardError(new Error('Creating templates is a premium feature'), {userId: viewerId})
+      return standardError(new Error('You have reached the limit of free custom templates.'), {
+        userId: viewerId
+      })
     }
     let data
     if (parentTemplateId) {
@@ -102,8 +105,10 @@ const addPokerTemplate = {
 
       await Promise.all([
         r.table('TemplateDimension').insert(newTemplateDimensions).run(),
-        insertMeetingTemplate(newTemplate)
+        insertMeetingTemplate(newTemplate),
+        decrementFreeTemplatesRemaining(viewerId, 'poker')
       ])
+      viewer.freeCustomPokerTemplatesRemaining = viewer.freeCustomPokerTemplatesRemaining - 1
       analytics.templateMetrics(viewer, newTemplate, 'Template Cloned')
       data = {templateId: newTemplate.id}
     } else {
@@ -129,8 +134,10 @@ const addPokerTemplate = {
 
       await Promise.all([
         r.table('TemplateDimension').insert(newDimension).run(),
-        insertMeetingTemplate(newTemplate)
+        insertMeetingTemplate(newTemplate),
+        decrementFreeTemplatesRemaining(viewerId, 'poker')
       ])
+      viewer.freeCustomPokerTemplatesRemaining = viewer.freeCustomPokerTemplatesRemaining - 1
       analytics.templateMetrics(viewer, newTemplate, 'Template Created')
       data = {templateId}
     }

packages/server/graphql/mutations/addReflectTemplate.ts

@@ -13,6 +13,7 @@ import AddReflectTemplatePayload from '../types/AddReflectTemplatePayload'
 import makeRetroTemplates from './helpers/makeRetroTemplates'
 import {analytics} from '../../utils/analytics/analytics'
 import {getFeatureTier} from '../types/helpers/getFeatureTier'
+import decrementFreeCustomTemplatesRemaining from '../../postgres/queries/decrementFreeTemplatesRemaining'
 
 const addReflectTemplate = {
   description: 'Add a new template full of prompts',
@@ -52,9 +53,11 @@ const addReflectTemplate = {
     }
     if (
       getFeatureTier(viewerTeam) === 'starter' &&
-      !viewer.featureFlags.includes('noTemplateLimit')
+      viewer.freeCustomRetroTemplatesRemaining === 0
     ) {
-      return standardError(new Error('Creating templates is a premium feature'), {userId: viewerId})
+      return standardError(new Error('You have reached the limit of free custom templates.'), {
+        userId: viewerId
+      })
     }
     let data
     if (parentTemplateId) {
@@ -102,8 +105,10 @@ const addReflectTemplate = {
 
       await Promise.all([
         r.table('ReflectPrompt').insert(newTemplatePrompts).run(),
-        insertMeetingTemplate(newTemplate)
+        insertMeetingTemplate(newTemplate),
+        decrementFreeCustomTemplatesRemaining(viewerId, 'retro')
       ])
+      viewer.freeCustomRetroTemplatesRemaining = viewer.freeCustomRetroTemplatesRemaining - 1
       analytics.templateMetrics(viewer, newTemplate, 'Template Cloned')
       data = {templateId: newTemplate.id}
     } else {
@@ -129,8 +134,10 @@ const addReflectTemplate = {
       const {id: templateId} = newTemplate
       await Promise.all([
         r.table('ReflectPrompt').insert(newTemplatePrompts).run(),
-        insertMeetingTemplate(newTemplate)
+        insertMeetingTemplate(newTemplate),
+        decrementFreeCustomTemplatesRemaining(viewerId, 'retro')
       ])
+      viewer.freeCustomRetroTemplatesRemaining = viewer.freeCustomRetroTemplatesRemaining - 1
       analytics.templateMetrics(viewer, newTemplate, 'Template Created')
       data = {templateId}
     }

packages/server/graphql/public/typeDefs/User.graphql

@@ -458,4 +458,12 @@ type User {
     """
     domain: String!
   ): ParseSAMLMetadataPayload!
+  """
+  The number of free custom retro templates remaining
+  """
+  freeCustomRetroTemplatesRemaining: Int!
+  """
+  The number of free custom poker templates remaining
+  """
+  freeCustomPokerTemplatesRemaining: Int!
 }

packages/server/graphql/types/AddPokerTemplatePayload.ts

@@ -2,6 +2,8 @@ import {GraphQLObjectType} from 'graphql'
 import {GQLContext} from '../graphql'
 import PokerTemplate from './PokerTemplate'
 import StandardMutationError from './StandardMutationError'
+import {getUserId} from '../../utils/authorization'
+import User from './User'
 
 const AddPokerTemplatePayload = new GraphQLObjectType<any, GQLContext>({
   name: 'AddPokerTemplatePayload',
@@ -15,6 +17,14 @@ const AddPokerTemplatePayload = new GraphQLObjectType<any, GQLContext>({
         if (!templateId) return null
         return dataLoader.get('meetingTemplates').load(templateId)
       }
+    },
+    user: {
+      type: User,
+      resolve: (_, _args: unknown, {dataLoader, authToken}) => {
+        const userId = getUserId(authToken)
+        if (!userId) return null
+        return dataLoader.get('users').load(userId)
+      }
     }
   })
 })

packages/server/graphql/types/AddReflectTemplatePayload.ts

@@ -2,6 +2,8 @@ import {GraphQLObjectType} from 'graphql'
 import {GQLContext} from '../graphql'
 import ReflectTemplate from './ReflectTemplate'
 import StandardMutationError from './StandardMutationError'
+import User from './User'
+import {getUserId} from '../../utils/authorization'
 
 const AddReflectTemplatePayload = new GraphQLObjectType<any, GQLContext>({
   name: 'AddReflectTemplatePayload',
@@ -15,6 +17,14 @@ const AddReflectTemplatePayload = new GraphQLObjectType<any, GQLContext>({
         if (!templateId) return null
         return dataLoader.get('meetingTemplates').load(templateId)
       }
+    },
+    user: {
+      type: User,
+      resolve: (_, _args: unknown, {dataLoader, authToken}) => {
+        const userId = getUserId(authToken)
+        if (!userId) return null
+        return dataLoader.get('users').load(userId)
+      }
     }
   })
 })