chore: refactor add template mutation to the new sdl pattern

codegen.json

@@ -49,6 +49,8 @@
           "ActionMeeting": "../../database/types/MeetingAction#default",
           "ActionMeetingMember": "../../database/types/ActionMeetingMember#default as ActionMeetingMemberDB",
           "AddApprovedOrganizationDomainsSuccess": "./types/AddApprovedOrganizationDomainsSuccess#AddApprovedOrganizationDomainsSuccessSource",
+          "AddReflectTemplateSuccess": "./types/AddReflectTemplateSuccess#AddReflectTemplateSuccessSource",
+          "AddPokerTemplateSuccess": "./types/AddPokerTemplateSuccess#AddPokerTemplateSuccessSource",
           "AddTranscriptionBotSuccess": "./types/AddTranscriptionBotSuccess#AddTranscriptionBotSuccessSource",
           "AddedNotification": "./types/AddedNotification#AddedNotificationSource",
           "AgendaItem": "../../database/types/AgendaItem#default as AgendaItemDB",

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

@@ -9,7 +9,10 @@ import {AddPokerTemplateMutation_team$data} from '../__generated__/AddPokerTempl
 import handleAddMeetingTemplate from './handlers/handleAddMeetingTemplate'
 
 graphql`
-  fragment AddPokerTemplateMutation_team on AddPokerTemplatePayload {
+  fragment AddPokerTemplateMutation_team on AddPokerTemplateSuccess {
+    user {
+      freeCustomPokerTemplatesRemaining
+    }
     pokerTemplate {
       ...TemplateSharing_template
       ...PokerTemplateDetailsTemplate
@@ -23,6 +26,11 @@ graphql`
 const mutation = graphql`
   mutation AddPokerTemplateMutation($teamId: ID!, $parentTemplateId: ID) {
     addPokerTemplate(teamId: $teamId, parentTemplateId: $parentTemplateId) {
+      ... on ErrorPayload {
+        error {
+          message
+        }
+      }
       ...AddPokerTemplateMutation_team @relay(mask: false)
     }
   }
@@ -55,7 +63,7 @@ const AddPokerTemplateMutation: StandardMutation<TAddPokerTemplateMutation> = (
     updater: (store) => {
       const payload = store.getRootField('addPokerTemplate')
       if (!payload) return
-      addPokerTemplateTeamUpdater(payload, {atmosphere, store})
+      addPokerTemplateTeamUpdater(payload as any, {atmosphere, store})
     },
     optimisticUpdater: (store) => {
       const {parentTemplateId, teamId} = variables

packages/client/mutations/AddReflectTemplateMutation.ts

@@ -8,7 +8,10 @@ import {AddReflectTemplateMutation_team$data} from '../__generated__/AddReflectT
 import handleAddMeetingTemplate from './handlers/handleAddMeetingTemplate'
 
 graphql`
-  fragment AddReflectTemplateMutation_team on AddReflectTemplatePayload {
+  fragment AddReflectTemplateMutation_team on AddReflectTemplateSuccess {
+    user {
+      freeCustomRetroTemplatesRemaining
+    }
     reflectTemplate {
       ...TemplateSharing_template
       ...ReflectTemplateDetailsTemplate
@@ -22,6 +25,11 @@ graphql`
 const mutation = graphql`
   mutation AddReflectTemplateMutation($teamId: ID!, $parentTemplateId: ID) {
     addReflectTemplate(teamId: $teamId, parentTemplateId: $parentTemplateId) {
+      ... on ErrorPayload {
+        error {
+          message
+        }
+      }
       ...AddReflectTemplateMutation_team @relay(mask: false)
     }
   }
@@ -54,7 +62,7 @@ const AddReflectTemplateMutation: StandardMutation<TAddReflectTemplateMutation>
     updater: (store) => {
       const payload = store.getRootField('addReflectTemplate')
       if (!payload) return
-      addReflectTemplateTeamUpdater(payload, {atmosphere, store})
+      addReflectTemplateTeamUpdater(payload as any, {atmosphere, store})
     },
     optimisticUpdater: (store) => {
       const {parentTemplateId, teamId} = variables

packages/client/subscriptions/TeamSubscription.ts

@@ -17,7 +17,6 @@ import {
   acceptTeamInvitationTeamUpdater
 } from '../mutations/AcceptTeamInvitationMutation'
 import {addAgendaItemUpdater} from '../mutations/AddAgendaItemMutation'
-import {addReflectTemplateTeamUpdater} from '../mutations/AddReflectTemplateMutation'
 import {addReflectTemplatePromptTeamUpdater} from '../mutations/AddReflectTemplatePromptMutation'
 import {addTeamTeamUpdater} from '../mutations/AddTeamMutation'
 import {archiveTeamTeamOnNext, archiveTeamTeamUpdater} from '../mutations/ArchiveTeamMutation'
@@ -66,9 +65,6 @@ const subscription = graphql`
       AddAtlassianAuthPayload {
         ...AddAtlassianAuthMutation_team @relay(mask: false)
       }
-      AddReflectTemplatePayload {
-        ...AddReflectTemplateMutation_team @relay(mask: false)
-      }
       AddReflectTemplatePromptPayload {
         ...AddReflectTemplatePromptMutation_team @relay(mask: false)
       }
@@ -207,7 +203,6 @@ const updateHandlers = {
   RemoveAgendaItemPayload: removeAgendaItemUpdater,
   UpdateAgendaItemPayload: updateAgendaItemUpdater,
   AcceptTeamInvitationPayload: acceptTeamInvitationTeamUpdater,
-  AddReflectTemplatePayload: addReflectTemplateTeamUpdater,
   AddReflectTemplatePromptPayload: addReflectTemplatePromptTeamUpdater,
   AddTeamMutationPayload: addTeamTeamUpdater,
   ArchiveTeamPayload: archiveTeamTeamUpdater,