@planningcenter/chat-react-native 3.42.3-qa-staging.2 → 3.42.3-qa-staging.4

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/hooks/use_conversation.ts

@@ -32,6 +32,7 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'direct_message',
         'disabled',
         'disabled_reason',
+        'disabled_message',
         'member_ability',
         'muted',
         'replies_disabled',

package/src/hooks/use_conversation_jolt_events.ts

@@ -26,8 +26,13 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
   const handleUpdatedConversation = useCallback(
     (e: JoltConversationEvent) => {
-      const { last_message_idempotent_key, last_message_author_id, disabled, disabled_reason } =
-        e.data.data
+      const {
+        last_message_idempotent_key,
+        last_message_author_id,
+        disabled,
+        disabled_reason,
+        disabled_message,
+      } = e.data.data
 
       if (last_message_idempotent_key && last_message_author_id === currentPersonId) {
         completeMessageCreationConversationTracking({
@@ -38,7 +43,15 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
       queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
         if (!prev?.data) return prev
-        return { ...prev, data: { ...prev.data, disabled, disabledReason: disabled_reason } }
+        return {
+          ...prev,
+          data: {
+            ...prev.data,
+            disabled,
+            disabledReason: disabled_reason,
+            disabledMessage: disabled_message,
+          },
+        }
       })
 
       queryClient.invalidateQueries({ queryKey })