diff --git a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx index 9428b641bcc..dcafb56236f 100644 --- a/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx +++ b/packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx @@ -29,8 +29,6 @@ graphql` ...TemplateDetails_activity ...ActivityDetailsBadges_template ...ActivityDetailsSidebar_template - ...ReflectTemplateDetailsTemplate @relay(mask: false) - ...PokerTemplateDetailsTemplate @relay(mask: false) ...useTemplateDescription_template } ` diff --git a/packages/client/components/NewMeetingSettings.tsx b/packages/client/components/NewMeetingSettings.tsx deleted file mode 100644 index 26993d5e365..00000000000 --- a/packages/client/components/NewMeetingSettings.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {MeetingTypeEnum} from '~/__generated__/MeetingSelectorQuery.graphql' -import {NewMeetingSettings_selectedTeam$key} from '~/__generated__/NewMeetingSettings_selectedTeam.graphql' -import NewMeetingSettingsAction from './NewMeetingSettingsAction' -import NewMeetingSettingsPoker from './NewMeetingSettingsPoker' -import NewMeetingSettingsRetrospective from './NewMeetingSettingsRetrospective' -import NewMeetingSettingsTeamPrompt from './NewMeetingSettingsTeamPrompt' - -interface Props { - meetingType: MeetingTypeEnum - selectedTeamRef: NewMeetingSettings_selectedTeam$key -} - -const settingsLookup = { - action: NewMeetingSettingsAction, - retrospective: NewMeetingSettingsRetrospective, - poker: NewMeetingSettingsPoker, - teamPrompt: NewMeetingSettingsTeamPrompt -} - -const NewMeetingSettings = (props: Props) => { - const {meetingType, selectedTeamRef} = props - const selectedTeam = useFragment( - graphql` - fragment NewMeetingSettings_selectedTeam on Team { - ...NewMeetingSettingsRetrospective_team - ...NewMeetingSettingsAction_team - ...NewMeetingSettingsPoker_team - ...NewMeetingSettingsTeamPrompt_team - id - } - `, - selectedTeamRef - ) - - const Settings = settingsLookup[meetingType] - return -} - -export default NewMeetingSettings diff --git a/packages/client/components/NewMeetingSettingsAction.tsx b/packages/client/components/NewMeetingSettingsAction.tsx deleted file mode 100644 index db7e1a75d88..00000000000 --- a/packages/client/components/NewMeetingSettingsAction.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {NewMeetingSettingsAction_team$key} from '../__generated__/NewMeetingSettingsAction_team.graphql' -import NewMeetingSettingsToggleCheckIn from './NewMeetingSettingsToggleCheckIn' - -interface Props { - teamRef: NewMeetingSettingsAction_team$key -} - -const NewMeetingSettingsAction = (props: Props) => { - const {teamRef} = props - const team = useFragment( - graphql` - fragment NewMeetingSettingsAction_team on Team { - actionSettings: meetingSettings(meetingType: action) { - ...NewMeetingSettingsToggleCheckIn_settings - } - } - `, - teamRef - ) - const {actionSettings} = team - return -} - -export default NewMeetingSettingsAction diff --git a/packages/client/components/NewMeetingSettingsPoker.tsx b/packages/client/components/NewMeetingSettingsPoker.tsx deleted file mode 100644 index f546a8cd65a..00000000000 --- a/packages/client/components/NewMeetingSettingsPoker.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {NewMeetingSettingsPoker_team$key} from '~/__generated__/NewMeetingSettingsPoker_team.graphql' -import PokerTemplatePicker from '../modules/meeting/components/PokerTemplatePicker' -import NewMeetingSettingsToggleCheckIn from './NewMeetingSettingsToggleCheckIn' - -interface Props { - teamRef: NewMeetingSettingsPoker_team$key -} - -const NewMeetingSettingsPoker = (props: Props) => { - const {teamRef} = props - const team = useFragment( - graphql` - fragment NewMeetingSettingsPoker_team on Team { - pokerSettings: meetingSettings(meetingType: poker) { - ...PokerTemplatePicker_settings - ...NewMeetingSettingsToggleCheckIn_settings - } - } - `, - teamRef - ) - const {pokerSettings} = team - return ( - <> - - - - ) -} - -export default NewMeetingSettingsPoker diff --git a/packages/client/components/NewMeetingSettingsRetrospective.tsx b/packages/client/components/NewMeetingSettingsRetrospective.tsx deleted file mode 100644 index 75f1d3ab983..00000000000 --- a/packages/client/components/NewMeetingSettingsRetrospective.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {NewMeetingSettingsRetrospective_team$key} from '~/__generated__/NewMeetingSettingsRetrospective_team.graphql' -import RetroTemplatePicker from '../modules/meeting/components/RetroTemplatePicker' -import NewMeetingSettingsRetrospectiveSettings from './NewMeetingSettingsRetrospectiveSettings' - -interface Props { - teamRef: NewMeetingSettingsRetrospective_team$key -} - -const NewMeetingSettingsRetrospective = (props: Props) => { - const {teamRef} = props - const team = useFragment( - graphql` - fragment NewMeetingSettingsRetrospective_team on Team { - ...NewMeetingSettingsRetrospectiveSettings_team - retroSettings: meetingSettings(meetingType: retrospective) { - ...RetroTemplatePicker_settings - } - organization { - ...NewMeetingSettingsRetrospectiveSettings_organization - } - } - `, - teamRef - ) - const {organization} = team - const {retroSettings} = team - return ( - <> - - - - ) -} - -export default NewMeetingSettingsRetrospective diff --git a/packages/client/components/NewMeetingSettingsRetrospectiveSettings.tsx b/packages/client/components/NewMeetingSettingsRetrospectiveSettings.tsx deleted file mode 100644 index 08f6dc3286e..00000000000 --- a/packages/client/components/NewMeetingSettingsRetrospectiveSettings.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {NewMeetingSettingsRetrospectiveSettings_organization$key} from '~/__generated__/NewMeetingSettingsRetrospectiveSettings_organization.graphql' -import {NewMeetingSettingsRetrospectiveSettings_team$key} from '~/__generated__/NewMeetingSettingsRetrospectiveSettings_team.graphql' -import {MenuPosition} from '../hooks/useCoords' -import useMenu from '../hooks/useMenu' -import {PortalStatus} from '../hooks/usePortal' -import NewMeetingDropdown from './NewMeetingDropdown' -import NewMeetingSettingsToggleAnonymity from './NewMeetingSettingsToggleAnonymity' -import NewMeetingSettingsToggleCheckIn from './NewMeetingSettingsToggleCheckIn' -import NewMeetingSettingsToggleTeamHealth from './NewMeetingSettingsToggleTeamHealth' -import NewMeetingSettingsToggleTranscription from './NewMeetingSettingsToggleTranscription' - -const NewMeetingSettingsToggleCheckInMenuEntry = styled(NewMeetingSettingsToggleCheckIn)({ - background: 'none', - borderRadius: 0 -}) - -const NewMeetingSettingsToggleTeamHealthMenuEntry = styled(NewMeetingSettingsToggleTeamHealth)({ - background: 'none', - borderRadius: 0 -}) - -const NewMeetingSettingsToggleAnonymityMenuEntry = styled(NewMeetingSettingsToggleAnonymity)({ - background: 'none', - borderRadius: 0 -}) - -interface Props { - teamRef: NewMeetingSettingsRetrospectiveSettings_team$key - organizationRef: NewMeetingSettingsRetrospectiveSettings_organization$key -} - -const NewMeetingSettingsRetrospectiveSettings = (props: Props) => { - const {teamRef, organizationRef} = props - const {togglePortal, menuPortal, originRef, menuProps, portalStatus} = useMenu( - MenuPosition.LOWER_RIGHT, - { - isDropdown: true - } - ) - - const team = useFragment( - graphql` - fragment NewMeetingSettingsRetrospectiveSettings_team on Team { - ...NewMeetingSettingsToggleTeamHealth_team - retroSettings: meetingSettings(meetingType: retrospective) { - ...NewMeetingSettingsToggleCheckIn_settings - ...NewMeetingSettingsToggleTeamHealth_settings - ...NewMeetingSettingsToggleAnonymity_settings - ...NewMeetingSettingsToggleTranscription_settings - } - } - `, - teamRef - ) - const {retroSettings} = team - - const organization = useFragment( - graphql` - fragment NewMeetingSettingsRetrospectiveSettings_organization on Organization { - featureFlags { - zoomTranscription - } - } - `, - organizationRef - ) - const {zoomTranscription} = organization.featureFlags - - return ( - <> - - {menuPortal( -
- - - - {zoomTranscription && ( - - )} -
- )} - - ) -} - -export default NewMeetingSettingsRetrospectiveSettings diff --git a/packages/client/components/NewMeetingSettingsTeamPrompt.tsx b/packages/client/components/NewMeetingSettingsTeamPrompt.tsx deleted file mode 100644 index 0d396e4fa9f..00000000000 --- a/packages/client/components/NewMeetingSettingsTeamPrompt.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import graphql from 'babel-plugin-relay/macro' -import {useFragment} from 'react-relay' -import {NewMeetingSettingsTeamPrompt_team$key} from '../__generated__/NewMeetingSettingsTeamPrompt_team.graphql' - -interface Props { - teamRef: NewMeetingSettingsTeamPrompt_team$key -} - -const NewMeetingSettingsTeamPrompt = (props: Props) => { - const {teamRef} = props - useFragment( - graphql` - fragment NewMeetingSettingsTeamPrompt_team on Team { - teamPromptSettings: meetingSettings(meetingType: teamPrompt) { - id - } - } - `, - teamRef - ) - - return null -} -export default NewMeetingSettingsTeamPrompt diff --git a/packages/client/modules/meeting/components/AddNewPokerTemplate.tsx b/packages/client/modules/meeting/components/AddNewPokerTemplate.tsx deleted file mode 100644 index 5a6307d7fdd..00000000000 --- a/packages/client/modules/meeting/components/AddNewPokerTemplate.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React, {useEffect, useRef} from 'react' -import {useFragment} from 'react-relay' -import {AddNewPokerTemplate_pokerTemplates$key} from '../../../__generated__/AddNewPokerTemplate_pokerTemplates.graphql' -import {AddNewPokerTemplate_team$key} from '../../../__generated__/AddNewPokerTemplate_team.graphql' -import LinkButton from '../../../components/LinkButton' -import TooltipStyled from '../../../components/TooltipStyled' -import useAtmosphere from '../../../hooks/useAtmosphere' -import useMutationProps from '../../../hooks/useMutationProps' -import AddPokerTemplateMutation from '../../../mutations/AddPokerTemplateMutation' - -const ErrorLine = styled(TooltipStyled)({ - margin: '0 0 8px' -}) - -const AddPokerTemplateLink = styled(LinkButton)({ - alignItems: 'center', - display: 'flex', - justifyContent: 'flex-start', - fontSize: 16, - fontWeight: 600, - lineHeight: '24px', - outline: 'none', - padding: '20px 16px', - width: '100%' -}) - -interface Props { - gotoTeamTemplates: () => void - pokerTemplatesRef: AddNewPokerTemplate_pokerTemplates$key - teamRef: AddNewPokerTemplate_team$key - displayUpgradeDetails: () => void -} - -const AddNewPokerTemplate = (props: Props) => { - const {gotoTeamTemplates, teamRef, pokerTemplatesRef, displayUpgradeDetails} = props - const atmosphere = useAtmosphere() - const pokerTemplates = useFragment( - graphql` - fragment AddNewPokerTemplate_pokerTemplates on PokerTemplate @relay(plural: true) { - name - } - `, - pokerTemplatesRef - ) - const team = useFragment( - graphql` - fragment AddNewPokerTemplate_team on Team { - id - tier - viewerTeamMember { - id - user { - id - freeCustomPokerTemplatesRemaining - } - } - } - `, - teamRef - ) - const {id: teamId, tier, viewerTeamMember} = team - const {user} = viewerTeamMember || {} - const {freeCustomPokerTemplatesRemaining} = user || {} - - const {onError, onCompleted, submitMutation, submitting, error} = useMutationProps() - const errorTimerId = useRef() - useEffect(() => { - return () => { - window.clearTimeout(errorTimerId.current) - } - }, []) - const canEditTemplates = - tier !== 'starter' || - (freeCustomPokerTemplatesRemaining && freeCustomPokerTemplatesRemaining > 0) - const addNewTemplate = () => { - if (submitting) return - if (!canEditTemplates) { - displayUpgradeDetails() - return - } - if (pokerTemplates.find((template) => template.name.startsWith('*New Template'))) { - onError(new Error('You already have a new template. Try renaming that one first.')) - errorTimerId.current = window.setTimeout(() => { - onCompleted() - }, 8000) - return - } - submitMutation() - AddPokerTemplateMutation(atmosphere, {teamId}, {onError, onCompleted}) - gotoTeamTemplates() - } - - const containsNewTemplate = pokerTemplates.find((template) => - template.name.startsWith('*New Template') - ) - - if (containsNewTemplate) return null - return ( -
- {error && {error.message}} - - Create New Template {!canEditTemplates && '🔒'} - -
- ) -} - -export default AddNewPokerTemplate diff --git a/packages/client/modules/meeting/components/AddNewReflectTemplate.tsx b/packages/client/modules/meeting/components/AddNewReflectTemplate.tsx deleted file mode 100644 index 6b87c2a9ff3..00000000000 --- a/packages/client/modules/meeting/components/AddNewReflectTemplate.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React, {useEffect, useRef} from 'react' -import {useFragment} from 'react-relay' -import {AddNewReflectTemplate_reflectTemplates$key} from '../../../__generated__/AddNewReflectTemplate_reflectTemplates.graphql' -import {AddNewReflectTemplate_team$key} from '../../../__generated__/AddNewReflectTemplate_team.graphql' -import LinkButton from '../../../components/LinkButton' -import TooltipStyled from '../../../components/TooltipStyled' -import useAtmosphere from '../../../hooks/useAtmosphere' -import useMutationProps from '../../../hooks/useMutationProps' -import AddReflectTemplateMutation from '../../../mutations/AddReflectTemplateMutation' - -const ErrorLine = styled(TooltipStyled)({ - margin: '0 0 8px' -}) - -const AddRetroTemplateLink = styled(LinkButton)({ - alignItems: 'center', - display: 'flex', - justifyContent: 'flex-start', - fontSize: 16, - fontWeight: 600, - lineHeight: '24px', - outline: 'none', - padding: '20px 16px', - width: '100%' -}) - -interface Props { - gotoTeamTemplates: () => void - reflectTemplatesRef: AddNewReflectTemplate_reflectTemplates$key - displayUpgradeDetails: () => void - teamRef: AddNewReflectTemplate_team$key -} - -const AddNewReflectTemplate = (props: Props) => { - const {gotoTeamTemplates, reflectTemplatesRef, teamRef, displayUpgradeDetails} = props - const atmosphere = useAtmosphere() - const reflectTemplates = useFragment( - graphql` - fragment AddNewReflectTemplate_reflectTemplates on ReflectTemplate @relay(plural: true) { - name - } - `, - reflectTemplatesRef - ) - const team = useFragment( - graphql` - fragment AddNewReflectTemplate_team on Team { - id - tier - viewerTeamMember { - id - user { - id - freeCustomRetroTemplatesRemaining - } - } - } - `, - teamRef - ) - const {id: teamId, tier, viewerTeamMember} = team - const {user} = viewerTeamMember || {} - const {freeCustomRetroTemplatesRemaining} = user || {} - const {onError, onCompleted, submitMutation, submitting, error} = useMutationProps() - const errorTimerId = useRef() - useEffect(() => { - return () => { - window.clearTimeout(errorTimerId.current) - } - }, []) - const canEditTemplates = - tier !== 'starter' || - (freeCustomRetroTemplatesRemaining && freeCustomRetroTemplatesRemaining > 0) - const addNewTemplate = () => { - if (submitting) return - if (!canEditTemplates) { - displayUpgradeDetails() - return - } - if (reflectTemplates.find((template) => template.name.startsWith('*New Template'))) { - onError(new Error('You already have a new template. Try renaming that one first.')) - errorTimerId.current = window.setTimeout(() => { - onCompleted() - }, 8000) - return - } - submitMutation() - AddReflectTemplateMutation(atmosphere, {teamId}, {onError, onCompleted}) - gotoTeamTemplates() - } - - const containsNewTemplate = reflectTemplates.find((template) => - template.name.startsWith('*New Template') - ) - - if (containsNewTemplate) return null - return ( -
- {error && {error.message}} - - Create New Template {!canEditTemplates && '🔒'} - -
- ) -} - -export default AddNewReflectTemplate diff --git a/packages/client/modules/meeting/components/PokerTemplateDetails.tsx b/packages/client/modules/meeting/components/PokerTemplateDetails.tsx deleted file mode 100644 index e1fd1e27d4e..00000000000 --- a/packages/client/modules/meeting/components/PokerTemplateDetails.tsx +++ /dev/null @@ -1,174 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {PokerTemplateDetails_settings$key} from '../../../__generated__/PokerTemplateDetails_settings.graphql' -import useAtmosphere from '../../../hooks/useAtmosphere' -import useMutationProps from '../../../hooks/useMutationProps' -import AddPokerTemplateMutation from '../../../mutations/AddPokerTemplateMutation' -import {PALETTE} from '../../../styles/paletteV3' -import getTemplateList from '../../../utils/getTemplateList' -import useTemplateDescription from '../../../utils/useTemplateDescription' -import AddPokerTemplateDimension from './AddPokerTemplateDimension' -import CloneTemplate from './CloneTemplate' -import EditableTemplateName from './EditableTemplateName' -import RemoveTemplate from './RemoveTemplate' -import SelectTemplate from './SelectTemplate' -import TemplateDimensionList from './TemplateDimensionList' -import TemplateSharing from './TemplateSharing' - -const TemplateHeader = styled('div')({ - display: 'flex', - flexDirection: 'column', - margin: '16px 0', - paddingLeft: 56, - paddingRight: 16, - width: '100%', - flexShrink: 0 -}) - -const DimensionEditor = styled('div')({ - alignItems: 'flex-start', - background: '#fff', - borderRadius: 8, - display: 'flex', - flexDirection: 'column', - overflow: 'hidden', - maxWidth: 520, - width: '100%' -}) - -const TemplateImg = styled('img')({ - margin: '0 auto', - maxWidth: 360, - maxHeight: 200, - padding: '16px 0 0', - width: '100%', - objectFit: 'contain' -}) - -const Description = styled('div')({ - color: PALETTE.SLATE_700, - fontSize: 14, - lineHeight: '20px' -}) - -const FirstLine = styled('div')({ - alignItems: 'center', - display: 'flex' -}) - -const Scrollable = styled('div')<{isActiveTemplate: boolean}>(({isActiveTemplate}) => ({ - display: 'flex', - flexDirection: 'column', - overflow: 'auto', - paddingBottom: isActiveTemplate ? undefined : 56, - width: '100%' -})) - -interface Props { - gotoTeamTemplates: () => void - gotoPublicTemplates: () => void - closePortal: () => void - settings: PokerTemplateDetails_settings$key -} - -const PokerTemplateDetails = (props: Props) => { - const {gotoTeamTemplates, gotoPublicTemplates, closePortal, settings: settingsRef} = props - const settings = useFragment( - graphql` - fragment PokerTemplateDetails_settings on PokerMeetingSettings { - activeTemplate { - illustrationUrl - ...PokerTemplateDetailsTemplate @relay(mask: false) - ...SelectTemplate_template - } - selectedTemplate { - illustrationUrl - ...PokerTemplateDetailsTemplate @relay(mask: false) - ...SelectTemplate_template - } - teamTemplates { - ...RemoveTemplate_teamTemplates - } - team { - id - orgId - tier - } - } - `, - settingsRef - ) - const {teamTemplates, team} = settings - const activeTemplate = settings.activeTemplate ?? settings.selectedTemplate - const {id: templateId, name: templateName, dimensions, illustrationUrl} = activeTemplate - const {id: teamId, orgId, tier} = team - const lowestScope = getTemplateList(teamId, orgId, activeTemplate) - const isOwner = activeTemplate.teamId === teamId - const description = useTemplateDescription(lowestScope, activeTemplate, tier) - const atmosphere = useAtmosphere() - const {onError, onCompleted, submitting, submitMutation} = useMutationProps() - const onClone = () => { - if (submitting) return - submitMutation() - AddPokerTemplateMutation( - atmosphere, - {parentTemplateId: templateId, teamId}, - {onError, onCompleted} - ) - gotoTeamTemplates() - } - const isActiveTemplate = activeTemplate.id === settings.selectedTemplate.id - const showClone = !isOwner && tier !== 'starter' - return ( - - - - - - - {isOwner && ( - - )} - {showClone && } - - {description} - - - {isOwner && } - - - {!isActiveTemplate && ( - - )} - - ) -} - -graphql` - fragment PokerTemplateDetailsTemplate on PokerTemplate { - ...TemplateSharing_template - ...getTemplateList_template - ...useTemplateDescription_template - id - name - dimensions { - ...TemplateDimensionList_dimensions - ...AddPokerTemplateDimension_dimensions - } - teamId - } -` -export default PokerTemplateDetails diff --git a/packages/client/modules/meeting/components/PokerTemplateItem.tsx b/packages/client/modules/meeting/components/PokerTemplateItem.tsx deleted file mode 100644 index 96bf03c302d..00000000000 --- a/packages/client/modules/meeting/components/PokerTemplateItem.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React, {useEffect, useRef} from 'react' -import {commitLocalUpdate, useFragment} from 'react-relay' -import {PokerTemplateItem_template$key} from '../../../__generated__/PokerTemplateItem_template.graphql' -import useAtmosphere from '../../../hooks/useAtmosphere' -import useScrollIntoView from '../../../hooks/useScrollIntoVIew' -import {DECELERATE} from '../../../styles/animation' -import textOverflow from '../../../styles/helpers/textOverflow' -import {PALETTE} from '../../../styles/paletteV3' -import SendClientSideEvent from '../../../utils/SendClientSideEvent' -import {setActiveTemplate} from '../../../utils/relay/setActiveTemplate' -import useTemplateDescription from '../../../utils/useTemplateDescription' - -const TemplateItem = styled('li')<{isActive: boolean}>(({isActive}) => ({ - backgroundColor: isActive ? PALETTE.SLATE_200 : undefined, - cursor: 'pointer', - display: 'flex', - fontSize: 14, - justifyContent: 'space-between', - lineHeight: '22px', - paddingTop: 12, - paddingBottom: 12, - paddingLeft: 16, - transition: `background-color 300ms ${DECELERATE}`, - userSelect: 'none', - width: '100%' -})) - -const TemplateItemDetails = styled('div')({ - display: 'flex', - flexDirection: 'column', - width: '100%' -}) - -const TemplateTitle = styled('div')({ - ...textOverflow, - color: PALETTE.SLATE_700, - fontSize: 16, - fontWeight: 600, - lineHeight: '24px' -}) - -const TemplateDescription = styled('div')({ - ...textOverflow, - color: PALETTE.SLATE_600, - fontSize: 12, - lineHeight: '16px' -}) - -const TemplateItemAction = styled('div')({}) - -interface Props { - isActive: boolean - teamId: string - templateRef: PokerTemplateItem_template$key - lowestScope: 'TEAM' | 'ORGANIZATION' | 'PUBLIC' -} - -const PokerTemplateItem = (props: Props) => { - const {lowestScope, isActive, teamId, templateRef} = props - const template = useFragment( - graphql` - fragment PokerTemplateItem_template on PokerTemplate { - #get the details here so we can show them in the details view - ...PokerTemplateDetailsTemplate - ...useTemplateDescription_template - id - name - lastUsedAt - scope - isFree - } - `, - templateRef - ) - const {id: templateId, name: templateName, scope, isFree} = template - const description = useTemplateDescription(lowestScope, template) - const atmosphere = useAtmosphere() - const ref = useRef(null) - useScrollIntoView(ref, isActive) - const selectTemplate = () => { - if (isActive) return - setActiveTemplate(atmosphere, teamId, templateId, 'poker') - commitLocalUpdate(atmosphere, (store) => { - store.get(teamId)?.setValue(null, 'editingScaleId') - }) - } - useEffect(() => { - if (!isActive) return - SendClientSideEvent(atmosphere, 'Viewed Template', { - meetingType: 'poker', - scope, - templateName, - isFree - }) - }, [isActive]) - return ( - - - {templateName} - {description} - - - - ) -} - -export default PokerTemplateItem diff --git a/packages/client/modules/meeting/components/PokerTemplateList.tsx b/packages/client/modules/meeting/components/PokerTemplateList.tsx deleted file mode 100644 index ba699a47f4e..00000000000 --- a/packages/client/modules/meeting/components/PokerTemplateList.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import styled from '@emotion/styled' -import { - Business as BusinessIcon, - Group as GroupIcon, - Public as PublicIcon -} from '@mui/icons-material' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import SwipeableViews from 'react-swipeable-views' -import {PokerTemplateList_settings$key} from '../../../__generated__/PokerTemplateList_settings.graphql' -import Tab from '../../../components/Tab/Tab' -import Tabs from '../../../components/Tabs/Tabs' -import useBreakpoint from '../../../hooks/useBreakpoint' -import {desktopSidebarShadow} from '../../../styles/elevation' -import {PALETTE} from '../../../styles/paletteV3' -import {Breakpoint} from '../../../types/constEnums' -import AddNewPokerTemplate from './AddNewPokerTemplate' -import PokerTemplateListOrgRoot from './PokerTemplateListOrgRoot' -import PokerTemplateListPublicRoot from './PokerTemplateListPublicRoot' -import PokerTemplateListTeam from './PokerTemplateListTeam' - -const WIDTH = 360 -const TemplateSidebar = styled('div')<{isDesktop: boolean}>(({isDesktop}) => ({ - boxShadow: desktopSidebarShadow, - display: 'flex', - flexDirection: 'column', - position: 'relative', - width: !isDesktop ? '100%' : WIDTH, - zIndex: 1 // show above template details to show box-shadow -})) - -const Label = styled('div')({ - color: PALETTE.SLATE_700, - fontSize: 20, - fontWeight: 600, - lineHeight: '24px', - paddingTop: 16, - paddingLeft: 24, - paddingBottom: 8 -}) - -const StyledTabsBar = styled(Tabs)({ - boxShadow: `inset 0 -1px 0 ${PALETTE.SLATE_300}` -}) - -const FullTab = styled(Tab)({ - padding: '4px 0 8px', - width: '30%' -}) - -const WideTab = styled(FullTab)({ - width: '40%' -}) - -const TabContents = styled('div')({ - display: 'flex', - flexDirection: 'column', - height: '100%' -}) - -const TabLabel = styled('div')({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center' -}) - -const TabIcon = styled('div')({ - height: 24, - width: 24, - marginRight: 4 -}) - -const containerStyle = {height: '100%'} -const innerStyle = {width: '100%', height: '100%'} -interface Props { - activeIdx: number - setActiveIdx: (idx: number) => void - settingsRef: PokerTemplateList_settings$key - displayUpgradeDetails: () => void -} - -const PokerTemplateList = (props: Props) => { - const {activeIdx, setActiveIdx, settingsRef, displayUpgradeDetails} = props - const settings = useFragment( - graphql` - fragment PokerTemplateList_settings on PokerMeetingSettings { - id - team { - ...PokerTemplateListTeam_team - ...AddNewPokerTemplate_team - id - } - activeTemplate { - ...getTemplateList_template - id - } - teamTemplates { - ...PokerTemplateListTeam_teamTemplates - ...AddNewPokerTemplate_pokerTemplates - id - } - } - `, - settingsRef - ) - const {team, teamTemplates} = settings - const {id: teamId} = team - const activeTemplateId = settings.activeTemplate?.id ?? '-tmp' - - const gotoTeamTemplates = () => { - setActiveIdx(0) - } - const gotoPublicTemplates = () => { - setActiveIdx(2) - } - const onChangeIdx = (idx: number, _fromIdx: number, props: {reason: string}) => { - //very buggy behavior, probably linked to the vertical scrolling. - // to repro, go from team > org > team > org by clicking tabs & see this this get called for who knows why - if (props.reason === 'focus') return - setActiveIdx(idx) - } - const isDesktop = useBreakpoint(Breakpoint.NEW_MEETING_GRID) - - return ( - - - - - - - {' '} - Team - - } - onClick={gotoTeamTemplates} - /> - - - - {' '} - Organization - - } - onClick={() => setActiveIdx(1)} - /> - - - - {' '} - Public - - } - onClick={gotoPublicTemplates} - /> - - - - - - - {activeIdx === 1 && } - - {activeIdx === 2 && } - - - {/* add a key to clear the error when they change */} - - ) -} - -export default PokerTemplateList diff --git a/packages/client/modules/meeting/components/PokerTemplateListOrg.tsx b/packages/client/modules/meeting/components/PokerTemplateListOrg.tsx deleted file mode 100644 index d5baa9de65f..00000000000 --- a/packages/client/modules/meeting/components/PokerTemplateListOrg.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {PreloadedQuery, usePreloadedQuery} from 'react-relay' -import {useHistory} from 'react-router' -import {PokerTemplateListOrgQuery} from '../../../__generated__/PokerTemplateListOrgQuery.graphql' -import useActiveTopTemplate from '../../../hooks/useActiveTopTemplate' -import useAtmosphere from '../../../hooks/useAtmosphere' -import {PALETTE} from '../../../styles/paletteV3' -import SendClientSideEvent from '../../../utils/SendClientSideEvent' -import PokerTemplateItem from './PokerTemplateItem' - -const TemplateList = styled('ul')({ - listStyle: 'none', - paddingLeft: 0, - marginTop: 0 -}) - -const StyledLink = styled('span')({ - color: PALETTE.SKY_500, - cursor: 'pointer', - outline: 0, - ':hover, :focus, :active': { - color: PALETTE.SKY_600 - } -}) - -const Message = styled('div')({ - border: `1px dashed ${PALETTE.SLATE_400}`, - borderRadius: 4, - color: PALETTE.SLATE_600, - fontSize: 14, - fontStyle: 'italic', - lineHeight: '20px', - margin: 'auto 32px', - padding: '8px 16px' -}) -interface Props { - queryRef: PreloadedQuery -} - -const query = graphql` - query PokerTemplateListOrgQuery($teamId: ID!) { - viewer { - id - team(teamId: $teamId) { - id - tier - orgId - meetingSettings(meetingType: poker) { - ... on PokerMeetingSettings { - organizationTemplates(first: 20) - @connection(key: "PokerTemplateListOrg_organizationTemplates") { - edges { - node { - ...PokerTemplateItem_template - id - } - } - } - activeTemplate { - id - } - } - } - } - } - } -` -const PokerTemplateListOrg = (props: Props) => { - const {queryRef} = props - const data = usePreloadedQuery(query, queryRef) - const {viewer} = data - const team = viewer.team! - const {id: teamId, meetingSettings, tier, orgId} = team - const activeTemplateId = meetingSettings.activeTemplate?.id ?? '-tmp' - const organizationTemplates = meetingSettings.organizationTemplates! - const {edges} = organizationTemplates - useActiveTopTemplate(edges, activeTemplateId, teamId, true, 'poker') - const atmosphere = useAtmosphere() - const history = useHistory() - - if (edges.length === 0) { - if (tier === 'starter') { - const goToBilling = () => { - SendClientSideEvent(atmosphere, 'Upgrade CTA Clicked', { - upgradeCTALocation: 'orgTemplate', - meetingType: 'poker' - }) - history.push(`/me/organizations/${orgId}`) - } - return ( - - Upgrade - to create custom templates for your organization - - ) - } - return {'No other teams in your organization are sharing a template.'} - } - return ( - - {edges.map(({node: template}) => { - return ( - - ) - })} - - ) -} - -export default PokerTemplateListOrg diff --git a/packages/client/modules/meeting/components/PokerTemplateListOrgRoot.tsx b/packages/client/modules/meeting/components/PokerTemplateListOrgRoot.tsx deleted file mode 100644 index 6964af2cd94..00000000000 --- a/packages/client/modules/meeting/components/PokerTemplateListOrgRoot.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, {Suspense} from 'react' -import pokerTemplateListOrgQuery, { - PokerTemplateListOrgQuery -} from '../../../__generated__/PokerTemplateListOrgQuery.graphql' -import useQueryLoaderNow from '../../../hooks/useQueryLoaderNow' -import MockTemplateList from './MockTemplateList' -import PokerTemplateListOrg from './PokerTemplateListOrg' - -interface Props { - teamId: string -} - -const PokerTemplateListOrgRoot = (props: Props) => { - const {teamId} = props - const queryRef = useQueryLoaderNow(pokerTemplateListOrgQuery, {teamId}) - - return ( - }> - {queryRef && } - - ) -} - -export default PokerTemplateListOrgRoot diff --git a/packages/client/modules/meeting/components/PokerTemplateListPublic.tsx b/packages/client/modules/meeting/components/PokerTemplateListPublic.tsx deleted file mode 100644 index d0464cf896a..00000000000 --- a/packages/client/modules/meeting/components/PokerTemplateListPublic.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {PreloadedQuery, usePreloadedQuery} from 'react-relay' -import {PokerTemplateListPublicQuery} from '../../../__generated__/PokerTemplateListPublicQuery.graphql' -import useActiveTopTemplate from '../../../hooks/useActiveTopTemplate' -import PokerTemplateItem from './PokerTemplateItem' - -const TemplateList = styled('ul')({ - listStyle: 'none', - paddingLeft: 0, - marginTop: 0 -}) - -interface Props { - queryRef: PreloadedQuery -} -const query = graphql` - query PokerTemplateListPublicQuery($teamId: ID!) { - viewer { - id - team(teamId: $teamId) { - id - meetingSettings(meetingType: poker) { - ... on PokerMeetingSettings { - publicTemplates(first: 20) @connection(key: "PokerTemplateListPublic_publicTemplates") { - edges { - node { - ...PokerTemplateItem_template - id - } - } - } - activeTemplate { - id - } - } - } - } - } - } -` - -const PokerTemplateListPublic = (props: Props) => { - const {queryRef} = props - const data = usePreloadedQuery(query, queryRef) - const {viewer} = data - const team = viewer.team! - const {id: teamId, meetingSettings} = team - const publicTemplates = meetingSettings.publicTemplates! - const activeTemplateId = meetingSettings.activeTemplate?.id ?? '-tmp' - const {edges} = publicTemplates - useActiveTopTemplate(edges, activeTemplateId, teamId, true, 'poker') - return ( - - {edges.map(({node: template}) => { - return ( - - ) - })} - - ) -} - -export default PokerTemplateListPublic diff --git a/packages/client/modules/meeting/components/PokerTemplateListPublicRoot.tsx b/packages/client/modules/meeting/components/PokerTemplateListPublicRoot.tsx deleted file mode 100644 index 63a0da5e425..00000000000 --- a/packages/client/modules/meeting/components/PokerTemplateListPublicRoot.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, {Suspense} from 'react' -import pokerTemplateListPublicQuery, { - PokerTemplateListPublicQuery -} from '../../../__generated__/PokerTemplateListPublicQuery.graphql' -import useQueryLoaderNow from '../../../hooks/useQueryLoaderNow' -import MockTemplateList from './MockTemplateList' -import PokerTemplateListPublic from './PokerTemplateListPublic' - -interface Props { - teamId: string -} - -const PokerTemplateListPublicRoot = (props: Props) => { - const {teamId} = props - const queryRef = useQueryLoaderNow(pokerTemplateListPublicQuery, { - teamId - }) - - return ( - }> - {queryRef && } - - ) -} - -export default PokerTemplateListPublicRoot diff --git a/packages/client/modules/meeting/components/PokerTemplateListTeam.tsx b/packages/client/modules/meeting/components/PokerTemplateListTeam.tsx deleted file mode 100644 index 1917ef7da1c..00000000000 --- a/packages/client/modules/meeting/components/PokerTemplateListTeam.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {useHistory} from 'react-router' -import {PokerTemplateListTeam_team$key} from '../../../__generated__/PokerTemplateListTeam_team.graphql' -import {PokerTemplateListTeam_teamTemplates$key} from '../../../__generated__/PokerTemplateListTeam_teamTemplates.graphql' -import useActiveTopTemplate from '../../../hooks/useActiveTopTemplate' -import useAtmosphere from '../../../hooks/useAtmosphere' -import {PALETTE} from '../../../styles/paletteV3' -import SendClientSideEvent from '../../../utils/SendClientSideEvent' -import PokerTemplateItem from './PokerTemplateItem' - -const TemplateList = styled('ul')({ - listStyle: 'none', - paddingLeft: 0, - marginTop: 0 -}) - -const Message = styled('div')({ - border: `1px dashed ${PALETTE.SLATE_400}`, - borderRadius: 4, - color: PALETTE.SLATE_600, - fontSize: 14, - fontStyle: 'italic', - lineHeight: '20px', - margin: 'auto 32px', - padding: '8px 16px' -}) - -const StyledLink = styled('span')({ - color: PALETTE.SKY_500, - cursor: 'pointer', - outline: 0, - ':hover, :focus, :active': { - color: PALETTE.SKY_600 - } -}) - -interface Props { - isActive: boolean - activeTemplateId: string - showPublicTemplates: () => void - teamTemplatesRef: PokerTemplateListTeam_teamTemplates$key - teamRef: PokerTemplateListTeam_team$key -} - -const PokerTemplateListTeam = (props: Props) => { - const {isActive, activeTemplateId, showPublicTemplates, teamTemplatesRef, teamRef} = props - const teamTemplates = useFragment( - graphql` - fragment PokerTemplateListTeam_teamTemplates on PokerTemplate @relay(plural: true) { - id - ...PokerTemplateItem_template - } - `, - teamTemplatesRef - ) - const team = useFragment( - graphql` - fragment PokerTemplateListTeam_team on Team { - id - orgId - tier - } - `, - teamRef - ) - const {id: teamId, tier, orgId} = team - const edges = teamTemplates.map((t) => ({node: {id: t.id}})) as readonly {node: {id: string}}[] - useActiveTopTemplate(edges, activeTemplateId, teamId, isActive, 'poker') - const atmosphere = useAtmosphere() - const history = useHistory() - if (teamTemplates.length === 0) { - if (tier === 'starter') { - const goToBilling = () => { - SendClientSideEvent(atmosphere, 'Upgrade CTA Clicked', { - upgradeCTALocation: 'teamTemplate', - meetingType: 'poker' - }) - history.push(`/me/organizations/${orgId}`) - } - return ( - - Upgrade - to create custom templates for your team - - ) - } - return ( - - Your custom templates will show up here. Get started with a - Public Template - - ) - } - return ( - - {teamTemplates.map((template) => { - return ( - - ) - })} - - ) -} - -export default PokerTemplateListTeam diff --git a/packages/client/modules/meeting/components/PokerTemplateModal.tsx b/packages/client/modules/meeting/components/PokerTemplateModal.tsx deleted file mode 100644 index 8527779afbc..00000000000 --- a/packages/client/modules/meeting/components/PokerTemplateModal.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React, {useEffect, useState} from 'react' -import {useFragment} from 'react-relay' -import {PokerTemplateModal_pokerMeetingSettings$key} from '../../../__generated__/PokerTemplateModal_pokerMeetingSettings.graphql' -import DialogContainer from '../../../components/DialogContainer' -import useAtmosphere from '../../../hooks/useAtmosphere' -import getTemplateList from '../../../utils/getTemplateList' -import {setActiveTemplate} from '../../../utils/relay/setActiveTemplate' -import CustomTemplateUpgradeMsg from './CustomTemplateUpgradeMsg' -import PokerTemplateDetails from './PokerTemplateDetails' -import PokerTemplateList from './PokerTemplateList' -import PokerTemplateScaleDetails from './PokerTemplateScaleDetails' - -interface Props { - closePortal: () => void - pokerMeetingSettingsRef: PokerTemplateModal_pokerMeetingSettings$key -} - -const StyledDialogContainer = styled(DialogContainer)({ - flexDirection: 'row', - width: 880, - maxHeight: 520, - minHeight: 520 -}) - -const SCOPES = ['TEAM', 'ORGANIZATION', 'PUBLIC'] - -const PokerTemplateModal = (props: Props) => { - const {closePortal, pokerMeetingSettingsRef} = props - const pokerMeetingSettings = useFragment( - graphql` - fragment PokerTemplateModal_pokerMeetingSettings on PokerMeetingSettings { - ...PokerTemplateList_settings - ...PokerTemplateDetails_settings - meetingType - team { - ...PokerTemplateScaleDetails_team - id - orgId - editingScaleId - } - selectedTemplate { - id - ...getTemplateList_template - } - activeTemplate { - id - } - } - `, - pokerMeetingSettingsRef - ) - - const {selectedTemplate, team, activeTemplate, meetingType} = pokerMeetingSettings - const {id: teamId, orgId, editingScaleId} = team - const lowestScope = getTemplateList(teamId, orgId, selectedTemplate) - const listIdx = SCOPES.indexOf(lowestScope) - const [activeIdx, setActiveIdx] = useState(listIdx) - const [showUpgradeDetails, setShowUpgradeDetails] = useState(false) - const gotoTeamTemplates = () => { - setActiveIdx(0) - } - const gotoPublicTemplates = () => { - setActiveIdx(2) - } - - const atmosphere = useAtmosphere() - useEffect(() => { - setActiveTemplate(atmosphere, teamId, selectedTemplate.id, 'poker') - }, []) - - const displayUpgradeDetails = () => { - setShowUpgradeDetails(true) - } - - const hideUpgradeDetails = () => { - setShowUpgradeDetails(false) - } - - useEffect(() => { - if (showUpgradeDetails) hideUpgradeDetails() - }, [activeTemplate]) - - return ( - - - {showUpgradeDetails ? ( - - ) : editingScaleId ? ( - - ) : ( - - )} - - ) -} -export default PokerTemplateModal diff --git a/packages/client/modules/meeting/components/PokerTemplatePicker.tsx b/packages/client/modules/meeting/components/PokerTemplatePicker.tsx deleted file mode 100644 index eb2524e7bf9..00000000000 --- a/packages/client/modules/meeting/components/PokerTemplatePicker.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {PokerTemplatePicker_settings$key} from '../../../__generated__/PokerTemplatePicker_settings.graphql' -import NewMeetingDropdown from '../../../components/NewMeetingDropdown' -import useAtmosphere from '../../../hooks/useAtmosphere' -import useModal from '../../../hooks/useModal' -import SendClientSideEvent from '../../../utils/SendClientSideEvent' -import lazyPreload from '../../../utils/lazyPreload' - -interface Props { - settingsRef: PokerTemplatePicker_settings$key -} - -const PokerTemplateModal = lazyPreload( - () => - import( - /* webpackChunkName: 'PokerTemplateModal' */ - './PokerTemplateModal' - ) -) - -const PokerTemplatePicker = (props: Props) => { - const {settingsRef} = props - const settings = useFragment( - graphql` - fragment PokerTemplatePicker_settings on PokerMeetingSettings { - ...PokerTemplateModal_pokerMeetingSettings - selectedTemplate { - id - name - scope - ...PokerTemplateDetailsTemplate - } - } - `, - settingsRef - ) - const {selectedTemplate} = settings - const {name: templateName, scope} = selectedTemplate - const {togglePortal, modalPortal, closePortal} = useModal({ - id: 'templateModal' - }) - const atmosphere = useAtmosphere() - - const handleClick = () => { - togglePortal() - SendClientSideEvent(atmosphere, 'Opened Template Picker', { - meetingType: 'poker', - scope - }) - } - - return ( - <> - - {modalPortal( - - )} - - ) -} - -export default PokerTemplatePicker diff --git a/packages/client/modules/meeting/components/ReflectTemplateDetails.tsx b/packages/client/modules/meeting/components/ReflectTemplateDetails.tsx deleted file mode 100644 index 81f27ef8cb0..00000000000 --- a/packages/client/modules/meeting/components/ReflectTemplateDetails.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {ReflectTemplateDetails_settings$key} from '../../../__generated__/ReflectTemplateDetails_settings.graphql' -import useAtmosphere from '../../../hooks/useAtmosphere' -import useMutationProps from '../../../hooks/useMutationProps' -import AddReflectTemplateMutation from '../../../mutations/AddReflectTemplateMutation' -import {PALETTE} from '../../../styles/paletteV3' -import getTemplateList from '../../../utils/getTemplateList' -import useTemplateDescription from '../../../utils/useTemplateDescription' -import AddTemplatePrompt from './AddTemplatePrompt' -import CloneTemplate from './CloneTemplate' -import EditableTemplateName from './EditableTemplateName' -import RemoveTemplate from './RemoveTemplate' -import SelectTemplate from './SelectTemplate' -import TemplatePromptList from './TemplatePromptList' -import TemplateSharing from './TemplateSharing' - -const TemplateHeader = styled('div')({ - display: 'flex', - flexDirection: 'column', - margin: '16px 0', - paddingLeft: 56, - paddingRight: 16, - width: '100%', - flexShrink: 0 -}) - -const PromptEditor = styled('div')({ - alignItems: 'flex-start', - background: '#fff', - borderRadius: 8, - display: 'flex', - flexDirection: 'column', - overflow: 'hidden', - maxWidth: 520, - width: '100%' -}) - -const TemplateImage = styled('img')({ - margin: '0 auto', - maxWidth: 360, - maxHeight: 200, - padding: '16px 0 0', - width: '100%', - objectFit: 'contain' -}) - -const Description = styled('div')({ - color: PALETTE.SLATE_700, - fontSize: 14, - lineHeight: '20px' -}) - -const FirstLine = styled('div')({ - alignItems: 'center', - display: 'flex' -}) - -const Scrollable = styled('div')<{isActiveTemplate: boolean}>(({isActiveTemplate}) => ({ - display: 'flex', - flexDirection: 'column', - overflow: 'auto', - paddingBottom: isActiveTemplate ? undefined : 56, - width: '100%' -})) - -interface Props { - gotoTeamTemplates: () => void - gotoPublicTemplates: () => void - closePortal: () => void - settings: ReflectTemplateDetails_settings$key -} - -const ReflectTemplateDetails = (props: Props) => { - const {gotoTeamTemplates, gotoPublicTemplates, closePortal, settings: settingsRef} = props - const settings = useFragment( - graphql` - fragment ReflectTemplateDetails_settings on RetrospectiveMeetingSettings { - activeTemplate { - ...ReflectTemplateDetailsTemplate @relay(mask: false) - ...SelectTemplate_template - illustrationUrl - } - selectedTemplate { - ...ReflectTemplateDetailsTemplate @relay(mask: false) - ...SelectTemplate_template - } - teamTemplates { - ...RemoveTemplate_teamTemplates - } - team { - id - orgId - tier - viewerTeamMember { - user { - id - featureFlags { - noTemplateLimit - } - } - } - } - } - `, - settingsRef - ) - const {teamTemplates, team} = settings - const activeTemplate = settings.activeTemplate ?? settings.selectedTemplate - const {id: templateId, name: templateName, prompts, illustrationUrl} = activeTemplate - const {id: teamId, orgId, tier, viewerTeamMember} = team - const noTemplateLimit = viewerTeamMember?.user?.featureFlags?.noTemplateLimit - const lowestScope = getTemplateList(teamId, orgId, activeTemplate) - const isOwner = activeTemplate.teamId === teamId - const description = useTemplateDescription(lowestScope, activeTemplate, tier) - const atmosphere = useAtmosphere() - const {onError, onCompleted, submitting, submitMutation} = useMutationProps() - const onClone = () => { - if (submitting) return - submitMutation() - AddReflectTemplateMutation( - atmosphere, - {parentTemplateId: templateId, teamId}, - {onError, onCompleted} - ) - gotoTeamTemplates() - } - const isActiveTemplate = templateId === settings.selectedTemplate.id - const showClone = !isOwner && tier !== 'starter' - return ( - - - - - - - {isOwner && ( - - )} - {showClone && } - - {description} - - - {isOwner && } - - - {!isActiveTemplate && ( - - )} - - ) -} - -graphql` - fragment ReflectTemplateDetailsTemplate on ReflectTemplate { - ...TemplateSharing_template - ...getTemplateList_template - ...useTemplateDescription_template - id - name - prompts { - ...TemplatePromptList_prompts - ...AddTemplatePrompt_prompts - } - teamId - } -` -export default ReflectTemplateDetails diff --git a/packages/client/modules/meeting/components/ReflectTemplateItem.tsx b/packages/client/modules/meeting/components/ReflectTemplateItem.tsx deleted file mode 100644 index 82ecc0b860a..00000000000 --- a/packages/client/modules/meeting/components/ReflectTemplateItem.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React, {useEffect, useRef} from 'react' -import {useFragment} from 'react-relay' -import TypeAheadLabel from '~/components/TypeAheadLabel' -import {TierEnum} from '../../../__generated__/OrganizationSubscription.graphql' -import {ReflectTemplateItem_template$key} from '../../../__generated__/ReflectTemplateItem_template.graphql' -import useAtmosphere from '../../../hooks/useAtmosphere' -import useScrollIntoView from '../../../hooks/useScrollIntoVIew' -import {DECELERATE} from '../../../styles/animation' -import textOverflow from '../../../styles/helpers/textOverflow' -import {PALETTE} from '../../../styles/paletteV3' -import SendClientSideEvent from '../../../utils/SendClientSideEvent' -import {setActiveTemplate} from '../../../utils/relay/setActiveTemplate' -import useTemplateDescription from '../../../utils/useTemplateDescription' - -const TemplateItem = styled('li')<{isActive: boolean}>(({isActive}) => ({ - backgroundColor: isActive ? PALETTE.SLATE_200 : undefined, - cursor: 'pointer', - display: 'flex', - fontSize: 14, - justifyContent: 'space-between', - lineHeight: '22px', - paddingTop: 12, - paddingBottom: 12, - paddingLeft: 16, - transition: `background-color 300ms ${DECELERATE}`, - userSelect: 'none', - width: '100%' -})) - -const TemplateItemDetails = styled('div')({ - display: 'flex', - flexDirection: 'column', - width: '100%' -}) - -const TemplateTitle = styled('div')({ - ...textOverflow, - color: PALETTE.SLATE_700, - fontSize: 16, - fontWeight: 600, - lineHeight: '24px' -}) - -const TemplateDescription = styled('div')({ - ...textOverflow, - color: PALETTE.SLATE_600, - fontSize: 12, - lineHeight: '16px' -}) - -const TemplateItemAction = styled('div')({}) - -interface Props { - isActive: boolean - teamId: string - template: ReflectTemplateItem_template$key - lowestScope: 'TEAM' | 'ORGANIZATION' | 'PUBLIC' - templateSearchQuery: string - tier?: TierEnum -} - -const ReflectTemplateItem = (props: Props) => { - const {lowestScope, isActive, teamId, template: templateRef, templateSearchQuery, tier} = props - const template = useFragment( - graphql` - fragment ReflectTemplateItem_template on ReflectTemplate { - #get the details here so we can show them in the details view - ...ReflectTemplateDetailsTemplate - ...useTemplateDescription_template - id - name - lastUsedAt - scope - isFree - } - `, - templateRef - ) - const {id: templateId, name: templateName, scope, isFree} = template - const description = useTemplateDescription(lowestScope, template, tier) - const atmosphere = useAtmosphere() - const ref = useRef(null) - useScrollIntoView(ref, isActive, true) - const selectTemplate = () => { - setActiveTemplate(atmosphere, teamId, templateId, 'retrospective') - } - useEffect(() => { - if (!isActive) return - SendClientSideEvent(atmosphere, 'Viewed Template', { - meetingType: 'retrospective', - scope, - templateName, - isFree - }) - }, [isActive]) - return ( - - - - - - {description} - - - - ) -} - -export default ReflectTemplateItem diff --git a/packages/client/modules/meeting/components/ReflectTemplateList.tsx b/packages/client/modules/meeting/components/ReflectTemplateList.tsx deleted file mode 100644 index f26a201be81..00000000000 --- a/packages/client/modules/meeting/components/ReflectTemplateList.tsx +++ /dev/null @@ -1,240 +0,0 @@ -import styled from '@emotion/styled' -import { - Business as BusinessIcon, - Group as GroupIcon, - Public as PublicIcon -} from '@mui/icons-material' -import graphql from 'babel-plugin-relay/macro' -import React, {useEffect, useRef} from 'react' -import {commitLocalUpdate, useFragment} from 'react-relay' -import SwipeableViews from 'react-swipeable-views' -import {SharingScopeEnum} from '~/__generated__/ReflectTemplateItem_template.graphql' -import useAtmosphere from '~/hooks/useAtmosphere' -import {ReflectTemplateList_settings$key} from '../../../__generated__/ReflectTemplateList_settings.graphql' -import Tab from '../../../components/Tab/Tab' -import Tabs from '../../../components/Tabs/Tabs' -import useBreakpoint from '../../../hooks/useBreakpoint' -import {desktopSidebarShadow} from '../../../styles/elevation' -import {PALETTE} from '../../../styles/paletteV3' -import {Breakpoint} from '../../../types/constEnums' -import AddNewReflectTemplate from './AddNewReflectTemplate' -import ReflectTemplateListOrgRoot from './ReflectTemplateListOrgRoot' -import ReflectTemplateListPublicRoot from './ReflectTemplateListPublicRoot' -import ReflectTemplateListTeam from './ReflectTemplateListTeam' -import ReflectTemplateSearchBar from './ReflectTemplateSearchBar' - -const WIDTH = 360 -const TemplateSidebar = styled('div')<{isDesktop: boolean}>(({isDesktop}) => ({ - boxShadow: desktopSidebarShadow, - display: 'flex', - flexDirection: 'column', - position: 'relative', - width: !isDesktop ? '100%' : WIDTH, - zIndex: 1 // show above template details to show box-shadow -})) - -const Label = styled('div')({ - color: PALETTE.SLATE_700, - fontSize: 20, - fontWeight: 600, - lineHeight: '24px', - paddingTop: 16, - paddingLeft: 24, - paddingBottom: 8 -}) - -const StyledTabsBar = styled(Tabs)({ - boxShadow: `inset 0 -1px 0 ${PALETTE.SLATE_300}`, - flexShrink: 0 -}) - -const FullTab = styled(Tab)({ - padding: '4px 0 8px', - width: '30%' -}) - -const WideTab = styled(FullTab)({ - width: '40%' -}) - -const TabContents = styled('div')({ - display: 'flex', - flexDirection: 'column', - height: '100%' -}) - -const TabLabel = styled('div')({ - display: 'flex', - justifyContent: 'center', - alignItems: 'center' -}) - -const TabIcon = styled('div')({ - width: 24, - height: 24, - marginRight: 4 -}) - -const containerStyle = {height: '100%'} -const innerStyle = {width: '100%', height: '100%'} -interface Props { - activeIdx: number - setActiveIdx: (idx: number) => void - displayUpgradeDetails: () => void - settingsRef: ReflectTemplateList_settings$key -} - -const useReadyToSmoothScroll = (activeTemplateId: string) => { - // Don't animate the scroll behavior on the initial render - const oldActiveTemplateIdRef = useRef(activeTemplateId) - const oldActiveTemplateId = oldActiveTemplateIdRef.current - useEffect(() => { - oldActiveTemplateIdRef.current = activeTemplateId - }, [activeTemplateId]) - return oldActiveTemplateId !== activeTemplateId && oldActiveTemplateId !== '-tmp' -} - -export const templateIdxs = { - TEAM: 0, - ORGANIZATION: 1, - PUBLIC: 2 -} as const - -const ReflectTemplateList = (props: Props) => { - const {activeIdx, setActiveIdx, settingsRef, displayUpgradeDetails} = props - const settings = useFragment( - graphql` - fragment ReflectTemplateList_settings on RetrospectiveMeetingSettings { - ...ReflectTemplateSearchBar_settings - id - templateSearchQuery - team { - ...AddNewReflectTemplate_team - ...ReflectTemplateListTeam_team - id - } - activeTemplate { - ...getTemplateList_template - id - } - teamTemplates { - ...AddNewReflectTemplate_reflectTemplates - ...ReflectTemplateListTeam_teamTemplates - id - } - } - `, - settingsRef - ) - const {id: settingsId, team, teamTemplates, templateSearchQuery} = settings - const {id: teamId} = team - const activeTemplateId = settings.activeTemplate?.id ?? '-tmp' - const readyToScrollSmooth = useReadyToSmoothScroll(activeTemplateId) - const atmosphere = useAtmosphere() - const slideStyle = {scrollBehavior: readyToScrollSmooth ? 'smooth' : undefined} - const templateType = Object.keys(templateIdxs).find( - (key) => templateIdxs[key as keyof typeof templateIdxs] === activeIdx - ) as SharingScopeEnum - - const clearSearch = () => { - commitLocalUpdate(atmosphere, (store) => { - const settings = store.get(settingsId) - if (!settings) return - settings.setValue('', 'templateSearchQuery') - }) - } - - const goToTab = (templateType: SharingScopeEnum) => { - setActiveIdx(templateIdxs[templateType]) - clearSearch() - } - - const onChangeIdx = (idx: number, _fromIdx: number, props: {reason: string}) => { - //very buggy behavior, probably linked to the vertical scrolling. - // to repro, go from team > org > team > org by clicking tabs & see this this get called for who knows why - if (props.reason === 'focus') return - setActiveIdx(idx) - clearSearch() - } - const isDesktop = useBreakpoint(Breakpoint.NEW_MEETING_GRID) - - return ( - - - - - - - {' '} - Team - - } - onClick={() => goToTab('TEAM')} - /> - - - - {' '} - Organization - - } - onClick={() => goToTab('ORGANIZATION')} - /> - - - - {' '} - Public - - } - onClick={() => goToTab('PUBLIC')} - /> - - - goToTab('TEAM')} - /> - - - goToTab('PUBLIC')} - templateSearchQuery={templateSearchQuery ?? ''} - teamRef={team} - teamTemplatesRef={teamTemplates} - isActive={activeIdx === 0} - /> - - - {activeIdx === 1 && } - - - {activeIdx === 2 && } - - - {/* add a key to clear the error when they change */} - - ) -} - -export default ReflectTemplateList diff --git a/packages/client/modules/meeting/components/ReflectTemplateListOrg.tsx b/packages/client/modules/meeting/components/ReflectTemplateListOrg.tsx deleted file mode 100644 index cb3be11db2a..00000000000 --- a/packages/client/modules/meeting/components/ReflectTemplateListOrg.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {PreloadedQuery, usePreloadedQuery} from 'react-relay' -import {useHistory} from 'react-router' -import useFilteredItems from '~/hooks/useFilteredItems' -import {ReflectTemplateListOrgQuery} from '../../../__generated__/ReflectTemplateListOrgQuery.graphql' -import useActiveTopTemplate from '../../../hooks/useActiveTopTemplate' -import useAtmosphere from '../../../hooks/useAtmosphere' -import {PALETTE} from '../../../styles/paletteV3' -import SendClientSideEvent from '../../../utils/SendClientSideEvent' -import ReflectTemplateItem from './ReflectTemplateItem' - -const TemplateList = styled('ul')({ - listStyle: 'none', - paddingLeft: 0, - marginTop: 0 -}) - -const StyledLink = styled('span')({ - color: PALETTE.SKY_500, - cursor: 'pointer', - outline: 0, - ':hover, :focus, :active': { - color: PALETTE.SKY_600 - } -}) - -const Message = styled('div')({ - border: `1px dashed ${PALETTE.SLATE_400}`, - borderRadius: 4, - color: PALETTE.SLATE_600, - fontSize: 14, - fontStyle: 'italic', - lineHeight: '20px', - margin: 'auto 32px', - padding: '8px 16px' -}) -interface Props { - queryRef: PreloadedQuery -} - -const getValue = (item: {node: {id: string; name: string}}) => { - return item.node.name.toLowerCase() -} - -const query = graphql` - query ReflectTemplateListOrgQuery($teamId: ID!) { - viewer { - id - team(teamId: $teamId) { - id - orgId - tier - meetingSettings(meetingType: retrospective) { - ... on RetrospectiveMeetingSettings { - templateSearchQuery - organizationTemplates(first: 20) - @connection(key: "ReflectTemplateListOrg_organizationTemplates") { - edges { - node { - ...ReflectTemplateItem_template - id - name - } - } - } - activeTemplate { - id - } - } - } - } - } - } -` - -const ReflectTemplateListOrg = (props: Props) => { - const {queryRef} = props - const data = usePreloadedQuery(query, queryRef) - const atmosphere = useAtmosphere() - const history = useHistory() - const {viewer} = data - const team = viewer.team! - const {id: teamId, meetingSettings, orgId, tier} = team - const {templateSearchQuery, organizationTemplates, activeTemplate} = meetingSettings - const searchQuery = templateSearchQuery ?? '' - const activeTemplateId = activeTemplate?.id ?? '-tmp' - const {edges} = organizationTemplates! - const filteredEdges = useFilteredItems(searchQuery, edges, getValue) - useActiveTopTemplate(edges, activeTemplateId, teamId, true, 'retrospective') - - if (edges.length === 0) { - if (tier === 'starter') { - const goToBilling = () => { - SendClientSideEvent(atmosphere, 'Upgrade CTA Clicked', { - upgradeCTALocation: 'orgTemplate', - meetingType: 'retrospective' - }) - history.push(`/me/organizations/${orgId}`) - } - return ( - - Upgrade - to create custom templates for your organization - - ) - } - return {'No other teams in your organization are sharing a template.'} - } - if (filteredEdges.length === 0) { - return ( - {`No template names in your organization match your search query "${searchQuery}"`} - ) - } - return ( - - {filteredEdges.map(({node: template}) => { - return ( - - ) - })} - - ) -} - -export default ReflectTemplateListOrg diff --git a/packages/client/modules/meeting/components/ReflectTemplateListOrgRoot.tsx b/packages/client/modules/meeting/components/ReflectTemplateListOrgRoot.tsx deleted file mode 100644 index 13013cb74ea..00000000000 --- a/packages/client/modules/meeting/components/ReflectTemplateListOrgRoot.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, {Suspense} from 'react' -import reflectTemplateListOrgQuery, { - ReflectTemplateListOrgQuery -} from '../../../__generated__/ReflectTemplateListOrgQuery.graphql' -import useQueryLoaderNow from '../../../hooks/useQueryLoaderNow' -import MockTemplateList from './MockTemplateList' -import ReflectTemplateListOrg from './ReflectTemplateListOrg' - -interface Props { - teamId: string -} - -const ReflectTemplateListOrgRoot = (props: Props) => { - const {teamId} = props - const queryRef = useQueryLoaderNow(reflectTemplateListOrgQuery, { - teamId - }) - return ( - }> - {queryRef && } - - ) -} - -export default ReflectTemplateListOrgRoot diff --git a/packages/client/modules/meeting/components/ReflectTemplateListPublic.tsx b/packages/client/modules/meeting/components/ReflectTemplateListPublic.tsx deleted file mode 100644 index 4db3cc5fef4..00000000000 --- a/packages/client/modules/meeting/components/ReflectTemplateListPublic.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {PreloadedQuery, usePreloadedQuery} from 'react-relay' -import useFilteredItems from '~/hooks/useFilteredItems' -import {PALETTE} from '~/styles/paletteV3' -import {ReflectTemplateListPublicQuery} from '../../../__generated__/ReflectTemplateListPublicQuery.graphql' -import useActiveTopTemplate from '../../../hooks/useActiveTopTemplate' -import ReflectTemplateItem from './ReflectTemplateItem' - -const TemplateList = styled('ul')({ - listStyle: 'none', - paddingLeft: 0, - marginTop: 0 -}) - -const Message = styled('div')({ - border: `1px dashed ${PALETTE.SLATE_400}`, - borderRadius: 4, - color: PALETTE.SLATE_600, - fontSize: 14, - fontStyle: 'italic', - lineHeight: '20px', - margin: 'auto 32px', - padding: '8px 16px' -}) - -interface Props { - queryRef: PreloadedQuery -} - -const getValue = (item: {node: {id: string; name: string}}) => { - return item.node.name.toLowerCase() -} - -const query = graphql` - query ReflectTemplateListPublicQuery($teamId: ID!) { - viewer { - id - team(teamId: $teamId) { - id - tier - meetingSettings(meetingType: retrospective) { - ... on RetrospectiveMeetingSettings { - templateSearchQuery - publicTemplates(first: 100) - @connection(key: "ReflectTemplateListPublic_publicTemplates") { - edges { - node { - ...ReflectTemplateItem_template - id - name - createdAt - category - } - } - } - activeTemplate { - id - } - } - } - } - } - } -` - -const ReflectTemplateListPublic = (props: Props) => { - const {queryRef} = props - const data = usePreloadedQuery(query, queryRef) - const {viewer} = data - const team = viewer.team! - const {id: teamId, meetingSettings, tier} = team - const {templateSearchQuery, publicTemplates, activeTemplate} = meetingSettings - const searchQuery = templateSearchQuery ?? '' - const activeTemplateId = activeTemplate?.id ?? '-tmp' - const {edges} = publicTemplates! - const filteredEdges = useFilteredItems(searchQuery, edges, getValue).filter( - ({node}) => !['premortem', 'postmortem'].includes(node.category) - ) - useActiveTopTemplate(edges, activeTemplateId, teamId, true, 'retrospective') - if (filteredEdges.length === 0) { - return {`No public templates match your search query "${searchQuery}"`} - } - return ( - - {filteredEdges.map(({node: template}) => { - return ( - - ) - })} - - ) -} - -export default ReflectTemplateListPublic diff --git a/packages/client/modules/meeting/components/ReflectTemplateListPublicRoot.tsx b/packages/client/modules/meeting/components/ReflectTemplateListPublicRoot.tsx deleted file mode 100644 index 98d478b0fb1..00000000000 --- a/packages/client/modules/meeting/components/ReflectTemplateListPublicRoot.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, {Suspense} from 'react' -import reflectTemplateListPublicQuery, { - ReflectTemplateListPublicQuery -} from '../../../__generated__/ReflectTemplateListPublicQuery.graphql' -import useQueryLoaderNow from '../../../hooks/useQueryLoaderNow' -import MockTemplateList from './MockTemplateList' -import ReflectTemplateListPublic from './ReflectTemplateListPublic' - -interface Props { - teamId: string -} - -const ReflectTemplateListPublicRoot = (props: Props) => { - const {teamId} = props - const queryRef = useQueryLoaderNow( - reflectTemplateListPublicQuery, - { - teamId - } - ) - return ( - }> - {queryRef && } - - ) -} - -export default ReflectTemplateListPublicRoot diff --git a/packages/client/modules/meeting/components/ReflectTemplateListTeam.tsx b/packages/client/modules/meeting/components/ReflectTemplateListTeam.tsx deleted file mode 100644 index 49abd2e6ab8..00000000000 --- a/packages/client/modules/meeting/components/ReflectTemplateListTeam.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {useHistory} from 'react-router' -import useFilteredItems from '~/hooks/useFilteredItems' -import {ReflectTemplateListTeam_team$key} from '../../../__generated__/ReflectTemplateListTeam_team.graphql' -import { - ReflectTemplateListTeam_teamTemplates$data, - ReflectTemplateListTeam_teamTemplates$key -} from '../../../__generated__/ReflectTemplateListTeam_teamTemplates.graphql' -import useActiveTopTemplate from '../../../hooks/useActiveTopTemplate' -import useAtmosphere from '../../../hooks/useAtmosphere' -import {PALETTE} from '../../../styles/paletteV3' -import SendClientSideEvent from '../../../utils/SendClientSideEvent' -import ReflectTemplateItem from './ReflectTemplateItem' - -const TemplateList = styled('ul')({ - listStyle: 'none', - paddingLeft: 0, - marginTop: 0 -}) - -const Message = styled('div')({ - border: `1px dashed ${PALETTE.SLATE_400}`, - borderRadius: 4, - color: PALETTE.SLATE_600, - fontSize: 14, - fontStyle: 'italic', - lineHeight: '20px', - margin: 'auto 32px', - padding: '8px 16px' -}) - -const StyledLink = styled('span')({ - color: PALETTE.SKY_500, - cursor: 'pointer', - outline: 0, - ':hover, :focus, :active': { - color: PALETTE.SKY_600 - } -}) - -interface Props { - isActive: boolean - activeTemplateId: string - showPublicTemplates: () => void - teamTemplatesRef: ReflectTemplateListTeam_teamTemplates$key - teamRef: ReflectTemplateListTeam_team$key - templateSearchQuery: string -} - -const getValue = (item: ReflectTemplateListTeam_teamTemplates$data[0]) => { - return item.name.toLowerCase() -} - -const ReflectTemplateListTeam = (props: Props) => { - const { - isActive, - activeTemplateId, - showPublicTemplates, - templateSearchQuery, - teamTemplatesRef, - teamRef - } = props - const teamTemplates = useFragment( - graphql` - fragment ReflectTemplateListTeam_teamTemplates on ReflectTemplate @relay(plural: true) { - id - name - ...ReflectTemplateItem_template - } - `, - teamTemplatesRef - ) - const team = useFragment( - graphql` - fragment ReflectTemplateListTeam_team on Team { - id - orgId - tier - } - `, - teamRef - ) - const history = useHistory() - const atmosphere = useAtmosphere() - const {orgId, tier, id: teamId} = team - const searchQuery = templateSearchQuery ?? '' - const edges = teamTemplates.map((t) => ({node: {id: t.id}})) as readonly {node: {id: string}}[] - useActiveTopTemplate(edges, activeTemplateId, teamId, isActive, 'retrospective') - const filteredTemplates = useFilteredItems(searchQuery, teamTemplates, getValue) - if (teamTemplates.length === 0) { - if (tier === 'starter') { - const goToBilling = () => { - SendClientSideEvent(atmosphere, 'Upgrade CTA Clicked', { - upgradeCTALocation: 'teamTemplate', - meetingType: 'retrospective' - }) - history.push(`/me/organizations/${orgId}`) - } - return ( - - Upgrade - to create custom templates for your team - - ) - } - return ( - - Your custom templates will show up here. Get started with a - Public Template - - ) - } - if (filteredTemplates.length === 0) { - return {`No team templates match your search query "${searchQuery}"`} - } - return ( - - {teamTemplates.map((template) => { - return ( - - ) - })} - - ) -} - -export default ReflectTemplateListTeam diff --git a/packages/client/modules/meeting/components/ReflectTemplateModal.tsx b/packages/client/modules/meeting/components/ReflectTemplateModal.tsx deleted file mode 100644 index 384ebb73cd7..00000000000 --- a/packages/client/modules/meeting/components/ReflectTemplateModal.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import styled from '@emotion/styled' -import graphql from 'babel-plugin-relay/macro' -import React, {useEffect, useState} from 'react' -import {useFragment} from 'react-relay' -import {ReflectTemplateModal_retroMeetingSettings$key} from '../../../__generated__/ReflectTemplateModal_retroMeetingSettings.graphql' -import DialogContainer from '../../../components/DialogContainer' -import useAtmosphere from '../../../hooks/useAtmosphere' -import getTemplateList from '../../../utils/getTemplateList' -import {setActiveTemplate} from '../../../utils/relay/setActiveTemplate' -import CustomTemplateUpgradeMsg from './CustomTemplateUpgradeMsg' -import ReflectTemplateDetails from './ReflectTemplateDetails' -import ReflectTemplateList from './ReflectTemplateList' - -interface Props { - closePortal: () => void - retroMeetingSettingsRef: ReflectTemplateModal_retroMeetingSettings$key -} - -const StyledDialogContainer = styled(DialogContainer)({ - flexDirection: 'row', - width: 880, - maxHeight: 520, - minHeight: 520 -}) - -const SCOPES = ['TEAM', 'ORGANIZATION', 'PUBLIC'] - -const ReflectTemplateModal = (props: Props) => { - const {closePortal, retroMeetingSettingsRef} = props - const retroMeetingSettings = useFragment( - graphql` - fragment ReflectTemplateModal_retroMeetingSettings on RetrospectiveMeetingSettings { - ...ReflectTemplateList_settings - ...ReflectTemplateDetails_settings - meetingType - team { - id - orgId - } - selectedTemplate { - id - ...getTemplateList_template - } - activeTemplate { - id - } - } - `, - retroMeetingSettingsRef - ) - const {selectedTemplate, team, activeTemplate, meetingType} = retroMeetingSettings - const {id: teamId, orgId} = team - const lowestScope = getTemplateList(teamId, orgId, selectedTemplate) - const listIdx = SCOPES.indexOf(lowestScope) - const [activeIdx, setActiveIdx] = useState(listIdx) - const [showUpgradeDetails, setShowUpgradeDetails] = useState(false) - const gotoTeamTemplates = () => { - setActiveIdx(0) - } - const gotoPublicTemplates = () => { - setActiveIdx(2) - } - - const atmosphere = useAtmosphere() - useEffect(() => { - setActiveTemplate(atmosphere, teamId, selectedTemplate.id, 'retrospective') - }, []) - - const displayUpgradeDetails = () => { - setShowUpgradeDetails(true) - } - - const hideUpgradeDetails = () => { - setShowUpgradeDetails(false) - } - - useEffect(() => { - if (showUpgradeDetails) hideUpgradeDetails() - }, [activeTemplate]) - - return ( - - - {showUpgradeDetails ? ( - - ) : ( - - )} - - ) -} -export default ReflectTemplateModal diff --git a/packages/client/modules/meeting/components/ReflectTemplateSearchBar.tsx b/packages/client/modules/meeting/components/ReflectTemplateSearchBar.tsx deleted file mode 100644 index d0d78ed14c7..00000000000 --- a/packages/client/modules/meeting/components/ReflectTemplateSearchBar.tsx +++ /dev/null @@ -1,139 +0,0 @@ -import styled from '@emotion/styled' -import {Close, Search as SearchIcon} from '@mui/icons-material' -import graphql from 'babel-plugin-relay/macro' -import React, {ChangeEvent, useRef} from 'react' -import {commitLocalUpdate, useFragment} from 'react-relay' -import {SharingScopeEnum} from '~/__generated__/ReflectTemplateItem_template.graphql' -import {ReflectTemplateSearchBar_settings$key} from '~/__generated__/ReflectTemplateSearchBar_settings.graphql' -import Atmosphere from '../../../Atmosphere' -import MenuItemComponentAvatar from '../../../components/MenuItemComponentAvatar' -import MenuItemLabel from '../../../components/MenuItemLabel' -import useAtmosphere from '../../../hooks/useAtmosphere' -import {PALETTE} from '../../../styles/paletteV3' - -const SearchBarWrapper = styled('div')({ - padding: '16px 16px 0 16px' -}) - -const Search = styled(MenuItemLabel)({ - alignItems: 'center', - border: `1px solid ${PALETTE.SLATE_400}`, - borderRadius: '40px', - display: 'flex', - height: 40, - overflow: 'visible', - paddingLeft: 20, - position: 'relative', - width: '100%' -}) - -const StyledMenuItemIcon = styled(MenuItemComponentAvatar)({ - position: 'absolute', - left: 10, - top: 8 -}) - -const StyledSearchIcon = styled(SearchIcon)({ - color: PALETTE.SLATE_600 -}) - -const ClearSearchIcon = styled(Close)<{isEmpty: boolean}>(({isEmpty}) => ({ - color: PALETTE.SLATE_500, - cursor: 'pointer', - margin: 8, - display: isEmpty ? 'none' : 'flex' -})) - -const InputWrapper = styled('div')({ - alignItems: 'center', - display: 'flex', - flex: 1, - paddingLeft: 8 -}) - -const SearchInput = styled('input')({ - appearance: 'none', - border: 'none', - color: PALETTE.SLATE_700, - fontSize: 16, - margin: 0, - padding: 12, - height: 40, - outline: 0, - backgroundColor: 'transparent', - width: '100%' -}) - -const setTemplateSearch = (atmosphere: Atmosphere, settingsId: string, value: string) => { - commitLocalUpdate(atmosphere, (store) => { - const settings = store.get(settingsId) - if (!settings) return - const normalizedSearch = value.toLowerCase() - settings.setValue(normalizedSearch, 'templateSearchQuery') - }) -} - -interface Props { - templateType: SharingScopeEnum - clearSearch: () => void - settingsRef: ReflectTemplateSearchBar_settings$key -} - -const ReflectTemplateSearchBar = (props: Props) => { - const {templateType, clearSearch, settingsRef} = props - const atmosphere = useAtmosphere() - const settings = useFragment( - graphql` - fragment ReflectTemplateSearchBar_settings on RetrospectiveMeetingSettings { - id - templateSearchQuery - } - `, - settingsRef - ) - const {id: settingsId, templateSearchQuery} = settings - const normalizedTempType = templateType === 'ORGANIZATION' ? 'org' : templateType?.toLowerCase() - - const onChange = (e: ChangeEvent) => { - setTemplateSearch(atmosphere, settingsId, e.currentTarget.value) - } - - const inputRef = useRef(null) - const onKeyDown = (e: React.KeyboardEvent) => { - if (e.key === 'Escape' && inputRef.current) { - e.stopPropagation() - e.preventDefault() - inputRef.current.blur() - } - } - - const handleClear = () => { - inputRef.current?.focus() - clearSearch() - } - - return ( - - - - - - - - - - - - ) -} - -export default ReflectTemplateSearchBar diff --git a/packages/client/modules/meeting/components/RetroTemplatePicker.tsx b/packages/client/modules/meeting/components/RetroTemplatePicker.tsx deleted file mode 100644 index 348f38cebf2..00000000000 --- a/packages/client/modules/meeting/components/RetroTemplatePicker.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {RetroTemplatePicker_settings$key} from '../../../__generated__/RetroTemplatePicker_settings.graphql' -import NewMeetingDropdown from '../../../components/NewMeetingDropdown' -import useAtmosphere from '../../../hooks/useAtmosphere' -import useModal from '../../../hooks/useModal' -import SendClientSideEvent from '../../../utils/SendClientSideEvent' -import lazyPreload from '../../../utils/lazyPreload' - -interface Props { - settingsRef: RetroTemplatePicker_settings$key -} - -const ReflectTemplateModal = lazyPreload( - () => - import( - /* webpackChunkName: 'ReflectTemplateModal' */ - './ReflectTemplateModal' - ) -) - -const RetroTemplatePicker = (props: Props) => { - const {settingsRef} = props - const settings = useFragment( - graphql` - fragment RetroTemplatePicker_settings on RetrospectiveMeetingSettings { - ...ReflectTemplateModal_retroMeetingSettings - selectedTemplate { - id - name - scope - ...ReflectTemplateDetailsTemplate - } - } - `, - settingsRef - ) - - const {selectedTemplate} = settings - const {name: templateName, scope} = selectedTemplate - const {togglePortal, modalPortal, closePortal} = useModal({ - id: 'templateModal' - }) - const atmosphere = useAtmosphere() - - const handleClick = () => { - togglePortal() - SendClientSideEvent(atmosphere, 'Opened Template Picker', { - meetingType: 'retrospective', - scope - }) - } - - return ( - <> - - {modalPortal( - - )} - - ) -} - -export default RetroTemplatePicker diff --git a/packages/client/modules/meeting/components/SelectTemplate.tsx b/packages/client/modules/meeting/components/SelectTemplate.tsx deleted file mode 100644 index 26dc199aae6..00000000000 --- a/packages/client/modules/meeting/components/SelectTemplate.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import {keyframes} from '@emotion/core' -import styled from '@emotion/styled' -import {Check} from '@mui/icons-material' -import graphql from 'babel-plugin-relay/macro' -import React from 'react' -import {useFragment} from 'react-relay' -import {useHistory} from 'react-router' -import {TierEnum} from '../../../__generated__/ReflectTemplateListPublicQuery.graphql' -import {SelectTemplate_template$key} from '../../../__generated__/SelectTemplate_template.graphql' -import FloatingActionButton from '../../../components/FloatingActionButton' -import StyledError from '../../../components/StyledError' -import useAtmosphere from '../../../hooks/useAtmosphere' -import useMutationProps from '../../../hooks/useMutationProps' -import SelectTemplateMutation from '../../../mutations/SelectTemplateMutation' -import {BezierCurve} from '../../../types/constEnums' -import SendClientSideEvent from '../../../utils/SendClientSideEvent' - -const fadein = keyframes` -0% { opacity: 0; } -100% { opacity: 1; } -` - -const ButtonBlock = styled('div')({ - animation: `${fadein} 200ms ${BezierCurve.DECELERATE}`, - alignItems: 'flex-end', - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-end', - pointerEvents: 'none', - position: 'absolute', - right: 16, - bottom: 16, - width: '100%', - zIndex: 1 -}) - -const Button = styled(FloatingActionButton)({ - border: 0, - fontSize: 16, - padding: '8px 20px', - pointerEvents: 'all' -}) - -const UpgradeButton = styled(Button)({ - padding: '10px 24px' -}) - -const StyledIcon = styled(Check)({ - marginRight: 4 -}) - -interface Props { - closePortal: () => void - template: SelectTemplate_template$key - teamId: string - tier?: TierEnum - noTemplateLimit?: boolean - orgId?: string -} - -const SelectTemplate = (props: Props) => { - const {template: templateRef, closePortal, teamId, tier, noTemplateLimit, orgId} = props - const template = useFragment( - graphql` - fragment SelectTemplate_template on MeetingTemplate { - id - teamId - scope - isFree - type - } - `, - templateRef - ) - const {id: templateId, isFree, type, scope} = template - const atmosphere = useAtmosphere() - const history = useHistory() - const {submitting, error, onCompleted, onError} = useMutationProps() - const selectTemplate = () => { - SelectTemplateMutation( - atmosphere, - {selectedTemplateId: templateId, teamId}, - {onCompleted, onError} - ) - closePortal() - } - const goToBilling = () => { - SendClientSideEvent(atmosphere, 'Upgrade CTA Clicked', { - upgradeCTALocation: 'publicTemplate', - meetingType: type - }) - history.push(`/me/organizations/${orgId}`) - } - const showUpgradeCTA = !isFree && tier === 'starter' && scope === 'PUBLIC' && !noTemplateLimit - if (showUpgradeCTA) { - return ( - - - {'Upgrade Now'} - - - ) - } - return ( - - {error && {error.message}} - - - ) -} - -export default SelectTemplate diff --git a/packages/client/mutations/AddPokerTemplateMutation.ts b/packages/client/mutations/AddPokerTemplateMutation.ts index cf2d9fce175..698dd1d14d2 100644 --- a/packages/client/mutations/AddPokerTemplateMutation.ts +++ b/packages/client/mutations/AddPokerTemplateMutation.ts @@ -15,7 +15,6 @@ graphql` } pokerTemplate { ...TemplateSharing_template - ...PokerTemplateDetailsTemplate ...ActivityDetails_template id teamId diff --git a/packages/client/mutations/AddReflectTemplateMutation.ts b/packages/client/mutations/AddReflectTemplateMutation.ts index 10ee982db9a..19d73535764 100644 --- a/packages/client/mutations/AddReflectTemplateMutation.ts +++ b/packages/client/mutations/AddReflectTemplateMutation.ts @@ -14,7 +14,6 @@ graphql` } reflectTemplate { ...TemplateSharing_template - ...ReflectTemplateDetailsTemplate ...ActivityDetails_template id teamId diff --git a/packages/client/mutations/RemovePokerTemplateMutation.ts b/packages/client/mutations/RemovePokerTemplateMutation.ts index e463b7de7c0..978c8bafaf6 100644 --- a/packages/client/mutations/RemovePokerTemplateMutation.ts +++ b/packages/client/mutations/RemovePokerTemplateMutation.ts @@ -32,12 +32,9 @@ export const removePokerTemplateTeamUpdater: SharedUpdater< RemovePokerTemplateMutation_team$data > = (payload, {store}) => { const templateId = payload.getLinkedRecord('pokerTemplate').getValue('id') - const teamId = payload.getLinkedRecord('pokerTemplate').getValue('teamId') - handleRemovePokerTemplate(templateId, teamId, store) + handleRemovePokerTemplate(templateId, store) } -type PokerTemplate = NonNullable - const RemovePokerTemplateMutation: StandardMutation = ( atmosphere, variables, @@ -55,9 +52,7 @@ const RemovePokerTemplateMutation: StandardMutation { const {templateId} = variables - const template = store.get(templateId)! - const teamId = template.getValue('teamId') - handleRemovePokerTemplate(templateId, teamId, store) + handleRemovePokerTemplate(templateId, store) } }) } diff --git a/packages/client/mutations/UpdatePokerTemplateScopeMutation.ts b/packages/client/mutations/UpdatePokerTemplateScopeMutation.ts index e71c59146c8..2210146aaa8 100644 --- a/packages/client/mutations/UpdatePokerTemplateScopeMutation.ts +++ b/packages/client/mutations/UpdatePokerTemplateScopeMutation.ts @@ -13,15 +13,12 @@ import getCachedRecord from '../utils/relay/getCachedRecord' import getNodeById from '../utils/relay/getNodeById' import {insertEdgeAfter} from '../utils/relay/insertEdge' import safeRemoveNodeFromArray from '../utils/relay/safeRemoveNodeFromArray' -import safeRemoveNodeFromConn from '../utils/relay/safeRemoveNodeFromConn' -import getPokerTemplateOrgConn from './connections/getPokerTemplateOrgConn' graphql` fragment UpdatePokerTemplateScopeMutation_organization on UpdateTemplateScopeSuccess { template { # these fragments are needed for listening org members ...TemplateSharing_template - ...PokerTemplateDetailsTemplate id orgId scope @@ -29,7 +26,6 @@ graphql` } clonedTemplate { ...TemplateSharing_template - ...PokerTemplateDetailsTemplate orgId } } @@ -55,9 +51,6 @@ const removeTemplateFromCurrentScope = ( ) => { if (scopeList === 'TEAM') { safeRemoveNodeFromArray(templateId, meetingSettings, 'teamTemplates') - } else if (scopeList === 'ORGANIZATION') { - const orgTemplatesConn = getPokerTemplateOrgConn(meetingSettings) - safeRemoveNodeFromConn(templateId, orgTemplatesConn) } // not possible for the public list to get mutated because this is an org subscription } @@ -78,14 +71,10 @@ export const putTemplateInConnection = ( const addTemplateToScope = ( template: RecordProxy, scope: SharingScopeEnum, - meetingSettings: RecordProxy, - store: RecordSourceSelectorProxy + meetingSettings: RecordProxy ) => { if (scope === 'TEAM') { addNodeToArray(template, meetingSettings, 'teamTemplates') - } else if (scope === 'ORGANIZATION') { - const orgTemplatesConn = getPokerTemplateOrgConn(meetingSettings) - putTemplateInConnection(template, orgTemplatesConn, store) } } @@ -117,13 +106,13 @@ const handleUpdateTemplateScope = ( if (scopeList === 'TEAM') { if (clonedTemplate) { removeTemplateFromCurrentScope(templateId, scopeList, meetingSettings) - addTemplateToScope(nextTemplate, scopeList, meetingSettings, store) + addTemplateToScope(nextTemplate, scopeList, meetingSettings) } } else if (scopeList === 'ORGANIZATION') { if (isDecreasing) { removeTemplateFromCurrentScope(templateId, scopeList, meetingSettings) } else { - addTemplateToScope(nextTemplate, scopeList, meetingSettings, store) + addTemplateToScope(nextTemplate, scopeList, meetingSettings) } } }) diff --git a/packages/client/mutations/UpdateReflectTemplateScopeMutation.ts b/packages/client/mutations/UpdateReflectTemplateScopeMutation.ts index a82aea83e11..7e547ad17d3 100644 --- a/packages/client/mutations/UpdateReflectTemplateScopeMutation.ts +++ b/packages/client/mutations/UpdateReflectTemplateScopeMutation.ts @@ -21,7 +21,6 @@ graphql` template { # these fragments are needed for listening org members ...TemplateSharing_template - ...ReflectTemplateDetailsTemplate id orgId scope @@ -29,7 +28,6 @@ graphql` } clonedTemplate { ...TemplateSharing_template - ...ReflectTemplateDetailsTemplate orgId } } diff --git a/packages/client/mutations/connections/getPokerTemplateOrgConn.ts b/packages/client/mutations/connections/getPokerTemplateOrgConn.ts deleted file mode 100644 index b9737b45d76..00000000000 --- a/packages/client/mutations/connections/getPokerTemplateOrgConn.ts +++ /dev/null @@ -1,13 +0,0 @@ -import {ConnectionHandler, ReadOnlyRecordProxy} from 'relay-runtime' - -const getPokerTemplateOrgConn = (pokerSettings: ReadOnlyRecordProxy | null | undefined) => { - if (pokerSettings) { - return ConnectionHandler.getConnection( - pokerSettings, - 'PokerTemplateListOrg_organizationTemplates' - ) - } - return null -} - -export default getPokerTemplateOrgConn diff --git a/packages/client/mutations/connections/getPokerTemplatePublicConn.ts b/packages/client/mutations/connections/getPokerTemplatePublicConn.ts deleted file mode 100644 index 1dd09e2f14e..00000000000 --- a/packages/client/mutations/connections/getPokerTemplatePublicConn.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {ConnectionHandler, ReadOnlyRecordProxy} from 'relay-runtime' - -const getPokerTemplatePublicConn = (pokerSettings: ReadOnlyRecordProxy | null | undefined) => { - if (pokerSettings) { - return ConnectionHandler.getConnection(pokerSettings, 'PokerTemplateListPublic_publicTemplates') - } - return null -} - -export default getPokerTemplatePublicConn diff --git a/packages/client/mutations/handlers/handleMovePokerTemplateDimension.ts b/packages/client/mutations/handlers/handleMovePokerTemplateDimension.ts index 540c012f9c8..6cc0d13df0f 100644 --- a/packages/client/mutations/handlers/handleMovePokerTemplateDimension.ts +++ b/packages/client/mutations/handlers/handleMovePokerTemplateDimension.ts @@ -1,8 +1,8 @@ import {RecordSourceProxy} from 'relay-runtime' -import {PokerTemplateDetailsTemplate$data} from '~/__generated__/PokerTemplateDetailsTemplate.graphql' +import {TemplateDetails_activity$data} from '~/__generated__/TemplateDetails_activity.graphql' const handleMovePokerTemplateDimension = (store: RecordSourceProxy, templateId: string) => { - const template = store.get(templateId) + const template = store.get(templateId) if (!template) return const dimensions = template.getLinkedRecords('dimensions') if (!Array.isArray(dimensions)) return diff --git a/packages/client/mutations/handlers/handleRemovePokerTemplate.ts b/packages/client/mutations/handlers/handleRemovePokerTemplate.ts index d35ba7bd540..2036fcb94fa 100644 --- a/packages/client/mutations/handlers/handleRemovePokerTemplate.ts +++ b/packages/client/mutations/handlers/handleRemovePokerTemplate.ts @@ -1,26 +1,8 @@ import {ConnectionHandler, RecordSourceSelectorProxy} from 'relay-runtime' -import {PokerTemplateList_settings$data} from '~/__generated__/PokerTemplateList_settings.graphql' -import safeRemoveNodeFromArray from '../../utils/relay/safeRemoveNodeFromArray' import safeRemoveNodeFromConn from '../../utils/relay/safeRemoveNodeFromConn' -import getPokerTemplateOrgConn from '../connections/getPokerTemplateOrgConn' -import getPokerTemplatePublicConn from '../connections/getPokerTemplatePublicConn' import pluralizeHandler from './pluralizeHandler' -const handleRemovePokerTemplate = ( - templateId: string, - teamId: string, - store: RecordSourceSelectorProxy -) => { - const team = store.get(teamId)! - const settings = team.getLinkedRecord('meetingSettings', { - meetingType: 'poker' - }) - safeRemoveNodeFromArray(templateId, settings, 'teamTemplates') - const orgConn = getPokerTemplateOrgConn(settings) - const publicConn = getPokerTemplatePublicConn(settings) - safeRemoveNodeFromConn(templateId, orgConn) - safeRemoveNodeFromConn(templateId, publicConn) - +const handleRemovePokerTemplate = (templateId: string, store: RecordSourceSelectorProxy) => { const viewer = store.getRoot().getLinkedRecord('viewer') const allAvailableConn = viewer && ConnectionHandler.getConnection(viewer, 'ActivityLibrary_availableTemplates')