@planningcenter/chat-react-native 3.15.0-rc.1 → 3.15.0-rc.10

package/src/components/primitive/form_sheet.tsx

@@ -14,6 +14,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
 import type { ButtonProps, TextButtonProps } from '../display'
 import { Button, Heading, Icon, IconString, Text, TextButton } from '../display'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 
 // =================================
 // ====== Exports ==================
@@ -146,7 +147,11 @@ function FormSheetHeaderTitle({ children }: FormSheetHeaderTitleProps) {
   const styles = useStyles()
 
   return (
-    <Heading variant="h3" style={styles.headerTitle} maxFontSizeMultiplier={1}>
+    <Heading
+      variant="h3"
+      style={styles.headerTitle}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+    >
       {children}
     </Heading>
   )
@@ -174,10 +179,23 @@ FormSheetHeaderActions.displayName = 'FormSheet.HeaderActions'
 // ====== FormSheetHeaderTextButton ==========
 // ===========================================
 
-interface FormSheetHeaderTextButtonProps extends Omit<TextButtonProps, 'maxFontSizeMultiplier'> {}
+// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.
+// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.
+// Triggering this prop will display an almost full screen iOS a11y button.
+interface FormSheetHeaderTextButtonProps
+  extends Omit<TextButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {
+  children: string
+}
 
 function FormSheetHeaderTextButton(props: FormSheetHeaderTextButtonProps) {
-  return <TextButton {...props} maxFontSizeMultiplier={1} />
+  return (
+    <TextButton
+      {...props}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+      accessibilityShowsLargeContentViewer
+      accessibilityLargeContentTitle={props.children}
+    />
+  )
 }
 
 FormSheetHeaderTextButton.displayName = 'FormSheet.HeaderTextButton'
@@ -186,10 +204,19 @@ FormSheetHeaderTextButton.displayName = 'FormSheet.HeaderTextButton'
 // ====== FormSheetHeaderButton ============
 // =========================================
 
-interface FormSheetHeaderButtonProps extends Omit<ButtonProps, 'maxFontSizeMultiplier'> {}
+// Same `onLongPress`note as `FormSheetHeaderTextButtonProps`
+interface FormSheetHeaderButtonProps
+  extends Omit<ButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {}
 
 function FormSheetHeaderButton(props: FormSheetHeaderButtonProps) {
-  return <Button {...props} maxFontSizeMultiplier={1} />
+  return (
+    <Button
+      {...props}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+      accessibilityShowsLargeContentViewer
+      accessibilityLargeContentTitle={props.title}
+    />
+  )
 }
 
 FormSheetHeaderButton.displayName = 'FormSheet.HeaderButton'
@@ -324,6 +351,7 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
     },
     headerTitle: {
       textAlign: 'left',
+      flex: 1,
     },
     headerActions: {
       flexDirection: 'row',

package/src/hooks/use_api.ts

@@ -5,7 +5,7 @@ import {
   useQuery,
 } from '@tanstack/react-query'
 import { ApiCollection, ApiError, ApiResource, ResourceObject } from '../types'
-import { GetRequest, RequestData } from '../utils/client/types'
+import { GetRequest, RequestData } from '../utils/client'
 import { App, useApiClient } from './use_api_client'
 import { getRequestQueryKey, RequestQueryKey } from './use_suspense_api'
 

package/src/hooks/use_api_client.ts

@@ -3,8 +3,8 @@ 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']
+export type App = 'chat' | 'groups' | 'services' | 'people'
+const apps: App[] = ['chat', 'groups', 'services', 'people']
 
 export type ApiClient = { [_K in App]: Client }
 

package/src/hooks/use_app_name.ts

@@ -0,0 +1,17 @@
+import DeviceInfo from 'react-native-device-info'
+
+export type AppName = 'chat' | 'churchcenter' | 'services'
+
+export const useAppName = (): AppName => {
+  const applicationName = DeviceInfo.getApplicationName()
+
+  if (/churchcenter/i.test(applicationName)) {
+    return 'churchcenter'
+  }
+
+  if (/services/i.test(applicationName)) {
+    return 'services'
+  }
+
+  return 'chat'
+}

package/src/hooks/use_async_storage.ts

@@ -4,7 +4,7 @@ import { useCallback } from 'react'
 
 const cacheKeyGenerator = (key: string) => [`AsyncStorageResource:${key}`]
 
-type SetValue<TCacheData> = (_itemValue?: TCacheData | null) => void
+type SetValue<TCacheData> = (_itemValue?: TCacheData | null) => Promise<void>
 
 export function useAsyncStorage<TCacheData>(
   key: string,
@@ -28,11 +28,14 @@ export function useAsyncStorage<TCacheData>(
   const setValue: SetValue<TCacheData> = useCallback(
     itemValue => {
       if (itemValue === null || itemValue === undefined) {
-        AsyncStorage.removeItem(key)
-      } else {
-        AsyncStorage.setItem(key, JSON.stringify(itemValue))
+        return AsyncStorage.removeItem(key).then(() => {
+          refetch()
+        })
       }
-      refetch()
+
+      return AsyncStorage.setItem(key, JSON.stringify(itemValue)).then(() => {
+        refetch()
+      })
     },
     [key, refetch]
   )

package/src/hooks/use_report_bug_action.ts

@@ -1,12 +1,5 @@
 import { useMutation } from '@tanstack/react-query'
 import { useApiClient } from './use_api_client'
-import DeviceInfo from 'react-native-device-info'
-const brand = DeviceInfo.getBrand()
-const model = DeviceInfo.getModel()
-const systemName = DeviceInfo.getSystemName()
-const systemVersion = DeviceInfo.getSystemVersion()
-const readableVersion = DeviceInfo.getReadableVersion()
-const appName = DeviceInfo.getApplicationName()
 
 export const useReportBugAction = () => {
   const apiClient = useApiClient()
@@ -18,7 +11,7 @@ export const useReportBugAction = () => {
       attachmentIds,
     }: {
       description: string
-      description_json: string
+      description_json: Record<string, any>
       attachmentIds: string[]
     }) => {
       return apiClient.chat.post({
@@ -28,8 +21,7 @@ export const useReportBugAction = () => {
             type: '',
             attributes: {
               description,
-              description_json,
-              device_info: `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
+              description_json: JSON.stringify(description_json),
               attachment_ids: attachmentIds,
             },
           },

package/src/hooks/use_suspense_api.ts

@@ -6,7 +6,7 @@ import {
   UseSuspenseQueryOptions,
 } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, ResourceObject } from '../types'
-import { GetRequest, RequestData } from '../utils/client/types'
+import { GetRequest, RequestData } from '../utils/client'
 import { App, useApiClient } from './use_api_client'
 import { Log } from '../utils'
 import { ApiError } from '../types/api_primitives'

package/src/index.tsx

@@ -8,3 +8,5 @@ export * from './types'
 export { platformFontWeightBold, Session, TemporaryDefaultColorsType, Uri } from './utils'
 export * from './utils/client'
 export * from './utils/native_adapters'
+export { default as Event } from './polyfills/events/Event'
+export { CustomEvent } from './polyfills/events/CustomEvent'

package/src/navigation/index.tsx

@@ -4,47 +4,50 @@ import {
   createNativeStackNavigator,
   NativeStackHeaderRightProps,
 } from '@react-navigation/native-stack'
+import { CardStyleInterpolators } from '@react-navigation/stack'
 import React from 'react'
+import { Platform } from 'react-native'
 import { Icon } from '../components'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import {
+  AttachmentActionsScreen,
+  AttachmentActionsScreenOptions,
+} from '../screens/attachment_actions/attachment_actions_screen'
+import { BugReportScreen, BugReportScreenOptions } from '../screens/bug_report_screen'
+import {
+  MessageReadReceiptsScreen,
+  MessageReadReceiptsScreenOptions,
+} from '../screens/conversation/message_read_receipts_screen'
 import { ConversationDetailsScreen } from '../screens/conversation_details_screen'
+import {
+  ConversationFilterReceipientsScreenOptions,
+  ConversationFilterRecipientsScreen,
+} from '../screens/conversation_filter_recipients/conversation_filter_recipients_screen'
+import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
+import {
+  ConversationFiltersScreen,
+  ConversationFiltersScreenOptions,
+} from '../screens/conversation_filters_screen'
+import { ConversationNewScreen } from '../screens/conversation_new/conversation_new_screen'
 import {
   ConversationRouteProps,
   ConversationScreen,
   ConversationScreenTitle,
 } from '../screens/conversation_screen'
-import { ConversationsScreen } from '../screens/conversations/conversations_screen'
-import { ConversationNewScreen } from '../screens/conversation_new/conversation_new_screen'
-import {
-  ConversationFilterReceipientsScreenOptions,
-  ConversationFilterRecipientsScreen,
-} from '../screens/conversation_filter_recipients/conversation_filter_recipients_screen'
+import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'
 import { ConversationSelectRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_recipients_screen'
+import { ConversationSelectTeamsILeadRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen'
+import { ConversationsScreen } from '../screens/conversations/conversations_screen'
+import { GetHelpScreen } from '../screens/get_help_screen'
 import {
   MessageActionsScreen,
   MessageActionsScreenOptions,
 } from '../screens/message_actions_screen'
-import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
 import { NotFound } from '../screens/not_found'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
-import { ScreenLayout } from './screenLayout'
-import {
-  ConversationFiltersScreen,
-  ConversationFiltersScreenOptions,
-} from '../screens/conversation_filters_screen'
-import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
-import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'
-import { ConversationSelectTeamsILeadRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen'
-import { AttachmentActionsScreenOptions } from '../screens/attachment_actions/attachment_actions_screen'
-import { AttachmentActionsScreen } from '../screens/attachment_actions/attachment_actions_screen'
-import { BugReportScreen, BugReportScreenOptions } from '../screens/bug_report_screen'
-import {
-  MessageReadReceiptsScreen,
-  MessageReadReceiptsScreenOptions,
-} from '../screens/conversation/message_read_receipts_screen'
-import { Platform } from 'react-native'
-import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
+import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
 import { TeamConversationScreen } from '../screens/team_conversation_screen'
-import { CardStyleInterpolators } from '@react-navigation/stack'
+import { ScreenLayout } from './screenLayout'
 
 const HEADER_BACK_BUTTON_LAYOUT_RESET_STYLES = {
   marginLeft: Platform.select({ ios: -8, default: -3 }),
@@ -231,6 +234,16 @@ export const ChatStack = createNativeStackNavigator({
       screen: BugReportScreen,
       options: BugReportScreenOptions,
     },
+    GetHelp: {
+      screen: GetHelpScreen,
+      options: ({ navigation }) => ({
+        headerTitle: 'Get help',
+        presentation: 'modal',
+        headerLeft: props => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Close" />
+        ),
+      }),
+    },
     NotFound: {
       screen: NotFound,
       options: {

package/src/polyfills/events/CustomEvent.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * This module implements the `CustomEvent` interface from the DOM.
+ * See https://dom.spec.whatwg.org/#interface-customevent.
+ */
+
+import Event from './Event'
+import type { EventInit as RNEventInit } from './Event'
+
+export interface CustomEventInit extends RNEventInit {
+  detail?: unknown
+}
+
+export class CustomEvent extends Event {
+  private _detail: unknown
+
+  constructor(type: string, options?: CustomEventInit) {
+    super(type, options)
+
+    this._detail = options?.detail
+  }
+
+  get detail(): unknown {
+    return this._detail
+  }
+}

package/src/polyfills/events/Event.ts

@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * This module implements the `Event` interface from the DOM.
+ * See https://dom.spec.whatwg.org/#interface-event.
+ */
+
+import type RNEventTarget from './EventTarget'
+import {
+  getComposedPath,
+  getCurrentTarget,
+  getEventPhase,
+  getInPassiveListenerFlag,
+  getIsTrusted,
+  getTarget,
+  setStopImmediatePropagationFlag,
+  setStopPropagationFlag,
+  setIsTrusted,
+  setEventPhase,
+} from './internals/EventInternals'
+import { setPlatformObject } from '../webidl/PlatformObjects'
+
+export interface EventInit {
+  bubbles?: boolean
+  cancelable?: boolean
+  composed?: boolean
+}
+
+export type EventPhase = 0 | 1 | 2 | 3
+
+export default class Event {
+  static NONE: 0
+  static CAPTURING_PHASE: 1
+  static AT_TARGET: 2
+  static BUBBLING_PHASE: 3
+
+  readonly NONE!: 0
+  readonly CAPTURING_PHASE!: 1
+  readonly AT_TARGET!: 2
+  readonly BUBBLING_PHASE!: 3
+
+  private _bubbles: boolean
+  private _cancelable: boolean
+  private _composed: boolean
+  private _type: string
+
+  private _defaultPrevented: boolean = false
+  private _timeStamp: number = performance.now()
+
+  // Symbol-keyed fields are internal and managed via helpers; not declared here.
+
+  constructor(type: string, options?: EventInit | null) {
+    if (arguments.length < 1) {
+      throw new TypeError("Failed to construct 'Event': 1 argument required, but only 0 present.")
+    }
+
+    const typeOfOptions = typeof options
+    if (options != null && typeOfOptions !== 'object' && typeOfOptions !== 'function') {
+      throw new TypeError(
+        "Failed to construct 'Event': The provided value is not of type 'EventInit'."
+      )
+    }
+
+    this._type = String(type)
+    this._bubbles = Boolean((options as EventInit | undefined)?.bubbles)
+    this._cancelable = Boolean((options as EventInit | undefined)?.cancelable)
+    this._composed = Boolean((options as EventInit | undefined)?.composed)
+
+    // Initialize internal flags
+    setIsTrusted(this, false)
+    setEventPhase(this, 0 as 0)
+  }
+
+  get bubbles(): boolean {
+    return this._bubbles
+  }
+
+  get cancelable(): boolean {
+    return this._cancelable
+  }
+
+  get composed(): boolean {
+    return this._composed
+  }
+
+  get currentTarget(): RNEventTarget | null {
+    return getCurrentTarget(this)
+  }
+
+  get defaultPrevented(): boolean {
+    return this._defaultPrevented
+  }
+
+  get eventPhase(): EventPhase {
+    return getEventPhase(this)
+  }
+
+  get isTrusted(): boolean {
+    return getIsTrusted(this)
+  }
+
+  get target(): RNEventTarget | null {
+    return getTarget(this)
+  }
+
+  get timeStamp(): number {
+    return this._timeStamp
+  }
+
+  get type(): string {
+    return this._type
+  }
+
+  composedPath(): ReadonlyArray<RNEventTarget> {
+    return getComposedPath(this).slice()
+  }
+
+  preventDefault(): void {
+    if (!this._cancelable) {
+      return
+    }
+
+    if (getInPassiveListenerFlag(this)) {
+      console.error(new Error('Unable to preventDefault inside passive event listener invocation.'))
+      return
+    }
+
+    this._defaultPrevented = true
+  }
+
+  stopImmediatePropagation(): void {
+    setStopPropagationFlag(this, true)
+    setStopImmediatePropagationFlag(this, true)
+  }
+
+  stopPropagation(): void {
+    setStopPropagationFlag(this, true)
+  }
+}
+
+Object.defineProperty(Event, 'NONE', {
+  enumerable: true,
+  value: 0,
+})
+
+Object.defineProperty(Event.prototype, 'NONE', {
+  enumerable: true,
+  value: 0,
+})
+
+Object.defineProperty(Event, 'CAPTURING_PHASE', {
+  enumerable: true,
+  value: 1,
+})
+
+Object.defineProperty(Event.prototype, 'CAPTURING_PHASE', {
+  enumerable: true,
+  value: 1,
+})
+
+Object.defineProperty(Event, 'AT_TARGET', {
+  enumerable: true,
+  value: 2,
+})
+
+Object.defineProperty(Event.prototype, 'AT_TARGET', {
+  enumerable: true,
+  value: 2,
+})
+
+Object.defineProperty(Event, 'BUBBLING_PHASE', {
+  enumerable: true,
+  value: 3,
+})
+
+Object.defineProperty(Event.prototype, 'BUBBLING_PHASE', {
+  enumerable: true,
+  value: 3,
+})
+
+setPlatformObject(Event)

package/src/polyfills/events/EventHandlerAttributes.ts

@@ -0,0 +1,67 @@
+/**
+ * Helpers to implement event handler IDL attributes.
+ */
+
+import type EventTarget from './EventTarget'
+import type { EventCallback } from './EventTarget'
+
+type EventHandler = Readonly<{
+  handleEvent: EventCallback
+}>
+type EventHandlerAttributeMap = Map<string, EventHandler | null>
+
+const EVENT_HANDLER_CONTENT_ATTRIBUTE_MAP_KEY = Symbol('eventHandlerAttributeMap')
+
+function getEventHandlerAttributeMap(
+  target: EventTarget
+): EventHandlerAttributeMap | null | undefined {
+  return (target as any)[EVENT_HANDLER_CONTENT_ATTRIBUTE_MAP_KEY]
+}
+
+function setEventHandlerAttributeMap(target: EventTarget, map: EventHandlerAttributeMap | null) {
+  ;(target as any)[EVENT_HANDLER_CONTENT_ATTRIBUTE_MAP_KEY] = map
+}
+
+export function getEventHandlerAttribute(target: EventTarget, type: string): EventCallback | null {
+  const listener = getEventHandlerAttributeMap(target)?.get(type)
+  return listener != null ? listener.handleEvent : null
+}
+
+export function setEventHandlerAttribute(
+  target: EventTarget,
+  type: string,
+  callback: EventCallback | null | undefined
+): void {
+  let map = getEventHandlerAttributeMap(target)
+  if (map != null) {
+    const currentListener = map.get(type)
+    if (currentListener) {
+      target.removeEventListener(type, currentListener)
+      map.delete(type)
+    }
+  }
+
+  if (
+    callback != null &&
+    (typeof callback === 'function' || typeof (callback as any) === 'object')
+  ) {
+    const listener: EventHandler = {
+      handleEvent: callback as EventCallback,
+    }
+
+    try {
+      target.addEventListener(type, listener)
+      if (map == null) {
+        map = new Map()
+        setEventHandlerAttributeMap(target, map)
+      }
+      map.set(type, listener)
+    } catch (_e) {
+      // Assigning incorrect listener does not throw in setters.
+    }
+  }
+
+  if (map != null && map.size === 0) {
+    setEventHandlerAttributeMap(target, null)
+  }
+}