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

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

@@ -0,0 +1,137 @@
+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';
+export const ServicesForm = ({ initialTeamIds, initialPlanId }) => {
+    const styles = useStyles();
+    const [selectedPlanId, setSelectedPlanId] = useState(initialPlanId);
+    const initialState = uniq(initialTeamIds) || []; // Uniq here because services can send duplicates in the teams_i_lead response.
+    const [selectedTeamIds, setSelectedTeamIds] = useState(initialState);
+    const removeSelection = useCallback((teamId) => {
+        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) => {
+            // 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>);
+};
+function FormContent({ selectedTeamIds, removeSelection, selectedPlanId, setSelectedPlanId, filterByPlan, setFilterByPlan, members, isMemberError, }) {
+    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,
+        },
+    });
+};
+//# sourceMappingURL=services_form.js.map

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

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

package/build/screens/conversation_new/conversation_new_screen.js

@@ -1,6 +1,6 @@
 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';
 export const ConversationNewScreen = ({ route }) => {
     const { group_id, team_ids, source_app_name, plan_id, chat_group_graph_id } = route.params;
@@ -8,7 +8,7 @@ export const ConversationNewScreen = ({ route }) => {
         case 'Groups':
             return group_id ? (<GroupsForm groupId={group_id} chat_group_graph_id={chat_group_graph_id}/>) : (<SourceAppErrorCard />);
         case 'Services':
-            return <TeamsForm initialTeamIds={team_ids} initialPlanId={plan_id}/>;
+            return <ServicesForm initialTeamIds={team_ids} initialPlanId={plan_id}/>;
         default:
             return <SourceAppErrorCard />;
     }

package/build/screens/conversation_new/conversation_new_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_new_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_new/conversation_new_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAavE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,KAAK,EAA8B,EAAE,EAAE;IAC7E,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,MAAM,CAAA;IAE1F,QAAQ,eAAe,EAAE,CAAC;QACxB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,EAAG,CAC5E,CAAC,CAAC,CAAC,CACF,CAAC,kBAAkB,CAAC,AAAD,EAAG,CACvB,CAAA;QACH,KAAK,UAAU;YACb,OAAO,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,EAAG,CAAA;QACxE;YACE,OAAO,CAAC,kBAAkB,CAAC,AAAD,EAAG,CAAA;IACjC,CAAC;AACH,CAAC,CAAA","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport React from 'react'\nimport { GroupsForm } from './components/groups_form'\nimport { TeamsForm } from './components/team_form'\nimport { SourceAppErrorCard } from './components/source_app_error_card'\nimport { AppName } from '../../types/resources/app_name'\nimport { GraphId } from '../../types/resources/group_resource'\n\ntype ConversationNewScreenProps = StaticScreenProps<{\n  group_id?: number\n  team_ids?: number[]\n  plan_id?: number\n  source_app_name: AppName\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: AppName\n}>\n\nexport const ConversationNewScreen = ({ route }: ConversationNewScreenProps) => {\n  const { group_id, team_ids, source_app_name, plan_id, chat_group_graph_id } = route.params\n\n  switch (source_app_name) {\n    case 'Groups':\n      return group_id ? (\n        <GroupsForm groupId={group_id} chat_group_graph_id={chat_group_graph_id} />\n      ) : (\n        <SourceAppErrorCard />\n      )\n    case 'Services':\n      return <TeamsForm initialTeamIds={team_ids} initialPlanId={plan_id} />\n    default:\n      return <SourceAppErrorCard />\n  }\n}\n"]}
+{"version":3,"file":"conversation_new_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_new/conversation_new_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAavE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAE,KAAK,EAA8B,EAAE,EAAE;IAC7E,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC,MAAM,CAAA;IAE1F,QAAQ,eAAe,EAAE,CAAC;QACxB,KAAK,QAAQ;YACX,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,EAAG,CAC5E,CAAC,CAAC,CAAC,CACF,CAAC,kBAAkB,CAAC,AAAD,EAAG,CACvB,CAAA;QACH,KAAK,UAAU;YACb,OAAO,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,EAAG,CAAA;QAC3E;YACE,OAAO,CAAC,kBAAkB,CAAC,AAAD,EAAG,CAAA;IACjC,CAAC;AACH,CAAC,CAAA","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport React from 'react'\nimport { GroupsForm } from './components/groups_form'\nimport { ServicesForm } from './components/services_form'\nimport { SourceAppErrorCard } from './components/source_app_error_card'\nimport { AppName } from '../../types/resources/app_name'\nimport { GraphId } from '../../types/resources/group_resource'\n\ntype ConversationNewScreenProps = StaticScreenProps<{\n  group_id?: number\n  team_ids?: number[]\n  plan_id?: number\n  source_app_name: AppName\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: AppName\n}>\n\nexport const ConversationNewScreen = ({ route }: ConversationNewScreenProps) => {\n  const { group_id, team_ids, source_app_name, plan_id, chat_group_graph_id } = route.params\n\n  switch (source_app_name) {\n    case 'Groups':\n      return group_id ? (\n        <GroupsForm groupId={group_id} chat_group_graph_id={chat_group_graph_id} />\n      ) : (\n        <SourceAppErrorCard />\n      )\n    case 'Services':\n      return <ServicesForm initialTeamIds={team_ids} initialPlanId={plan_id} />\n    default:\n      return <SourceAppErrorCard />\n  }\n}\n"]}

package/build/types/resources/services/team_resource.d.ts

@@ -25,14 +25,14 @@ export type TeamOptionResponseItemGroupName = 'teams_i_lead' | 'other_teams';
 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;
@@ -44,5 +44,8 @@ interface PersonResponseItem {
 export interface ServicesChatPayloadResource extends ServicesChatResource {
     payload: string;
 }
+export interface ServicesChatGroupIdentifiersResource extends ServicesChatResource {
+    groupIdentifiers: string[];
+}
 export {};
 //# sourceMappingURL=team_resource.d.ts.map

package/build/types/resources/services/team_resource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"team_resource.d.ts","sourceRoot":"","sources":["../../../../src/types/resources/services/team_resource.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,UAAU,oBAAqB,SAAQ,cAAc;IACnD,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,YAAa,SAAQ,oBAAoB;IACxD,UAAU,EAAE,gBAAgB,EAAE,CAAA;CAC/B;AACD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAA;QACd,aAAa,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,KAAK,EAAE,sBAAsB,EAAE,CAAA;CAChC;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,KAAK,EAAE,+BAA+B,CAAA;CACvC;AAED,MAAM,MAAM,+BAA+B,GAAG,cAAc,GAAG,aAAa,CAAA;AAE5E,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACzD,KAAK,EAAE,iBAAiB,EAAE,CAAA;CAC3B;AAED,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,MAAM,EAAE,kBAAkB,EAAE,CAAA;CAC7B;AAED,UAAU,kBAAkB;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3B,KAAK,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,EAAE,MAAM,CAAA;CAChB"}
+{"version":3,"file":"team_resource.d.ts","sourceRoot":"","sources":["../../../../src/types/resources/services/team_resource.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,UAAU,oBAAqB,SAAQ,cAAc;IACnD,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,YAAa,SAAQ,oBAAoB;IACxD,UAAU,EAAE,gBAAgB,EAAE,CAAA;CAC/B;AACD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAA;QACd,aAAa,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;CAChC;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,KAAK,EAAE,sBAAsB,EAAE,CAAA;CAChC;AAED,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC9D,KAAK,EAAE,+BAA+B,CAAA;CACvC;AAED,MAAM,MAAM,+BAA+B,GAAG,cAAc,GAAG,aAAa,CAAA;AAE5E,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACzD,KAAK,EAAE,iBAAiB,EAAE,CAAA;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,kBAAmB,SAAQ,oBAAoB;IAC9D,MAAM,EAAE,sBAAsB,EAAE,CAAA;CACjC;AAED,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3B,KAAK,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,oCAAqC,SAAQ,oBAAoB;IAChF,gBAAgB,EAAE,MAAM,EAAE,CAAA;CAC3B"}

package/build/types/resources/services/team_resource.js.map

@@ -1 +1 @@
-{"version":3,"file":"team_resource.js","sourceRoot":"","sources":["../../../../src/types/resources/services/team_resource.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,kFAAkF;AAClF,6DAA6D;AAC7D,wGAAwG;AACxG,2FAA2F","sourcesContent":["// All of our calls out to services go out to /chat, which isn't a typical pco-api vertex.\n// They all have a shared type of 'Chat' which has the following array attributes:\n// group_identifiers, people, plans, teams and, teams_i_lead.\n// All of these have a type array, are only rendered on request, and are exclusively used for this form.\n// There is also a payload which is a string, and is used to create a conversation in chat.\n\nimport { ResourceObject } from '../../api_primitives'\n\ninterface ServicesChatResource extends ResourceObject {\n  type: 'Chat'\n}\n\nexport interface TeamResource extends ServicesChatResource {\n  teamsILead: TeamResponseItem[]\n}\nexport interface TeamResponseItem {\n  name: string\n  value: {\n    teamId: number\n    serviceTypeId: number\n  }\n  serviceTypeName: string\n  teamName: string\n  order: [number, string, string] // [serviceTypeId, serviceTypeName, teamName]\n}\n\nexport interface TeamOptionResource extends ServicesChatResource {\n  teams: TeamOptionResponseItem[]\n}\n\nexport interface TeamOptionResponseItem extends TeamResponseItem {\n  group: TeamOptionResponseItemGroupName\n}\n\nexport type TeamOptionResponseItemGroupName = 'teams_i_lead' | 'other_teams'\n\nexport interface PlansResource extends ServicesChatResource {\n  plans: PlansResponseItem[]\n}\n\ninterface PlansResponseItem {\n  value: number\n  name: string\n}\n\nexport interface TeamPeopleResource extends ServicesChatResource {\n  people: PersonResponseItem[]\n}\n\ninterface PersonResponseItem {\n  id: number\n  name: string\n  avatar: string\n  badges: { title: string }[]\n  child: boolean\n}\n\nexport interface ServicesChatPayloadResource extends ServicesChatResource {\n  payload: string\n}\n"]}
+{"version":3,"file":"team_resource.js","sourceRoot":"","sources":["../../../../src/types/resources/services/team_resource.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,kFAAkF;AAClF,6DAA6D;AAC7D,wGAAwG;AACxG,2FAA2F","sourcesContent":["// All of our calls out to services go out to /chat, which isn't a typical pco-api vertex.\n// They all have a shared type of 'Chat' which has the following array attributes:\n// group_identifiers, people, plans, teams and, teams_i_lead.\n// All of these have a type array, are only rendered on request, and are exclusively used for this form.\n// There is also a payload which is a string, and is used to create a conversation in chat.\n\nimport { ResourceObject } from '../../api_primitives'\n\ninterface ServicesChatResource extends ResourceObject {\n  type: 'Chat'\n}\n\nexport interface TeamResource extends ServicesChatResource {\n  teamsILead: TeamResponseItem[]\n}\nexport interface TeamResponseItem {\n  name: string\n  value: {\n    teamId: number\n    serviceTypeId: number\n  }\n  serviceTypeName: string\n  teamName: string\n  order: [number, string, string] // [serviceTypeId, serviceTypeName, teamName]\n}\n\nexport interface TeamOptionResource extends ServicesChatResource {\n  teams: TeamOptionResponseItem[]\n}\n\nexport interface TeamOptionResponseItem extends TeamResponseItem {\n  group: TeamOptionResponseItemGroupName\n}\n\nexport type TeamOptionResponseItemGroupName = 'teams_i_lead' | 'other_teams'\n\nexport interface PlansResource extends ServicesChatResource {\n  plans: PlansResponseItem[]\n}\n\nexport interface PlansResponseItem {\n  value: number\n  name: string\n}\n\nexport interface TeamPeopleResource extends ServicesChatResource {\n  people: TeamPersonResponseItem[]\n}\n\nexport interface TeamPersonResponseItem {\n  id: number\n  name: string\n  avatar: string\n  badges: { title: string }[]\n  child: boolean\n}\n\nexport interface ServicesChatPayloadResource extends ServicesChatResource {\n  payload: string\n}\n\nexport interface ServicesChatGroupIdentifiersResource extends ServicesChatResource {\n  groupIdentifiers: string[]\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.2.0",
+  "version": "3.4.0-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "b8b81c84940cbe1eba3343808b7fd06e0ced6924"
+  "gitHead": "464031a14a1949e994a9720294029b82e2513705"
 }

package/src/hooks/services/use_find_or_create_services_conversation.ts

@@ -0,0 +1,97 @@
+import { useMutation } from '@tanstack/react-query'
+import {
+  ApiCollection,
+  ApiResource,
+  ConversationResource,
+  ServicesChatGroupIdentifiersResource,
+  ServicesChatPayloadResource,
+} from '../../types'
+import { ApiClient, useApiClient } from '../use_api_client'
+
+interface Props {
+  teamIds: number[]
+  planId?: number
+  onSuccess?: (conversation: ConversationResource) => void
+}
+
+export function useFindOrCreateServicesConversation({ teamIds, planId, onSuccess }: Props) {
+  const teamAndPlanParams: TeamAndPlanParams = {
+    team_id: teamIds.join(','),
+    ...(planId ? { plan_id: planId } : {}),
+  }
+
+  const apiClient = useApiClient()
+  return useMutation({
+    throwOnError: true,
+    onSuccess: result => {
+      onSuccess && onSuccess(result)
+    },
+    mutationFn: async () => {
+      const foundConversations = await getGroupIdsFromServices(apiClient, teamAndPlanParams)
+        .then(res => res.data.groupIdentifiers)
+        .then(groupIdentifiers => findConversationWithExactTeams(apiClient, groupIdentifiers))
+        .catch(() => null)
+      const foundConversation = foundConversations?.data[0]
+
+      if (foundConversation?.id) {
+        return foundConversation
+      }
+
+      return fetchServicesPayload(apiClient, teamAndPlanParams)
+        .then(res => res.data.payload)
+        .then(payload => createConversation(apiClient, payload))
+        .then(res => res.data)
+    },
+  })
+}
+
+interface TeamAndPlanParams {
+  plan_id?: number | undefined
+  team_id: string
+}
+
+function fetchServicesPayload(apiClient: ApiClient, teamAndPlanParams: TeamAndPlanParams) {
+  return apiClient.services.get({
+    url: `/chat`,
+    data: {
+      ...teamAndPlanParams,
+      fields: {
+        Chat: ['payload'],
+      },
+    },
+  }) as Promise<ApiResource<ServicesChatPayloadResource>>
+}
+
+function getGroupIdsFromServices(apiClient: ApiClient, teamAndPlanParams: TeamAndPlanParams) {
+  return apiClient.services.get({
+    url: '/chat',
+    data: {
+      ...teamAndPlanParams,
+      fields: {
+        Chat: ['group_identifiers'],
+      },
+    },
+  }) as Promise<ApiResource<ServicesChatGroupIdentifiersResource>>
+}
+
+function findConversationWithExactTeams(apiClient: ApiClient, groupIdentifiers: string[]) {
+  return apiClient.chat.get({
+    url: '/me/conversations',
+    data: {
+      fields: {
+        Conversation: ['stream_channel'],
+      },
+      filter: 'with_exact_groups',
+      gids: groupIdentifiers.join(','),
+    },
+  }) as Promise<ApiCollection<ConversationResource>>
+}
+
+function createConversation(apiClient: ApiClient, payload: string) {
+  return apiClient.chat.post({
+    url: '/me/conversations',
+    data: {
+      data: { type: 'Conversation', attributes: { payload } },
+    },
+  }) as Promise<ApiResource<ConversationResource>>
+}

package/src/hooks/services/use_team_members_for_new_conversation.ts

@@ -0,0 +1,40 @@
+import { isNil, omitBy } from 'lodash'
+import { useApiGet } from '../use_api'
+import { MemberResource, TeamPeopleResource, TeamPersonResponseItem } from '../../types'
+import { useMemo } from 'react'
+
+interface Props {
+  teamIds: number[]
+  planId?: number
+}
+
+export function useTeamMembersForNewConversation({ teamIds, planId }: Props) {
+  const params = omitBy({ team_id: teamIds.join(','), plan_id: planId }, isNil)
+
+  const { data, ...rest } = useApiGet<TeamPeopleResource>({
+    url: '/chat',
+    data: {
+      ...params,
+      fields: {
+        Chat: ['people'],
+      },
+    },
+    app: 'services',
+  })
+
+  const people = data?.people || stableEmptyPersonArray
+
+  const members: MemberResource[] = useMemo(() => {
+    return people.map(person => ({
+      ...person,
+      type: 'Member',
+    }))
+  }, [people])
+
+  return {
+    members,
+    ...rest,
+  }
+}
+
+const stableEmptyPersonArray: TeamPersonResponseItem[] = []

package/src/hooks/services/use_team_plans.ts

@@ -0,0 +1,42 @@
+import { ApiResource, PlansResource } from '../../types'
+import { ApiClient, useApiClient } from '../use_api_client'
+import { useMemo } from 'react'
+import { useQueries } from '@tanstack/react-query'
+import { uniqBy } from 'lodash'
+
+export function useTeamPlans({ teamIds }: { teamIds: number[] }) {
+  const apiClient = useApiClient()
+  const planQueries = useQueries({
+    queries: teamIds.map(teamId => ({
+      queryKey: ['plansForTeam', teamId],
+      queryFn: () => fetchTeamPlans(apiClient, teamId),
+      initialData: NULL_RESPONSE,
+      retry: false,
+    })),
+  })
+
+  const uniqPlanOptions = useMemo(() => {
+    const planOptions = planQueries.flatMap(({ data }) => data?.data.plans).filter(p => !!p)
+    return uniqBy(planOptions, 'value')
+  }, [planQueries])
+
+  return {
+    planOptions: uniqPlanOptions,
+    isFetching: planQueries.some(({ isFetching }) => isFetching),
+    isError: planQueries.some(({ isError }) => isError),
+  }
+}
+
+const NULL_RESPONSE = { data: { id: 0, plans: [], type: 'Chat' }, links: {}, meta: {} }
+
+function fetchTeamPlans(apiClient: ApiClient, teamId: number) {
+  return apiClient.services.get<ApiResource<PlansResource>>({
+    url: '/chat',
+    data: {
+      team_id: teamId,
+      fields: {
+        Chat: ['plans'],
+      },
+    },
+  })
+}

package/src/hooks/services/use_teams_i_lead.ts

@@ -0,0 +1,44 @@
+import { useCallback } from 'react'
+import { useApiGet } from '../../hooks/use_api'
+import { ResourceObject, TeamResponseItem } from '../../types'
+
+export function useTeamsILead() {
+  const response = useApiGet<ServicesChatResource>({
+    url: `/chat`,
+    data: {
+      fields: {
+        Chat: ['teams_i_lead'],
+      },
+    },
+    app: 'services',
+  })
+
+  const { data, isFetching, isError, error } = response
+
+  const teamsILead = data?.teamsILead || stableEmptyTeamResponseArray
+
+  const hasNoServicesAccess = useCallback(() => {
+    if (isError && error) {
+      const errorArray = error
+      const allErrors = errorArray.errors.map(e => e.detail)
+      if (allErrors.some(e => e.includes(NOT_IN_APPLICATION_CODE))) {
+        return true
+      }
+    }
+    return false
+  }, [isError, error])
+
+  return {
+    teamsILead,
+    isFetching,
+    isError,
+    noServicesAccess: hasNoServicesAccess(),
+  }
+}
+
+interface ServicesChatResource extends ResourceObject {
+  teamsILead: TeamResponseItem[]
+}
+
+const stableEmptyTeamResponseArray: TeamResponseItem[] = []
+const NOT_IN_APPLICATION_CODE = 'TRASH_PANDA'

package/src/screens/conversation_filter_recipients/hooks/use_service_types_with_teams.ts

@@ -1,44 +1,19 @@
-import { useCallback, useMemo } from 'react'
-import { useApiGet } from '../../../hooks/use_api'
-import { ResourceObject } from '../../../types'
+import { useMemo } from 'react'
+import { TeamResponseItem } from '../../../types'
 import { ServiceTypeWithTeams } from '../types'
 import { uniqBy } from 'lodash'
+import { useTeamsILead } from '../../../hooks/services/use_teams_i_lead'
 
 export function useServiceTypesWithTeams() {
-  const response = useApiGet<ServicesChatResource>({
-    url: `/chat`,
-    data: {
-      fields: {
-        Chat: ['teams_i_lead'],
-      },
-    },
-    app: 'services',
-  })
-
-  const { data, isFetching, isError, error } = response
-
-  const teamsILead = data?.teamsILead || stableEmptyTeamResponseArray
+  const { teamsILead, ...data } = useTeamsILead()
 
   const decoratedResponse = useMemo(() => {
     return decorateTeamResponseItems(teamsILead)
   }, [teamsILead])
 
-  const hasNoServicesAccess = useCallback(() => {
-    if (isError && error) {
-      const errorArray = error
-      const allErrors = errorArray.errors.map(e => e.detail)
-      if (allErrors.some(e => e.includes(NOT_IN_APPLICATION_CODE))) {
-        return true
-      }
-    }
-    return false
-  }, [isError, error])
-
   return {
     serviceTypes: decoratedResponse,
-    isFetching,
-    isError,
-    noServicesAccess: hasNoServicesAccess(),
+    ...data,
   }
 }
 
@@ -70,21 +45,3 @@ function decorateTeamResponseItems(teamResponseItems: TeamResponseItem[]) {
       return acc
     }, [])
 }
-
-interface TeamResponseItem {
-  value: {
-    teamId: number
-    serviceTypeId: number
-  }
-  name: string
-  teamName: string
-  serviceTypeName: string
-  order: string[]
-}
-
-interface ServicesChatResource extends ResourceObject {
-  teamsILead: TeamResponseItem[]
-}
-
-const stableEmptyTeamResponseArray: TeamResponseItem[] = []
-const NOT_IN_APPLICATION_CODE = 'TRASH_PANDA'

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

@@ -0,0 +1,64 @@
+import { Pressable, StyleSheet, View } from 'react-native'
+import { Banner, Spinner, Text } from '../../../components'
+import { useTeamPlans } from '../../../hooks/services/use_team_plans'
+
+interface Props {
+  teamIds: number[]
+  planId?: number
+  onChange: (planId: number | undefined) => void
+}
+
+export function FilterByPlanOptions({ teamIds, planId, onChange }: Props) {
+  const styles = useStyles()
+  const { planOptions, isFetching, isError } = useTeamPlans({ teamIds })
+
+  if (isFetching) {
+    return (
+      <View style={styles.spinnerContainer}>
+        <Spinner size={20} />
+      </View>
+    )
+  }
+
+  if (isError) {
+    return (
+      <Banner
+        appearance="error"
+        description="An error occurred while fetching plans. Please try again."
+      />
+    )
+  }
+
+  if (!planOptions || planOptions.length === 0) {
+    return (
+      <Banner
+        appearance="neutral"
+        description="No plans available with the selected service type."
+      />
+    )
+  }
+
+  return (
+    <View style={styles.filterByPlanSectionRow}>
+      {planOptions.map(plan => (
+        <Pressable onPress={() => onChange(plan.value)} key={plan.value}>
+          <Text style={[planId === plan.value ? styles.selectedFilter : null]}>{plan.name}</Text>
+        </Pressable>
+      ))}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    spinnerContainer: {
+      marginVertical: 8,
+    },
+    filterByPlanSectionRow: {
+      gap: 8,
+    },
+    selectedFilter: {
+      fontWeight: '800',
+    },
+  })
+}