@planningcenter/chat-react-native 3.42.2 → 3.42.3-qa-staging.1

package/src/__utils__/handlers.ts

@@ -1,5 +1,4 @@
-import { http, HttpResponse } from 'msw'
-import { JSONAPIResponse } from '../types'
+import { http, HttpResponse, type JsonBodyType } from 'msw'
 import DefaultFixtures from './fixtures/defaults'
 
 export const BASE_URL = 'https://api.pco.test/chat/v2'
@@ -13,25 +12,25 @@ export const handlers = [
   del(BASE_URL + '/records/:id'),
 ]
 
-function get(url: string, mockedResponse: JSONAPIResponse, mockedStatus: number = 200) {
+function get(url: string, mockedResponse: JsonBodyType, mockedStatus: number = 200) {
   return http.get(url, () => {
     return HttpResponse.json(mockedResponse, { status: mockedStatus })
   })
 }
 
-function post(url: string, mockedResponse: JSONAPIResponse, mockedStatus: number = 200) {
+function post(url: string, mockedResponse: JsonBodyType, mockedStatus: number = 200) {
   return http.post(url, () => {
     return HttpResponse.json(mockedResponse, { status: mockedStatus })
   })
 }
 
-function del(url: string, mockedResponse?: JSONAPIResponse, mockedStatus: number = 200) {
+function del(url: string, mockedResponse?: JsonBodyType, mockedStatus: number = 200) {
   return http.delete(url, () => {
     return HttpResponse.json(mockedResponse, { status: mockedStatus })
   })
 }
 
-function patch(url: string, mockedResponse: JSONAPIResponse, mockedStatus: number = 200) {
+function patch(url: string, mockedResponse: JsonBodyType, mockedStatus: number = 200) {
   return http.patch(url, () => {
     return HttpResponse.json(mockedResponse, { status: mockedStatus })
   })

package/src/components/conversation/attachments/attachment_deleting_overlay.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { useTheme } from '../../../hooks'
 import { Spinner } from '../../display'
@@ -19,14 +18,22 @@ const useStyles = () => {
 
   return StyleSheet.create({
     container: {
-      ...StyleSheet.absoluteFillObject,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: 8,
       overflow: 'hidden',
     },
     overlay: {
-      ...StyleSheet.absoluteFillObject,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
       backgroundColor: colors.fillColorNeutral070,
       opacity: 0.5,
     },

package/src/components/conversation/messages_disabled_banners.tsx

@@ -3,7 +3,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
 import type { ConversationDisabledReason } from '../../types'
 import { ADULT_REQUIREMENT_BODY } from '../../utils'
-import { Text } from '../display'
+import { Button, Text } from '../display'
 
 export const LeaderMessagesDisabledBanner = () => {
   return (
@@ -31,22 +31,37 @@ const DEFAULT_DISABLED_TEXT = 'This conversation has been disabled.'
 
 interface ConversationDisabledBannerProps {
   disabledReason?: ConversationDisabledReason
+  messageLink?: { label: string; onPress: () => void }
 }
 
-export const ConversationDisabledBanner = ({ disabledReason }: ConversationDisabledBannerProps) => {
+export const ConversationDisabledBanner = ({
+  disabledReason,
+  messageLink,
+}: ConversationDisabledBannerProps) => {
   const styles = useStyles()
   const description =
     (disabledReason && DISABLED_REASON_TEXT[disabledReason]) ?? DEFAULT_DISABLED_TEXT
 
-  return <MessagesDisabledBanner description={description} style={styles.memberBanner} />
+  return (
+    <MessagesDisabledBanner
+      description={description}
+      style={styles.memberBanner}
+      messageLink={messageLink}
+    />
+  )
 }
 
 interface MessagesDisabledBannerProps {
   description: string
   style?: ViewStyle
+  messageLink?: { label: string; onPress: () => void }
 }
 
-const MessagesDisabledBanner = ({ description, style }: MessagesDisabledBannerProps) => {
+const MessagesDisabledBanner = ({
+  description,
+  style,
+  messageLink,
+}: MessagesDisabledBannerProps) => {
   const styles = useStyles()
 
   return (
@@ -54,6 +69,15 @@ const MessagesDisabledBanner = ({ description, style }: MessagesDisabledBannerPr
       <Text style={styles.text} variant="tertiary">
         {description}
       </Text>
+      {messageLink && (
+        <Button
+          variant="fill"
+          size="lg"
+          title={messageLink.label}
+          onPress={messageLink.onPress}
+          style={styles.messageButton}
+        />
+      )}
     </View>
   )
 }
@@ -78,5 +102,8 @@ const useStyles = () => {
       paddingBottom: 16 + bottom,
       marginBottom: -bottom,
     },
+    messageButton: {
+      marginTop: 12,
+    },
   })
 }

package/src/components/page/__tests__/component_error_boundary.test.tsx

@@ -4,7 +4,7 @@ import { Text } from 'react-native'
 import { Log } from '../../../utils/native_adapters/configuration'
 import { ComponentErrorBoundary } from '../component_error_boundary'
 
-function Boom({ thrown }: { thrown: unknown }) {
+function Boom({ thrown }: { thrown: unknown }): React.ReactElement {
   throw thrown
 }
 

package/src/components/page/__tests__/error_boundary.test.tsx

@@ -6,7 +6,7 @@ import { Log } from '../../../utils/native_adapters/configuration'
 import { ResponseError } from '../../../utils/response_error'
 import { ErrorBoundary } from '../error_boundary'
 
-function Boom({ thrown }: { thrown: unknown }) {
+function Boom({ thrown }: { thrown: unknown }): React.ReactElement {
   throw thrown
 }
 
@@ -46,7 +46,11 @@ describe('ErrorBoundary', () => {
   })
 
   it('does not report ResponseError — those are owned by the HTTP layer', () => {
-    const failure = { status: 500, statusText: 'Server Error', errors: [] } as FailedResponse
+    const failure = {
+      status: 500,
+      statusText: 'Server Error',
+      errors: [],
+    } as unknown as FailedResponse
 
     render(
       <ErrorBoundary fallback={null}>

package/src/components/page/__tests__/page_error_boundary.test.tsx

@@ -26,7 +26,7 @@ jest.mock('../../primitive/blank_state_primitive', () => {
   }
 })
 
-function Boom({ thrown }: { thrown: unknown }) {
+function Boom({ thrown }: { thrown: unknown }): React.ReactElement {
   throw thrown
 }
 

package/src/hooks/direct_messages/find_direct_message_conversation.ts

@@ -0,0 +1,16 @@
+import { ApiCollection, ConversationResource } from '../../types'
+import { ApiClient } from '../use_api_client'
+
+export const getFindDirectMessageConversationRequestArgs = (participantIds: string[]) => ({
+  url: '/me/conversations',
+  data: {
+    fields: { Conversation: ['title', 'disabled'] },
+    filter: 'with_exact_direct_message_participants',
+    participant_ids: participantIds.join(','),
+  },
+})
+
+export const findDirectMessageConversation = (apiClient: ApiClient, participantIds: string[]) =>
+  apiClient.chat.get(getFindDirectMessageConversationRequestArgs(participantIds)) as Promise<
+    ApiCollection<ConversationResource>
+  >

package/src/hooks/direct_messages/resolve_message_available_members_link.ts

@@ -0,0 +1,42 @@
+import { ConversationResource } from '../../types'
+import { PreselectedDirectMessagePerson } from '../../types/resources/direct_message_candidate'
+import { MemberResource } from '../../types/resources/member'
+
+export type MessageAvailableMembersLink =
+  | { label: string; existingConversationId: number }
+  | { label: string; recipients: PreselectedDirectMessagePerson[] }
+
+export function resolveMessageAvailableMembersLink({
+  availableMembers,
+  existingConversations,
+  canMessageAvailableMembers,
+}: {
+  availableMembers: Pick<MemberResource, 'id' | 'name' | 'avatar'>[]
+  existingConversations: Pick<ConversationResource, 'id' | 'disabled'>[] | undefined
+  canMessageAvailableMembers: boolean
+}): MessageAvailableMembersLink | undefined {
+  if (availableMembers.length === 0 || !existingConversations) return undefined
+
+  const label =
+    availableMembers.length === 1
+      ? `Message ${availableMembers[0].name.split(' ')[0]}`
+      : `Message the remaining ${availableMembers.length} people`
+
+  const existingConversation = existingConversations[0]
+  if (existingConversation) {
+    return existingConversation.disabled
+      ? undefined
+      : { label, existingConversationId: Number(existingConversation.id) }
+  }
+
+  if (!canMessageAvailableMembers) return undefined
+
+  return {
+    label,
+    recipients: availableMembers.map(m => ({
+      id: m.id.toString(),
+      name: m.name,
+      avatar: m.avatar,
+    })),
+  }
+}

package/src/hooks/direct_messages/use_find_or_create_direct_message_conversation.ts

@@ -1,17 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
 import { useState, useCallback } from 'react'
-import { ApiCollection, ApiResource, ConversationResource } from '../../types'
+import { ApiResource, ConversationResource } from '../../types'
 import { ApiClient, useApiClient } from '../use_api_client'
-
-const findDirectMessageConversation = (apiClient: ApiClient, participantIds: string[]) =>
-  apiClient.chat.get({
-    url: '/me/conversations',
-    data: {
-      fields: { Conversation: ['title'] },
-      filter: 'with_exact_direct_message_participants',
-      participant_ids: participantIds.join(','),
-    },
-  }) as Promise<ApiCollection<ConversationResource>>
+import { findDirectMessageConversation } from './find_direct_message_conversation'
 
 const createDirectMessageConversation = (apiClient: ApiClient, ids: string[]) =>
   apiClient.chat.post({

package/src/hooks/direct_messages/use_message_available_members.ts

@@ -0,0 +1,65 @@
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { ConversationResource } from '../../types'
+import { MemberResource } from '../../types/resources/member'
+import { useApiGet } from '../use_api'
+import { useApiClient } from '../use_api_client'
+import { useCurrentPerson } from '../use_current_person'
+import { getRequestQueryKey } from '../use_suspense_api'
+import {
+  findDirectMessageConversation,
+  getFindDirectMessageConversationRequestArgs,
+} from './find_direct_message_conversation'
+import {
+  MessageAvailableMembersLink,
+  resolveMessageAvailableMembersLink,
+} from './resolve_message_available_members_link'
+
+export function useMessageAvailableMembers(
+  conversation: ConversationResource,
+  { enabled }: { enabled: boolean }
+): MessageAvailableMembersLink | undefined {
+  const apiClient = useApiClient()
+  const currentPerson = useCurrentPerson()
+
+  const { data: members } = useApiGet<MemberResource[]>(
+    {
+      url: `/me/conversations/${conversation.id}/members`,
+      data: { fields: { Member: ['name', 'avatar', 'direct_messages_disabled'] } },
+    },
+    { enabled }
+  )
+
+  const availableMembers = useMemo(() => {
+    if (!enabled || !members) return []
+
+    const currentMember = members.find(m => m.id === currentPerson.id)
+    if (currentMember?.directMessagesDisabled) return []
+
+    return members.filter(m => m.id !== currentPerson.id && !m.directMessagesDisabled)
+  }, [enabled, members, currentPerson.id])
+
+  const availablePersonIds = useMemo(() => availableMembers.map(m => m.id), [availableMembers])
+
+  const { data: existingDirectMessageData } = useQuery({
+    queryKey: getRequestQueryKey(
+      getFindDirectMessageConversationRequestArgs(availablePersonIds.map(String))
+    ),
+    queryFn: () => findDirectMessageConversation(apiClient, availablePersonIds.map(String)),
+    enabled: availablePersonIds.length > 0,
+  })
+
+  return useMemo(
+    () =>
+      resolveMessageAvailableMembersLink({
+        availableMembers,
+        existingConversations: existingDirectMessageData?.data,
+        canMessageAvailableMembers: !!conversation.memberAbility?.canMessageAvailableMembers,
+      }),
+    [
+      availableMembers,
+      existingDirectMessageData,
+      conversation.memberAbility?.canMessageAvailableMembers,
+    ]
+  )
+}

package/src/hooks/direct_messages/use_message_available_members_action.ts

@@ -0,0 +1,34 @@
+import { StackActions, useNavigation } from '@react-navigation/native'
+import { ConversationResource } from '../../types'
+import { useMessageAvailableMembers } from './use_message_available_members'
+
+export function useMessageAvailableMembersAction(conversation: ConversationResource) {
+  const navigation = useNavigation()
+  const isDmDisabled =
+    !!conversation.disabled && conversation.disabledReason === 'direct_messages_disabled'
+  const messageAvailableMembersLink = useMessageAvailableMembers(conversation, {
+    enabled: isDmDisabled,
+  })
+
+  if (!messageAvailableMembersLink) return undefined
+
+  return {
+    label: messageAvailableMembersLink.label,
+    onPress: () => {
+      if ('existingConversationId' in messageAvailableMembersLink) {
+        // replace instead of navigate/push so the disabled conversation isn't
+        // left in the back stack as a dead end
+        navigation.dispatch(
+          StackActions.replace('Conversation', {
+            conversation_id: messageAvailableMembersLink.existingConversationId,
+          })
+        )
+      } else {
+        navigation.navigate('New', {
+          screen: 'ConversationSelectDirectMessageRecipients',
+          params: { preselected_people: messageAvailableMembersLink.recipients },
+        })
+      }
+    },
+  }
+}

package/src/hooks/use_conversation.ts

@@ -47,6 +47,7 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'leader',
         'can_reply',
         'can_delete_non_authored_messages',
+        'can_message_available_members',
       ],
       ConversationMembership: [
         'last_read_message_sort_key',

package/src/index.tsx

@@ -12,7 +12,8 @@ export { default as Event } from './polyfills/events/Event'
 export * from './screens'
 export { AgeCheckUnderageScreen } from './screens/age_check/age_check_underage_screen' // TODO: add to barrel
 export * from './types'
-export { ENV, platformFontWeightBold, Session, TemporaryDefaultColorsType, Uri } from './utils'
+export { platformFontWeightBold, Session, Uri } from './utils'
+export type { ENV, TemporaryDefaultColorsType } from './utils'
 export * from './utils/client'
 export * from './utils/host_bridge'
 export * from './utils/native_adapters'

package/src/polyfills/events/EventTarget.ts

@@ -142,7 +142,7 @@ export default class EventTarget {
 
   removeEventListener(
     type: string,
-    callback: EventListener,
+    callback: EventListener | null,
     optionsOrUseCapture: EventListenerOptions | boolean = {}
   ): void {
     if (arguments.length < 2) {

package/src/screens/conversation_screen.tsx

@@ -28,6 +28,7 @@ import { KeyboardView } from '../components/display/keyboard_view'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { ConversationContextProvider } from '../contexts/conversation_context'
 import { useTheme } from '../hooks'
+import { useMessageAvailableMembersAction } from '../hooks/direct_messages/use_message_available_members_action'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
@@ -251,8 +252,15 @@ function ConversationBottomBar({
   currentlyEditingMessage,
   onFlaggedInMessageForm,
 }: ConversationBottomBarProps) {
+  const messageLink = useMessageAvailableMembersAction(conversation)
+
   if (conversation.disabled)
-    return <ConversationDisabledBanner disabledReason={conversation.disabledReason} />
+    return (
+      <ConversationDisabledBanner
+        disabledReason={conversation.disabledReason}
+        messageLink={messageLink}
+      />
+    )
   if (!canReply) return <MemberMessagesDisabledBanner />
   return (
     <MessageForm.Root

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -17,16 +17,30 @@ import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
 
 const MAX_RECIPIENTS = 9
 
-export function ConversationSelectDirectMessageRecipientsScreen(
-  _props: ConversationSelectRecipientsScreenProps
-) {
+export function ConversationSelectDirectMessageRecipientsScreen({
+  route,
+}: ConversationSelectRecipientsScreenProps) {
+  const { preselected_people = [] } = route.params ?? {}
   const styles = useStyles()
   const navigation = useNavigation()
   const { featureEnabled } = useFeatures()
   const [searchTerm, setSearchTerm] = useState('')
   const [debouncedTerm, setDebouncedTerm] = useState('')
   const [selectedPeople, setSelectedPeople] = useState<Map<string, DirectMessageCandidateResource>>(
-    new Map()
+    () =>
+      new Map(
+        preselected_people.map(person => [
+          person.id,
+          {
+            ...person,
+            type: 'DirectMessageCandidate' as const,
+            groups: [],
+            teams: [],
+            under_18: false,
+            directMessagesDisabled: false,
+          },
+        ])
+      )
   )
   const searchInputRef = useRef<TextInput>(null)
 

package/src/screens/conversation_select_recipients/types/screen_props.tsx

@@ -1,10 +1,12 @@
 import { StaticScreenProps } from '@react-navigation/native'
 import { AppName } from '../../../types/resources/app_name'
+import { PreselectedDirectMessagePerson } from '../../../types/resources/direct_message_candidate'
 import { GraphId } from '../../../types/resources/group_resource'
 
 export type ConversationSelectRecipientsParams = {
   chat_group_graph_id?: GraphId
   group_source_app_name?: AppName
+  preselected_people?: PreselectedDirectMessagePerson[]
 }
 
 export type ConversationSelectRecipientsScreenProps =

package/src/types/resources/direct_message_candidate.ts

@@ -10,3 +10,8 @@ export interface DirectMessageCandidateResource extends ResourceObject {
   under_18: boolean
   directMessagesDisabled: boolean
 }
+
+export type PreselectedDirectMessagePerson = Pick<
+  DirectMessageCandidateResource,
+  'id' | 'name' | 'avatar'
+>

package/src/types/resources/member.ts

@@ -5,6 +5,7 @@ export interface MemberResource {
   avatar: string
   badges: MemberBadge[]
   child: boolean
+  directMessagesDisabled?: boolean
   gender: string | null
   role?: string
 }

package/src/types/resources/member_ability.ts

@@ -5,4 +5,5 @@ export interface MemberAbilityResource {
   canDeleteNonAuthoredMessages: boolean
   leader: boolean
   canReply: boolean
+  canMessageAvailableMembers: boolean
 }

package/src/utils/sha_256.ts

@@ -113,7 +113,7 @@ function preprocessMessage(message: number[]): Uint32Array {
   const words = new Uint32Array(message.length / 4)
   for (let i = 0; i < message.length; i += 4) {
     words[i / 4] =
-      (message[i] << 24) | (message[i + 1] << 16) | (message[i + 2] << 8) | message[i + 3]
+      (message[i]! << 24) | (message[i + 1]! << 16) | (message[i + 2]! << 8) | message[i + 3]!
   }
 
   return words
@@ -125,25 +125,25 @@ function processChunk(chunk: Uint32Array, hash: number[]): void {
 
   // Prepare message schedule
   for (let t = 0; t < 16; t++) {
-    W[t] = chunk[t]
+    W[t] = chunk[t]!
   }
   for (let t = 16; t < 64; t++) {
-    W[t] = (gamma1(W[t - 2]) + W[t - 7] + gamma0(W[t - 15]) + W[t - 16]) >>> 0
+    W[t] = (gamma1(W[t - 2]!) + W[t - 7]! + gamma0(W[t - 15]!) + W[t - 16]!) >>> 0
   }
 
   // Initialize working variables
-  let a = hash[0]
-  let b = hash[1]
-  let c = hash[2]
-  let d = hash[3]
-  let e = hash[4]
-  let f = hash[5]
-  let g = hash[6]
-  let h = hash[7]
+  let a = hash[0]!
+  let b = hash[1]!
+  let c = hash[2]!
+  let d = hash[3]!
+  let e = hash[4]!
+  let f = hash[5]!
+  let g = hash[6]!
+  let h = hash[7]!
 
   // Main loop
   for (let t = 0; t < 64; t++) {
-    const T1 = (h + sigma1(e) + ch(e, f, g) + K[t] + W[t]) >>> 0
+    const T1 = (h + sigma1(e) + ch(e, f, g) + K[t]! + W[t]!) >>> 0
     const T2 = (sigma0(a) + maj(a, b, c)) >>> 0
     h = g
     g = f
@@ -156,14 +156,14 @@ function processChunk(chunk: Uint32Array, hash: number[]): void {
   }
 
   // Add compressed chunk to current hash value
-  hash[0] = (hash[0] + a) >>> 0
-  hash[1] = (hash[1] + b) >>> 0
-  hash[2] = (hash[2] + c) >>> 0
-  hash[3] = (hash[3] + d) >>> 0
-  hash[4] = (hash[4] + e) >>> 0
-  hash[5] = (hash[5] + f) >>> 0
-  hash[6] = (hash[6] + g) >>> 0
-  hash[7] = (hash[7] + h) >>> 0
+  hash[0] = (hash[0]! + a) >>> 0
+  hash[1] = (hash[1]! + b) >>> 0
+  hash[2] = (hash[2]! + c) >>> 0
+  hash[3] = (hash[3]! + d) >>> 0
+  hash[4] = (hash[4]! + e) >>> 0
+  hash[5] = (hash[5]! + f) >>> 0
+  hash[6] = (hash[6]! + g) >>> 0
+  hash[7] = (hash[7]! + h) >>> 0
 }
 
 /** Compute SHA-256 hash and return as byte array */
@@ -181,10 +181,10 @@ function sha256Raw(message: string): number[] {
   // Convert hash to byte array
   const result: number[] = []
   for (let i = 0; i < 8; i++) {
-    result.push((hash[i] >>> 24) & 0xff)
-    result.push((hash[i] >>> 16) & 0xff)
-    result.push((hash[i] >>> 8) & 0xff)
-    result.push(hash[i] & 0xff)
+    result.push((hash[i]! >>> 24) & 0xff)
+    result.push((hash[i]! >>> 16) & 0xff)
+    result.push((hash[i]! >>> 8) & 0xff)
+    result.push(hash[i]! & 0xff)
   }
 
   return result

package/src/utils/system_messages.ts

@@ -1,4 +1,4 @@
-import { MessageResource } from '../types'
+import type { MessageResource } from '../types'
 
 const SYSTEM_MESSAGE_TYPES = ['user_joined'] as const
 

package/src/utils/theme.ts

@@ -1,4 +1,5 @@
-import { ColorSchemeName, ColorValue, OpaqueColorValue, PlatformColor } from 'react-native'
+import { Platform, PlatformColor } from 'react-native'
+import type { ColorSchemeName, ColorValue, OpaqueColorValue } from 'react-native'
 import { aliasTokensColorMap } from '../vendor/tapestry/alias_tokens_color_map'
 import { tokens } from '../vendor/tapestry/tokens'
 
@@ -30,7 +31,7 @@ export interface DefaultTheme {
   showBadgeProductLogo: boolean
 }
 
-export const defaultTheme = (colorScheme: ColorSchemeName): ChatTheme => {
+export const defaultTheme = (colorScheme: ColorSchemeName | null): ChatTheme => {
   const scheme: 'light' | 'dark' = colorScheme === 'dark' ? 'dark' : 'light'
 
   const defaultColors = {
@@ -92,10 +93,14 @@ interface ChatColors {
   statusNeutralComposedBackground: string
 }
 
+// 'link' is an iOS-only semantic color name — constructing it on Android is
+// undefined behavior, so only build it when the code is actually running on iOS
+const iOSLinkColor = Platform.OS === 'ios' ? PlatformColor('link') : undefined
+
 const colorsChatLight: ChatColors = {
   name: 'light',
   androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefault,
-  iOSModalHeaderButtonTextColor: PlatformColor('link'),
+  iOSModalHeaderButtonTextColor: iOSLinkColor,
   buttonStart: undefined,
   buttonEnd: undefined,
   interaction: tokens.fillColorInteractionDefault,
@@ -138,7 +143,7 @@ const colorsChatLight: ChatColors = {
 const colorsChatDark: ChatColors = {
   name: 'dark',
   androidModalHeaderButtonTextColor: tokens.fillColorInteractionDefaultDark,
-  iOSModalHeaderButtonTextColor: PlatformColor('link'),
+  iOSModalHeaderButtonTextColor: iOSLinkColor,
   buttonStart: undefined,
   buttonEnd: undefined,
   interaction: tokens.fillColorInteractionDefaultDark,