@planningcenter/chat-react-native 3.2.0 → 3.4.0-rc.0

package/src/screens/conversation_new/components/services_form.tsx

@@ -0,0 +1,229 @@
+import { StackActions, useNavigation } from '@react-navigation/native'
+import React, { useCallback, useMemo, useState } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Badge, Banner, ChildNotice, Heading, Switch, Text } from '../../../components'
+import { ActionButton } from '../../../components/display/action_button'
+import { Divider, FormList } from './form_list'
+import { pluralize } from '../../../utils'
+import { uniq } from 'lodash'
+import { useTeamsILead } from '../../../hooks/services/use_teams_i_lead'
+import { FilterByPlanOptions } from './filter_by_plan_options'
+import { useTeamMembersForNewConversation } from '../../../hooks/services/use_team_members_for_new_conversation'
+import { useFindOrCreateServicesConversation } from '../../../hooks/services/use_find_or_create_services_conversation'
+import { ConversationResource, MemberResource } from '../../../types'
+
+type ServicesFormProps = {
+  initialTeamIds?: number[]
+  initialPlanId?: number
+}
+
+export const ServicesForm = ({ initialTeamIds, initialPlanId }: ServicesFormProps) => {
+  const styles = useStyles()
+  const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(initialPlanId)
+  const initialState = uniq(initialTeamIds) || [] // Uniq here because services can send duplicates in the teams_i_lead response.
+  const [selectedTeamIds, setSelectedTeamIds] = useState<number[]>(initialState)
+
+  const removeSelection = useCallback(
+    (teamId: number) => {
+      setSelectedTeamIds(selectedTeamIds.filter(id => id !== teamId))
+    },
+    [selectedTeamIds]
+  )
+
+  const [filerByPlan, setFilterByPlan] = useState(false)
+
+  const { members, isError: isMemberError } = useTeamMembersForNewConversation({
+    teamIds: selectedTeamIds,
+    planId: selectedPlanId,
+  })
+
+  const navigation = useNavigation()
+  const { mutate: createConversation } = useFindOrCreateServicesConversation({
+    teamIds: selectedTeamIds,
+    planId: filerByPlan ? selectedPlanId : undefined,
+    onSuccess: (conversation: ConversationResource) => {
+      // exit from the create stack
+      navigation.getParent()?.goBack()
+      // navigate to the conversation screen
+      navigation.dispatch(
+        StackActions.push('Conversation', {
+          conversation_id: conversation.id,
+        })
+      )
+    },
+  })
+
+  return (
+    <View style={styles.formContainer}>
+      <FormList
+        memberData={members}
+        FormContent={
+          <FormContent
+            selectedTeamIds={selectedTeamIds}
+            removeSelection={removeSelection}
+            selectedPlanId={selectedPlanId}
+            setSelectedPlanId={setSelectedPlanId}
+            filterByPlan={filerByPlan}
+            setFilterByPlan={setFilterByPlan}
+            members={members}
+            isMemberError={isMemberError}
+          />
+        }
+      />
+      <ActionButton
+        disabled={!selectedTeamIds.length}
+        title="Start Conversation"
+        onPress={createConversation}
+        infoText="Conversation will be automatically updated if any members are added or removed from included teams."
+      />
+    </View>
+  )
+}
+
+interface FormContentProps {
+  selectedTeamIds: number[]
+  removeSelection: (teamId: number) => void
+  selectedPlanId?: number
+  setSelectedPlanId: (planId: number | undefined) => void
+  filterByPlan: boolean
+  setFilterByPlan: (value: boolean) => void
+  members: MemberResource[]
+  isMemberError: boolean
+}
+
+function FormContent({
+  selectedTeamIds,
+  removeSelection,
+  selectedPlanId,
+  setSelectedPlanId,
+  filterByPlan,
+  setFilterByPlan,
+  members,
+  isMemberError,
+}: FormContentProps) {
+  const { teamsILead } = useTeamsILead()
+  const selectedTeamsILead = useMemo(() => {
+    return teamsILead.filter(team => selectedTeamIds.includes(team.value.teamId))
+  }, [selectedTeamIds, teamsILead])
+
+  const styles = useStyles()
+  const teamCountHeader = pluralize(selectedTeamIds.length, 'team')
+  const memberCount = members.length
+  const childMembers = members.filter(member => member.child)
+  const hasChildren = childMembers.length > 0
+  const multipleServiceTypes =
+    uniq(selectedTeamsILead.map(team => team.value.serviceTypeId)).length > 1
+  const firstTeamId = selectedTeamIds[0]
+  filterByPlan = filterByPlan && !!firstTeamId && !multipleServiceTypes
+
+  return (
+    <View style={styles.formContent}>
+      <View style={styles.toSection}>
+        <View style={styles.toSectionRow}>
+          <Heading variant="h3">To:</Heading>
+          <Text>{teamCountHeader}</Text>
+        </View>
+        <View style={styles.toSectionRow}>
+          {selectedTeamsILead.map(team => (
+            <View key={team.value.teamId} style={styles.badgeRow}>
+              <Badge
+                iconNameRight="general.x"
+                label={team.name}
+                onPress={() => removeSelection(team.value.teamId)}
+              />
+            </View>
+          ))}
+        </View>
+      </View>
+      <Divider />
+      <View style={styles.filterByPlanSection}>
+        <View style={styles.filterByPlanSectionLead}>
+          <Heading variant="h3">Filter by plan</Heading>
+          <Switch
+            value={filterByPlan}
+            onValueChange={setFilterByPlan}
+            disabled={multipleServiceTypes}
+          />
+        </View>
+        {multipleServiceTypes ? (
+          <Banner
+            appearance="neutral"
+            description="Plan filtering is not possible using teams from multiple service types. Try choosing teams above with only one service type."
+          />
+        ) : filterByPlan ? (
+          <FilterByPlanOptions
+            teamIds={selectedTeamIds}
+            planId={selectedPlanId}
+            onChange={setSelectedPlanId}
+          />
+        ) : null}
+      </View>
+      <Divider />
+      <View style={styles.memberSection}>
+        <Heading variant="h3">{pluralize(memberCount, 'member')} selected</Heading>
+        {hasChildren && <ChildNotice childMembers={childMembers} style={styles.banner} />}
+        {isMemberError && (
+          <Banner
+            appearance="error"
+            description="There was an issue loading team members, please refresh and try again."
+            style={styles.banner}
+          />
+        )}
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const sectionPadding = 16
+
+  return StyleSheet.create({
+    formContainer: {
+      flex: 1,
+    },
+    formContent: {
+      paddingVertical: sectionPadding,
+      flex: 1,
+    },
+    toSection: {
+      padding: sectionPadding,
+      gap: 8,
+    },
+    toSectionRow: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'baseline',
+      flexWrap: 'wrap',
+    },
+    badgeRow: {
+      flexDirection: 'row',
+    },
+    groupName: {
+      fontSize: 18,
+    },
+    filterByPlanSection: {
+      padding: sectionPadding,
+      gap: 8,
+    },
+    filterByPlanSectionLead: {
+      flexDirection: 'row',
+      gap: 8,
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    filterByPlanSectionRow: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    titleInput: {
+      fontSize: 18,
+    },
+    memberSection: {
+      padding: sectionPadding,
+      paddingBottom: 0,
+    },
+    banner: {
+      marginTop: 16,
+    },
+  })
+}

package/src/screens/conversation_new/conversation_new_screen.tsx

@@ -1,7 +1,7 @@
 import { StaticScreenProps } from '@react-navigation/native'
 import React from 'react'
 import { GroupsForm } from './components/groups_form'
-import { TeamsForm } from './components/team_form'
+import { ServicesForm } from './components/services_form'
 import { SourceAppErrorCard } from './components/source_app_error_card'
 import { AppName } from '../../types/resources/app_name'
 import { GraphId } from '../../types/resources/group_resource'
@@ -26,7 +26,7 @@ export const ConversationNewScreen = ({ route }: ConversationNewScreenProps) =>
         <SourceAppErrorCard />
       )
     case 'Services':
-      return <TeamsForm initialTeamIds={team_ids} initialPlanId={plan_id} />
+      return <ServicesForm initialTeamIds={team_ids} initialPlanId={plan_id} />
     default:
       return <SourceAppErrorCard />
   }

package/src/types/resources/services/team_resource.ts

@@ -38,16 +38,16 @@ export interface PlansResource extends ServicesChatResource {
   plans: PlansResponseItem[]
 }
 
-interface PlansResponseItem {
+export interface PlansResponseItem {
   value: number
   name: string
 }
 
 export interface TeamPeopleResource extends ServicesChatResource {
-  people: PersonResponseItem[]
+  people: TeamPersonResponseItem[]
 }
 
-interface PersonResponseItem {
+export interface TeamPersonResponseItem {
   id: number
   name: string
   avatar: string
@@ -58,3 +58,7 @@ interface PersonResponseItem {
 export interface ServicesChatPayloadResource extends ServicesChatResource {
   payload: string
 }
+
+export interface ServicesChatGroupIdentifiersResource extends ServicesChatResource {
+  groupIdentifiers: string[]
+}

package/build/screens/conversation_new/components/team_form.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-type TeamFormProps = {
-    initialTeamIds?: number[];
-    initialPlanId?: number;
-};
-export declare const TeamsForm: ({ initialTeamIds, initialPlanId }: TeamFormProps) => React.JSX.Element;
-export {};
-//# sourceMappingURL=team_form.d.ts.map

package/build/screens/conversation_new/components/team_form.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"team_form.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_new/components/team_form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,aAAa,GAAG;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,SAAS,sCAAuC,aAAa,sBAQzE,CAAA"}

package/build/screens/conversation_new/components/team_form.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { Text } from '../../../components';
-export const TeamsForm = ({ initialTeamIds, initialPlanId }) => {
-    console.log('initialTeamIds', initialTeamIds);
-    console.log('initialPlanId', initialPlanId);
-    return (<View>
-      <Text>Services team form coming soon</Text>
-    </View>);
-};
-//# sourceMappingURL=team_form.js.map

package/build/screens/conversation_new/components/team_form.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"team_form.js","sourceRoot":"","sources":["../../../../src/screens/conversation_new/components/team_form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAO1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,cAAc,EAAE,aAAa,EAAiB,EAAE,EAAE;IAC5E,OAAO,CAAC,GAAG,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAA;IAC7C,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,aAAa,CAAC,CAAA;IAC3C,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,IAAI,CAAC,8BAA8B,EAAE,IAAI,CAC5C;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { View } from 'react-native'\nimport { Text } from '../../../components'\n\ntype TeamFormProps = {\n  initialTeamIds?: number[]\n  initialPlanId?: number\n}\n\nexport const TeamsForm = ({ initialTeamIds, initialPlanId }: TeamFormProps) => {\n  console.log('initialTeamIds', initialTeamIds)\n  console.log('initialPlanId', initialPlanId)\n  return (\n    <View>\n      <Text>Services team form coming soon</Text>\n    </View>\n  )\n}\n"]}

package/src/screens/conversation_new/components/team_form.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { View } from 'react-native'
-import { Text } from '../../../components'
-
-type TeamFormProps = {
-  initialTeamIds?: number[]
-  initialPlanId?: number
-}
-
-export const TeamsForm = ({ initialTeamIds, initialPlanId }: TeamFormProps) => {
-  console.log('initialTeamIds', initialTeamIds)
-  console.log('initialPlanId', initialPlanId)
-  return (
-    <View>
-      <Text>Services team form coming soon</Text>
-    </View>
-  )
-}