@planningcenter/chat-react-native 3.1.0-rc.13 → 3.1.0-rc.15

package/src/components/display/badge.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import type { ViewStyle, TextStyle } from 'react-native'
-import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg'
+import type { TextStyle, ViewProps, ViewStyle } from 'react-native'
+import { Pressable, StyleSheet, View } from 'react-native'
+import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
-import { Icon } from './icon'
-import { Text } from './text'
 import { platformFontWeightMedium, space } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
+import { Icon } from './icon'
+import { Text } from './text'
 import { useStatusColorAppearanceMap, type StatusAppearanceUnion } from './utils/status_colors'
 
 // =================================
@@ -72,6 +72,10 @@ interface BadgeProps {
    * Shows an icon of the user choice to the left of the text.
    */
   iconName?: string
+  /**
+   * Shows an icon of the user choice to the right of the text.
+   */
+  iconNameRight?: string
   /**
    * Styles badge wrapper.
    */
@@ -80,6 +84,10 @@ interface BadgeProps {
    * Specifies the maximum size a font can reach when allowFontScaling is enabled.
    */
   maxFontSizeMultiplier?: number
+  /**
+   * Callback function when the badge is pressed.
+   */
+  onPress?: () => void
 }
 
 export function Badge({
@@ -87,40 +95,59 @@ export function Badge({
   metaLabel,
   style,
   iconName,
+  iconNameRight,
   label,
   productLogoName,
   variant = 'default',
   maxFontSizeMultiplier,
+  onPress,
 }: BadgeProps) {
   const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })
-  const { showBadgeLogo } = useTheme()
+  const { showBadgeProductLogo } = useTheme()
 
   const isMetaSubtle = variant === 'metaSubtle'
-  const isMeta = variant === 'meta'
   const hasMetaLabel = Boolean(metaLabel)
 
-  const showLogo = showBadgeLogo && productLogoName && isMeta
+  const showLogo = showBadgeProductLogo && productLogoName
   const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName?.toLowerCase()]
   const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label
 
   return (
-    <View style={[styles.badgeWrapper, style]}>
+    <BadgeWrapper style={[styles.badgeWrapper, style]} onPress={onPress} accessibilityRole="button">
       <View style={styles.badge}>
         {showLogo && ProductLogoSvg && <ProductLogoSvg logoSize={styles.logo.fontSize} />}
         {iconName && <Icon name={iconName} style={styles.icon} />}
         <Text variant="footnote" style={styles.label}>
           {badgeLabel}
         </Text>
+        {iconNameRight && <Icon name={iconNameRight} style={styles.iconRight} />}
       </View>
       {hasMetaLabel && (
         <Text variant="footnote" style={styles.metaLabel} numberOfLines={1}>
           {metaLabel}
         </Text>
       )}
-    </View>
+    </BadgeWrapper>
   )
 }
 
+const BadgeWrapper = ({
+  children,
+  onPress,
+  accessibilityRole,
+  ...restProps
+}: ViewProps & Pick<BadgeProps, 'onPress'>) => {
+  if (onPress) {
+    return (
+      <Pressable accessibilityRole={accessibilityRole} onPress={onPress} {...restProps}>
+        {children}
+      </Pressable>
+    )
+  }
+
+  return <View {...restProps}>{children}</View>
+}
+
 // =================================
 // ====== Styles ===================
 // =================================
@@ -199,6 +226,10 @@ const useStyles = ({
       color: statusColorMap[appearance].icon,
       fontSize: badgeFontSize,
     },
+    iconRight: {
+      color: statusColorMap[appearance].icon,
+      fontSize: badgeFontSize - 2,
+    },
     logo: {
       fontSize: badgeFontSize * fontScale,
     },

package/src/components/display/button.tsx

@@ -50,7 +50,7 @@ type VariantColors = Record<
 // ====== Component ================
 // =================================
 
-interface ButtonProps extends PressableProps {
+export interface ButtonProps extends PressableProps {
   /**
    * Specifies whether fonts should be scaled down automatically to fit given style constraints.
    */

package/src/components/display/child_notice.tsx

@@ -4,7 +4,7 @@ import { BannerCollapsible } from './banner_collapsible'
 import BannerPrimitive from '../primitive/banner_primitive'
 import { View, StyleSheet } from 'react-native'
 import { Avatar } from './avatar'
-import { platformFontWeightMedium } from '../../utils'
+import { platformFontWeightMedium, pluralize } from '../../utils'
 import { Text } from './text'
 
 // =================================
@@ -17,7 +17,7 @@ interface ChildNoticeProps {
 
 export function ChildNotice({ childMembers }: ChildNoticeProps) {
   const styles = useStyles()
-  const heading = `${childMembers.length} members under age 13`
+  const heading = `${pluralize(childMembers.length, 'member')} under age 13`
 
   return (
     <BannerCollapsible appearance="warning" iconName="general.shieldExclamation" heading={heading}>

package/src/components/display/icon.tsx

@@ -4,14 +4,15 @@ import type { ColorValue, StyleProp, ViewStyle } from 'react-native'
 import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
-import * as general from '@planningcenter/icons/paths/general'
-import * as groups from '@planningcenter/icons/paths/groups'
+import * as api from '@planningcenter/icons/paths/api'
+import * as brand from '@planningcenter/icons/paths/brand'
 import * as calendar from '@planningcenter/icons/paths/calendar'
-import * as people from '@planningcenter/icons/paths/people'
 import * as churchCenter from '@planningcenter/icons/paths/church-center'
+import * as general from '@planningcenter/icons/paths/general'
+import * as groups from '@planningcenter/icons/paths/groups'
 import * as logomark from '@planningcenter/icons/paths/logomark'
-import * as brand from '@planningcenter/icons/paths/brand'
-import * as api from '@planningcenter/icons/paths/api'
+import * as people from '@planningcenter/icons/paths/people'
+import * as services from '@planningcenter/icons/paths/services'
 
 // =================================
 // ====== Constants ================
@@ -21,13 +22,14 @@ const FALLBACK_SIZE = 12
 
 const ICONS = {
   api,
+  brand,
   calendar,
-  people,
   churchCenter,
-  groups,
   general,
+  groups,
   logomark,
-  brand,
+  people,
+  services,
 } as const
 
 type IconStyle = ViewStyle & {

package/src/components/display/text.tsx

@@ -39,7 +39,7 @@ export function Text({ style, variant = 'plain', children, ...props }: TextProps
   }
 
   return (
-    <ReactNativeText style={[styles.global, variantStyleMap[variant], style]} {...props}>
+    <ReactNativeText style={[variantStyleMap[variant], style]} {...props}>
       {children}
     </ReactNativeText>
   )
@@ -52,12 +52,6 @@ export function Text({ style, variant = 'plain', children, ...props }: TextProps
 const useStyles = () => {
   const { colors } = useTheme()
   return StyleSheet.create({
-    global: {
-      fontFamily: Platform.select({
-        ios: 'System',
-        android: 'normal',
-      }),
-    },
     plain: {
       color: colors.textColorDefaultPrimary,
       fontSize: tokens.fontSizeMd,

package/src/components/index.tsx

@@ -1,3 +1,3 @@
-export * from './conversations'
+export * from './conversations/conversations'
 export * from './page/error_boundary'
 export * from './display'

package/src/hooks/use_api.ts

@@ -6,20 +6,20 @@ import {
 } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client/types'
-import { useApiClient } from './use_api_client'
+import { App, useApiClient } from './use_api_client'
 import { getRequestQueryKey } from './use_suspense_api'
 
-interface SuspenseGetOptions extends GetRequest {
-  app?: 'chat' | 'groups'
+interface ApiGetOptions extends GetRequest {
+  app?: App
+  enabled?: boolean
 }
 
-export const useApiGet = <T extends ResourceObject | ResourceObject[]>(
-  args: SuspenseGetOptions
-) => {
+export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: ApiGetOptions) => {
   type Resource = ApiResource<T>
 
   const { data, ...query } = useQuery<Resource, Response>({
     queryKey: getRequestQueryKey(args),
+    enabled: args.enabled,
   })
 
   return { ...data, ...query }
@@ -36,7 +36,7 @@ export type SuspensePaginatorOptions = Omit<
 >
 
 export const useApiPaginator = <T extends ResourceObject>(
-  args: SuspenseGetOptions,
+  args: ApiGetOptions,
   opts?: SuspensePaginatorOptions
 ) => {
   const apiClient = useApiClient()
@@ -52,11 +52,11 @@ export const useApiPaginator = <T extends ResourceObject>(
       const pageParmWhere = pageParam?.where || {}
       const argsWhere = args.data.where || {}
       const where = { ...argsWhere, ...pageParmWhere }
-
+      const app = args.app || 'chat'
       const offset = pageParam?.offset || args.data.offset
       const data = { ...args.data, where, offset }
 
-      return apiClient.chat.get({
+      return apiClient[app].get({
         url: args.url,
         data,
       })
@@ -71,10 +71,11 @@ export const useApiPaginator = <T extends ResourceObject>(
 
       return undefined
     },
+    enabled: args.enabled,
     ...(opts || {}),
   })
 
-  const data: T[] = query.data?.pages.flatMap(page => page.data) || []
+  const data: T[] = query.data?.pages?.flatMap(page => page.data) || []
 
   return { ...query, data }
 }

package/src/hooks/use_api_client.ts

@@ -2,7 +2,7 @@ import { useContext, useMemo } from 'react'
 import { ChatContext } from '../contexts/chat_context'
 import { Client } from '../utils/client'
 
-type App = 'chat' | 'groups' | 'services'
+export type App = 'chat' | 'groups' | 'services'
 const apps: App[] = ['chat', 'groups', 'services']
 
 export type ApiClient = { [_K in App]: Client }

package/src/hooks/use_conversation.ts

@@ -4,7 +4,7 @@ import { ApiResource, ConversationResource } from '../types'
 import { transformGetToPost } from '../utils/client/request_helpers'
 import { useApiClient } from './use_api_client'
 import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
-import { getConversationsRequestArgs } from './use_conversations'
+import { getConversationsRequestArgs } from '../utils/request/conversation'
 
 export const getConversationRequestArgs = ({ conversation_id }: { conversation_id: number }) => ({
   url: `/me/conversations/${conversation_id}`,

package/src/hooks/use_conversation_jolt_events.ts

@@ -2,12 +2,12 @@ import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, ConversationResource } from '../types'
 import { deleteRecordInPagesData, updateOrCreateRecordInPagesData } from '../utils'
 import { useApiClient } from './use_api_client'
-import { getConversationsRequestArgs } from './use_conversations'
 import { useCurrentPerson } from './use_current_person'
 import { useJoltChannel, useJoltEvent } from './use_jolt'
 import { getRequestQueryKey } from './use_suspense_api'
 import { JoltConversationEvent } from '../types/jolt_events'
 import { ConversationDeletedEvent } from '../types/jolt_events/conversation_events'
+import { getConversationsRequestArgs } from '../utils/request/conversation'
 
 type QueryData = InfiniteData<ApiCollection<ConversationResource>>
 

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -9,10 +9,10 @@ import { MessageCreatedEvent, MessageDeletedEvent } from '../types/jolt_events/m
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { useCurrentPerson } from './use_current_person'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
-import { getMessagesRequestArgs } from './use_conversation_messages'
 import { getRequestQueryKey } from './use_suspense_api'
 import { JoltReactionEvent } from '../types/jolt_events'
 import { transformReactionEventDataToReactionCountResource } from '../utils/jolt/transform_reaction_event_data_to_reaction_count_resource'
+import { getMessagesRequestArgs } from '../utils/request/messages'
 
 interface Props {
   conversationId: number

package/src/hooks/use_conversations.ts

@@ -1,38 +1,10 @@
 import { useMemo } from 'react'
 import { ConversationResource } from '../types'
-import { GetRequest } from '../utils/client/types'
 import { useSuspensePaginator } from './use_suspense_api'
+import { ConversationRequestArgs, getConversationsRequestArgs } from '../utils/request/conversation'
 
-export const getConversationsRequestArgs = (): GetRequest => ({
-  url: '/me/conversations',
-  data: {
-    perPage: 20,
-    order: '-last_message',
-    fields: {
-      Conversation: [
-        'created_at',
-        'badges',
-        'groups',
-        'last_message_author_id',
-        'last_message_author_name',
-        'last_message_created_at',
-        'last_message_text_preview',
-        'preview_avatar_urls',
-        'member_ability',
-        'muted',
-        'replies_disabled',
-        'title',
-        'unread_count',
-        'updated_at',
-      ],
-      ConversationBadge: ['app_name', 'pco_resource_type', 'text'],
-    },
-    include: ['badges'],
-  },
-})
-
-export function useConversations() {
-  const requestArgs = getConversationsRequestArgs()
+export function useConversations(args?: Partial<ConversationRequestArgs>) {
+  const requestArgs = getConversationsRequestArgs(args)
   const { data, ...rest } = useSuspensePaginator<ConversationResource>(requestArgs)
 
   const conversations = useMemo(

package/src/hooks/use_groups.ts

@@ -0,0 +1,31 @@
+import { AppName } from '../types/resources/app_name'
+import { GroupResource, SourceType } from '../types/resources/group_resource'
+import { useApiPaginator } from './use_api'
+
+type UseGroupsProps = {
+  source_app_name: AppName
+  source_type: SourceType
+}
+
+export const useGroups = ({ source_app_name, source_type }: UseGroupsProps) => {
+  return useApiPaginator<GroupResource>({
+    url: '/me/groups',
+    data: {
+      fields: {
+        Group: [],
+      },
+      where: {
+        source_app_name,
+        source_type,
+      },
+      perPage: 100,
+    },
+    app: 'chat',
+  })
+}
+
+export const useCanDisplayGroups = (props: UseGroupsProps) => {
+  const { data: teams = [] } = useGroups(props)
+
+  return teams?.length > 0
+}

package/src/hooks/use_groups_groups.ts

@@ -0,0 +1,20 @@
+import { GroupsGroupResource } from '../types'
+import { useApiPaginator } from './use_api'
+
+export const useGroupsGroups = () => {
+  return useApiPaginator<GroupsGroupResource>({
+    url: '/me/groups',
+    data: {
+      perPage: 100,
+      fields: {
+        Group: ['can_create_conversation', 'name', 'header_image', 'memberships_count'],
+      },
+    },
+    app: 'groups',
+  })
+}
+
+export const useCanDisplayGroupsGroups = () => {
+  const { data: groups = [] } = useGroupsGroups()
+  return groups?.length > 0
+}

package/src/hooks/use_services_team.ts

@@ -0,0 +1,30 @@
+import { TeamOptionResource, TeamOptionResponseItem } from '../types'
+import { useApiGet } from './use_api'
+
+export const useServicesTeams = () => {
+  const { data: chat } = useApiGet<TeamOptionResource>({
+    url: '/chat',
+    data: {
+      fields: {
+        Chat: ['teams'],
+      },
+    },
+    app: 'services',
+  })
+
+  return chat?.teams || []
+}
+
+export const useServicesTeamsMap = () => {
+  const teams = useServicesTeams()
+
+  return teams.reduce(
+    (acc, team) => {
+      const id = `Services-Team-${team.value.teamId}`
+      acc[id] = team
+
+      return acc
+    },
+    {} as Record<string, TeamOptionResponseItem>
+  )
+}

package/src/hooks/use_suspense_api.ts

@@ -6,10 +6,10 @@ import {
 } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client/types'
-import { useApiClient } from './use_api_client'
+import { App, useApiClient } from './use_api_client'
 
 interface SuspenseGetOptions extends GetRequest {
-  app?: 'chat' | 'groups'
+  app?: App
 }
 
 export const useSuspenseGet = <T extends ResourceObject | ResourceObject[]>(
@@ -51,11 +51,11 @@ export const useSuspensePaginator = <T extends ResourceObject>(
       const pageParmWhere = pageParam?.where || {}
       const argsWhere = args.data.where || {}
       const where = { ...argsWhere, ...pageParmWhere }
-
+      const app = args.app || 'chat'
       const offset = pageParam?.offset || args.data.offset
       const data = { ...args.data, where, offset }
 
-      return apiClient.chat.get({
+      return apiClient[app].get({
         url: args.url,
         data,
       })

package/src/hooks/use_teams.ts

@@ -0,0 +1,25 @@
+import { GroupResource } from '../types/resources/group_resource'
+import { useApiPaginator } from './use_api'
+
+export const useTeams = () => {
+  return useApiPaginator<GroupResource>({
+    url: '/me/groups',
+    data: {
+      fields: {
+        Group: [],
+      },
+      where: {
+        source_app_name: 'Services',
+        source_type: 'Team',
+      },
+      perPage: 100,
+    },
+    app: 'chat',
+  })
+}
+
+export const useCanDisplayTeams = () => {
+  const { data: teams = [] } = useTeams()
+
+  return teams?.length > 0
+}

package/src/navigation/index.tsx

@@ -23,6 +23,10 @@ import { NotFound } from '../screens/not_found'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { HeaderRightButton } from './header'
 import { ScreenLayout } from './screenLayout'
+import {
+  ConversationFiltersScreen,
+  ConversationFiltersScreenOptions,
+} from '../screens/conversation_filters_screen'
 
 export const CreateConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationSelectRecipients',
@@ -75,6 +79,10 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    ConversationFilters: {
+      screen: ConversationFiltersScreen,
+      options: ConversationFiltersScreenOptions,
+    },
     Conversation: {
       screen: ConversationScreen,
     },