@planningcenter/chat-react-native 3.2.0-rc.8 → 3.2.0

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -0,0 +1,79 @@
+import { useNavigation } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { FlashList } from '@shopify/flash-list'
+import { Heading } from '../../components'
+import { GroupsGroupResource } from '../../types'
+import { useGroupsGroups } from '../../hooks/use_groups_groups'
+import { pluralize } from '../../utils'
+import { RecipientLinkRow } from './components/recipient_link_row'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
+import { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row'
+
+export const ConversationSelectGroupRecipientsScreen = ({
+  route,
+}: ConversationSelectRecipientsScreenProps) => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const { data: groups = [] } = useGroupsGroups()
+  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
+  const showGroupsDisclaimer = groups.length > groupsWithCreatePermission.length
+
+  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {
+    navigation.navigate('New', {
+      screen: 'ConversationNew',
+      params: {
+        group_id: group.id,
+        source_app_name: 'Groups',
+        ...route.params,
+      },
+    })
+  }
+
+  return (
+    <FlashList
+      data={groupsWithCreatePermission}
+      keyExtractor={item => item.id.toString()}
+      estimatedItemSize={65}
+      contentContainerStyle={styles.contentContainer}
+      ListHeaderComponent={
+        <View style={styles.sectionHeader}>
+          <Heading variant="h3">All my groups</Heading>
+        </View>
+      }
+      renderItem={({ item: group }: { item: GroupsGroupResource }) => {
+        const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`
+
+        return (
+          <RecipientLinkRow
+            key={group.id}
+            imageUri={group.headerImage?.thumbnail}
+            title={group.name}
+            subtitle={`${group.membershipsCount} members`}
+            onPress={() => handleNavigateToConversationNew(group)}
+            accessibilityLabel={groupAccessibilityLabel}
+            accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}
+          />
+        )
+      }}
+      ListFooterComponent={showGroupsDisclaimer ? <GroupsWithoutChatDisclaimerRow /> : null}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    contentContainer: {
+      paddingBottom: bottom,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      padding: 16,
+      paddingBottom: 4,
+    },
+  })
+}

package/src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx

@@ -1,26 +1,28 @@
-import { PlatformPressable } from '@react-navigation/elements'
-import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import { 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 { useTheme } from '../../hooks'
+import { Button, Heading } from '../../components'
 import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
+import { pluralize } from '../../utils'
+import { RecipientLinkRow } from './components/recipient_link_row'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
+import { ViewMoreLinkRow } from './components/view_more_link_row'
+import { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row'
+const MAX_VISIBLE_GROUPS = 5
 
-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) => {
+export const ConversationSelectRecipientsScreen = ({
+  route,
+}: ConversationSelectRecipientsScreenProps) => {
   const styles = useStyles()
   const navigation = useNavigation()
   const { data: groups = [] } = useGroupsGroups()
   const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
+  const visibleGroups = groupsWithCreatePermission.slice(0, MAX_VISIBLE_GROUPS)
+  const hasMoreGroups = groupsWithCreatePermission.length > MAX_VISIBLE_GROUPS
+  const hasGroupsWithoutChatPermission = groups.length > groupsWithCreatePermission.length
+  const showGroupsDisclaimer = hasGroupsWithoutChatPermission && !hasMoreGroups
 
   const handleNavigateToConversationNew = (group: GroupsGroupResource) => {
     navigation.navigate('New', {
@@ -28,48 +30,61 @@ export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipie
       params: {
         group_id: group.id,
         source_app_name: 'Groups',
+        ...route.params,
+      },
+    })
+  }
+
+  const handleGroupsViewMore = () => {
+    navigation.navigate('New', {
+      screen: 'ConversationSelectGroupRecipients',
+      params: {
+        ...route.params,
       },
     })
   }
 
   return (
-    <ScrollView style={styles.container}>
+    <ScrollView contentContainerStyle={styles.contentContainer}>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
-          <Heading>My groups</Heading>
+          <Heading variant="h3">My groups</Heading>
         </View>
         <View>
-          {groupsWithCreatePermission.map(group => (
-            <PlatformPressable
-              key={group.id}
-              style={styles.row}
-              onPress={() => handleNavigateToConversationNew(group)}
-            >
-              <Image
-                source={{ uri: group.headerImage?.thumbnail }}
-                resizeMode="cover"
-                style={styles.rowImage}
-                alt={`Image for ${group.name}`}
+          {visibleGroups.map(group => {
+            const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`
+
+            return (
+              <RecipientLinkRow
+                key={group.id}
+                imageUri={group.headerImage?.thumbnail}
+                title={group.name}
+                subtitle={`${group.membershipsCount} members`}
+                onPress={() => handleNavigateToConversationNew(group)}
+                accessibilityLabel={groupAccessibilityLabel}
+                accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}
               />
-              <View>
-                <Heading variant="h3">{group.name}</Heading>
-                <Text>{group.membershipsCount} members</Text>
-              </View>
-              <Icon name="general.rightChevron" size={16} style={styles.rowIconRight} />
-            </PlatformPressable>
-          ))}
+            )
+          })}
+          {hasMoreGroups && (
+            <ViewMoreLinkRow
+              onPress={handleGroupsViewMore}
+              accessibilityHint="Navigate to a full list of your groups."
+            />
+          )}
+          {showGroupsDisclaimer && <GroupsWithoutChatDisclaimerRow />}
         </View>
       </View>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
-          <Heading>Teams I lead</Heading>
+          <Heading variant="h3">Teams I lead</Heading>
           <Button
             style={styles.selectTeamsButton}
             onPress={() =>
               navigation.navigate('New', {
                 screen: 'ConversationFilterRecipients',
                 params: {
-                  conversation_id: '2196252',
+                  source_app_name: 'Services',
                 },
               })
             }
@@ -85,45 +100,22 @@ export const ConversationSelectRecipientsScreen = ({}: ConversationSelectRecipie
 
 const useStyles = () => {
   const { bottom } = useSafeAreaInsets()
-  const theme = useTheme()
 
   return StyleSheet.create({
-    container: {
-      flex: 1,
-      gap: 8,
+    contentContainer: {
+      gap: 24,
+      paddingTop: 16,
+      paddingBottom: 16 + bottom,
     },
     section: {
-      padding: 16,
       flex: 1,
     },
     sectionHeader: {
       flexDirection: 'row',
       justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingBottom: 4,
     },
     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/screens/conversation_select_recipients/types/screen_props.tsx

@@ -0,0 +1,11 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import { AppName } from '../../../types/resources/app_name'
+import { GraphId } from '../../../types/resources/group_resource'
+
+export type ConversationSelectRecipientsParams = {
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: AppName
+}
+
+export type ConversationSelectRecipientsScreenProps =
+  StaticScreenProps<ConversationSelectRecipientsParams>

package/src/screens/conversations/components/list_header_component.tsx

@@ -1,8 +1,8 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
-import React, { useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
+import React, { useCallback, useMemo } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
 import { Heading, TextButton, ToggleButton } from '../../../components'
-import { useTheme } from '../../../hooks'
+import { useCurrentPerson, useCurrentPersonCache, useTheme } from '../../../hooks'
 import { useMarkAllRead } from '../../../hooks/use_conversations_actions'
 import { useCanDisplayGroups } from '../../../hooks/use_groups'
 import { ConversationScreenProps } from '../conversations_screen'
@@ -23,6 +23,8 @@ export const ListHeaderComponent = () => {
   const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
   const { chat_group_graph_id, group_source_app_name = '' } = route.params || {}
 
+  const { unreadCount } = useCurrentPerson()
+  const currentPersonCache = useCurrentPersonCache()
   const { markAllRead, isPending } = useMarkAllRead()
 
   const active: FilterTypes = useMemo(() => {
@@ -37,6 +39,20 @@ export const ListHeaderComponent = () => {
     return FilterTypes.All
   }, [chat_group_graph_id, group_source_app_name])
 
+  const handleMarkAllRead = useCallback(() => {
+    currentPersonCache.update({ unreadCount: 0 })
+    markAllRead()
+  }, [currentPersonCache, markAllRead])
+
+  const alertMarkAllRead = useCallback(() => {
+    if (active === FilterTypes.All) return handleMarkAllRead()
+
+    Alert.alert('Mark all read', 'This includes conversations not shown by the current filter.', [
+      { text: 'Cancel' },
+      { text: 'OK', onPress: () => handleMarkAllRead() },
+    ])
+  }, [active, handleMarkAllRead])
+
   const showAppFilters = canFilterByGroups && canFilterByTeams
 
   return (
@@ -45,7 +61,7 @@ export const ListHeaderComponent = () => {
         <Heading numberOfLines={1} variant="h2">
           Conversations
         </Heading>
-        <TextButton onPress={() => markAllRead()} disabled={isPending}>
+        <TextButton onPress={alertMarkAllRead} disabled={isPending || !unreadCount}>
           Mark all read
         </TextButton>
       </View>

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/screens/send_giphy_screen.tsx

@@ -68,7 +68,7 @@ export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
       <NativeImage
         alt="Powered by Giphy"
         style={styles.powered_by_giphy}
-        source={require('../../assets/images/powered_by_giphy.png')}
+        source={{ uri: poweredByGiphyImage }}
       />
       <View style={styles.control_stack}>
         <View style={styles.button_group}>
@@ -153,3 +153,32 @@ const useStyles = () => {
     },
   })
 }
+
+const poweredByGiphyImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAWCAYAAACFbNPBAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
+GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABa9JREFUeNrsWy1z40gQla8EDAwE
+DAQCDAIMAgwCDA0XBgYGBu5PyM84aLgw8KDBAoMDBgsEAgQEBAQEBARclZ2uepPrne2WRrbls7Pq
+KpWc0UxPz0y//pIyen9/Dwa6LhqNRjNzmwmPcnOl5kzrYZdOQ+GwBVcDirG5LXGNG7rWpu/O3Dcu
+UEz7ytxW7gDT76WtjzYXAdJcW8MjFWR+EoBMAF4ra3wRmmkdG/Psq/kdac8Vfg/mtpAMiRnzt88C
+/xpU7yrAEZvbMxR33NLdAukZ4/okmmturicz1yNA3Be9Ku0rM2+keNlFR14DQK4UHE+K9Wwi6v94
+RlHnfc4HD5Uojx8826zHyQeAfJ6w6tHDa2jhz7czizwzMi969iK1Mu/cCRMjJbTa9JKDSG7M0N5M
+WDn9iOeUHWpl+hTs2UQZF6HvnrVNIGMFfpq8ltdEUhQeiyvr+FgLm1Pl0WVvWtb8sT6+bkZL5aBJ
+li1ZVLKGmN+GFDM8X3exlB6UCh4qUmTe9eRFKL96VTzVF/MshZ6sjg2tDknSF4pyECoTduALl69p
+r3CYpDB3aP7OnhOgqP3NXBkbeocFU9/bhjBj1yJjwpRFs3Al+IjzGB6Z4fHWdW+wJlpHaP7eWqBB
+qRdQ5n8VvksFHL8ov/ltZd8ZvkskwvmJlXMteLdnYa96zXtI1wCEmQDYZSBX9zqHVodWsSocuCVS
+phiKUDNFIcAU4B9D6DkUocCYqfUs8Dh2czN2AHQVZF3N3y4YXLms98hx2fXRvHMzvmBWmvf5sPgK
+6EiGG7pIhgaQuDxv2XoSgGTO+N7avZK8B5JMKbT6p+mgzbPtOWIpWPNdh4rXqUOtZ2F/NFnSrqHV
+oQDZw1rZQ3wDKCLwCq3bZ0qXQtljeIoMijMFWDhAJtQXVta2Fc7BlIq15uEQlzEDQCfwEr/1URSA
+P6cw5h4gyZRwy503tyAgQ0AApTUh6R5DnqxBDs0SJk6s3aagaln1RFWsQ/KUlyPBWRoepPBfPHOx
+10PnOvY9CB8/gfC5Yl1JMSZQlg8AADQhlDdCuwXR3uUHyypVODSaCB4iEviULaDJ4AHGSqIYO7lI
+BABUTLGXAE0Y/PcOoQvll/ISsKGMehb5yFMiMZ+1dN20GcNTAmTMFCtk8WbeUoasBcDMAI4pU6B7
+KFoBxc49LWuqKKpNgksnQZYSzJR5GNF7dtiniAExpBAKYaINtYh+KIl50GEfzwkIX6ufnDnU+tri
+PY8KOTsDxFHQGiEVxaN7mzsIVi5ylCwHHwuQCjwKgO5GCq9gOXxjSQuOTLDUaYvXkWjqYd1TVqy4
+gww3dn54z0AArC/FweXT9lwTsVBrderQ6lCA0MFqJbwCSnSLqpEFTMhAVbAEr2IHnrHnFiA1S+K7
+hiEpqxJFx26S4XUDuWpPd73HAR3zZrlWPHjMwk4C3sYzUT2LRfeoFNVKZBB4hEsSSDbIxX6rbB4T
+Wp0qB+GC2no8KdK9+V2Cv03g3Y/obEzPgWPzk7HkPaCsUtz7pliXBHMsqOLCQppYeHdR8QoVm8d6
+Ihr7o8m6C6Fd0BK2NSbXSjslpmuWe6XO/vwfAClRXUs8Ddj6yDDubOFo2HETqhaQJCwBj9m4TPAG
+BZ6VTiyeYbxrZdpCkj341Q5oQyZP5qGwlfB3hTXUDXvjjtkrVarSYy1W9lLwgJS7PZjnr4KC9fkt
+VKq05Z7AuEryBkhDaCVVlFKPfqRAO6E9C359WWjb3zymb+XXtg7PeQ7am659ET5J3xQtUCxJmEGI
+mUfuI95fB38gDZ+7XzARmPBmPFYqZctLrnx9Bho+Vrx8WjcktT7g2AxbOADkM3uRGiDpGucTqE79
+weIQYg10sSD5xt5ezwL9K1/K/xIl1yk98kOfPl1A6tPWVAjwqQIeOq6VRsP/pF8vOZ/L5MP/ovew
+xwNABhpIp58CDAChjQWETVMlnAAAAABJRU5ErkJggg==`

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

@@ -1,7 +1,7 @@
 import { ResourceObject } from '../../api_primitives'
 
 export interface GroupsGroupResource extends ResourceObject {
-  id: string
+  id: number
   type: 'Group'
   headerImage: {
     thumbnail: string

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

@@ -0,0 +1,13 @@
+export interface GroupsGroupMemberResource {
+  type: 'Member'
+  id: number
+  role?: string
+  person: {
+    firstName: string
+    lastName: string
+    avatarUrl: string
+    child: boolean
+    id: number
+    type: 'Person'
+  }
+}

package/src/types/resources/member.ts

@@ -8,17 +8,6 @@ export interface MemberResource {
   role?: string
 }
 
-export interface MemberResourceWithPerson extends MemberResource {
-  person: {
-    firstName: string
-    lastName: string
-    avatarUrl: string
-    child: boolean
-    id: string
-    type: 'Person'
-  }
-}
-
 export interface MemberBadge {
   title: string
 }

package/src/types/resources/message.ts

@@ -18,4 +18,6 @@ export interface MessageResource {
   // Custom Local Properties we set for rendering
   renderAuthor?: boolean
   renderTime?: boolean
+  myLatestInConversation?: boolean
+  lastInGroup?: boolean
 }

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/date.ts

@@ -1,4 +1,4 @@
-// @ts-ignore
+// @ts-expect-error
 import { date as formatDate } from '@planningcenter/datetime-fmt'
 import moment from 'moment-timezone'
 
@@ -24,3 +24,13 @@ const formatShorterDate = (date: DateProps) => {
   // Drop the century from the year
   return formatDate(date, { style: 'short', year: true }).replace(/20(\d{2})/, '$1')
 }
+
+export function getRelativeDateStatus(date: DateProps) {
+  const now = moment()
+
+  const isToday = now.isSame(date, 'day')
+  const isThisWeek = now.isSame(date, 'week')
+  const isThisYear = now.isSame(date, 'year')
+
+  return { isToday, isThisWeek, isThisYear }
+}

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'