@planningcenter/chat-react-native 2.2.2-rc.0 → 2.3.0-rc.0

package/src/index.tsx

@@ -1,4 +1,4 @@
-export { ChatProvider, ChatContext, CreateChatThemeProps } from './contexts'
+export { ChatProvider, ChatContext, CreateChatThemeProps } from './contexts/chat_context'
 export { DesignSystemScreen } from './screens'
 export { ChatStack } from './navigation'
 export {

package/src/navigation/index.tsx

@@ -1,8 +1,7 @@
-import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'
+import { HeaderBackButton } from '@react-navigation/elements'
 import { StaticParamList } from '@react-navigation/native'
 import {
   createNativeStackNavigator,
-  NativeStackHeaderLeftProps,
   NativeStackHeaderRightProps,
 } from '@react-navigation/native-stack'
 import React from 'react'
@@ -10,6 +9,12 @@ import { Icon } from '../components'
 import { ConversationDetailsScreen } from '../screens/conversation_details_screen'
 import { ConversationScreen } from '../screens/conversation_screen'
 import { ConversationsScreen } from '../screens/conversations_screen'
+import { ConversationCreateScreen } from '../screens/create/conversation_create_screen'
+import {
+  ConversationFilterReceipientsScreenOptions,
+  ConversationFilterRecipientsScreen,
+} from '../screens/create/conversation_filter_recipients_screen'
+import { ConversationSelectRecipientsScreen } from '../screens/create/conversation_select_recipients_screen'
 import {
   MessageActionsScreen,
   MessageActionsScreenOptions,
@@ -19,6 +24,38 @@ import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_sc
 import { HeaderRightButton } from './header'
 import { ScreenLayout } from './screenLayout'
 
+export const CreateConversationStack = createNativeStackNavigator({
+  initialRouteName: 'ConversationSelectRecipients',
+  screenOptions: {
+    headerBackButtonDisplayMode: 'minimal',
+  },
+  screenLayout: ScreenLayout,
+  screens: {
+    ConversationSelectRecipients: {
+      screen: ConversationSelectRecipientsScreen,
+      options: ({ navigation }) => ({
+        title: 'New conversation',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderRightButton {...props} onPress={navigation.goBack}>
+            Cancel
+          </HeaderRightButton>
+        ),
+      }),
+    },
+    ConversationFilterRecipients: {
+      screen: ConversationFilterRecipientsScreen,
+      options: ConversationFilterReceipientsScreenOptions,
+    },
+    ConversationCreate: {
+      screen: ConversationCreateScreen,
+      options: {
+        title: 'New conversation',
+        headerLeft: () => null,
+      },
+    },
+  },
+})
+
 export const ChatStack = createNativeStackNavigator({
   screenOptions: {
     headerBackButtonDisplayMode: 'minimal',
@@ -29,11 +66,6 @@ export const ChatStack = createNativeStackNavigator({
       screen: ConversationsScreen,
       options: ({ route, navigation }) => ({
         headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
-        headerLeft: ({ tintColor }: NativeStackHeaderLeftProps) => (
-          <HeaderButton>
-            <Icon name="general.threeReducingHorizontalBars" size={18} color={tintColor} />
-          </HeaderButton>
-        ),
         headerRight: (props: NativeStackHeaderRightProps) => (
           <HeaderBackButton
             backImage={() => <Icon name="general.x" size={18} color={props.tintColor} />}
@@ -58,6 +90,13 @@ export const ChatStack = createNativeStackNavigator({
         ),
       }),
     },
+    Create: {
+      screen: CreateConversationStack,
+      options: {
+        headerShown: false,
+        presentation: 'modal',
+      },
+    },
     MessageActions: {
       screen: MessageActionsScreen,
       // Something about sheetAllowedDetents declared inline breaks TS

package/src/navigation/screenLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ErrorBoundary from '../components/page/error_boundary'
 import { Suspense } from 'react'
-import { ApiProvider } from '../contexts'
+import { ApiProvider } from '../contexts/api_provider'
 import { DefaultLoading } from '../components/page/loading'
 
 export function ScreenLayout({ children }: { children: React.ReactElement }) {

package/src/screens/create/conversation_create_screen.tsx

@@ -0,0 +1,148 @@
+import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
+import React, { useCallback, useState } from 'react'
+import { StyleSheet, TextInput, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Text } from '../../components'
+import { ActionButton } from '../../components/display/action_button'
+import { useSuspenseGet, useTheme } from '../../hooks'
+import { useApiClient } from '../../hooks/use_api_client'
+import { useMutation } from '@tanstack/react-query'
+import { GroupsGroupResource } from '../../types'
+
+type ConversationCreateScreenProps = StaticScreenProps<{
+  group_id?: string
+  team_ids?: string[]
+}>
+
+export const ConversationCreateScreen = ({ route }: ConversationCreateScreenProps) => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const [title, setTitle] = useState<string>()
+  const apiClient = useApiClient()
+  const { data: group } = useSuspenseGet<GroupsGroupResource>({
+    url: `/me/groups/${route.params.group_id}`,
+    data: {
+      fields: {
+        Group: [],
+      },
+      include: ['location'],
+    },
+    app: 'groups',
+  })
+  const { mutate: handleSave } = useMutation({
+    throwOnError: true,
+    onSuccess: result => {
+      handleRedirectToConversation({ conversation_id: result.data.id })
+    },
+    mutationFn: () =>
+      apiClient.groups
+        .post({
+          url: `/me/groups/${route.params.group_id}/chat_conversation_payload`,
+          data: {
+            data: {
+              type: '',
+              attributes: {
+                title,
+              },
+            },
+          },
+        })
+        .then(res => res.data.value)
+        .then(payload =>
+          apiClient.chat.post({
+            url: '/me/conversations',
+            data: {
+              data: {
+                type: 'Conversation',
+                attributes: {
+                  payload,
+                },
+              },
+            },
+          })
+        ),
+  })
+
+  const handleRedirectToConversation = useCallback(
+    ({ conversation_id }: { conversation_id: string }) => {
+      // exit from the create stack
+      navigation.getParent()?.goBack()
+      // navigate to the conversation screen
+      navigation.dispatch(
+        StackActions.push('Conversation', {
+          conversation_id,
+        })
+      )
+    },
+    [navigation]
+  )
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.section}>
+        <View style={styles.to}>
+          <Text>To:</Text>
+          <View>
+            <Text>{group.name}</Text>
+            <Text>{group.membershipsCount} members</Text>
+          </View>
+        </View>
+        <View style={styles.titleContainer}>
+          <Text style={styles.titleLabel}>Title</Text>
+          <TextInput
+            placeholder="Topic of conversation (required)"
+            value={title}
+            onChangeText={setTitle}
+            style={styles.titleInput}
+          />
+        </View>
+      </View>
+      <ActionButton title="Start Conversation" onPress={() => handleSave()} />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      gap: 8,
+    },
+    section: {
+      padding: 16,
+      flex: 1,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    selectTeamsButton: {},
+    routeDebug: {
+      alignContent: 'center',
+      padding: 16,
+      paddingBottom: bottom,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.fillColorNeutral050Base,
+    },
+    titleContainer: {
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+      gap: 8,
+    },
+    titleInput: {
+      fontSize: 18,
+    },
+    titleLabel: {},
+    to: {
+      flexDirection: 'row',
+      gap: 8,
+      paddingVertical: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
+    },
+  })
+}

package/src/screens/create/conversation_filter_recipients_screen.tsx

@@ -0,0 +1,79 @@
+import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Button } from '../../components'
+import { useTheme } from '../../hooks'
+
+export const ConversationFilterReceipientsScreenOptions: NativeStackNavigationOptions = {
+  presentation: 'formSheet',
+  headerShown: false,
+  sheetAllowedDetents: [0.75],
+  sheetGrabberVisible: true,
+}
+
+type ConversationFilterRecipientsScreenProps = StaticScreenProps<{}>
+
+export const ConversationFilterRecipientsScreen = ({}: ConversationFilterRecipientsScreenProps) => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.section}>
+        <Button
+          style={styles.selectTeamsButton}
+          onPress={() =>
+            navigation.dispatch(
+              StackActions.popTo('ConversationSelectRecipients', {
+                chat_group_graph_id: 'TBD',
+              })
+            )
+          }
+          title="Redirect to select"
+          variant="outline"
+        />
+
+        <Button
+          style={styles.selectTeamsButton}
+          onPress={() =>
+            navigation.dispatch(
+              StackActions.popTo('ConversationCreate', {
+                chat_group_graph_id: 'TBD',
+              })
+            )
+          }
+          title="Redirect to form"
+          variant="outline"
+        />
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      gap: 8,
+    },
+    section: {
+      padding: 16,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      flex: 1,
+    },
+    selectTeamsButton: {},
+    routeDebug: {
+      alignContent: 'center',
+      padding: 16,
+      paddingBottom: bottom,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.fillColorNeutral050Base,
+    },
+  })
+}

package/src/screens/create/conversation_select_recipients_screen.tsx

@@ -0,0 +1,136 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+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 { GroupsGroupResource } from '../../types'
+
+type ConversationSelectRecipientsScreenProps = StaticScreenProps<{
+  chat_group_graph_id?: string
+}>
+
+const ASPECT_RATIO = 16 / 9
+const THUMBNAIL_WIDTH = 80
+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 groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
+
+  const handleNavigateToCreateConversation = (group: GroupsGroupResource) => {
+    navigation.navigate('Create', {
+      screen: 'ConversationCreate',
+      params: {
+        group_id: group.id,
+      },
+    })
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.section}>
+        <View style={styles.sectionHeader}>
+          <Heading>My groups</Heading>
+        </View>
+        <View>
+          {groupsWithCreatePermission.map(group => (
+            <PlatformPressable
+              key={group.id}
+              style={styles.row}
+              onPress={() => handleNavigateToCreateConversation(group)}
+            >
+              <Image
+                source={{ uri: group.headerImage?.thumbnail }}
+                resizeMode="cover"
+                style={styles.rowImage}
+                alt={`Image for ${group.name}`}
+              />
+              <View>
+                <Heading variant="h3">{group.name}</Heading>
+                <Text>{group.membershipsCount} members</Text>
+              </View>
+              <Icon name="general.rightChevron" size={16} style={styles.rowIconRight} />
+            </PlatformPressable>
+          ))}
+        </View>
+      </View>
+      <View style={styles.section}>
+        <View style={styles.sectionHeader}>
+          <Heading>Teams I lead</Heading>
+          <Button
+            style={styles.selectTeamsButton}
+            onPress={() =>
+              navigation.navigate('Create', {
+                screen: 'ConversationFilterRecipients',
+                params: {
+                  conversation_id: '2196252',
+                },
+              })
+            }
+            title="Select teams"
+            variant="outline"
+            iconNameLeft="general.search"
+          />
+        </View>
+      </View>
+    </ScrollView>
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      gap: 8,
+    },
+    section: {
+      padding: 16,
+      flex: 1,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    selectTeamsButton: {},
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingVertical: 16,
+      borderBottomWidth: 1,
+      borderColor: theme.colors.fillColorNeutral050Base,
+    },
+    rowImage: {
+      width: THUMBNAIL_WIDTH,
+      height: THUMBNAIL_HEIGHT,
+      borderRadius: 4,
+    },
+    rowIconRight: {
+      marginLeft: 'auto',
+      color: theme.colors.fillColorNeutral030,
+    },
+    routeDebug: {
+      alignContent: 'center',
+      padding: 16,
+      paddingBottom: bottom,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.fillColorNeutral050Base,
+    },
+  })
+}

package/src/types/api_primitives.ts

@@ -3,6 +3,14 @@ export interface ResourceObject {
   type: string
 }
 
+export interface ErrorObject {
+  source?: { parameter: string }
+  detail: string
+  meta?: { associated_resources: any[]; resource: string }
+  title: string
+  status: string
+}
+
 export type ApiResource<Type = ResourceObject> = {
   data: Type
   links: Record<string, string>
@@ -15,6 +23,10 @@ export type ApiCollection<Type = ResourceObject> = {
   meta: CollectionMeta
 }
 
+export interface ApiError {
+  errors: ErrorObject[]
+}
+
 export interface CollectionMeta {
   count: number
   totalCount: number

package/src/types/resources/app_grant.ts

@@ -0,0 +1,6 @@
+import { ResourceObject } from '../api_primitives'
+
+export interface AppGrantsResource extends ResourceObject {
+  createConversations: boolean
+  appName: string
+}

package/src/types/resources/groups/groups_group_resource.ts

@@ -0,0 +1,12 @@
+import { ResourceObject } from '../../api_primitives'
+
+export interface GroupsGroupResource extends ResourceObject {
+  headerImage: {
+    thumbnail: string
+    medium: string
+    original: string
+  }
+  name: string
+  membershipsCount: number
+  canCreateConversation: boolean
+}

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

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

package/src/types/resources/index.ts

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

package/src/utils/client/client.ts

@@ -1,4 +1,4 @@
-import { ApiCollection, ApiResource } from '../../types'
+import { ApiCollection, ApiError, ApiResource } from '../../types'
 import { Session } from '../session'
 import { Uri } from '../uri'
 import {
@@ -15,7 +15,8 @@ import { DeleteRequest, GetRequest, PatchRequest, PostRequest, WalkRequest } fro
 type ClientArgs = {
   version: string
   defaultHeaders?: Record<string, string>
-  onTokenExpired: () => void
+  onForceLogout?: () => void
+  onTokenExpired?: () => void
   session: Session
   app: string
 }
@@ -24,13 +25,22 @@ export class Client {
   version: string = ''
   defaultHeaders: Record<string, string> = {}
   uri: Uri
-  onTokenExpired: () => void
-
-  constructor({ version, defaultHeaders = {}, session, app, onTokenExpired }: ClientArgs) {
+  onTokenExpired?: () => void
+  onForceLogout?: () => void
+
+  constructor({
+    version,
+    defaultHeaders = {},
+    session,
+    app,
+    onTokenExpired,
+    onForceLogout,
+  }: ClientArgs) {
     this.version = version
     this.uri = new Uri({ session, app })
     this.defaultHeaders = defaultHeaders
     this.onTokenExpired = onTokenExpired
+    this.onForceLogout = onForceLogout
   }
 
   async get<T extends ApiCollection | ApiResource>(args: GetRequest): Promise<T> {
@@ -69,7 +79,7 @@ export class Client {
 
     const handler = isWalking ? walkRequest : makeRequest
 
-    return throwErrorIfFieldsMissing(handler, requestArgs).catch(this.handleTokenExpired)
+    return throwErrorIfFieldsMissing(handler, requestArgs).catch(this.handleNotOk)
   }
 
   async patch(args: PatchRequest) {
@@ -78,7 +88,7 @@ export class Client {
 
     const requestArgs: MakeRequestArgs = { data: args.data, url, action: 'PATCH', headers }
 
-    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleTokenExpired)
+    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleNotOk)
   }
 
   async post(args: PostRequest) {
@@ -87,7 +97,7 @@ export class Client {
 
     const requestArgs: MakeRequestArgs = { ...args, data: args.data, url, action: 'POST', headers }
 
-    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleTokenExpired)
+    return ensureNoQueryParamsInDev(makeRequest, requestArgs).catch(this.handleNotOk)
   }
 
   async delete(args: DeleteRequest) {
@@ -96,17 +106,30 @@ export class Client {
 
     const requestArgs: MakeRequestArgs = { url, action: 'DELETE', headers }
 
-    return makeRequest(requestArgs).catch(this.handleTokenExpired)
+    return makeRequest(requestArgs).catch(this.handleNotOk)
   }
 
-  handleTokenExpired = (response: Response) => {
+  handleNotOk = async (response: Response) => {
     if (response.status === 401) {
-      this.onTokenExpired()
+      const parsed = await this.parseErrorResponse(response)
+      const errors = parsed?.errors || []
+      const isTokenExpired = errors.some(e => /baboon/i.test(e.detail))
+      const isForceLogout = errors.some(e => /capuchin/i.test(e.detail))
+      isTokenExpired && this.onTokenExpired?.()
+      isForceLogout && this.onForceLogout?.()
     }
 
     return Promise.reject(response)
   }
 
+  parseErrorResponse = async (response: Response): Promise<ApiError | undefined> => {
+    try {
+      return (await response.json()) as ApiError
+    } catch {
+      return undefined
+    }
+  }
+
   get headers() {
     return {
       Accept: 'application/vnd.api+json',

package/build/contexts/index.d.ts

@@ -1,3 +0,0 @@
-export * from './api_provider';
-export * from './chat_context';
-//# sourceMappingURL=index.d.ts.map

package/build/contexts/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}

package/build/contexts/index.js

@@ -1,3 +0,0 @@
-export * from './api_provider';
-export * from './chat_context';
-//# sourceMappingURL=index.js.map

package/build/contexts/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA","sourcesContent":["export * from './api_provider'\nexport * from './chat_context'\n"]}

package/src/contexts/index.ts

@@ -1,2 +0,0 @@
-export * from './api_provider'
-export * from './chat_context'