@planningcenter/chat-react-native 3.2.0-rc.14 → 3.2.0-rc.16

package/src/__tests__/utils/uri.ts

@@ -0,0 +1,107 @@
+import { Uri } from '../../utils'
+
+describe('URI', () => {
+  it('should be defined', () => {
+    expect(Uri).toBeDefined()
+  })
+
+  it('should create a new instance', () => {
+    const uri = new Uri({
+      session: {
+        env: 'production',
+        token: undefined,
+        type: 'OAuth',
+        isAuthenticated: false,
+        isChurchCenterToken: false,
+      },
+    })
+    expect(uri).toBeDefined()
+  })
+
+  describe('baseUrl', () => {
+    describe('planning center', () => {
+      it('should return the correct base URL for production', () => {
+        const uri = new Uri({
+          session: {
+            env: 'production',
+            token: undefined,
+            type: 'OAuth',
+            isAuthenticated: false,
+            isChurchCenterToken: false,
+          },
+        })
+        expect(uri.baseUrl).toBe('https://api.planningcenteronline.com')
+      })
+
+      it('should return the correct base URL for staging', () => {
+        const uri = new Uri({
+          session: {
+            env: 'staging',
+            token: undefined,
+            type: 'OAuth',
+            isAuthenticated: false,
+            isChurchCenterToken: false,
+          },
+        })
+        expect(uri.baseUrl).toBe('https://api-staging.planningcenteronline.com')
+      })
+
+      it('should return the correct base URL for development', () => {
+        const uri = new Uri({
+          session: {
+            env: 'development',
+            token: undefined,
+            type: 'OAuth',
+            isAuthenticated: false,
+            isChurchCenterToken: false,
+          },
+        })
+        expect(uri.baseUrl).toBe('http://api.pco.test')
+      })
+    })
+
+    describe('church center', () => {
+      it('should return the correct base URL for production', () => {
+        const uri = new Uri({
+          session: {
+            env: 'production',
+            token: undefined,
+            type: 'ChurchCenterOauth',
+            isAuthenticated: false,
+            isChurchCenterToken: true,
+          },
+          graph: 'churchcenter',
+        })
+        expect(uri.baseUrl).toBe('https://api.churchcenter.com')
+      })
+
+      it('should return the correct base URL for staging', () => {
+        const uri = new Uri({
+          session: {
+            env: 'staging',
+            token: undefined,
+            type: 'ChurchCenterOauth',
+            isAuthenticated: false,
+            isChurchCenterToken: true,
+          },
+          graph: 'churchcenter',
+        })
+        expect(uri.baseUrl).toBe('https://api.staging.churchcenter.com')
+      })
+
+      it('should return the correct base URL for development', () => {
+        const uri = new Uri({
+          session: {
+            env: 'development',
+            token: undefined,
+            type: 'ChurchCenterOauth',
+            isAuthenticated: false,
+            isChurchCenterToken: true,
+          },
+          graph: 'churchcenter',
+        })
+        expect(uri.baseUrl).toBe('http://api.churchcenter.test')
+      })
+    })
+  })
+})

package/src/contexts/chat_context.tsx

@@ -6,12 +6,12 @@ import { ENV, PartialToken, ResponseError, Session } from '../utils'
 import { ChatTheme, defaultTheme, DefaultTheme } from '../utils/theme'
 
 export type ChatContextValue = {
-  token?: PartialToken
-  onUnauthorizedResponse: (_response: ResponseError) => void
-  theme: ChatTheme
   env?: ENV
-  session: Session
   giphyApiKey?: string
+  onUnauthorizedResponse: (_response: ResponseError) => void
+  session: Session
+  theme: ChatTheme
+  token?: PartialToken
 }
 
 export interface ChatProviderProps extends Omit<ChatContextValue, 'client' | 'theme' | 'session'> {
@@ -19,12 +19,12 @@ export interface ChatProviderProps extends Omit<ChatContextValue, 'client' | 'th
 }
 
 export const ChatContext = createContext<ChatContextValue>({
-  theme: defaultTheme('light'),
-  token: undefined,
   env: undefined,
+  giphyApiKey: undefined,
   onUnauthorizedResponse: () => {},
   session: new Session(),
-  giphyApiKey: undefined,
+  theme: defaultTheme('light'),
+  token: undefined,
 })
 
 export function ChatProvider({ children, value }: { children: any; value: ChatProviderProps }) {

package/src/hooks/use_api_client.ts

@@ -1,6 +1,7 @@
 import { useContext, useMemo } from 'react'
 import { ChatContext } from '../contexts/chat_context'
 import { Client } from '../utils/client'
+import { Uri } from '../utils'
 
 export type App = 'chat' | 'groups' | 'services'
 const apps: App[] = ['chat', 'groups', 'services']
@@ -9,18 +10,21 @@ export type ApiClient = { [_K in App]: Client }
 
 export const useApiClient = () => {
   const { session, onUnauthorizedResponse } = useContext(ChatContext)
+
+  const uri = useMemo(() => new Uri({ session }), [session])
+
   const api = useMemo(
     () =>
       apps.reduce((acc, app) => {
         acc[app] = new Client({
-          app,
-          session,
+          root: uri.api(`/${app}/v2`),
+          defaultHeaders: uri.headers,
           version: '2018-11-01',
           onUnauthorizedResponse,
         })
         return acc
       }, {} as ApiClient),
-    [session, onUnauthorizedResponse]
+    [uri, onUnauthorizedResponse]
   )
 
   return api

package/src/hooks/use_jolt.ts

@@ -11,7 +11,7 @@ import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-quer
 import { useEffect, useMemo, useState } from 'react'
 import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
-import { Client } from '../utils'
+import { Client, Uri } from '../utils'
 
 interface JoltResponse {
   type: 'JoltToken'
@@ -22,10 +22,15 @@ interface JoltResponse {
 export const useJoltClient = (): JoltClient | undefined => {
   const { session } = useChatContext()
   const queryClient = useQueryClient()
+  const uri = useMemo(() => new Uri({ session }), [session])
   const apiClient = useMemo(
-    // Client that does not relay 401 errors
-    () => new Client({ app: 'chat', session, version: '2018-11-01' }),
-    [session]
+    () =>
+      new Client({
+        root: uri.api(`/chat/v2`),
+        defaultHeaders: uri.headers,
+        version: '2018-11-01',
+      }),
+    [uri]
   )
 
   const { data: joltToken } = useSuspenseQuery<ApiResource<JoltResponse>>({

package/src/navigation/index.tsx

@@ -54,10 +54,18 @@ export const NewConversationStack = createNativeStackNavigator({
     },
     ConversationNew: {
       screen: ConversationNewScreen,
-      options: {
+      options: ({ navigation, route }) => ({
         title: 'New conversation',
         headerLeft: () => null,
-      },
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderRightButton
+            {...props}
+            onPress={() => navigation.popTo('Conversations', route.params)}
+          >
+            Cancel
+          </HeaderRightButton>
+        ),
+      }),
     },
   },
 })

package/src/screens/conversation_new/conversation_new_screen.tsx

@@ -4,12 +4,15 @@ import { GroupsForm } from './components/groups_form'
 import { TeamsForm } from './components/team_form'
 import { SourceAppErrorCard } from './components/source_app_error_card'
 import { AppName } from '../../types/resources/app_name'
+import { GraphId } from '../../types/resources/group_resource'
 
 type ConversationNewScreenProps = StaticScreenProps<{
   group_id?: number
   team_ids?: number[]
   plan_id?: number
   source_app_name: AppName
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: AppName
 }>
 
 export const ConversationNewScreen = ({ route }: ConversationNewScreenProps) => {

package/src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx

@@ -7,17 +7,22 @@ import { Button, Heading, Icon, Image, Text } from '../../components'
 import { useTheme } from '../../hooks'
 import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
+import { GraphId } from '../../types/resources/group_resource'
+import { AppName } from '../../types/resources/app_name'
 import { platformFontWeightMedium, pluralize } from '../../utils'
 
 type ConversationSelectRecipientsScreenProps = StaticScreenProps<{
-  chat_group_graph_id?: string
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: AppName
 }>
 
 const ASPECT_RATIO = 16 / 9
 const THUMBNAIL_WIDTH = 80
 const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
 
-export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipientsScreenProps) => {
+export const ConversationSelectRecipientsScreen = ({
+  route,
+}: ConversationSelectRecipientsScreenProps) => {
   const styles = useStyles()
   const navigation = useNavigation()
   const { data: groups = [] } = useGroupsGroups()
@@ -29,6 +34,7 @@ export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipie
       params: {
         group_id: group.id,
         source_app_name: 'Groups',
+        ...route.params,
       },
     })
   }

package/src/screens/conversations/conversations_screen.tsx

@@ -6,12 +6,14 @@ import { ActionButton } from '../../components/display/action_button'
 import { ConversationsContextProvider } from '../../contexts/conversations_context'
 import { useCanCreateConversations } from '../../hooks'
 import { GraphId } from '../../types/resources/group_resource'
+import { destructureChatGroupGraphId } from '../../utils'
 import { ListHeaderComponent } from './components/list_header_component'
+import { AppName } from '../../types/resources/app_name'
 
 export type ConversationScreenProps = StaticScreenProps<{
   title?: string
   chat_group_graph_id?: GraphId
-  group_source_app_name?: string
+  group_source_app_name?: AppName
 }>
 
 export function ConversationsScreen({ route }: ConversationScreenProps) {
@@ -19,6 +21,39 @@ export function ConversationsScreen({ route }: ConversationScreenProps) {
   const canCreateConversations = useCanCreateConversations()
   const styles = useStyles()
 
+  const { chat_group_graph_id } = route.params
+  const { sourceAppName, sourceId } = destructureChatGroupGraphId(chat_group_graph_id)
+
+  const handleNewConversationNavigation = () => {
+    if (sourceAppName === 'Services') {
+      return navigation.navigate('New', {
+        screen: 'ConversationNew',
+        params: {
+          team_ids: sourceId ? [sourceId] : [],
+          source_app_name: sourceAppName,
+          ...route.params,
+        },
+      })
+    }
+    if (sourceAppName === 'Groups') {
+      return navigation.navigate('New', {
+        screen: 'ConversationNew',
+        params: {
+          group_id: sourceId,
+          source_app_name: sourceAppName,
+          ...route.params,
+        },
+      })
+    }
+
+    return navigation.navigate('New', {
+      screen: 'ConversationSelectRecipients',
+      params: {
+        ...route.params,
+      },
+    })
+  }
+
   return (
     <View style={styles.container}>
       <ConversationsContextProvider args={route.params}>
@@ -27,7 +62,7 @@ export function ConversationsScreen({ route }: ConversationScreenProps) {
       <ActionButton
         visible={canCreateConversations}
         title="New conversation"
-        onPress={() => navigation.navigate('New')}
+        onPress={handleNewConversationNavigation}
       />
     </View>
   )

package/src/types/resources/oauth_token.ts

@@ -1,8 +1,8 @@
 export type OAuthToken = {
-  token_type: any
-  access_token: any
+  token_type: string
+  access_token: string
   created_at: number
-  expires_in: any
+  expires_in: number
   scope: string
-  refresh_token: any
+  refresh_token: string
 }

package/src/utils/client/client.ts

@@ -1,6 +1,4 @@
 import { ApiCollection, ApiError, ApiResource } from '../../types'
-import { Session } from '../session'
-import { Uri } from '../uri'
 import {
   concatRecords,
   ensureNoQueryParamsInDev,
@@ -22,28 +20,27 @@ type ClientArgs = {
   version: string
   defaultHeaders?: Record<string, string>
   onUnauthorizedResponse?: OnUnauthorizedResponse
-  session: Session
-  app: string
+  root?: string
 }
 
 export class Client {
   version: string = ''
   defaultHeaders: Record<string, string> = {}
-  uri: Uri
   onUnauthorizedResponse?: OnUnauthorizedResponse
+  root?: string
 
-  constructor({ version, defaultHeaders = {}, session, app, onUnauthorizedResponse }: ClientArgs) {
+  constructor({ version, defaultHeaders = {}, onUnauthorizedResponse, root }: ClientArgs) {
     this.version = version
-    this.uri = new Uri({ session, app })
     this.defaultHeaders = defaultHeaders
     this.onUnauthorizedResponse = onUnauthorizedResponse
+    this.root = root
   }
 
   async get<T extends ApiCollection | ApiResource>(args: GetRequest): Promise<T> {
     const { walk, ...data } = args.data
     const isWalking = Boolean(walk)
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     await throwErrorIfQueryParams(url)
 
@@ -54,7 +51,7 @@ export class Client {
       data: d = { fields: {} },
       acc = { data: [], included: [], meta: {}, links: {} },
       ...options
-    }: WalkRequest): Promise<ApiCollection | ApiResource> => {
+    }: WalkRequest): Promise<T> => {
       return makeRequest({
         action: 'GET',
         data: d,
@@ -84,7 +81,7 @@ export class Client {
 
   async patch<T extends ApiCollection | ApiResource>(args: PatchRequest): Promise<T> {
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { data: args.data, url, action: 'PATCH', headers }
 
@@ -95,7 +92,7 @@ export class Client {
 
   async post<T extends ApiCollection | ApiResource>(args: PostRequest): Promise<T> {
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { ...args, data: args.data, url, action: 'POST', headers }
 
@@ -106,7 +103,7 @@ export class Client {
 
   async delete(args: DeleteRequest) {
     const headers = { ...this.headers, ...args.headers }
-    const url = this.uri.appUrl(args.url)
+    const url = this.appUrl(args.url)
 
     const requestArgs: MakeRequestArgs = { url, action: 'DELETE', headers }
 
@@ -133,12 +130,15 @@ export class Client {
     }
   }
 
+  appUrl(url: string) {
+    return `${this.root}${url}`
+  }
+
   get headers() {
     return {
       Accept: 'application/vnd.api+json',
       'Content-Type': 'application/json',
       'X-PCO-API-Version': this.version,
-      ...this.uri.headers,
       ...this.defaultHeaders,
     }
   }

package/src/utils/destructure_chat_group_graph_id.ts

@@ -0,0 +1,25 @@
+import { AppName } from '../types/resources/app_name'
+import { SourceType, GraphId } from '../types/resources/group_resource'
+
+interface DestructuredChatGroupGraphIdType {
+  sourceAppName?: AppName
+  sourceType?: SourceType
+  sourceId?: number
+}
+
+export function destructureChatGroupGraphId(
+  chatGroupGraphId?: GraphId
+): DestructuredChatGroupGraphIdType {
+  if (!chatGroupGraphId)
+    return { sourceAppName: undefined, sourceType: undefined, sourceId: undefined }
+
+  const [sourceAppName, sourceType, sourceIdString] = chatGroupGraphId.split('-') as [
+    AppName,
+    SourceType,
+    string,
+  ]
+
+  const sourceIdNumber = Number(sourceIdString)
+
+  return { sourceAppName, sourceType, sourceId: sourceIdNumber }
+}

package/src/utils/index.ts

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

package/src/utils/session.ts

@@ -1,28 +1,34 @@
 import { OAuthToken } from '../types'
 
 export type ENV = 'production' | 'staging' | 'development'
-
+export type OauthType = 'OAuth' | 'ChurchCenterOauth'
 export type PartialToken = Pick<OAuthToken, 'access_token'> & Partial<OAuthToken>
-export type SessionProps<T = PartialToken> = { env?: ENV; token?: T }
+export type SessionProps<T extends PartialToken> = { env?: ENV; token?: T; type?: OauthType }
 
 /**
  * Session class to track the environment and token
  * Not intended to make network requests or handle authentication
  */
-export class Session<T = PartialToken> {
+export class Session<T extends PartialToken = PartialToken> {
   env: ENV
   token: T | undefined
+  type: OauthType
 
   constructor(props?: SessionProps<T>) {
-    const { env = 'production', token } = props || {}
+    const { env = 'production', token, type } = props || {}
     this.env = env
     this.token = token
+    this.type = type || 'OAuth'
   }
 
   get isAuthenticated() {
     return Boolean(this.token)
   }
 
+  get isChurchCenterToken() {
+    return this.type === 'ChurchCenterOauth'
+  }
+
   toString() {
     return JSON.stringify({ env: this.env, token: this.token })
   }

package/src/utils/uri.ts

@@ -7,13 +7,16 @@ const systemVersion = DeviceInfo.getSystemVersion()
 const readableVersion = DeviceInfo.getReadableVersion()
 const appName = DeviceInfo.getApplicationName()
 
+type Graph = 'churchcenter' | 'planningcenter'
 export class Uri {
   session: Session
+  graph: Graph = 'planningcenter'
   app?: string
 
-  constructor({ session, app }: { session: Session; app?: string }) {
+  constructor({ session, app, graph }: { session: Session; app?: string; graph?: Graph }) {
     this.session = session
     this.app = app
+    this.graph = graph || 'planningcenter'
   }
 
   get schema() {
@@ -25,18 +28,39 @@ export class Uri {
   }
 
   get host() {
+    return `${this.subdomain}.${this.domain}.${this.tld}`
+  }
+
+  get subdomain() {
     switch (this.env) {
-      case 'production':
-        return 'api.planningcenteronline.com'
       case 'staging':
-        return 'api-staging.planningcenteronline.com'
+        return this.isChurchCenter ? 'api.staging' : 'api-staging'
+      default:
+        return 'api'
+    }
+  }
+
+  get domain(): 'pco' | 'planningcenteronline' | 'churchcenter' {
+    if (this.isChurchCenter) {
+      return 'churchcenter'
+    }
+
+    return this.env === 'development' ? 'pco' : 'planningcenteronline'
+  }
+
+  get tld() {
+    switch (this.env) {
       case 'development':
-        return 'api.pco.test'
+        return 'test'
       default:
-        return 'api.planningcenteronline.com'
+        return 'com'
     }
   }
 
+  get isChurchCenter() {
+    return this.session.isChurchCenterToken
+  }
+
   get env() {
     return this.session?.env || 'production'
   }