@planningcenter/chat-react-native 3.16.0-rc.5 → 3.16.0

package/build/types/resources/organization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"organization.js","sourceRoot":"","sources":["../../../src/types/resources/organization.ts"],"names":[],"mappings":"","sourcesContent":["import { ResourceObject } from '../api_primitives'\n\nexport interface OrganizationResource extends ResourceObject {\n  type: 'Organization'\n  contactEmail?: string\n}\n"]}

package/build/types/resources/person.d.ts

@@ -1,4 +1,10 @@
 import { ResourceObject } from '../api_primitives';
+export declare const AgeQualificationStatus: {
+    readonly QUALIFIED: "qualified";
+    readonly DISQUALIFIED: "disqualified";
+    readonly UNKNOWN: "unknown";
+};
+export type AgeQualificationStatus = (typeof AgeQualificationStatus)[keyof typeof AgeQualificationStatus];
 export interface PersonResource extends ResourceObject {
     id: number;
     type: 'Person';
@@ -9,5 +15,6 @@ export interface CurrentPersonResource extends PersonResource {
     canChat: boolean;
     unreadCount: number;
     pcoChatEnabled: boolean;
+    ageQualificationStatus?: AgeQualificationStatus;
 }
 //# sourceMappingURL=person.d.ts.map

package/build/types/resources/person.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../src/types/resources/person.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,OAAO,CAAA;CACxB"}
+{"version":3,"file":"person.d.ts","sourceRoot":"","sources":["../../../src/types/resources/person.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,eAAO,MAAM,sBAAsB;;;;CAIzB,CAAA;AAEV,MAAM,MAAM,sBAAsB,GAChC,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,OAAO,sBAAsB,CAAC,CAAA;AAEtE,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAC3D,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,OAAO,CAAA;IACvB,sBAAsB,CAAC,EAAE,sBAAsB,CAAA;CAChD"}

package/build/types/resources/person.js

@@ -1,2 +1,6 @@
-export {};
+export const AgeQualificationStatus = {
+    QUALIFIED: 'qualified',
+    DISQUALIFIED: 'disqualified',
+    UNKNOWN: 'unknown',
+};
 //# sourceMappingURL=person.js.map

package/build/types/resources/person.js.map

@@ -1 +1 @@
-{"version":3,"file":"person.js","sourceRoot":"","sources":["../../../src/types/resources/person.ts"],"names":[],"mappings":"","sourcesContent":["import { ResourceObject } from '../api_primitives'\n\nexport interface PersonResource extends ResourceObject {\n  id: number\n  type: 'Person'\n  name: string\n  avatar: string\n}\n\nexport interface CurrentPersonResource extends PersonResource {\n  canChat: boolean\n  unreadCount: number\n  pcoChatEnabled: boolean\n}\n"]}
+{"version":3,"file":"person.js","sourceRoot":"","sources":["../../../src/types/resources/person.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,SAAS,EAAE,WAAW;IACtB,YAAY,EAAE,cAAc;IAC5B,OAAO,EAAE,SAAS;CACV,CAAA","sourcesContent":["import { ResourceObject } from '../api_primitives'\n\nexport const AgeQualificationStatus = {\n  QUALIFIED: 'qualified',\n  DISQUALIFIED: 'disqualified',\n  UNKNOWN: 'unknown',\n} as const\n\nexport type AgeQualificationStatus =\n  (typeof AgeQualificationStatus)[keyof typeof AgeQualificationStatus]\n\nexport interface PersonResource extends ResourceObject {\n  id: number\n  type: 'Person'\n  name: string\n  avatar: string\n}\n\nexport interface CurrentPersonResource extends PersonResource {\n  canChat: boolean\n  unreadCount: number\n  pcoChatEnabled: boolean\n  ageQualificationStatus?: AgeQualificationStatus\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.16.0-rc.5",
+  "version": "3.16.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -23,6 +23,7 @@
     "@planningcenter/datetime-fmt": ">=1.0.0",
     "@planningcenter/icons": "^15.24.0",
     "@planningcenter/jolt-client": ">=2.0.0",
+    "@react-native-community/datetimepicker": ">=7.6.2",
     "@react-navigation/elements": "*",
     "@react-navigation/native": ">=7.0.0",
     "@react-navigation/native-stack": ">=7.0.0",
@@ -55,5 +56,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "fbd2ce7be47ac372eb6bcd876c7db571681c7219"
+  "gitHead": "50e57c8326463d1645cc4ca23f32b130df7ba22b"
 }

package/src/contexts/chat_context.tsx

@@ -4,10 +4,12 @@ import { ColorSchemeName, useColorScheme } from 'react-native'
 import { DeepPartial } from '../types'
 import { ENV, OauthType, PartialToken, ResponseError, Session } from '../utils'
 import { ChatTheme, defaultTheme, DefaultTheme } from '../utils/theme'
+import { AgeCheckContactInfo } from '../screens/age_check/screen_props'
 
 export interface ChatProviderProps {
   env?: ENV
   giphyApiKey?: string
+  onAgeDisqualification?: (params: AgeCheckContactInfo) => void
   onUnauthorizedResponse: (_response: ResponseError) => void
   token?: PartialToken
   tokenType?: OauthType
@@ -18,11 +20,13 @@ export interface ChatProviderProps {
 export interface ChatContextValue extends Omit<ChatProviderProps, 'theme'> {
   session: Session
   theme: ChatTheme
+  onAgeDisqualification: (params: AgeCheckContactInfo) => void
 }
 
 export const ChatContext = createContext<ChatContextValue>({
   env: undefined,
   giphyApiKey: undefined,
+  onAgeDisqualification: (_params: AgeCheckContactInfo) => {},
   onUnauthorizedResponse: () => {},
   session: new Session(),
   theme: defaultTheme('light'),
@@ -31,7 +35,15 @@ export const ChatContext = createContext<ChatContextValue>({
 })
 
 export function ChatProvider({ children, value }: { children: any; value: ChatProviderProps }) {
-  const { env, token, onUnauthorizedResponse, giphyApiKey, tokenType, edgeToEdge = true } = value
+  const {
+    env,
+    token,
+    onAgeDisqualification = (_params: AgeCheckContactInfo) => {},
+    onUnauthorizedResponse,
+    giphyApiKey,
+    tokenType,
+    edgeToEdge = true,
+  } = value
   const theme = useCreateChatTheme(value.theme || {})
   const session = useMemo(
     () => new Session({ token, env, type: tokenType }),
@@ -42,6 +54,7 @@ export function ChatProvider({ children, value }: { children: any; value: ChatPr
     edgeToEdge,
     env,
     giphyApiKey,
+    onAgeDisqualification,
     onUnauthorizedResponse,
     session,
     theme,

package/src/hooks/index.ts

@@ -14,4 +14,7 @@ export * from './use_api_client'
 export * from './use_message_reaction_toggle'
 export * from './use_interaction_ghost_color'
 export * from './use_at_font_scale_breakpoint'
+export * from './use_qualified_by_age'
 export * from './use_scalable_number_of_lines'
+export * from './use_submit_age_check'
+export * from './use_organization'

package/src/hooks/use_current_person.ts

@@ -7,7 +7,15 @@ export const currentPersonRequestArgs = {
   url: '/me',
   data: {
     fields: {
-      Person: ['id', 'name', 'avatar', 'can_chat', 'unread_count', 'pco_chat_enabled'],
+      Person: [
+        'id',
+        'name',
+        'avatar',
+        'can_chat',
+        'unread_count',
+        'pco_chat_enabled',
+        'age_qualification_status',
+      ],
     },
   },
 }

package/src/hooks/use_organization.ts

@@ -0,0 +1,17 @@
+import { OrganizationResource } from '../types'
+import { useSuspenseGet } from './use_suspense_api'
+import { App } from './use_api_client'
+
+export const organizationRequestArgs = {
+  url: '/',
+  data: {
+    fields: {
+      Organization: ['contact_email'],
+    },
+  },
+  app: 'chat' as App,
+}
+
+export function useOrganization() {
+  return useSuspenseGet<OrganizationResource>(organizationRequestArgs)
+}

package/src/hooks/use_qualified_by_age.ts

@@ -0,0 +1,17 @@
+import { AgeQualificationStatus, CurrentPersonResource } from '../types'
+import { useApiGet } from './use_api'
+import { currentPersonRequestArgs } from './use_current_person'
+
+export const useQualifiedByAge = (): boolean => {
+  const { data: person, isFetched } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs)
+
+  if (!isFetched) {
+    return false
+  }
+
+  if (!person) {
+    return false
+  }
+
+  return person.ageQualificationStatus === AgeQualificationStatus.QUALIFIED
+}

package/src/hooks/use_submit_age_check.ts

@@ -0,0 +1,48 @@
+import { Alert } from 'react-native'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useApiClient } from './use_api_client'
+import { currentPersonQueryKey } from './use_current_person'
+import { ApiResource } from '../types/api_primitives'
+import { Haptic } from '../utils/native_adapters'
+
+interface AgeCheckResource {
+  type: 'AgeCheck'
+  id: string
+  stated_date: string
+  status: 'passed' | 'failed'
+}
+
+export function useSubmitAgeCheck() {
+  const apiClient = useApiClient()
+  const queryClient = useQueryClient()
+
+  const { mutateAsync: submitAgeCheck, ...mutation } = useMutation({
+    mutationKey: ['submitAgeCheck'],
+    mutationFn: (date: Date) =>
+      apiClient.people.post<ApiResource<AgeCheckResource>>({
+        url: '/me/age_checks',
+        data: {
+          fields: { AgeCheck: 'stated_date,status' },
+          data: {
+            type: 'AgeCheck',
+            attributes: {
+              stated_date: date.toISOString(),
+            },
+          },
+        },
+      }),
+    onSuccess: (response: ApiResource<AgeCheckResource>) => {
+      queryClient.invalidateQueries({ queryKey: currentPersonQueryKey })
+      if (response.data.status === 'passed') {
+        Haptic.notificationSuccess()
+        Alert.alert('Profile updated', `Your birthdate has been updated.`)
+      }
+    },
+    onError: () => {
+      Haptic.notificationError()
+      Alert.alert('Oops', `We were unable to update your birthdate. Please try again.`)
+    },
+  })
+
+  return { submitAgeCheck, ...mutation }
+}

package/src/index.tsx

@@ -4,6 +4,7 @@ export * from './contexts/chat_context'
 export * from './navigation'
 export { ScreenLayout } from './navigation/screenLayout'
 export * from './screens'
+export { AgeCheckUnderageScreen } from './screens/age_check/age_check_underage_screen' // TODO: add to barrel
 export * from './types'
 export { platformFontWeightBold, Session, TemporaryDefaultColorsType, Uri } from './utils'
 export * from './utils/client'

package/src/navigation/chat_access_gate.tsx

@@ -0,0 +1,60 @@
+import React, { PropsWithChildren, useEffect, useRef } from 'react'
+import { currentPersonRequestArgs } from '../hooks/use_current_person'
+import { AgeCheckRequiredScreen } from '../screens/age_check/age_check_required_screen'
+import { DefaultLoading } from '../components/page/loading'
+import { useApiGet, useOrganization } from '../hooks'
+import { AgeQualificationStatus, CurrentPersonResource } from '../types'
+import { useChatContext } from '../contexts/chat_context'
+import { AgeCheckUnderageScreen } from '../screens/age_check/age_check_underage_screen'
+
+export function ChatAccessGate({ children }: PropsWithChildren) {
+  const { data: person, isFetched } = useApiGet<CurrentPersonResource>(currentPersonRequestArgs)
+  const { data: organization } = useOrganization()
+
+  const ageQualificationStatus = person?.ageQualificationStatus
+  const contactEmail = organization?.contactEmail
+
+  useAgeDisqualification(ageQualificationStatus, contactEmail)
+
+  if (!isFetched) {
+    return <DefaultLoading />
+  }
+
+  if (!person) {
+    throw new Error('Current person not found')
+  }
+
+  if (ageQualificationStatus === AgeQualificationStatus.DISQUALIFIED) {
+    return <AgeCheckUnderageScreen contactEmail={contactEmail} />
+  }
+
+  if (ageQualificationStatus === AgeQualificationStatus.UNKNOWN) {
+    return <AgeCheckRequiredScreen />
+  }
+
+  return <>{children}</>
+}
+
+/**
+ * Helper hook that handles the age disqualification logic.
+ *
+ * If a host app provides an onAgeDisqualification callback, it will be called
+ * when a user is found to be disqualified by their age.
+ */
+function useAgeDisqualification(
+  ageQualificationStatus: CurrentPersonResource['ageQualificationStatus'],
+  contactEmail: string | undefined
+) {
+  const { onAgeDisqualification } = useChatContext()
+  const hasCalledCallbackRef = useRef(false)
+
+  useEffect(() => {
+    if (
+      ageQualificationStatus === AgeQualificationStatus.DISQUALIFIED &&
+      !hasCalledCallbackRef.current
+    ) {
+      hasCalledCallbackRef.current = true
+      onAgeDisqualification({ contactEmail: contactEmail || '' })
+    }
+  }, [ageQualificationStatus, onAgeDisqualification, contactEmail])
+}

package/src/navigation/index.tsx

@@ -45,9 +45,10 @@ import {
 } from '../screens/message_actions_screen'
 import { NotFound } from '../screens/not_found'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
+import { ScreenLayoutWithChatAccessGate } from './screenLayout'
 import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
 import { TeamConversationScreen } from '../screens/team_conversation_screen'
-import { ScreenLayout } from './screenLayout'
+import { useQualifiedByAge } from '../hooks'
 
 const HEADER_BACK_BUTTON_LAYOUT_RESET_STYLES = {
   marginLeft: Platform.select({ ios: -8, default: -3 }),
@@ -59,7 +60,7 @@ export const NewConversationStack = createNativeStackNavigator({
   screenOptions: {
     headerBackButtonDisplayMode: 'minimal',
   },
-  screenLayout: ScreenLayout,
+  screenLayout: ScreenLayoutWithChatAccessGate,
   screens: {
     ConversationSelectRecipients: {
       screen: ConversationSelectRecipientsScreen,
@@ -122,7 +123,7 @@ export const ChatStack = createNativeStackNavigator({
   screenOptions: {
     headerBackButtonDisplayMode: 'minimal',
   },
-  screenLayout: ScreenLayout,
+  screenLayout: ScreenLayoutWithChatAccessGate,
   screens: {
     Conversations: {
       screen: ConversationsScreen,
@@ -192,6 +193,7 @@ export const ChatStack = createNativeStackNavigator({
     },
     TeamConversation: {
       screen: TeamConversationScreen,
+      if: useQualifiedByAge,
       options: {
         title: 'Finding conversation...',
         animation: 'none',
@@ -210,6 +212,7 @@ export const ChatStack = createNativeStackNavigator({
     },
     New: {
       screen: NewConversationStack,
+      if: useQualifiedByAge,
       options: {
         headerShown: false,
         presentation: 'modal',

package/src/navigation/screenLayout.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ErrorBoundary from '../components/page/error_boundary'
 import { Suspense } from 'react'
 import { DefaultLoading } from '../components/page/loading'
+import { ChatAccessGate } from './chat_access_gate'
 
 export function ScreenLayout({ children }: { children: React.ReactElement }) {
   return (
@@ -10,3 +11,13 @@ export function ScreenLayout({ children }: { children: React.ReactElement }) {
     </ErrorBoundary>
   )
 }
+
+export function ScreenLayoutWithChatAccessGate({ children }: { children: React.ReactElement }) {
+  return (
+    <ScreenLayout>
+      <ChatAccessGate>
+        <Suspense fallback={<DefaultLoading />}>{children}</Suspense>
+      </ChatAccessGate>
+    </ScreenLayout>
+  )
+}

package/src/screens/age_check/age_check_required_screen.tsx

@@ -0,0 +1,197 @@
+import React, { useState } from 'react'
+import { date as formatDate } from '@planningcenter/datetime-fmt'
+import { StyleSheet, View } from 'react-native'
+import { Button } from '../../components/display/button'
+import { Text } from '../../components/display/text'
+import { Icon } from '../../components/display/icon'
+import { Avatar } from '../../components/display/avatar'
+import { Banner } from '../../components/display/banner'
+import { useCurrentPerson, useTheme, useSubmitAgeCheck } from '../../hooks'
+import { Heading } from '../../components'
+import { platformFontWeightBold } from '../../utils/styles'
+import { AgeCheckSelectBirthdateModal } from './components/age_check_select_birthdate_modal'
+
+function calculateAge(birthdate: Date) {
+  const today = new Date()
+  const age = today.getFullYear() - birthdate.getFullYear()
+  const hasHadBirthdayThisYear =
+    today.getMonth() > birthdate.getMonth() ||
+    (today.getMonth() === birthdate.getMonth() && today.getDate() >= birthdate.getDate())
+  return hasHadBirthdayThisYear ? age : age - 1
+}
+
+export function AgeCheckRequiredScreen() {
+  const person = useCurrentPerson()
+
+  const [birthdate, setBirthdate] = useState<Date | null>(null)
+  const [draftBirthdate, setDraftBirthdate] = useState<Date | null>(null)
+  const [isBirthdateModalOpen, setBirthdateModalOpen] = useState(false)
+  const { submitAgeCheck, isPending, isSuccess } = useSubmitAgeCheck()
+  const styles = useStyles()
+
+  const birthdateStamp = birthdate
+    ? formatDate(birthdate, { style: 'standard', year: true })
+    : 'Missing'
+
+  const age = birthdate ? calculateAge(birthdate) : null
+
+  const confirmationText =
+    birthdate !== null
+      ? `Your birthdate is ${birthdateStamp} and you are ${age} years old. Is that correct?`
+      : ''
+
+  const openBirthdateModal = () => {
+    setDraftBirthdate(birthdate || new Date())
+    setBirthdateModalOpen(true)
+  }
+
+  const closeBirthdateModal = () => {
+    setBirthdateModalOpen(false)
+  }
+
+  const handleSubmitAgeConfirmation = () => {
+    if (!birthdate) return
+    submitAgeCheck(birthdate)
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.heading}>
+          <Icon name="general.exclamationTriangle" size={20} style={styles.warningIcon} />
+          <Heading variant="h2">Your age is required to use chat</Heading>
+        </View>
+        <Text>To help protect those who may be underage, we need to verify your birthdate.</Text>
+      </View>
+      <View style={styles.cards}>
+        <View style={styles.card}>
+          <Heading variant="h3">My profile</Heading>
+          <View style={styles.profileContent}>
+            <Avatar sourceUri={person.avatar || ''} size="lg" showFallback={!person.avatar} />
+            <View style={styles.personInfo}>
+              <Text style={styles.name} numberOfLines={1}>
+                {person.name}
+              </Text>
+              <View style={styles.birthdateInfo}>
+                <Text variant="tertiary" style={styles.birthdateLabel}>
+                  Birthdate:
+                </Text>
+                <Text variant="tertiary">{birthdateStamp}</Text>
+              </View>
+            </View>
+            {birthdate && (
+              <Button
+                title="Edit"
+                accessibilityHint="Choose a new birthdate for your profile"
+                size="sm"
+                variant="outline"
+                style={styles.editButton}
+                onPress={openBirthdateModal}
+              />
+            )}
+          </View>
+          {!birthdate && (
+            <Button
+              title="Add birthdate"
+              accessibilityHint="Choose a birthdate for your profile"
+              size="lg"
+              style={styles.primaryButton}
+              onPress={openBirthdateModal}
+            />
+          )}
+        </View>
+        {birthdate && (
+          <View style={styles.card}>
+            <Heading variant="h3">Age confirmation</Heading>
+            {age !== null && age < 13 ? (
+              <Banner appearance="warning" description={confirmationText} />
+            ) : (
+              <Text>{confirmationText}</Text>
+            )}
+            <Button
+              title="Yes, update my profile"
+              size="lg"
+              style={styles.primaryButton}
+              onPress={handleSubmitAgeConfirmation}
+              disabled={isPending || isSuccess}
+            />
+          </View>
+        )}
+      </View>
+      <Text variant="tertiary">
+        Your birthdate will be added to your profile, but it is only visible to church
+        administrators. It will not be shared with other church members, unless you give permission.
+      </Text>
+
+      <AgeCheckSelectBirthdateModal
+        onChange={setDraftBirthdate}
+        onDismiss={closeBirthdateModal}
+        onRequestClose={closeBirthdateModal}
+        onSubmit={setBirthdate}
+        value={draftBirthdate || new Date()}
+        visible={isBirthdateModalOpen}
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.surfaceColor080,
+      padding: 16,
+      gap: 16,
+    },
+    header: {
+      gap: 8,
+    },
+    heading: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    warningIcon: {
+      color: colors.statusErrorIcon,
+    },
+    card: {
+      backgroundColor: colors.surfaceColor100,
+      borderRadius: 8,
+      padding: 16,
+      gap: 8,
+    },
+    cards: {
+      gap: 8,
+    },
+    profileContent: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    personInfo: {
+      flex: 1,
+    },
+    primaryButton: {
+      alignSelf: 'center',
+      marginTop: 8,
+    },
+    name: {
+      fontWeight: platformFontWeightBold,
+    },
+    birthdateLabel: {
+      fontWeight: platformFontWeightBold,
+    },
+    birthdateInfo: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    editButton: {
+      alignSelf: 'flex-end',
+    },
+    formSheetContent: {
+      flex: 1,
+    },
+  })
+}

package/src/screens/age_check/age_check_underage_screen.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { Linking, StyleSheet, View } from 'react-native'
+import { Heading } from '../../components'
+import { Icon, Text, TextInlineButton } from '../../components/display'
+import { useTheme } from '../../hooks'
+import { useRoute, RouteProp } from '@react-navigation/native'
+import type { AgeCheckParams } from './screen_props'
+
+export interface AgeCheckUnderageScreenProps {
+  contactEmail?: string
+}
+
+export function AgeCheckUnderageScreen({ contactEmail }: AgeCheckUnderageScreenProps = {}) {
+  const styles = useStyles()
+  const route = useRoute<RouteProp<AgeCheckParams, 'UnderagePerson'>>()
+
+  const email = contactEmail ?? route?.params?.contactEmail
+
+  const openChurchAdminHelp = () => {
+    if (!email) return
+    Linking.openURL(`mailto:${email}`)
+  }
+
+  const openTerms = () => {
+    Linking.openURL('https://www.planningcenter.com/terms')
+  }
+
+  return (
+    <View style={styles.container}>
+      <Icon name="general.outlinedTextMessage" size={32} style={styles.icon} />
+
+      <View style={styles.content}>
+        <Heading variant="h3" style={styles.baseText}>
+          Your age does not meet the minimum safety requirements to use chat.
+        </Heading>
+        <Text variant="tertiary" style={styles.baseText}>
+          If you submitted the wrong birthdate by accident,{` `}
+          {email ? (
+            <TextInlineButton
+              onPress={openChurchAdminHelp}
+              accessibilityRole="link"
+              accessibilityHint="Opens email client to contact your church administrator"
+              style={styles.linkText}
+            >
+              please contact your church administrator
+            </TextInlineButton>
+          ) : (
+            <>please contact your church administrator</>
+          )}
+          {` `}
+          to update your profile.
+        </Text>
+        <Text variant="tertiary" style={styles.baseText}>
+          For more information, view our{` `}
+          <TextInlineButton
+            onPress={openTerms}
+            accessibilityRole="link"
+            accessibilityHint="Opens terms of service in browser"
+            style={styles.linkText}
+          >
+            terms of service
+          </TextInlineButton>
+          .
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 16,
+      padding: 16,
+    },
+    icon: {
+      color: colors.iconColorDefaultDisabled,
+    },
+    content: {
+      alignItems: 'center',
+      gap: 8,
+      maxWidth: 250,
+    },
+    baseText: {
+      textAlign: 'center',
+      color: colors.textColorDefaultSecondary,
+    },
+    linkText: {
+      fontSize: 14,
+    },
+  })
+}