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

package/src/screens/conversation_filters_screen.tsx

@@ -0,0 +1,152 @@
+import { HeaderTitle, HeaderTitleProps, useHeaderHeight } from '@react-navigation/elements'
+import { createComponentForStaticNavigation, RouteProp, useRoute } from '@react-navigation/native'
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationOptions,
+} from '@react-navigation/native-stack'
+import React from 'react'
+import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Button, TextButton } from '../components'
+import {
+  FilterContext,
+  FilterProvider,
+} from './conversation_filters/context/conversation_filter_context'
+import { ConversationFilters } from './conversation_filters/components/conversation_filters'
+import { GroupFilters } from './conversation_filters/group_filters'
+import {
+  ConversationFiltersScreenProps,
+  ConversationFilterStackParamList,
+} from './conversation_filters/screen_props'
+import { useTheme } from '../hooks'
+import { TeamFilters } from './conversation_filters/team_filters'
+
+const FilterHeaderTitle = ({ tintColor }: HeaderTitleProps) => {
+  const styles = useStyles()
+  return <HeaderTitle style={[styles.headerTitle, { color: tintColor }]}>Filters</HeaderTitle>
+}
+
+const HeaderRight = () => {
+  const { resetFilter, applyFilters } = React.useContext(FilterContext)
+  const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
+  const styles = useStyles()
+
+  return (
+    <View style={styles.headerRight}>
+      <TextButton onPress={resetFilter}>Reset</TextButton>
+      <Button title="Apply" onPress={() => applyFilters(route.params)} />
+    </View>
+  )
+}
+
+const HeaderRightWithContext = () => {
+  return (
+    <FilterProvider>
+      <HeaderRight />
+    </FilterProvider>
+  )
+}
+
+export const ConversationFiltersScreenOptions: NativeStackNavigationOptions = {
+  presentation: Platform.select({ android: 'modal', ios: 'formSheet' }),
+  sheetAllowedDetents: Platform.select({
+    android: [0.75, 0.94],
+    default: [0.75, 1],
+  }),
+  sheetGrabberVisible: true,
+  headerBackVisible: false,
+  headerRight: HeaderRightWithContext,
+  headerTitle: FilterHeaderTitle,
+  headerTitleAlign: 'left',
+}
+
+const FilterNavigator = createNativeStackNavigator<ConversationFilterStackParamList>({
+  initialRouteName: 'Filters',
+  screens: {
+    Filters: {
+      screen: ConversationFilters,
+      options: {
+        headerShown: false,
+      },
+    },
+    GroupFilters: {
+      screen: GroupFilters,
+      options: {
+        headerTitle: Platform.select({
+          android: 'Groups',
+          ios: '',
+        }),
+        headerBackTitle: 'Groups',
+      },
+    },
+    TeamFilters: {
+      screen: TeamFilters,
+      options: {
+        headerTitle: Platform.select({
+          android: 'Teams',
+          ios: '',
+        }),
+        headerBackTitle: 'Teams',
+      },
+    },
+  },
+})
+
+const Filters = createComponentForStaticNavigation(FilterNavigator, 'Filters')
+
+export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps) => {
+  const styles = useStyles()
+
+  return (
+    <FilterProvider>
+      <View style={styles.container}>
+        <Filters />
+      </View>
+    </FilterProvider>
+  )
+}
+
+const useStyles = () => {
+  const { top } = useSafeAreaInsets()
+  const { height } = useWindowDimensions()
+  const headerHeight = useHeaderHeight()
+  const theme = useTheme()
+
+  const containerHeight = Platform.select({
+    android: height,
+    ios: height - top - headerHeight,
+  })
+
+  return StyleSheet.create({
+    container: {
+      height: containerHeight,
+    },
+    headerTitle: {
+      textAlign: 'left',
+      flex: 1,
+    },
+    filterBar: {
+      backgroundColor: theme.colors.fillColorNeutral100Inverted,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+      gap: 8,
+    },
+    filterBarScroll: {
+      elevation: 4,
+      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.1)',
+    },
+    filterBarActions: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+    headerRight: {
+      flexDirection: 'row',
+      gap: 8,
+      alignItems: 'center',
+    },
+  })
+}

package/src/screens/conversation_screen.tsx

@@ -8,7 +8,7 @@ import {
 import React, { useCallback, useEffect } from 'react'
 import { FlatList, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Icon, Text } from '../components'
+import { Badge, Icon } from '../components'
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
 import { KeyboardView } from '../components/display/keyboard_view'
@@ -74,7 +74,9 @@ const PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {
 
   const { data: conversation } = useConversation(route.params)
   const badge = conversation.badges?.[0]
-  const subtitle = [badge?.pcoResourceType, badge?.text].filter(f => f).join(': ')
+  const resourceType = badge?.pcoResourceType || ''
+  const productName = badge?.appName
+  const name = badge?.text || undefined
 
   return (
     <PlatformPressable
@@ -87,7 +89,13 @@ const PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {
         <HeaderTitle style={[styles.title, style]}>{children}</HeaderTitle>
         <Icon name="general.downChevron" size={12} />
       </View>
-      <Text variant="tertiary">{subtitle}</Text>
+      <Badge
+        variant="metaSubtle"
+        productLogoName={productName}
+        label={resourceType}
+        metaLabel={name}
+        style={styles.badge}
+      />
     </PlatformPressable>
   )
 }
@@ -99,13 +107,17 @@ const usePressableHeaderStyle = () => {
     },
     titleWrapper: {
       alignItems: 'center',
-      columnGap: 8,
+      columnGap: 4,
       flexDirection: 'row',
     },
     title: {
       padding: 0,
       margin: 0,
     },
+    badge: {
+      alignSelf: Platform.select({ android: 'flex-start', default: 'center' }),
+      marginTop: 2,
+    },
   })
 }
 

package/src/screens/conversations_screen.tsx

@@ -1,25 +1,222 @@
-import { StaticScreenProps } from '@react-navigation/native'
-import React from 'react'
+import { RouteProp, StaticScreenProps, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback, useMemo } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Conversations } from '../components'
+import { Badge, Button, ButtonProps, Conversations, Heading, TextButton } from '../components'
+import { ActionButton } from '../components/display/action_button'
+import { useCanCreateConversations, useTheme } from '../hooks'
+import { useApiGet } from '../hooks/use_api'
+import { GraphId, GroupResource } from '../types/resources/group_resource'
+import { useCanDisplayGroups } from '../hooks/use_groups'
 
 export type ConversationScreenProps = StaticScreenProps<{
   title?: string
-  chat_group_graph_id?: string
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: string
 }>
 
-export function ConversationsScreen(_props: ConversationScreenProps) {
+export function ConversationsScreen({ route }: ConversationScreenProps) {
+  const navigation = useNavigation()
+  const canCreateConversations = useCanCreateConversations()
+  const styles = useStyles()
+  const { chat_group_graph_id, group_source_app_name } = route.params
+
+  const filter = useMemo(() => {
+    if (chat_group_graph_id) {
+      return 'group'
+    } else if (group_source_app_name) {
+      return 'group_source_app_name'
+    }
+
+    return 'mine_or_not_empty'
+  }, [chat_group_graph_id, group_source_app_name])
+
   return (
     <View style={styles.container}>
-      <Conversations />
+      <Conversations
+        ListHeaderComponent={ListHeaderComponent}
+        group={chat_group_graph_id}
+        group_source_app_name={group_source_app_name}
+        filter={filter}
+      />
+      <ActionButton
+        visible={canCreateConversations}
+        title="New conversation"
+        onPress={() => navigation.navigate('Create')}
+      />
+    </View>
+  )
+}
+
+enum FilterTypes {
+  All = 'All',
+  Groups = 'Groups',
+  Teams = 'Teams',
+  More = 'More',
+}
+
+const ListHeaderComponent = () => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const canFilterByTeams = useCanDisplayGroups({ source_app_name: 'Services', source_type: 'Team' })
+  const canFilterByGroups = useCanDisplayGroups({ source_app_name: 'Groups', source_type: 'Group' })
+  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
+  const { chat_group_graph_id, group_source_app_name = '' } = route.params
+
+  const active: FilterTypes = useMemo(() => {
+    if (chat_group_graph_id) {
+      return FilterTypes.More
+    } else if (/groups/i.test(group_source_app_name)) {
+      return FilterTypes.Groups
+    } else if (/services/i.test(group_source_app_name)) {
+      return FilterTypes.Teams
+    }
+
+    return FilterTypes.All
+  }, [chat_group_graph_id, group_source_app_name])
+
+  const hideAppFilters = !canFilterByGroups || !canFilterByTeams
+
+  return (
+    <View style={styles.listHeader}>
+      <View style={styles.titleRow}>
+        <Heading numberOfLines={1} variant="h2">
+          Conversations
+        </Heading>
+        <TextButton>Mark all read</TextButton>
+      </View>
+      <View style={styles.filterRow}>
+        <FilterButton
+          title={FilterTypes.All}
+          activeTitle={active}
+          hidden={!canFilterByGroups || !canFilterByTeams}
+          onPress={() =>
+            navigation.setParams({
+              chat_group_graph_id: undefined,
+              group_source_app_name: undefined,
+            })
+          }
+        />
+        <FilterButton
+          title={FilterTypes.Groups}
+          activeTitle={active}
+          hidden={hideAppFilters}
+          onPress={() =>
+            navigation.setParams({
+              chat_group_graph_id: undefined,
+              group_source_app_name: 'Groups',
+            })
+          }
+        />
+        <FilterButton
+          title={FilterTypes.Teams}
+          activeTitle={active}
+          hidden={hideAppFilters}
+          onPress={() =>
+            navigation.setParams({
+              chat_group_graph_id: undefined,
+              group_source_app_name: 'Services',
+            })
+          }
+        />
+        <Button
+          title={hideAppFilters ? 'Filter' : FilterTypes.More}
+          onPress={() =>
+            navigation.navigate('ConversationFilters', {
+              chat_group_graph_id,
+              group_source_app_name,
+            })
+          }
+          variant={active === FilterTypes.More ? 'fill' : 'outline'}
+          iconNameRight="general.threeReducingHorizontalBars"
+        />
+      </View>
+      <Badges />
     </View>
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    gap: 8,
-  },
-})
+const Badges = () => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
+  const { chat_group_graph_id } = route.params
+  const { data: group } = useApiGet<GroupResource>({
+    url: `/me/groups/${chat_group_graph_id}`,
+    data: {
+      fields: {
+        Group: [],
+      },
+    },
+    enabled: !!chat_group_graph_id,
+    app: 'chat',
+  })
+
+  const handleBadgePress = useCallback(() => {
+    navigation.setParams({
+      chat_group_graph_id: undefined,
+      group_source_app_name: undefined,
+    })
+  }, [navigation])
+
+  if (!group) return null
+
+  return (
+    <View style={styles.groupBadge}>
+      <Badge iconNameRight="general.x" label={group?.name || ''} onPress={handleBadgePress} />
+    </View>
+  )
+}
+
+function FilterButton({
+  title,
+  activeTitle,
+  onPress,
+  hidden = false,
+  ...restProps
+}: {
+  title: string
+  activeTitle: string
+  onPress: () => void
+  hidden?: boolean
+} & ButtonProps) {
+  if (hidden) return null
+
+  return (
+    <Button
+      title={title}
+      variant={activeTitle === title ? 'fill' : 'outline'}
+      onPress={onPress}
+      {...restProps}
+    />
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+    },
+    listHeader: {
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      paddingHorizontal: 16,
+      paddingBottom: 16,
+      gap: 12,
+    },
+    titleRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingTop: 8,
+    },
+    filterRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      gap: 8,
+    },
+    groupBadge: {
+      flexDirection: 'row',
+    },
+  })
+}

package/src/screens/create/conversation_select_recipients_screen.tsx

@@ -4,8 +4,9 @@ import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Button, Heading, Icon, Image, Text } from '../../components'
-import { useSuspenseGet, useTheme } from '../../hooks'
+import { useTheme } from '../../hooks'
 import { GroupsGroupResource } from '../../types'
+import { useGroupsGroups } from '../../hooks/use_groups_groups'
 
 type ConversationSelectRecipientsScreenProps = StaticScreenProps<{
   chat_group_graph_id?: string
@@ -18,16 +19,7 @@ const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
 export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipientsScreenProps) => {
   const styles = useStyles()
   const navigation = useNavigation()
-  const { data: groups = [] } = useSuspenseGet<GroupsGroupResource[]>({
-    url: '/me/groups',
-    data: {
-      perPage: 100,
-      fields: {
-        Group: ['can_create_conversation', 'name', 'header_image', 'memberships_count'],
-      },
-    },
-    app: 'groups',
-  })
+  const { data: groups = [] } = useGroupsGroups()
   const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
 
   const handleNavigateToCreateConversation = (group: GroupsGroupResource) => {

package/src/types/resources/group_resource.ts

@@ -1,10 +1,13 @@
 import { AppName } from './app_name'
 
+export type SourceType = 'Team' | 'Group' | 'PlanTeam'
+export type GraphId = `${AppName}-${SourceType}-${number}`
+
 export interface GroupResource {
+  id: GraphId
   type: 'Group'
-  id: string
   links: { self: string }
   name: string | null
   sourceAppName: AppName
-  sourceType: string
+  sourceType: SourceType
 }

package/src/types/resources/index.ts

@@ -5,3 +5,4 @@ export * from './oauth_token'
 export * from './person'
 export * from './groups'
 export * from './app_grant'
+export * from './services'

package/src/types/resources/member_ability.ts

@@ -2,4 +2,5 @@ export interface MemberAbilityResource {
   type: 'MemberAbility'
   canUpdate: boolean
   canDelete: boolean
+  leader: boolean
 }

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

@@ -0,0 +1 @@
+export * from './team_resource'

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

@@ -0,0 +1,60 @@
+// All of our calls out to services go out to /chat, which isn't a typical pco-api vertex.
+// They all have a shared type of 'Chat' which has the following array attributes:
+// group_identifiers, people, plans, teams and, teams_i_lead.
+// All of these have a type array, are only rendered on request, and are exclusively used for this form.
+// There is also a payload which is a string, and is used to create a conversation in chat.
+
+import { ResourceObject } from '../../api_primitives'
+
+interface ServicesChatResource extends ResourceObject {
+  type: 'Chat'
+}
+
+export interface TeamResource extends ServicesChatResource {
+  teamsILead: TeamResponseItem[]
+}
+export interface TeamResponseItem {
+  name: string
+  value: {
+    teamId: number
+    serviceTypeId: number
+  }
+  serviceTypeName: string
+  teamName: string
+  order: [number, string, string] // [serviceTypeId, serviceTypeName, teamName]
+}
+
+export interface TeamOptionResource extends ServicesChatResource {
+  teams: TeamOptionResponseItem[]
+}
+
+export interface TeamOptionResponseItem extends TeamResponseItem {
+  group: TeamOptionResponseItemGroupName
+}
+
+export type TeamOptionResponseItemGroupName = 'teams_i_lead' | 'other_teams'
+
+export interface PlansResource extends ServicesChatResource {
+  plans: PlansResponseItem[]
+}
+
+interface PlansResponseItem {
+  value: number
+  name: string
+}
+
+export interface TeamPeopleResource extends ServicesChatResource {
+  people: PersonResponseItem[]
+}
+
+interface PersonResponseItem {
+  id: number
+  name: string
+  avatar: string
+  badges: { title: string }[]
+  child: boolean
+}
+
+export interface ServicesChatPayloadResource extends ServicesChatResource {
+  payload: string
+}

package/src/utils/client/types.d.ts

@@ -16,6 +16,7 @@ export interface GenericRequest {
 
 export interface GetRequest extends GenericRequest {
   data: {
+    filter?: string
     fields: Record<string, string[]>
     where?: Record<string, string>
     include?: string[]
@@ -23,7 +24,7 @@ export interface GetRequest extends GenericRequest {
     perPage?: number
     offset?: number
     walk?: boolean
-  }
+  } & Record<string, unknown>
 }
 
 export interface Relationship {

package/src/utils/index.ts

@@ -6,3 +6,4 @@ export * from './client'
 export * from './uri'
 export * from './cache'
 export * from './native_adapters'
+export * from './pluralize'

package/src/utils/native_adapters/audio.ts

@@ -0,0 +1,15 @@
+interface Audio {
+  play: () => void
+  pause: () => void
+  isPlaying: boolean
+  duration: number
+  position: number
+}
+
+export class AudioAdapter {
+  useAudio: (_: string) => Audio
+
+  constructor(methods: AudioAdapter) {
+    this.useAudio = methods.useAudio
+  }
+}

package/src/utils/native_adapters/configuration.ts

@@ -1,12 +1,18 @@
+import { AudioAdapter } from './audio'
 import { ClipboardAdapter } from './clipboard'
+import { VideoAdapter } from './video'
 
 type ChatConfigurations = {
   clipboard: ClipboardAdapter
+  audio: AudioAdapter
+  video: VideoAdapter
 }
 
 export class ChatAdapters {
   static configure(configurations: ChatConfigurations) {
     Clipboard = configurations.clipboard
+    Audio = configurations.audio
+    Video = configurations.video
   }
 }
 
@@ -22,4 +28,21 @@ let Clipboard: ClipboardAdapter = new ClipboardAdapter({
   setStringAsync: async (_: string) => methodMissing(),
 })
 
-export { Clipboard }
+let Audio: AudioAdapter = new AudioAdapter({
+  useAudio: (_: string) => {
+    methodMissing()
+    return {} as any
+  },
+})
+
+let Video: VideoAdapter = new VideoAdapter({
+  Player: Object.assign(
+    () => {
+      methodMissing()
+      return null
+    },
+    { $$typeof: Symbol.for('react.forward_ref') }
+  ),
+})
+
+export { Clipboard, Audio, Video }

package/src/utils/native_adapters/index.ts

@@ -1,2 +1,4 @@
 export * from './clipboard'
 export * from './configuration'
+export * from './audio'
+export * from './video'

package/src/utils/native_adapters/video.ts

@@ -0,0 +1,30 @@
+import { StyleProp, ViewStyle } from 'react-native'
+
+export interface VideoPlayerProps {
+  source: { uri: string }
+  aspectRatio?: number
+  style?: StyleProp<ViewStyle>
+  onFullscreenPlayerWillPresent?: () => void
+  onFullscreenPlayerDidPresent?: () => void
+  onFullscreenPlayerWillDismiss?: () => void
+  onFullscreenPlayerDidDismiss?: () => void
+}
+
+export interface VideoPlayerHandle {
+  play: () => void
+  pause: () => void
+  presentFullscreenPlayer: () => void
+  dismissFullscreen: () => void
+}
+
+type VideoPlayer = React.ForwardRefExoticComponent<
+  VideoPlayerProps & React.RefAttributes<VideoPlayerHandle>
+>
+
+export class VideoAdapter {
+  Player: VideoPlayer
+
+  constructor(methods: VideoAdapter) {
+    this.Player = methods.Player
+  }
+}