@planningcenter/chat-react-native 3.16.0-rc.4 → 3.16.0-rc.6

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,
+    },
+  })
+}

package/src/screens/age_check/components/age_check_select_birthdate_modal.tsx

@@ -0,0 +1,143 @@
+import React from 'react'
+import { Modal, Platform, StyleSheet, View } from 'react-native'
+import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker'
+import FormSheet from '../../../components/primitive/form_sheet'
+import { Text } from '../../../components/display/text'
+import { useTheme } from '../../../hooks'
+
+export type AgeCheckSelectBirthdateProps = {
+  onChange: (date: Date) => void
+  onDismiss?: () => void
+  onRequestClose: () => void
+  onSubmit: (date: Date) => void
+  value?: Date | null
+  visible?: boolean
+}
+
+export function AgeCheckSelectBirthdateModal(props: AgeCheckSelectBirthdateProps) {
+  if (Platform.OS === 'ios') return <IOSBirthdateModal {...props} />
+  if (Platform.OS === 'android') return <AndroidBirthdatePicker {...props} />
+
+  return <Text>Birthdate selection is not supported on this platform.</Text>
+}
+
+function IOSBirthdateModal({
+  onChange,
+  onDismiss,
+  onRequestClose,
+  onSubmit,
+  value,
+  visible,
+}: AgeCheckSelectBirthdateProps) {
+  const styles = useStyles()
+  const today = React.useMemo(() => new Date(), [])
+  const selected = value || today
+
+  const handleChange = (_event: DateTimePickerEvent, date?: Date) => {
+    if (date) onChange(date)
+  }
+
+  const handleSave = () => {
+    onSubmit(selected)
+    onRequestClose()
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={onRequestClose}
+      onDismiss={onDismiss}
+    >
+      <FormSheet.Root style={styles.formSheet} contentStyle={styles.formSheetContent}>
+        <FormSheet.Header>
+          <FormSheet.HeaderTitle>Your birthdate</FormSheet.HeaderTitle>
+          <FormSheet.HeaderActions>
+            <FormSheet.HeaderTextButton onPress={onRequestClose}>Cancel</FormSheet.HeaderTextButton>
+            <FormSheet.HeaderButton title="Save" onPress={handleSave} />
+          </FormSheet.HeaderActions>
+        </FormSheet.Header>
+        <View style={styles.content}>
+          <View style={styles.card}>
+            <Text nativeID="birthdateLabel" variant="tertiary" style={styles.label}>
+              Birthdate
+            </Text>
+            <View style={styles.pickerContainer}>
+              <DateTimePicker
+                accessibilityLabelledBy="birthdateLabel"
+                testID="age-check-date-picker"
+                mode="date"
+                display="spinner"
+                value={selected}
+                maximumDate={today}
+                onChange={handleChange}
+              />
+            </View>
+          </View>
+        </View>
+      </FormSheet.Root>
+    </Modal>
+  )
+}
+
+function AndroidBirthdatePicker({
+  onRequestClose,
+  onSubmit,
+  value,
+  visible,
+}: AgeCheckSelectBirthdateProps) {
+  if (!visible) return null
+
+  const today = new Date()
+  const selected = value || today
+
+  const handleAndroidDateChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
+    if (event.type === 'set' && selectedDate) {
+      onSubmit(selectedDate)
+    }
+    onRequestClose()
+  }
+
+  return (
+    <DateTimePicker
+      testID="age-check-date-picker-android"
+      mode="date"
+      display="spinner"
+      value={selected}
+      maximumDate={today}
+      onChange={handleAndroidDateChange}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    formSheet: {
+      backgroundColor: colors.surfaceColor080,
+    },
+    formSheetContent: {
+      flex: 1,
+    },
+    content: {
+      flex: 1,
+      backgroundColor: colors.surfaceColor080,
+      padding: 16,
+      justifyContent: 'flex-start',
+    },
+    card: {
+      backgroundColor: colors.surfaceColor100,
+      borderRadius: 8,
+      padding: 16,
+    },
+    label: {
+      marginBottom: 8,
+      textTransform: 'uppercase',
+    },
+    pickerContainer: {
+      backgroundColor: colors.surfaceColor100,
+      borderRadius: 8,
+    },
+  })
+}

package/src/screens/age_check/index.ts

@@ -0,0 +1,2 @@
+export * from './age_check_required_screen'
+export * from './age_check_underage_screen'

package/src/screens/age_check/screen_props.ts

@@ -0,0 +1,3 @@
+export type AgeCheckContactInfo = { contactEmail?: string }
+
+export type AgeCheckParams = Record<string, AgeCheckContactInfo>

package/src/types/resources/index.ts

@@ -6,3 +6,4 @@ export * from './person'
 export * from './groups'
 export * from './app_grant'
 export * from './services'
+export * from './organization'

package/src/types/resources/organization.ts

@@ -0,0 +1,6 @@
+import { ResourceObject } from '../api_primitives'
+
+export interface OrganizationResource extends ResourceObject {
+  type: 'Organization'
+  contactEmail?: string
+}

package/src/types/resources/person.ts

@@ -1,5 +1,14 @@
 import { ResourceObject } from '../api_primitives'
 
+export const AgeQualificationStatus = {
+  QUALIFIED: 'qualified',
+  DISQUALIFIED: 'disqualified',
+  UNKNOWN: 'unknown',
+} as const
+
+export type AgeQualificationStatus =
+  (typeof AgeQualificationStatus)[keyof typeof AgeQualificationStatus]
+
 export interface PersonResource extends ResourceObject {
   id: number
   type: 'Person'
@@ -11,4 +20,5 @@ export interface CurrentPersonResource extends PersonResource {
   canChat: boolean
   unreadCount: number
   pcoChatEnabled: boolean
+  ageQualificationStatus?: AgeQualificationStatus
 }