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

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
 }