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

package/build/utils/liquid_glass.d.ts

@@ -0,0 +1,3 @@
+export declare const setLiquidGlassCapability: (enabled: boolean) => void;
+export declare const isLiquidGlassEnabled: () => boolean;
+//# sourceMappingURL=liquid_glass.d.ts.map

package/build/utils/liquid_glass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid_glass.d.ts","sourceRoot":"","sources":["../../src/utils/liquid_glass.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB,GAAI,SAAS,OAAO,SAExD,CAAA;AAID,eAAO,MAAM,oBAAoB,eACgE,CAAA"}

package/build/utils/liquid_glass.js

@@ -0,0 +1,9 @@
+import { Platform } from 'react-native';
+let hostLiquidGlassEnabled = false;
+export const setLiquidGlassCapability = (enabled) => {
+    hostLiquidGlassEnabled = enabled;
+};
+// The host flag is required because JS cannot detect a binary built with a
+// pre-iOS-26 SDK or opted out via UIDesignRequiresCompatibility.
+export const isLiquidGlassEnabled = () => hostLiquidGlassEnabled && Platform.OS === 'ios' && parseInt(String(Platform.Version), 10) >= 26;
+//# sourceMappingURL=liquid_glass.js.map

package/build/utils/liquid_glass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"liquid_glass.js","sourceRoot":"","sources":["../../src/utils/liquid_glass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AAEvC,IAAI,sBAAsB,GAAG,KAAK,CAAA;AAElC,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,OAAgB,EAAE,EAAE;IAC3D,sBAAsB,GAAG,OAAO,CAAA;AAClC,CAAC,CAAA;AAED,2EAA2E;AAC3E,iEAAiE;AACjE,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CACvC,sBAAsB,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAA","sourcesContent":["import { Platform } from 'react-native'\n\nlet hostLiquidGlassEnabled = false\n\nexport const setLiquidGlassCapability = (enabled: boolean) => {\n  hostLiquidGlassEnabled = enabled\n}\n\n// The host flag is required because JS cannot detect a binary built with a\n// pre-iOS-26 SDK or opted out via UIDesignRequiresCompatibility.\nexport const isLiquidGlassEnabled = () =>\n  hostLiquidGlassEnabled && Platform.OS === 'ios' && parseInt(String(Platform.Version), 10) >= 26\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.42.3-qa-staging.1",
+  "version": "3.42.3-qa-staging.3",
   "description": "",
   "main": "build/index.js",
   "react-native": "./src/index.tsx",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "3.42.3-qa-staging.1",
+    "@planningcenter/emoji-keyboard": "3.42.3-qa-staging.3",
     "lodash-inflection": "^1.5.0",
     "react-compiler-runtime": "^1.0.0"
   },
@@ -72,5 +72,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "48ede676640452ac44550983b226a93e9ec697dc"
+  "gitHead": "b1cd8076ea900ce230b4c652b2175ce0f59d9f97"
 }

package/src/__tests__/hooks/use_direct_messages_eligible.test.tsx

@@ -0,0 +1,77 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ChatContext, ChatContextValue } from '../../contexts/chat_context'
+import { ApiClient, useApiClient } from '../../hooks/use_api_client'
+import { currentPersonQueryKey } from '../../hooks/use_current_person'
+import { useDirectMessagesEligible } from '../../hooks/use_direct_messages_eligible'
+import { Session } from '../../utils'
+
+jest.mock('../../hooks/use_api_client')
+
+const mockedUseApiClient = useApiClient as jest.MockedFunction<typeof useApiClient>
+
+let get: jest.Mock
+
+const session = new Session({ token: { access_token: 'a-real-token' } })
+
+const renderUseDirectMessagesEligible = (queryClient = buildTestQueryClient()) => {
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <ChatContext.Provider value={{ session } as unknown as ChatContextValue}>
+        {children}
+      </ChatContext.Provider>
+    </QueryClientProvider>
+  )
+
+  return { ...renderHook(() => useDirectMessagesEligible(), { wrapper }), queryClient }
+}
+
+const flushMicrotasks = () =>
+  act(async () => {
+    await new Promise(resolve => setTimeout(resolve, 0))
+  })
+
+beforeEach(() => {
+  get = jest.fn().mockResolvedValue({ data: { id: 1, directMessagesEligible: true } })
+  mockedUseApiClient.mockReturnValue({ chat: { get } } as unknown as ApiClient)
+})
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('useDirectMessagesEligible', () => {
+  it('returns true once the person is fetched as eligible', async () => {
+    get.mockResolvedValue({
+      data: { id: 1, directMessagesEligible: true, directMessagesDisabled: true },
+    })
+
+    const { result } = renderUseDirectMessagesEligible()
+
+    await waitFor(() => expect(result.current).toBe(true))
+  })
+
+  it('returns false when the attribute is absent from the response', async () => {
+    get.mockResolvedValue({ data: { id: 1 } })
+
+    const { result } = renderUseDirectMessagesEligible()
+
+    await waitFor(() => expect(get).toHaveBeenCalled())
+    await flushMicrotasks()
+
+    expect(result.current).toBe(false)
+  })
+
+  it('reads the same /me cache entry as useCurrentPerson', () => {
+    const queryClient = buildTestQueryClient()
+    queryClient.setQueryData(currentPersonQueryKey, {
+      data: { id: 1, directMessagesEligible: true },
+    })
+
+    const { result } = renderUseDirectMessagesEligible(queryClient)
+
+    expect(result.current).toBe(true)
+  })
+})

package/src/__tests__/utils/liquid_glass.ts

@@ -0,0 +1,40 @@
+import { Platform } from 'react-native'
+import { isLiquidGlassEnabled, setLiquidGlassCapability } from '../../utils/liquid_glass'
+
+const mockPlatform = (OS: 'ios' | 'android', Version: string | number) => {
+  Object.defineProperty(Platform, 'OS', { value: OS, configurable: true })
+  Object.defineProperty(Platform, 'Version', { value: Version, configurable: true })
+}
+
+describe('isLiquidGlassEnabled', () => {
+  afterEach(() => {
+    setLiquidGlassCapability(false)
+  })
+
+  it('is false until the host enables it', () => {
+    mockPlatform('ios', '26.0')
+
+    expect(isLiquidGlassEnabled()).toBe(false)
+  })
+
+  it('is true when the host enables it on iOS 26 or later', () => {
+    mockPlatform('ios', '26.0')
+    setLiquidGlassCapability(true)
+
+    expect(isLiquidGlassEnabled()).toBe(true)
+  })
+
+  it('is false below iOS 26 even when the host enables it', () => {
+    mockPlatform('ios', '18.5')
+    setLiquidGlassCapability(true)
+
+    expect(isLiquidGlassEnabled()).toBe(false)
+  })
+
+  it('is false on android even when the host enables it', () => {
+    mockPlatform('android', 36)
+    setLiquidGlassCapability(true)
+
+    expect(isLiquidGlassEnabled()).toBe(false)
+  })
+})

package/src/components/display/platform_modal_header_buttons.tsx

@@ -1,9 +1,19 @@
-import { HeaderButton } from '@react-navigation/elements'
-import type { NativeStackHeaderRightProps } from '@react-navigation/native-stack'
+import { HeaderBackButton, HeaderButton, PlatformPressable } from '@react-navigation/elements'
+import { useNavigation } from '@react-navigation/native'
+import type {
+  NativeStackHeaderItemProps,
+  NativeStackNavigationOptions,
+} from '@react-navigation/native-stack'
+import { useLayoutEffect } from 'react'
 import { ColorValue, Platform, StyleSheet } from 'react-native'
-import { useTheme } from '../../hooks'
-import { Icon } from './icon'
+import LinearGradient from 'react-native-linear-gradient'
+import { useFontScale, useTheme } from '../../hooks'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
+import { isLiquidGlassEnabled } from '../../utils/liquid_glass'
+import { tokens } from '../../vendor/tapestry/tokens'
+import { Icon, type IconString } from './icon'
 import { TextButton } from './text_button'
+import { getColorKey, useGradientColorMap } from './utils/button_colors'
 
 interface HeaderTextButtonProps {
   onPress: () => void
@@ -63,19 +73,250 @@ export const HeaderDismissButton = ({
   })
 }
 
-interface HeaderDoneButtonProps extends NativeStackHeaderRightProps {
-  navigation: { goBack: () => void; getState: () => any }
+const createTextHeaderRight =
+  ({ onPress, title, disabled }: HeaderTextButtonProps) =>
+  (props: NativeStackHeaderItemProps) => (
+    <HeaderTextButton {...props} onPress={onPress} title={title} disabled={disabled} />
+  )
+
+export type OptionsDecorator = (
+  options: NativeStackNavigationOptions
+) => NativeStackNavigationOptions
+
+export const composeOptions = (
+  base: NativeStackNavigationOptions,
+  ...decorators: OptionsDecorator[]
+): NativeStackNavigationOptions => decorators.reduce((options, decorate) => decorate(options), base)
+
+interface TextButtonDecoratorProps {
+  text: string
+  onPress: () => void
+  disabled?: boolean
+}
+
+// Native bar items pick up liquid glass on iOS 26; hosts on an older
+// react-navigation ignore the unstable option and keep using the
+// headerRight/headerLeft fallbacks, as does Android.
+export const withRightText =
+  ({ text, onPress, disabled }: TextButtonDecoratorProps): OptionsDecorator =>
+  options => ({
+    ...options,
+    headerRight: createTextHeaderRight({ onPress, title: text, disabled }),
+    unstable_headerRightItems: () => [{ type: 'button' as const, label: text, onPress, disabled }],
+  })
+
+const HEADER_ICON_SIZE = 17
+const HEADER_FILL_ICON_SIZE = 16
+const HEADER_FILL_PADDING = 14
+const HEADER_BAR_INSET = 16
+const HEADER_SLOT_GAP = 12
+
+const headerFillSize = (fontScale: number) => {
+  const icon = HEADER_FILL_ICON_SIZE * fontScale
+
+  return { icon, circle: icon + HEADER_FILL_PADDING * 2 }
+}
+
+// Liquid glass icons don't communicate
+export const useHeaderSlotReserve = (): number => {
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })
+
+  return HEADER_BAR_INSET + headerFillSize(fontScale).circle + HEADER_SLOT_GAP
+}
+
+const HEADER_FALLBACK_HIT_SLOP = 14
+
+const iconStyles = StyleSheet.create({
+  disabled: {
+    opacity: 0.4,
+  },
+  fallbackButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+  },
+  fillCircle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+export interface HeaderIconProps {
+  icon: IconString
+  accessibilityLabel: string
+  onPress: () => void
+  disabled?: boolean
+  variant?: 'plain' | 'fill'
+}
+
+const HeaderIcon = ({
+  icon,
+  disabled,
+  variant,
+}: Pick<HeaderIconProps, 'icon' | 'disabled' | 'variant'>) => {
+  const { colors } = useTheme()
+  const gradients = useGradientColorMap()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })
+
+  if (variant !== 'fill') return <Icon name={icon} size={HEADER_ICON_SIZE} />
+
+  const { icon: iconSize, circle: circleSize } = headerFillSize(fontScale)
+
+  return (
+    <LinearGradient
+      start={{ x: 0.1, y: 0.1 }}
+      end={{ x: 0.9, y: 0.9 }}
+      colors={gradients[getColorKey({ disabled: Boolean(disabled), appearance: 'interaction' })]}
+      style={[
+        iconStyles.fillCircle,
+        { borderRadius: circleSize, height: circleSize, width: circleSize },
+      ]}
+    >
+      <Icon
+        name={icon}
+        size={iconSize}
+        color={disabled ? colors.iconColorDefaultDisabled : tokens.colorNeutral100White}
+      />
+    </LinearGradient>
+  )
 }
 
-export const HeaderDoneButton = ({ navigation, ...props }: HeaderDoneButtonProps) => {
-  const state = navigation.getState()
-  const isFirstScreen = state.index === 0
+// Native bar items take SF Symbols, images, or any element, so both paths
+// render the same icon: iOS 26 puts this one in the glass circle, and the
+// element below covers Android and older iOS.
+const createHeaderIconItem = ({
+  icon,
+  accessibilityLabel,
+  onPress,
+  disabled,
+  variant,
+}: HeaderIconProps) => ({
+  type: 'custom' as const,
+  // The gradient circle replaces the glass one rather than sitting on it.
+  hidesSharedBackground: variant === 'fill',
+  element: (
+    <PlatformPressable
+      onPress={onPress}
+      disabled={disabled}
+      hitSlop={12}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={disabled && variant !== 'fill' && iconStyles.disabled}
+    >
+      <HeaderIcon icon={icon} disabled={disabled} variant={variant} />
+    </PlatformPressable>
+  ),
+})
+
+const createHeaderIconElement =
+  ({ icon, accessibilityLabel, onPress, disabled, variant }: HeaderIconProps) =>
+  () => (
+    <PlatformPressable
+      onPress={onPress}
+      disabled={disabled}
+      hitSlop={HEADER_FALLBACK_HIT_SLOP}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={[iconStyles.fallbackButton, disabled && variant !== 'fill' && iconStyles.disabled]}
+    >
+      <HeaderIcon icon={icon} disabled={disabled} variant={variant} />
+    </PlatformPressable>
+  )
+
+export const withRightIcon =
+  (props: HeaderIconProps): OptionsDecorator =>
+  options => ({
+    ...options,
+    headerRight: createHeaderIconElement(props),
+    unstable_headerRightItems: () => [createHeaderIconItem(props)],
+  })
+
+export const withLeftIcon =
+  (props: HeaderIconProps): OptionsDecorator =>
+  options => ({
+    ...options,
+    headerLeft: createHeaderIconElement(props),
+    unstable_headerLeftItems: () => [createHeaderIconItem(props)],
+  })
+
+export const withRightClose = ({ onPress }: { onPress: () => void }) =>
+  withRightIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress })
+
+export const withLeftClose = ({ onPress }: { onPress: () => void }) =>
+  withLeftIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress })
+
+export const withRightDone = ({ onPress }: { onPress: () => void }) =>
+  withRightIcon({ icon: 'general.check', accessibilityLabel: 'Done', onPress })
+
+// The default back icon reserves trailing space for a label that
+// displayMode="minimal" never shows; a custom image skips it so the glass
+// capsule hugs the glyph.
+const renderGlassBackImage = ({ tintColor }: { tintColor: string }) => (
+  <Icon name="general.leftChevron" size={18} color={tintColor} />
+)
+
+// The iOS 26 glass capsule manages its own insets — negative margins clip
+// the button against the capsule edge.
+export const createMinimalHeaderBackButton =
+  ({ onPress }: { onPress: () => void }) =>
+  (props: NativeStackHeaderItemProps) => (
+    <HeaderBackButton
+      style={
+        isLiquidGlassEnabled()
+          ? undefined
+          : {
+              marginLeft: Platform.select({ ios: -8, default: -3 }),
+              marginRight: Platform.select({ ios: 0, default: 30 }),
+            }
+      }
+      backImage={isLiquidGlassEnabled() ? renderGlassBackImage : undefined}
+      displayMode="minimal"
+      onPress={onPress}
+      {...props}
+    />
+  )
+
+// Under glass the native minimal back button suffices; pre-26 needs the
+// custom button and its layout nudges.
+export const withMinimalBack =
+  ({ onPress }: { onPress: () => void }): OptionsDecorator =>
+  options => ({
+    ...options,
+    ...(isLiquidGlassEnabled() ? {} : { headerLeft: createMinimalHeaderBackButton({ onPress }) }),
+  })
+
+// An icon or a title, never both — passing both is a compile error rather
+// than a question of which one wins.
+type UseHeaderRightOptions = {
+  onPress: () => void
+  disabled?: boolean
+  enabled?: boolean
+} & (
+  | (HeaderIconProps & { title?: never })
+  | { title: string; icon?: never; accessibilityLabel?: never; variant?: never }
+)
+
+// For screens whose header button depends on live state (form validity,
+// mutation callbacks). Static buttons belong in the navigator options.
+export const useHeaderRight = (options: UseHeaderRightOptions) => {
+  const navigation = useNavigation()
+  const { onPress, disabled, enabled = true } = options
+  const icon = options.icon
+  const label = options.icon !== undefined ? options.accessibilityLabel : options.title
+  const variant = options.variant
+
+  useLayoutEffect(() => {
+    if (!enabled) {
+      navigation.setOptions({ headerRight: () => null, unstable_headerRightItems: undefined })
+      return
+    }
 
-  if (!isFirstScreen) {
-    return null
-  }
+    const decorate = icon
+      ? withRightIcon({ icon, accessibilityLabel: label, onPress, disabled, variant })
+      : withRightText({ text: label, onPress, disabled })
 
-  return <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+    navigation.setOptions(decorate({}))
+  }, [disabled, enabled, icon, label, navigation, onPress, variant])
 }
 
 const useStyles = () => {

package/src/contexts/chat_context.tsx

@@ -7,6 +7,7 @@ import { ApiResource, DeepPartial } from '../types'
 import { FailedResponse } from '../types'
 import { ProductAnalyticsConfig } from '../types/product_analytics'
 import { Client, ENV, OauthType, PartialToken, Session, Uri } from '../utils'
+import { setLiquidGlassCapability } from '../utils/liquid_glass'
 import { ChatTheme, defaultTheme, DefaultTheme } from '../utils/theme'
 
 export interface ChatProviderProps {
@@ -18,6 +19,7 @@ export interface ChatProviderProps {
   tokenType?: OauthType
   theme: CreateChatThemeProps
   edgeToEdge?: boolean
+  liquidGlassEnabled?: boolean
 }
 
 export interface ChatContextValue extends Omit<ChatProviderProps, 'theme'> {
@@ -36,6 +38,7 @@ export const ChatContext = createContext<ChatContextValue>({
   theme: defaultTheme('light'),
   token: undefined,
   edgeToEdge: true,
+  liquidGlassEnabled: false,
   productAnalyticsConfig: undefined,
 })
 
@@ -48,7 +51,11 @@ export function ChatProvider({ children, value }: { children: any; value: ChatPr
     giphyApiKey,
     tokenType,
     edgeToEdge = true,
+    liquidGlassEnabled = false,
   } = value
+  // Set during render, not in an effect — navigator options factories read it
+  // before effects would run.
+  setLiquidGlassCapability(liquidGlassEnabled)
   const theme = useCreateChatTheme(value.theme || {})
   const session = useMemo(
     () => new Session({ token, env, type: tokenType }),
@@ -59,6 +66,7 @@ export function ChatProvider({ children, value }: { children: any; value: ChatPr
   const contextValue: ChatContextValue = {
     ...value,
     edgeToEdge,
+    liquidGlassEnabled,
     env,
     giphyApiKey,
     onAgeDisqualification,

package/src/hooks/index.ts

@@ -8,7 +8,7 @@ export * from './use_chat_permissions'
 export * from './use_create_android_ripple_color'
 export * from './use_current_person'
 export * from './use_deleting_ids'
-export * from './use_direct_messages_enabled'
+export * from './use_direct_messages_eligible'
 export * from './use_font_scale'
 export * from './use_has_direct_messages'
 export * from './use_groups_groups'

package/src/hooks/use_current_person.ts

@@ -17,6 +17,7 @@ export const currentPersonRequestArgs = {
         'pco_chat_enabled',
         'age_qualification_status',
         'direct_messages_disabled',
+        'direct_messages_eligible',
         'under_18',
       ],
     },

package/src/hooks/use_direct_messages_eligible.ts

@@ -0,0 +1,11 @@
+import { CurrentPersonResource } from '../types'
+import { useApiGet } from './use_api'
+import { currentPersonRequestArgs } from './use_current_person'
+
+export const useDirectMessagesEligible = (): boolean => {
+  const { data: person, isFetched } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs)
+
+  if (!isFetched) return false
+
+  return person?.directMessagesEligible ?? false
+}

package/src/hooks/use_features.ts

@@ -43,7 +43,6 @@ export const availableFeatures = {
   custom_conversation_avatars: 'ROLLOUT_custom_conversation_avatars',
   conversation_safety_lock: 'ROLLOUT_conversation_safety_lock',
   video_moderation: 'ROLLOUT_MOBILE_video_moderation',
-  direct_messages_eap: 'ROLLOUT_direct_messages_eap',
   dm_search_clear_fix: 'ROLLOUT_MOBILE_dm_search_clear_fix',
 } as const satisfies Record<string, `ROLLOUT_${string}`>