@planningcenter/chat-react-native 3.12.0-rc.9 → 3.12.0

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

@@ -1 +1 @@
-{"version":3,"file":"groups_form.js","sourceRoot":"","sources":["../../../../src/screens/conversation_new/components/groups_form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StackActions, useNavigation } from '@react-navigation/native'\nimport React, { useCallback, useMemo, useState } from 'react'\nimport { Platform, StyleSheet, TextInput, View } from 'react-native'\nimport { Banner, ChildNotice, Heading, Text } from '../../../components'\nimport { ActionButton } from '../../../components/display/action_button'\nimport { KeyboardView } from '../../../components/display/keyboard_view'\nimport { useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'\nimport {\n  GroupMembersForNewConversationResult,\n  useGroupMembersForNewConversation,\n} from '../../../hooks/groups/use_group_members_for_new_conversation'\nimport { useGroupsConversationCreate } from '../../../hooks/groups/use_groups_conversation_create'\nimport { GroupsGroupResource } from '../../../types'\nimport { GraphId } from '../../../types/resources/group_resource'\nimport { pluralize } from '../../../utils'\nimport { Divider, FormList } from './form_list'\n\ntype GroupsFormProps = {\n  groupId: number\n  chat_group_graph_id?: GraphId\n}\n\nexport const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) => {\n  const navigation = useNavigation()\n  const [title, setTitle] = useState<string>()\n  const { data: group } = useSuspenseGet<GroupsGroupResource>({\n    url: `/me/groups/${groupId}`,\n    data: {\n      fields: {\n        Group: [],\n      },\n    },\n    app: 'groups',\n  })\n\n  const groupMemberships = useGroupMembersForNewConversation({ id: groupId })\n\n  const redirectToConversation = useCallback(\n    (conversationId: number) => {\n      // navigate to the conversation screen\n      navigation.dispatch(\n        StackActions.popTo('Conversation', {\n          conversation_id: conversationId,\n          chat_group_graph_id,\n        })\n      )\n    },\n    [chat_group_graph_id, navigation]\n  )\n\n  const { mutate: handleSave, isPending } = useGroupsConversationCreate({\n    groupId,\n    title,\n    onSuccess: redirectToConversation,\n  })\n\n  return (\n    <KeyboardView>\n      <FormList\n        memberData={groupMemberships.adultMembers}\n        loadingMore={groupMemberships.isFetchingNextPage}\n        onEndReached={groupMemberships.fetchNextPage}\n        FormContent={\n          <FormContent\n            group={group}\n            title={title}\n            setTitle={setTitle}\n            groupMemberships={groupMemberships}\n          />\n        }\n      />\n      <ActionButton\n        disabled={!title || isPending}\n        title=\"Start Conversation\"\n        onPress={() => handleSave()}\n        infoText=\"Conversation will be automatically updated if any members are added or removed from this group.\"\n      />\n    </KeyboardView>\n  )\n}\n\ninterface FormContentProps {\n  group: GroupsGroupResource\n  title?: string\n  setTitle: (title: string) => void\n  groupMemberships: GroupMembersForNewConversationResult\n}\n\nfunction FormContent({ group, title, setTitle, groupMemberships }: FormContentProps) {\n  const styles = useStyles()\n  const currentPerson = useCurrentPerson()\n  const { name, membershipsCount } = group\n\n  const myGroupsMembership = useMemo(\n    () => groupMemberships.data.find(m => m.id === currentPerson.id),\n    [groupMemberships.data, currentPerson.id]\n  )\n  const isLeader = myGroupsMembership?.role === 'leader'\n\n  const childMembers = groupMemberships.childMembers\n  const hasChildren = childMembers.length > 0\n  const memberHeaderLabel = `${pluralize(membershipsCount, 'member')} selected`\n\n  const showMemberError = groupMemberships.isError\n\n  return (\n    <View style={styles.formContent}>\n      <View style={styles.toSection}>\n        <Heading variant=\"h3\">To:</Heading>\n        <Text style={styles.groupName}>{name}</Text>\n      </View>\n      <Divider />\n      <View style={styles.titleSection}>\n        <Heading variant=\"h3\">Title</Heading>\n        <TextInput\n          placeholder=\"Topic of conversation (required)\"\n          value={title}\n          onChangeText={setTitle}\n          style={styles.titleInput}\n          autoFocus={true}\n        />\n      </View>\n      <Divider />\n      <View style={styles.memberSection}>\n        <Heading variant=\"h3\">{memberHeaderLabel}</Heading>\n        {hasChildren && (\n          <ChildNotice childMembers={childMembers} showMembers={isLeader} style={styles.banner} />\n        )}\n        {showMemberError && (\n          <Banner\n            appearance=\"error\"\n            description=\"There was an issue loading group members, please refresh and try again.\"\n            style={styles.banner}\n          />\n        )}\n      </View>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  const sectionPadding = 16\n  const inputPadding = 8\n\n  return StyleSheet.create({\n    formContent: {\n      paddingVertical: sectionPadding,\n      flex: 1,\n    },\n    toSection: {\n      padding: sectionPadding,\n      flexDirection: 'row',\n      gap: 8,\n    },\n    groupName: {\n      fontSize: 18,\n    },\n    titleSection: {\n      padding: sectionPadding,\n      paddingBottom: Platform.select({\n        ios: sectionPadding,\n        android: sectionPadding - inputPadding,\n      }),\n      gap: Platform.select({\n        ios: 8,\n        android: 0,\n      }),\n    },\n    titleInput: {\n      fontSize: 18,\n      color: colors.textColorDefaultPrimary,\n    },\n    memberSection: {\n      padding: sectionPadding,\n      paddingBottom: 0,\n    },\n    banner: {\n      marginTop: 16,\n    },\n  })\n}\n"]}
+{"version":3,"file":"groups_form.js","sourceRoot":"","sources":["../../../../src/screens/conversation_new/components/groups_form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StackActions, useNavigation } from '@react-navigation/native'\nimport React, { useCallback, useMemo, useRef, useState } from 'react'\nimport { Platform, Pressable, StyleSheet, TextInput, View } from 'react-native'\nimport { Banner, ChildNotice, Heading, Text } from '../../../components'\nimport { ActionButton } from '../../../components/display/action_button'\nimport { KeyboardView } from '../../../components/display/keyboard_view'\nimport { useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'\nimport {\n  GroupMembersForNewConversationResult,\n  useGroupMembersForNewConversation,\n} from '../../../hooks/groups/use_group_members_for_new_conversation'\nimport { useGroupsConversationCreate } from '../../../hooks/groups/use_groups_conversation_create'\nimport { GroupsGroupResource } from '../../../types'\nimport { GraphId } from '../../../types/resources/group_resource'\nimport { pluralize } from '../../../utils'\nimport { Divider, FormList } from './form_list'\n\ntype GroupsFormProps = {\n  groupId: number\n  chat_group_graph_id?: GraphId\n}\n\nexport const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) => {\n  const navigation = useNavigation()\n  const [title, setTitle] = useState<string>()\n  const { data: group } = useSuspenseGet<GroupsGroupResource>({\n    url: `/me/groups/${groupId}`,\n    data: {\n      fields: {\n        Group: [],\n      },\n    },\n    app: 'groups',\n  })\n\n  const groupMemberships = useGroupMembersForNewConversation({ id: groupId })\n\n  const redirectToConversation = useCallback(\n    (conversationId: number) => {\n      // navigate to the conversation screen\n      navigation.dispatch(\n        StackActions.popTo('Conversation', {\n          conversation_id: conversationId,\n          chat_group_graph_id,\n        })\n      )\n    },\n    [chat_group_graph_id, navigation]\n  )\n\n  const { mutate: handleSave, isPending } = useGroupsConversationCreate({\n    groupId,\n    title,\n    onSuccess: redirectToConversation,\n  })\n\n  return (\n    <KeyboardView>\n      <FormList\n        memberData={groupMemberships.adultMembers}\n        loadingMore={groupMemberships.isFetchingNextPage}\n        onEndReached={groupMemberships.fetchNextPage}\n        FormContent={\n          <FormContent\n            group={group}\n            title={title}\n            setTitle={setTitle}\n            groupMemberships={groupMemberships}\n          />\n        }\n      />\n      <ActionButton\n        disabled={!title || isPending}\n        title=\"Start Conversation\"\n        onPress={() => handleSave()}\n        infoText=\"Conversation will be automatically updated if any members are added or removed from this group.\"\n      />\n    </KeyboardView>\n  )\n}\n\ninterface FormContentProps {\n  group: GroupsGroupResource\n  title?: string\n  setTitle: (title: string) => void\n  groupMemberships: GroupMembersForNewConversationResult\n}\n\nfunction FormContent({ group, title, setTitle, groupMemberships }: FormContentProps) {\n  const styles = useStyles()\n  const inputRef = useRef<TextInput>(null)\n  const currentPerson = useCurrentPerson()\n  const { name, membershipsCount } = group\n\n  const myGroupsMembership = useMemo(\n    () => groupMemberships.data.find(m => m.id === currentPerson.id),\n    [groupMemberships.data, currentPerson.id]\n  )\n  const isLeader = myGroupsMembership?.role === 'leader'\n\n  const childMembers = groupMemberships.childMembers\n  const hasChildren = childMembers.length > 0\n  const memberHeaderLabel = `${pluralize(membershipsCount, 'member')} selected`\n\n  const showMemberError = groupMemberships.isError\n\n  const handleTitleSectionPress = useCallback(() => {\n    inputRef.current?.focus()\n  }, [])\n\n  return (\n    <View style={styles.formContent}>\n      <View style={styles.toSection}>\n        <Heading variant=\"h3\">To:</Heading>\n        <Text style={styles.groupName}>{name}</Text>\n      </View>\n      <Divider />\n      <Pressable style={styles.titleSection} onPress={handleTitleSectionPress}>\n        <Heading variant=\"h3\">Title</Heading>\n        <TextInput\n          placeholder=\"Topic of conversation (required)\"\n          value={title}\n          onChangeText={setTitle}\n          style={styles.titleInput}\n          autoFocus={true}\n          ref={inputRef}\n        />\n      </Pressable>\n      <Divider />\n      <View style={styles.memberSection}>\n        <Heading variant=\"h3\">{memberHeaderLabel}</Heading>\n        {hasChildren && (\n          <ChildNotice childMembers={childMembers} showMembers={isLeader} style={styles.banner} />\n        )}\n        {showMemberError && (\n          <Banner\n            appearance=\"error\"\n            description=\"There was an issue loading group members, please refresh and try again.\"\n            style={styles.banner}\n          />\n        )}\n      </View>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  const sectionPadding = 16\n  const inputPadding = 8\n\n  return StyleSheet.create({\n    formContent: {\n      paddingBottom: sectionPadding,\n      flex: 1,\n    },\n    toSection: {\n      padding: sectionPadding,\n      flexDirection: 'row',\n      gap: 8,\n    },\n    groupName: {\n      fontSize: 18,\n      flex: 1,\n    },\n    titleSection: {\n      padding: sectionPadding,\n      paddingBottom: Platform.select({\n        ios: sectionPadding,\n        android: sectionPadding - inputPadding,\n      }),\n      gap: Platform.select({\n        ios: 8,\n        android: 0,\n      }),\n    },\n    titleInput: {\n      fontSize: 18,\n      color: colors.textColorDefaultPrimary,\n    },\n    memberSection: {\n      padding: sectionPadding,\n      paddingBottom: 0,\n    },\n    banner: {\n      marginTop: 16,\n    },\n  })\n}\n"]}

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

@@ -114,7 +114,7 @@ const useStyles = () => {
             flex: 1,
         },
         formContent: {
-            paddingVertical: sectionPadding,
+            paddingBottom: sectionPadding,
             flex: 1,
         },
         toSection: {

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

@@ -1 +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, useEffect, useMemo, useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Badge, Banner, ChildNotice, Heading, Switch, TextButton } 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 { FilterByPlan } from './filter_by_plan'\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'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { TeamFilterTypes } from '../../conversation_filter_recipients/types'\n\ntype ServicesFormProps = {\n  initialTeamIds?: number[]\n  initialPlanId?: number\n  teamFilterType?: TeamFilterTypes\n}\n\nexport const ServicesForm = ({\n  initialTeamIds,\n  initialPlanId,\n  teamFilterType,\n}: ServicesFormProps) => {\n  const styles = useStyles()\n  const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(initialPlanId)\n  const initialState = useMemo(() => uniq(initialTeamIds) || [], [initialTeamIds]) // Uniq here because services can send duplicates in the teams_i_lead response.\n  const [selectedTeamIds, setSelectedTeamIds] = useState<number[]>(initialState)\n\n  // Sync with fresh props when they change (from navigation)\n  useEffect(() => {\n    setSelectedTeamIds(initialState)\n    setSelectedPlanId(initialPlanId)\n  }, [initialState, initialPlanId])\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  const adultMembers = useMemo(() => members.filter(member => !member.child), [members])\n\n  const navigation = useNavigation()\n  const { mutate: createConversation, isPending } = 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={adultMembers}\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            teamFilterType={teamFilterType}\n          />\n        }\n      />\n      <ActionButton\n        disabled={!selectedTeamIds.length || isPending}\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  teamFilterType?: TeamFilterTypes\n}\n\nfunction FormContent({\n  selectedTeamIds,\n  removeSelection,\n  selectedPlanId,\n  setSelectedPlanId,\n  filterByPlan,\n  setFilterByPlan,\n  members,\n  isMemberError,\n  teamFilterType,\n}: FormContentProps) {\n  const { teamsILead } = useTeamsILead()\n  const selectedTeamsILead = useMemo(() => {\n    return teamsILead.filter(team => selectedTeamIds.includes(team.value.teamId))\n  }, [selectedTeamIds, teamsILead])\n  const navigation = useNavigation()\n\n  const styles = useStyles()\n  const teamCountHeader = pluralize(selectedTeamIds.length, 'team')\n  const memberCount = members.length\n  const childMembers = useMemo(() => members.filter(member => member.child), [members])\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  const serviceTypeName =\n    !multipleServiceTypes && selectedTeamsILead.length > 0\n      ? selectedTeamsILead[0].serviceTypeName\n      : undefined\n\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          <TextButton\n            accessibilityLabel=\"Select teams\"\n            textStyle={styles.teamCountHeader}\n            onPress={() =>\n              navigation.navigate('New', {\n                screen: 'ConversationFilterRecipients',\n                params: {\n                  source_app_name: 'Services',\n                  team_ids: selectedTeamIds,\n                  team_filter_type: teamFilterType,\n                },\n              })\n            }\n          >\n            {teamCountHeader}\n          </TextButton>\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={value => {\n              setFilterByPlan(value)\n              if (!value) {\n                setSelectedPlanId(undefined)\n              }\n            }}\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          <FilterByPlan\n            teamIds={selectedTeamIds}\n            selectedPlanId={selectedPlanId}\n            serviceTypeName={serviceTypeName}\n            onPlanSelect={setSelectedPlanId}\n          />\n        ) : null}\n      </View>\n      <Divider />\n      <View style={styles.memberSection}>\n        <Heading variant=\"h3\">{pluralize(memberCount, 'member')} selected</Heading>\n        {hasChildren && (\n          <ChildNotice childMembers={childMembers} showMembers={true} style={styles.banner} />\n        )}\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: 12,\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    teamCountHeader: {\n      fontSize: tokens.fontSizeLg,\n    },\n  })\n}\n"]}
+{"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, useEffect, useMemo, useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Badge, Banner, ChildNotice, Heading, Switch, TextButton } 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 { FilterByPlan } from './filter_by_plan'\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'\nimport { tokens } from '../../../vendor/tapestry/tokens'\nimport { TeamFilterTypes } from '../../conversation_filter_recipients/types'\n\ntype ServicesFormProps = {\n  initialTeamIds?: number[]\n  initialPlanId?: number\n  teamFilterType?: TeamFilterTypes\n}\n\nexport const ServicesForm = ({\n  initialTeamIds,\n  initialPlanId,\n  teamFilterType,\n}: ServicesFormProps) => {\n  const styles = useStyles()\n  const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(initialPlanId)\n  const initialState = useMemo(() => uniq(initialTeamIds) || [], [initialTeamIds]) // Uniq here because services can send duplicates in the teams_i_lead response.\n  const [selectedTeamIds, setSelectedTeamIds] = useState<number[]>(initialState)\n\n  // Sync with fresh props when they change (from navigation)\n  useEffect(() => {\n    setSelectedTeamIds(initialState)\n    setSelectedPlanId(initialPlanId)\n  }, [initialState, initialPlanId])\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  const adultMembers = useMemo(() => members.filter(member => !member.child), [members])\n\n  const navigation = useNavigation()\n  const { mutate: createConversation, isPending } = 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={adultMembers}\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            teamFilterType={teamFilterType}\n          />\n        }\n      />\n      <ActionButton\n        disabled={!selectedTeamIds.length || isPending}\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  teamFilterType?: TeamFilterTypes\n}\n\nfunction FormContent({\n  selectedTeamIds,\n  removeSelection,\n  selectedPlanId,\n  setSelectedPlanId,\n  filterByPlan,\n  setFilterByPlan,\n  members,\n  isMemberError,\n  teamFilterType,\n}: FormContentProps) {\n  const { teamsILead } = useTeamsILead()\n  const selectedTeamsILead = useMemo(() => {\n    return teamsILead.filter(team => selectedTeamIds.includes(team.value.teamId))\n  }, [selectedTeamIds, teamsILead])\n  const navigation = useNavigation()\n\n  const styles = useStyles()\n  const teamCountHeader = pluralize(selectedTeamIds.length, 'team')\n  const memberCount = members.length\n  const childMembers = useMemo(() => members.filter(member => member.child), [members])\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  const serviceTypeName =\n    !multipleServiceTypes && selectedTeamsILead.length > 0\n      ? selectedTeamsILead[0].serviceTypeName\n      : undefined\n\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          <TextButton\n            accessibilityLabel=\"Select teams\"\n            textStyle={styles.teamCountHeader}\n            onPress={() =>\n              navigation.navigate('New', {\n                screen: 'ConversationFilterRecipients',\n                params: {\n                  source_app_name: 'Services',\n                  team_ids: selectedTeamIds,\n                  team_filter_type: teamFilterType,\n                },\n              })\n            }\n          >\n            {teamCountHeader}\n          </TextButton>\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={value => {\n              setFilterByPlan(value)\n              if (!value) {\n                setSelectedPlanId(undefined)\n              }\n            }}\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          <FilterByPlan\n            teamIds={selectedTeamIds}\n            selectedPlanId={selectedPlanId}\n            serviceTypeName={serviceTypeName}\n            onPlanSelect={setSelectedPlanId}\n          />\n        ) : null}\n      </View>\n      <Divider />\n      <View style={styles.memberSection}>\n        <Heading variant=\"h3\">{pluralize(memberCount, 'member')} selected</Heading>\n        {hasChildren && (\n          <ChildNotice childMembers={childMembers} showMembers={true} style={styles.banner} />\n        )}\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      paddingBottom: 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: 12,\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    teamCountHeader: {\n      fontSize: tokens.fontSizeLg,\n    },\n  })\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.12.0-rc.9",
+  "version": "3.12.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "9d0dc8fc580c4e01e25315f568472772bed657ce"
+  "gitHead": "1224a5919490e2682cb564d20b9ad5485925def8"
 }

package/src/components/display/index.ts

@@ -19,3 +19,4 @@ export * from './text_button'
 export * from './text_inline_button'
 export * from './text'
 export * from './toggle_button'
+export * from './keyboard_view'

package/src/hooks/use_report_bug_action.ts

@@ -14,9 +14,11 @@ export const useReportBugAction = () => {
   return useMutation({
     mutationFn: async ({
       description,
+      description_json,
       attachmentIds,
     }: {
       description: string
+      description_json: string
       attachmentIds: string[]
     }) => {
       return apiClient.chat.post({
@@ -26,6 +28,7 @@ export const useReportBugAction = () => {
             type: '',
             attributes: {
               description,
+              description_json,
               device_info: `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
               attachment_ids: attachmentIds,
             },

package/src/screens/bug_report_screen.tsx

@@ -1,5 +1,13 @@
 import React, { useCallback, useLayoutEffect, useState } from 'react'
-import { View, StyleSheet, TextInput, Linking, ScrollView } from 'react-native'
+import {
+  View,
+  StyleSheet,
+  TextInput,
+  Linking,
+  ScrollView,
+  TouchableOpacity,
+  Modal,
+} from 'react-native'
 import type {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
@@ -12,6 +20,8 @@ import {
   TextInlineButton,
   ImageAttachmentPreview,
   BlankState,
+  Icon,
+  KeyboardView,
 } from '../components'
 import { useTheme } from '../hooks'
 import { useUploadClient } from '../hooks/use_upload_client'
@@ -26,7 +36,18 @@ import { DefaultLoading } from '../components/page/loading'
 import { startsWith } from 'lodash'
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 
-const MAX_DESCRIPTION_LENGTH = 5000
+const MAX_DESCRIPTION_LENGTH = 2000
+
+const BUG_TYPE_OPTIONS = [
+  'Issues sending or receiving messages',
+  'Trouble starting a new conversation',
+  "Notifications aren't working",
+  'Incorrect read receipts or unread counts',
+  'Problems with file attachments',
+  "Something isn't displaying properly",
+  'App is slow or crashes',
+  'Other',
+]
 
 export const BugReportScreenOptions = ({
   navigation,
@@ -45,25 +66,54 @@ interface Attachment {
 export function BugReportScreen() {
   const styles = useStyles()
   const navigation = useNavigation()
-  const [description, setDescription] = useState('')
+  const [bugType, setBugType] = useState('')
+  const [showBugTypePicker, setShowBugTypePicker] = useState(false)
+  const [whatWereDoing, setWhatWereDoing] = useState('')
+  const [whatExpected, setWhatExpected] = useState('')
+  const [stepsToResolve, setStepsToResolve] = useState('')
   const uploadApi = useUploadClient()
   const [uploading, setUploading] = useState(false)
   const [attachment, setAttachment] = useState<Attachment | null>(null)
   const [uploadError, setUploadError] = useState<string | null>(null)
   const mutation = useReportBugAction()
   const { mutate, status } = mutation
-  const formValid = description.trim().length > 0 && status === 'idle' && !uploading
+  const formValid =
+    bugType.trim().length > 0 &&
+    whatWereDoing.trim().length > 0 &&
+    whatExpected.trim().length > 0 &&
+    stepsToResolve.trim().length > 0 &&
+    status === 'idle' &&
+    !uploading
   const [imagePreviewURI, setImagePreviewURI] = useState<string>('')
 
-  const nearMaxDescription = description.length >= MAX_DESCRIPTION_LENGTH - 100
   const isImageAttachment = startsWith(attachment?.type, 'image/')
 
   const handleSubmit = useCallback(() => {
+    const description = `${whatWereDoing.substring(0, 100)}
+
+## What kind of bug did you experience?
+${bugType}
+
+## What were you trying to do when you encountered the bug?
+${whatWereDoing}
+
+## What did you expect to happen? What actually happened?
+${whatExpected}
+
+## What steps have you tried to resolve the issue?
+${stepsToResolve}`
+
     mutate({
       description,
+      description_json: JSON.stringify({
+        bugType,
+        whatWereDoing,
+        whatExpected,
+        stepsToResolve,
+      }),
       attachmentIds: attachment ? [attachment.id] : [],
     })
-  }, [attachment, description, mutate])
+  }, [attachment, bugType, whatWereDoing, whatExpected, stepsToResolve, mutate])
 
   const handleRemoveAttachment = useCallback(() => {
     setAttachment(null)
@@ -162,83 +212,181 @@ export function BugReportScreen() {
   }
 
   return (
-    <ScrollView contentContainerStyle={styles.container}>
-      <Text style={styles.description}>
-        Thanks for helping us improve chat! Please provide details about the issue you’ve
-        encountered. We read every submission and your feedback helps us improve the experience.
-      </Text>
-      <View style={styles.textInputContainer}>
-        <TextInput
-          style={styles.textInput}
-          multiline
-          placeholder="Details about the problem"
-          value={description}
-          onChangeText={setDescription}
-          maxLength={MAX_DESCRIPTION_LENGTH}
-        />
-        {nearMaxDescription && (
-          <Text variant="footnote">
-            {description.length}/{MAX_DESCRIPTION_LENGTH}
-          </Text>
-        )}
-      </View>
+    <KeyboardView>
+      <ScrollView contentContainerStyle={styles.container}>
+        <Text style={styles.description}>
+          Thanks for helping us improve chat. Please provide details about the issue you've
+          encountered. We read every submission and your feedback helps us improve the experience.
+        </Text>
 
-      <View style={styles.attachmentSection}>
-        <View style={styles.attachmentHeader}>
-          <Text style={styles.attachmentLabel}>
-            Attachment <Text style={styles.subLabel}>(optional)</Text>
+        <View style={styles.textInputContainer}>
+          <Text style={styles.fieldLabel}>
+            What kind of bug did you experience? <Text style={styles.required}>*</Text>
           </Text>
-          {uploading && <Spinner />}
+          <TouchableOpacity style={styles.pickerButton} onPress={() => setShowBugTypePicker(true)}>
+            <Text style={[styles.pickerText, !bugType && styles.pickerPlaceholder]}>
+              {bugType || 'Select the bug type'}
+            </Text>
+            <Icon
+              name="general.downChevron"
+              style={styles.pickerArrow}
+              accessibilityElementsHidden
+            />
+          </TouchableOpacity>
         </View>
-        {uploadError && <Text style={styles.attachmentErrorText}>{uploadError}</Text>}
-        {attachment ? (
-          <View style={styles.attachmentPreviewContainer}>
-            {isImageAttachment ? (
-              <ImageAttachmentPreview
-                uri={imagePreviewURI}
-                fileName={attachment.name}
-                onRemovePress={handleRemoveAttachment}
-              />
-            ) : (
-              <VideoAttachmentPreview
-                name={attachment.name}
-                onRemovePress={handleRemoveAttachment}
-              />
-            )}
+
+        <Modal
+          visible={showBugTypePicker}
+          animationType="slide"
+          presentationStyle="pageSheet"
+          onRequestClose={() => setShowBugTypePicker(false)}
+        >
+          <View style={styles.modalContainer}>
+            <View style={styles.modalHeader}>
+              <HeaderCancelButton title="Cancel" onPress={() => setShowBugTypePicker(false)} />
+              <Text style={styles.modalTitle}>Select Bug Type</Text>
+              <View style={styles.modalHeaderSpacer} />
+            </View>
+            <ScrollView style={styles.modalContent}>
+              {BUG_TYPE_OPTIONS.map(option => (
+                <TouchableOpacity
+                  key={option}
+                  style={styles.modalOption}
+                  onPress={() => {
+                    setBugType(option)
+                    setShowBugTypePicker(false)
+                  }}
+                >
+                  <Text style={styles.modalOptionText}>{option}</Text>
+                  {bugType === option && (
+                    <Icon
+                      name="general.check"
+                      style={styles.modalCheckmark}
+                      accessibilityElementsHidden
+                    />
+                  )}
+                </TouchableOpacity>
+              ))}
+            </ScrollView>
           </View>
-        ) : (
-          <Button
-            title="Attach a screenshot"
-            accessibilityHint="Opens your device's image gallery"
-            iconNameLeft="general.paperclip"
-            onPress={pickImage}
-            size="sm"
-            variant="outline"
-            style={styles.attachButton}
-            disabled={uploading || Boolean(attachment)}
+        </Modal>
+
+        <View style={styles.textInputContainer}>
+          <Text style={styles.fieldLabel}>
+            What were you trying to do when you encountered the bug?{' '}
+            <Text style={styles.required}>*</Text>
+          </Text>
+          <TextInput
+            style={styles.textInput}
+            multiline
+            placeholder="Description"
+            value={whatWereDoing}
+            onChangeText={setWhatWereDoing}
+            maxLength={MAX_DESCRIPTION_LENGTH}
           />
-        )}
-      </View>
+          {whatWereDoing.length >= MAX_DESCRIPTION_LENGTH - 100 && (
+            <Text variant="footnote">
+              {whatWereDoing.length}/{MAX_DESCRIPTION_LENGTH}
+            </Text>
+          )}
+        </View>
 
-      <View style={styles.footer}>
-        <Text variant="footnote">
-          We can’t respond to every submission, but we may reach out if we have additional
-          questions.
-        </Text>
+        <View style={styles.textInputContainer}>
+          <Text style={styles.fieldLabel}>
+            What did you expect to happen? What actually happened?{' '}
+            <Text style={styles.required}>*</Text>
+          </Text>
+          <TextInput
+            style={styles.textInput}
+            multiline
+            placeholder="Description"
+            value={whatExpected}
+            onChangeText={setWhatExpected}
+            maxLength={MAX_DESCRIPTION_LENGTH}
+          />
+          {whatExpected.length >= MAX_DESCRIPTION_LENGTH - 100 && (
+            <Text variant="footnote">
+              {whatExpected.length}/{MAX_DESCRIPTION_LENGTH}
+            </Text>
+          )}
+        </View>
 
-        <Text variant="footnote">
-          For details on how we process your data and ensure its security, please refer to our{' '}
-          <TextInlineButton
-            accessibilityRole="link"
-            variant="footnote"
-            onPress={() => Linking.openURL('https://www.planningcenter.com/privacy')}
-          >
-            Privacy Policy
-          </TextInlineButton>
-          .
-        </Text>
-      </View>
-    </ScrollView>
+        <View style={styles.textInputContainer}>
+          <Text style={styles.fieldLabel}>
+            What steps have you tried to resolve the issue? <Text style={styles.required}>*</Text>
+          </Text>
+          <TextInput
+            style={styles.textInput}
+            multiline
+            placeholder="Description"
+            value={stepsToResolve}
+            onChangeText={setStepsToResolve}
+            maxLength={MAX_DESCRIPTION_LENGTH}
+          />
+          {stepsToResolve.length >= MAX_DESCRIPTION_LENGTH - 100 && (
+            <Text variant="footnote">
+              {stepsToResolve.length}/{MAX_DESCRIPTION_LENGTH}
+            </Text>
+          )}
+        </View>
+
+        <View style={styles.attachmentSection}>
+          <View style={styles.attachmentHeader}>
+            <Text style={styles.attachmentLabel}>
+              Attachment <Text style={styles.subLabel}>(optional)</Text>
+            </Text>
+            {uploading && <Spinner />}
+          </View>
+          {uploadError && <Text style={styles.attachmentErrorText}>{uploadError}</Text>}
+          {attachment ? (
+            <View style={styles.attachmentPreviewContainer}>
+              {isImageAttachment ? (
+                <ImageAttachmentPreview
+                  uri={imagePreviewURI}
+                  fileName={attachment.name}
+                  onRemovePress={handleRemoveAttachment}
+                />
+              ) : (
+                <VideoAttachmentPreview
+                  name={attachment.name}
+                  onRemovePress={handleRemoveAttachment}
+                />
+              )}
+            </View>
+          ) : (
+            <Button
+              title="Attach a screenshot"
+              accessibilityHint="Opens your device's image gallery"
+              iconNameLeft="general.paperclip"
+              onPress={pickImage}
+              size="sm"
+              variant="outline"
+              style={styles.attachButton}
+              disabled={uploading || Boolean(attachment)}
+            />
+          )}
+        </View>
+
+        <View style={styles.footer}>
+          <Text variant="footnote">
+            We can’t respond to every submission, but we may reach out if we have additional
+            questions.
+          </Text>
+
+          <Text variant="footnote">
+            For details on how we process your data and ensure its security, please refer to our{' '}
+            <TextInlineButton
+              accessibilityRole="link"
+              variant="footnote"
+              onPress={() => Linking.openURL('https://www.planningcenter.com/privacy')}
+            >
+              Privacy Policy
+            </TextInlineButton>
+            .
+          </Text>
+        </View>
+      </ScrollView>
+    </KeyboardView>
   )
 }
 
@@ -258,13 +406,81 @@ const useStyles = () => {
       color: colors.textColorDefaultSecondary,
     },
     textInputContainer: {
-      borderTopWidth: 1,
-      borderBottomWidth: 1,
+      gap: 8,
+    },
+    fieldLabel: {
+      fontSize: 16,
+      fontWeight: platformFontWeightBold,
+      color: colors.textColorDefaultPrimary,
+    },
+    required: {
+      color: colors.statusErrorText,
+    },
+    pickerButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      borderWidth: 1,
       borderColor: colors.borderColorDefaultBase,
+      borderRadius: 8,
+      paddingHorizontal: 16,
       paddingVertical: 12,
+      backgroundColor: colors.surfaceColor100,
+      minHeight: 48,
+    },
+    pickerText: {
+      fontSize: 16,
+      color: colors.textColorDefaultPrimary,
+      flex: 1,
+    },
+    pickerPlaceholder: {
+      color: colors.textColorDefaultSecondary,
+    },
+    pickerArrow: {
+      fontSize: 12,
+      color: colors.iconColorDefaultSecondary,
+      marginLeft: 8,
+    },
+    modalContainer: {
+      flex: 1,
+      backgroundColor: colors.surfaceColor100,
+    },
+    modalHeader: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultBase,
+    },
+    modalTitle: {
+      fontSize: 18,
+      fontWeight: platformFontWeightBold,
+      color: colors.textColorDefaultPrimary,
+    },
+    modalHeaderSpacer: {
+      width: 50, // Same width as cancel button to center title
+    },
+    modalContent: {
+      flex: 1,
+    },
+    modalOption: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
       paddingHorizontal: 16,
-      marginHorizontal: -16,
-      gap: 8,
+      paddingVertical: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultBase,
+    },
+    modalOptionText: {
+      fontSize: 16,
+      color: colors.textColorDefaultPrimary,
+      flex: 1,
+    },
+    modalCheckmark: {
+      fontSize: 16,
+      color: colors.statusSuccessIcon,
     },
     textInput: {
       color: colors.textColorDefaultPrimary,
@@ -272,6 +488,12 @@ const useStyles = () => {
       textAlignVertical: 'top',
       minHeight: 120,
       maxHeight: 200,
+      borderWidth: 1,
+      borderColor: colors.borderColorDefaultBase,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      backgroundColor: colors.surfaceColor100,
     },
     attachmentSection: {
       gap: 8,