@planningcenter/chat-react-native 3.19.0 → 3.19.1-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/screens/age_check/age_check_required_screen.d.ts.map +1 -1
- package/build/screens/age_check/age_check_required_screen.js +44 -38
- package/build/screens/age_check/age_check_required_screen.js.map +1 -1
- package/build/screens/age_check/age_check_underage_screen.js +7 -4
- package/build/screens/age_check/age_check_underage_screen.js.map +1 -1
- package/package.json +2 -2
- package/src/screens/age_check/age_check_required_screen.tsx +68 -62
- package/src/screens/age_check/age_check_underage_screen.tsx +7 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"age_check_required_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/age_check/age_check_required_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"age_check_required_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/age_check/age_check_required_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAuBvC,wBAAgB,sBAAsB,sBAoHrC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useState } from 'react';
|
|
2
2
|
import { date as formatDate } from '@planningcenter/datetime-fmt';
|
|
3
|
-
import { StyleSheet, View } from 'react-native';
|
|
3
|
+
import { StyleSheet, View, ScrollView } from 'react-native';
|
|
4
4
|
import { Button } from '../../components/display/button';
|
|
5
5
|
import { Text } from '../../components/display/text';
|
|
6
6
|
import { Icon } from '../../components/display/icon';
|
|
@@ -12,9 +12,10 @@ import { platformFontWeightBold } from '../../utils/styles';
|
|
|
12
12
|
import { AgeCheckSelectBirthdateModal } from './components/age_check_select_birthdate_modal';
|
|
13
13
|
function calculateAge(birthdate) {
|
|
14
14
|
const today = new Date();
|
|
15
|
-
const age = today.
|
|
16
|
-
const hasHadBirthdayThisYear = today.
|
|
17
|
-
(today.
|
|
15
|
+
const age = today.getUTCFullYear() - birthdate.getUTCFullYear();
|
|
16
|
+
const hasHadBirthdayThisYear = today.getUTCMonth() > birthdate.getUTCMonth() ||
|
|
17
|
+
(today.getUTCMonth() === birthdate.getUTCMonth() &&
|
|
18
|
+
today.getUTCDate() >= birthdate.getUTCDate());
|
|
18
19
|
return hasHadBirthdayThisYear ? age : age - 1;
|
|
19
20
|
}
|
|
20
21
|
export function AgeCheckRequiredScreen() {
|
|
@@ -43,54 +44,59 @@ export function AgeCheckRequiredScreen() {
|
|
|
43
44
|
return;
|
|
44
45
|
submitAgeCheck(birthdate);
|
|
45
46
|
};
|
|
46
|
-
return (
|
|
47
|
-
<
|
|
48
|
-
<View style={styles.
|
|
49
|
-
<
|
|
50
|
-
|
|
47
|
+
return (<>
|
|
48
|
+
<ScrollView style={styles.scrollView} contentContainerStyle={styles.container}>
|
|
49
|
+
<View style={styles.header}>
|
|
50
|
+
<View style={styles.heading}>
|
|
51
|
+
<Icon name="general.exclamationTriangle" size={20} style={styles.warningIcon}/>
|
|
52
|
+
<Heading variant="h2">Your age is required to use chat</Heading>
|
|
53
|
+
</View>
|
|
54
|
+
<Text>To help protect those who may be underage, we need to verify your birthdate.</Text>
|
|
51
55
|
</View>
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<Text style={styles.name} numberOfLines={1}>
|
|
61
|
-
{person.name}
|
|
62
|
-
</Text>
|
|
63
|
-
<View style={styles.birthdateInfo}>
|
|
64
|
-
<Text variant="tertiary" style={styles.birthdateLabel}>
|
|
65
|
-
Birthdate:
|
|
56
|
+
<View style={styles.cards}>
|
|
57
|
+
<View style={styles.card}>
|
|
58
|
+
<Heading variant="h3">My profile</Heading>
|
|
59
|
+
<View style={styles.profileContent}>
|
|
60
|
+
<Avatar sourceUri={person.avatar || ''} size="lg" showFallback={!person.avatar}/>
|
|
61
|
+
<View style={styles.personInfo}>
|
|
62
|
+
<Text style={styles.name} numberOfLines={1}>
|
|
63
|
+
{person.name}
|
|
66
64
|
</Text>
|
|
67
|
-
<
|
|
65
|
+
<View style={styles.birthdateInfo}>
|
|
66
|
+
<Text variant="tertiary" style={styles.birthdateLabel}>
|
|
67
|
+
Birthdate:
|
|
68
|
+
</Text>
|
|
69
|
+
<Text variant="tertiary">{birthdateStamp}</Text>
|
|
70
|
+
</View>
|
|
68
71
|
</View>
|
|
72
|
+
{birthdate && (<Button title="Edit" accessibilityHint="Choose a new birthdate for your profile" size="sm" variant="outline" style={styles.editButton} onPress={openBirthdateModal}/>)}
|
|
69
73
|
</View>
|
|
70
|
-
{birthdate && (<Button title="
|
|
74
|
+
{!birthdate && (<Button title="Add birthdate" accessibilityHint="Choose a birthdate for your profile" size="lg" style={styles.primaryButton} onPress={openBirthdateModal}/>)}
|
|
71
75
|
</View>
|
|
72
|
-
{
|
|
76
|
+
{birthdate && (<View style={styles.card}>
|
|
77
|
+
<Heading variant="h3">Age confirmation</Heading>
|
|
78
|
+
{age !== null && age < 13 ? (<Banner appearance="warning" description={confirmationText}/>) : (<Text>{confirmationText}</Text>)}
|
|
79
|
+
<Button title="Yes, update my profile" size="lg" style={styles.primaryButton} onPress={handleSubmitAgeConfirmation} disabled={isPending || isSuccess}/>
|
|
80
|
+
</View>)}
|
|
73
81
|
</View>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
</
|
|
80
|
-
<Text variant="tertiary">
|
|
81
|
-
Your birthdate will be added to your profile, but it is only visible to church
|
|
82
|
-
administrators. It will not be shared with other church members, unless you give permission.
|
|
83
|
-
</Text>
|
|
82
|
+
<Text variant="tertiary">
|
|
83
|
+
Your birthdate will be added to your profile, but it is only visible to church
|
|
84
|
+
administrators. It will not be shared with other church members, unless you give
|
|
85
|
+
permission.
|
|
86
|
+
</Text>
|
|
87
|
+
</ScrollView>
|
|
84
88
|
|
|
85
89
|
<AgeCheckSelectBirthdateModal onChange={setDraftBirthdate} onDismiss={closeBirthdateModal} onRequestClose={closeBirthdateModal} onSubmit={setBirthdate} value={draftBirthdate || new Date()} visible={isBirthdateModalOpen}/>
|
|
86
|
-
|
|
90
|
+
</>);
|
|
87
91
|
}
|
|
88
92
|
const useStyles = () => {
|
|
89
93
|
const { colors } = useTheme();
|
|
90
94
|
return StyleSheet.create({
|
|
91
|
-
|
|
95
|
+
scrollView: {
|
|
92
96
|
flex: 1,
|
|
93
97
|
backgroundColor: colors.surfaceColor080,
|
|
98
|
+
},
|
|
99
|
+
container: {
|
|
94
100
|
padding: 16,
|
|
95
101
|
gap: 16,
|
|
96
102
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"age_check_required_screen.js","sourceRoot":"","sources":["../../../src/screens/age_check/age_check_required_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react'\nimport { date as formatDate } from '@planningcenter/datetime-fmt'\nimport { StyleSheet, View } from 'react-native'\nimport { Button } from '../../components/display/button'\nimport { Text } from '../../components/display/text'\nimport { Icon } from '../../components/display/icon'\nimport { Avatar } from '../../components/display/avatar'\nimport { Banner } from '../../components/display/banner'\nimport { useCurrentPerson, useTheme, useSubmitAgeCheck } from '../../hooks'\nimport { Heading } from '../../components'\nimport { platformFontWeightBold } from '../../utils/styles'\nimport { AgeCheckSelectBirthdateModal } from './components/age_check_select_birthdate_modal'\n\nfunction calculateAge(birthdate: Date) {\n const today = new Date()\n const age = today.getFullYear() - birthdate.getFullYear()\n const hasHadBirthdayThisYear =\n today.getMonth() > birthdate.getMonth() ||\n (today.getMonth() === birthdate.getMonth() && today.getDate() >= birthdate.getDate())\n return hasHadBirthdayThisYear ? age : age - 1\n}\n\nexport function AgeCheckRequiredScreen() {\n const person = useCurrentPerson()\n\n const [birthdate, setBirthdate] = useState<Date | null>(null)\n const [draftBirthdate, setDraftBirthdate] = useState<Date | null>(null)\n const [isBirthdateModalOpen, setBirthdateModalOpen] = useState(false)\n const { submitAgeCheck, isPending, isSuccess } = useSubmitAgeCheck()\n const styles = useStyles()\n\n const birthdateStamp = birthdate\n ? formatDate(birthdate, { style: 'standard', year: true, timeZone: 'UTC' })\n : 'Missing'\n\n const age = birthdate ? calculateAge(birthdate) : null\n\n const confirmationText =\n birthdate !== null\n ? `Your birthdate is ${birthdateStamp} and you are ${age} years old. Is that correct?`\n : ''\n\n const openBirthdateModal = () => {\n setDraftBirthdate(birthdate || new Date())\n setBirthdateModalOpen(true)\n }\n\n const closeBirthdateModal = () => {\n setBirthdateModalOpen(false)\n }\n\n const handleSubmitAgeConfirmation = () => {\n if (!birthdate) return\n submitAgeCheck(birthdate)\n }\n\n return (\n <View style={styles.container}>\n <View style={styles.header}>\n <View style={styles.heading}>\n <Icon name=\"general.exclamationTriangle\" size={20} style={styles.warningIcon} />\n <Heading variant=\"h2\">Your age is required to use chat</Heading>\n </View>\n <Text>To help protect those who may be underage, we need to verify your birthdate.</Text>\n </View>\n <View style={styles.cards}>\n <View style={styles.card}>\n <Heading variant=\"h3\">My profile</Heading>\n <View style={styles.profileContent}>\n <Avatar sourceUri={person.avatar || ''} size=\"lg\" showFallback={!person.avatar} />\n <View style={styles.personInfo}>\n <Text style={styles.name} numberOfLines={1}>\n {person.name}\n </Text>\n <View style={styles.birthdateInfo}>\n <Text variant=\"tertiary\" style={styles.birthdateLabel}>\n Birthdate:\n </Text>\n <Text variant=\"tertiary\">{birthdateStamp}</Text>\n </View>\n </View>\n {birthdate && (\n <Button\n title=\"Edit\"\n accessibilityHint=\"Choose a new birthdate for your profile\"\n size=\"sm\"\n variant=\"outline\"\n style={styles.editButton}\n onPress={openBirthdateModal}\n />\n )}\n </View>\n {!birthdate && (\n <Button\n title=\"Add birthdate\"\n accessibilityHint=\"Choose a birthdate for your profile\"\n size=\"lg\"\n style={styles.primaryButton}\n onPress={openBirthdateModal}\n />\n )}\n </View>\n {birthdate && (\n <View style={styles.card}>\n <Heading variant=\"h3\">Age confirmation</Heading>\n {age !== null && age < 13 ? (\n <Banner appearance=\"warning\" description={confirmationText} />\n ) : (\n <Text>{confirmationText}</Text>\n )}\n <Button\n title=\"Yes, update my profile\"\n size=\"lg\"\n style={styles.primaryButton}\n onPress={handleSubmitAgeConfirmation}\n disabled={isPending || isSuccess}\n />\n </View>\n )}\n </View>\n <Text variant=\"tertiary\">\n Your birthdate will be added to your profile, but it is only visible to church\n administrators. It will not be shared with other church members, unless you give permission.\n </Text>\n\n <AgeCheckSelectBirthdateModal\n onChange={setDraftBirthdate}\n onDismiss={closeBirthdateModal}\n onRequestClose={closeBirthdateModal}\n onSubmit={setBirthdate}\n value={draftBirthdate || new Date()}\n visible={isBirthdateModalOpen}\n />\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: colors.surfaceColor080,\n padding: 16,\n gap: 16,\n },\n header: {\n gap: 8,\n },\n heading: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n },\n warningIcon: {\n color: colors.statusErrorIcon,\n },\n card: {\n backgroundColor: colors.surfaceColor100,\n borderRadius: 8,\n padding: 16,\n gap: 8,\n },\n cards: {\n gap: 8,\n },\n profileContent: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n },\n personInfo: {\n flex: 1,\n },\n primaryButton: {\n alignSelf: 'center',\n marginTop: 8,\n },\n name: {\n fontWeight: platformFontWeightBold,\n },\n birthdateLabel: {\n fontWeight: platformFontWeightBold,\n },\n birthdateInfo: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n editButton: {\n alignSelf: 'flex-end',\n },\n formSheetContent: {\n flex: 1,\n },\n })\n}\n"]}
|
|
1
|
+
{"version":3,"file":"age_check_required_screen.js","sourceRoot":"","sources":["../../../src/screens/age_check/age_check_required_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react'\nimport { date as formatDate } from '@planningcenter/datetime-fmt'\nimport { StyleSheet, View, ScrollView } from 'react-native'\nimport { Button } from '../../components/display/button'\nimport { Text } from '../../components/display/text'\nimport { Icon } from '../../components/display/icon'\nimport { Avatar } from '../../components/display/avatar'\nimport { Banner } from '../../components/display/banner'\nimport { useCurrentPerson, useTheme, useSubmitAgeCheck } from '../../hooks'\nimport { Heading } from '../../components'\nimport { platformFontWeightBold } from '../../utils/styles'\nimport { AgeCheckSelectBirthdateModal } from './components/age_check_select_birthdate_modal'\n\nfunction calculateAge(birthdate: Date) {\n const today = new Date()\n const age = today.getUTCFullYear() - birthdate.getUTCFullYear()\n const hasHadBirthdayThisYear =\n today.getUTCMonth() > birthdate.getUTCMonth() ||\n (today.getUTCMonth() === birthdate.getUTCMonth() &&\n today.getUTCDate() >= birthdate.getUTCDate())\n return hasHadBirthdayThisYear ? age : age - 1\n}\n\nexport function AgeCheckRequiredScreen() {\n const person = useCurrentPerson()\n\n const [birthdate, setBirthdate] = useState<Date | null>(null)\n const [draftBirthdate, setDraftBirthdate] = useState<Date | null>(null)\n const [isBirthdateModalOpen, setBirthdateModalOpen] = useState(false)\n const { submitAgeCheck, isPending, isSuccess } = useSubmitAgeCheck()\n const styles = useStyles()\n\n const birthdateStamp = birthdate\n ? formatDate(birthdate, { style: 'standard', year: true, timeZone: 'UTC' })\n : 'Missing'\n\n const age = birthdate ? calculateAge(birthdate) : null\n\n const confirmationText =\n birthdate !== null\n ? `Your birthdate is ${birthdateStamp} and you are ${age} years old. Is that correct?`\n : ''\n\n const openBirthdateModal = () => {\n setDraftBirthdate(birthdate || new Date())\n setBirthdateModalOpen(true)\n }\n\n const closeBirthdateModal = () => {\n setBirthdateModalOpen(false)\n }\n\n const handleSubmitAgeConfirmation = () => {\n if (!birthdate) return\n submitAgeCheck(birthdate)\n }\n\n return (\n <>\n <ScrollView style={styles.scrollView} contentContainerStyle={styles.container}>\n <View style={styles.header}>\n <View style={styles.heading}>\n <Icon name=\"general.exclamationTriangle\" size={20} style={styles.warningIcon} />\n <Heading variant=\"h2\">Your age is required to use chat</Heading>\n </View>\n <Text>To help protect those who may be underage, we need to verify your birthdate.</Text>\n </View>\n <View style={styles.cards}>\n <View style={styles.card}>\n <Heading variant=\"h3\">My profile</Heading>\n <View style={styles.profileContent}>\n <Avatar sourceUri={person.avatar || ''} size=\"lg\" showFallback={!person.avatar} />\n <View style={styles.personInfo}>\n <Text style={styles.name} numberOfLines={1}>\n {person.name}\n </Text>\n <View style={styles.birthdateInfo}>\n <Text variant=\"tertiary\" style={styles.birthdateLabel}>\n Birthdate:\n </Text>\n <Text variant=\"tertiary\">{birthdateStamp}</Text>\n </View>\n </View>\n {birthdate && (\n <Button\n title=\"Edit\"\n accessibilityHint=\"Choose a new birthdate for your profile\"\n size=\"sm\"\n variant=\"outline\"\n style={styles.editButton}\n onPress={openBirthdateModal}\n />\n )}\n </View>\n {!birthdate && (\n <Button\n title=\"Add birthdate\"\n accessibilityHint=\"Choose a birthdate for your profile\"\n size=\"lg\"\n style={styles.primaryButton}\n onPress={openBirthdateModal}\n />\n )}\n </View>\n {birthdate && (\n <View style={styles.card}>\n <Heading variant=\"h3\">Age confirmation</Heading>\n {age !== null && age < 13 ? (\n <Banner appearance=\"warning\" description={confirmationText} />\n ) : (\n <Text>{confirmationText}</Text>\n )}\n <Button\n title=\"Yes, update my profile\"\n size=\"lg\"\n style={styles.primaryButton}\n onPress={handleSubmitAgeConfirmation}\n disabled={isPending || isSuccess}\n />\n </View>\n )}\n </View>\n <Text variant=\"tertiary\">\n Your birthdate will be added to your profile, but it is only visible to church\n administrators. It will not be shared with other church members, unless you give\n permission.\n </Text>\n </ScrollView>\n\n <AgeCheckSelectBirthdateModal\n onChange={setDraftBirthdate}\n onDismiss={closeBirthdateModal}\n onRequestClose={closeBirthdateModal}\n onSubmit={setBirthdate}\n value={draftBirthdate || new Date()}\n visible={isBirthdateModalOpen}\n />\n </>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n scrollView: {\n flex: 1,\n backgroundColor: colors.surfaceColor080,\n },\n container: {\n padding: 16,\n gap: 16,\n },\n header: {\n gap: 8,\n },\n heading: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n },\n warningIcon: {\n color: colors.statusErrorIcon,\n },\n card: {\n backgroundColor: colors.surfaceColor100,\n borderRadius: 8,\n padding: 16,\n gap: 8,\n },\n cards: {\n gap: 8,\n },\n profileContent: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 8,\n },\n personInfo: {\n flex: 1,\n },\n primaryButton: {\n alignSelf: 'center',\n marginTop: 8,\n },\n name: {\n fontWeight: platformFontWeightBold,\n },\n birthdateLabel: {\n fontWeight: platformFontWeightBold,\n },\n birthdateInfo: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n editButton: {\n alignSelf: 'flex-end',\n },\n formSheetContent: {\n flex: 1,\n },\n })\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Linking, StyleSheet, View } from 'react-native';
|
|
2
|
+
import { Linking, StyleSheet, View, ScrollView } from 'react-native';
|
|
3
3
|
import { Heading } from '../../components';
|
|
4
4
|
import { Icon, Text, TextInlineButton } from '../../components/display';
|
|
5
5
|
import { useTheme } from '../../hooks';
|
|
@@ -16,7 +16,7 @@ export function AgeCheckUnderageScreen({ contactEmail } = {}) {
|
|
|
16
16
|
const openTerms = () => {
|
|
17
17
|
Linking.openURL('https://www.planningcenter.com/terms');
|
|
18
18
|
};
|
|
19
|
-
return (<
|
|
19
|
+
return (<ScrollView style={styles.scrollView} contentContainerStyle={styles.container}>
|
|
20
20
|
<Icon name="general.outlinedTextMessage" size={32} style={styles.icon}/>
|
|
21
21
|
|
|
22
22
|
<View style={styles.content}>
|
|
@@ -39,17 +39,20 @@ export function AgeCheckUnderageScreen({ contactEmail } = {}) {
|
|
|
39
39
|
.
|
|
40
40
|
</Text>
|
|
41
41
|
</View>
|
|
42
|
-
</
|
|
42
|
+
</ScrollView>);
|
|
43
43
|
}
|
|
44
44
|
const useStyles = () => {
|
|
45
45
|
const { colors } = useTheme();
|
|
46
46
|
return StyleSheet.create({
|
|
47
|
-
|
|
47
|
+
scrollView: {
|
|
48
48
|
flex: 1,
|
|
49
|
+
},
|
|
50
|
+
container: {
|
|
49
51
|
alignItems: 'center',
|
|
50
52
|
justifyContent: 'center',
|
|
51
53
|
gap: 16,
|
|
52
54
|
padding: 16,
|
|
55
|
+
minHeight: '100%',
|
|
53
56
|
},
|
|
54
57
|
icon: {
|
|
55
58
|
color: colors.iconColorDefaultDisabled,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"age_check_underage_screen.js","sourceRoot":"","sources":["../../../src/screens/age_check/age_check_underage_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;
|
|
1
|
+
{"version":3,"file":"age_check_underage_screen.js","sourceRoot":"","sources":["../../../src/screens/age_check/age_check_underage_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAa,MAAM,0BAA0B,CAAA;AAO9D,MAAM,UAAU,sBAAsB,CAAC,EAAE,YAAY,KAAkC,EAAE;IACvF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,KAAK,GAAG,QAAQ,EAA+C,CAAA;IAErE,MAAM,KAAK,GAAG,YAAY,IAAI,KAAK,EAAE,MAAM,EAAE,YAAY,CAAA;IAEzD,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,CAAC,KAAK;YAAE,OAAM;QAClB,OAAO,CAAC,OAAO,CAAC,UAAU,KAAK,EAAE,CAAC,CAAA;IACpC,CAAC,CAAA;IAED,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,OAAO,CAAC,OAAO,CAAC,sCAAsC,CAAC,CAAA;IACzD,CAAC,CAAA;IAED,OAAO,CACL,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5E;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAEtE;;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;QAAA,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAC3C;;QACF,EAAE,OAAO,CACT;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAC9C;2DAAiD,CAAC,GAAG,CACrD;UAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAC7B,iBAAiB,CAAC,MAAM,CACxB,iBAAiB,CAAC,yDAAyD,CAC3E,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAEvB;;YACF,EAAE,gBAAgB,CAAC,CACpB,CAAC,CAAC,CAAC,CACF,EAAE,wCAAwC,GAAG,CAC9C,CACD;UAAA,CAAC,GAAG,CACJ;;QACF,EAAE,IAAI,CACN;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAC9C;wCAA8B,CAAC,GAAG,CAClC;UAAA,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,SAAS,CAAC,CACnB,iBAAiB,CAAC,MAAM,CACxB,iBAAiB,CAAC,mCAAmC,CACrD,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAEvB;;UACF,EAAE,gBAAgB,CAClB;;QACF,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,UAAU,CAAC,CACd,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE;YACV,IAAI,EAAE,CAAC;SACR;QACD,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,GAAG,EAAE,EAAE;YACP,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,MAAM;SAClB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM,CAAC,wBAAwB;SACvC;QACD,OAAO,EAAE;YACP,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,QAAQ,EAAE,GAAG;SACd;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,QAAQ;YACnB,KAAK,EAAE,MAAM,CAAC,yBAAyB;SACxC;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE,EAAE;SACb;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Linking, StyleSheet, View, ScrollView } from 'react-native'\nimport { Heading } from '../../components'\nimport { Icon, Text, TextInlineButton } from '../../components/display'\nimport { useTheme } from '../../hooks'\nimport { useRoute, RouteProp } from '@react-navigation/native'\nimport type { AgeCheckParams } from './screen_props'\n\nexport interface AgeCheckUnderageScreenProps {\n contactEmail?: string\n}\n\nexport function AgeCheckUnderageScreen({ contactEmail }: AgeCheckUnderageScreenProps = {}) {\n const styles = useStyles()\n const route = useRoute<RouteProp<AgeCheckParams, 'UnderagePerson'>>()\n\n const email = contactEmail ?? route?.params?.contactEmail\n\n const openChurchAdminHelp = () => {\n if (!email) return\n Linking.openURL(`mailto:${email}`)\n }\n\n const openTerms = () => {\n Linking.openURL('https://www.planningcenter.com/terms')\n }\n\n return (\n <ScrollView style={styles.scrollView} contentContainerStyle={styles.container}>\n <Icon name=\"general.outlinedTextMessage\" size={32} style={styles.icon} />\n\n <View style={styles.content}>\n <Heading variant=\"h3\" style={styles.baseText}>\n Your age does not meet the minimum safety requirements to use chat.\n </Heading>\n <Text variant=\"tertiary\" style={styles.baseText}>\n If you submitted the wrong birthdate by accident,{` `}\n {email ? (\n <TextInlineButton\n onPress={openChurchAdminHelp}\n accessibilityRole=\"link\"\n accessibilityHint=\"Opens email client to contact your church administrator\"\n style={styles.linkText}\n >\n please contact your church administrator\n </TextInlineButton>\n ) : (\n <>please contact your church administrator</>\n )}\n {` `}\n to update your profile.\n </Text>\n <Text variant=\"tertiary\" style={styles.baseText}>\n For more information, view our{` `}\n <TextInlineButton\n onPress={openTerms}\n accessibilityRole=\"link\"\n accessibilityHint=\"Opens terms of service in browser\"\n style={styles.linkText}\n >\n terms of service\n </TextInlineButton>\n .\n </Text>\n </View>\n </ScrollView>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n scrollView: {\n flex: 1,\n },\n container: {\n alignItems: 'center',\n justifyContent: 'center',\n gap: 16,\n padding: 16,\n minHeight: '100%',\n },\n icon: {\n color: colors.iconColorDefaultDisabled,\n },\n content: {\n alignItems: 'center',\n gap: 8,\n maxWidth: 250,\n },\n baseText: {\n textAlign: 'center',\n color: colors.textColorDefaultSecondary,\n },\n linkText: {\n fontSize: 14,\n },\n })\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@planningcenter/chat-react-native",
|
|
3
|
-
"version": "3.19.
|
|
3
|
+
"version": "3.19.1-rc.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"types": "build/index.d.ts",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react-native-url-polyfill": "^2.0.0",
|
|
59
59
|
"typescript": "<5.6.0"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "ab58ab03c57913f764c3734f7b7a3ecf907d8279"
|
|
62
62
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useState } from 'react'
|
|
2
2
|
import { date as formatDate } from '@planningcenter/datetime-fmt'
|
|
3
|
-
import { StyleSheet, View } from 'react-native'
|
|
3
|
+
import { StyleSheet, View, ScrollView } from 'react-native'
|
|
4
4
|
import { Button } from '../../components/display/button'
|
|
5
5
|
import { Text } from '../../components/display/text'
|
|
6
6
|
import { Icon } from '../../components/display/icon'
|
|
@@ -13,10 +13,11 @@ import { AgeCheckSelectBirthdateModal } from './components/age_check_select_birt
|
|
|
13
13
|
|
|
14
14
|
function calculateAge(birthdate: Date) {
|
|
15
15
|
const today = new Date()
|
|
16
|
-
const age = today.
|
|
16
|
+
const age = today.getUTCFullYear() - birthdate.getUTCFullYear()
|
|
17
17
|
const hasHadBirthdayThisYear =
|
|
18
|
-
today.
|
|
19
|
-
(today.
|
|
18
|
+
today.getUTCMonth() > birthdate.getUTCMonth() ||
|
|
19
|
+
(today.getUTCMonth() === birthdate.getUTCMonth() &&
|
|
20
|
+
today.getUTCDate() >= birthdate.getUTCDate())
|
|
20
21
|
return hasHadBirthdayThisYear ? age : age - 1
|
|
21
22
|
}
|
|
22
23
|
|
|
@@ -55,73 +56,76 @@ export function AgeCheckRequiredScreen() {
|
|
|
55
56
|
}
|
|
56
57
|
|
|
57
58
|
return (
|
|
58
|
-
|
|
59
|
-
<
|
|
60
|
-
<View style={styles.
|
|
61
|
-
<
|
|
62
|
-
|
|
59
|
+
<>
|
|
60
|
+
<ScrollView style={styles.scrollView} contentContainerStyle={styles.container}>
|
|
61
|
+
<View style={styles.header}>
|
|
62
|
+
<View style={styles.heading}>
|
|
63
|
+
<Icon name="general.exclamationTriangle" size={20} style={styles.warningIcon} />
|
|
64
|
+
<Heading variant="h2">Your age is required to use chat</Heading>
|
|
65
|
+
</View>
|
|
66
|
+
<Text>To help protect those who may be underage, we need to verify your birthdate.</Text>
|
|
63
67
|
</View>
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<Text style={styles.name} numberOfLines={1}>
|
|
73
|
-
{person.name}
|
|
74
|
-
</Text>
|
|
75
|
-
<View style={styles.birthdateInfo}>
|
|
76
|
-
<Text variant="tertiary" style={styles.birthdateLabel}>
|
|
77
|
-
Birthdate:
|
|
68
|
+
<View style={styles.cards}>
|
|
69
|
+
<View style={styles.card}>
|
|
70
|
+
<Heading variant="h3">My profile</Heading>
|
|
71
|
+
<View style={styles.profileContent}>
|
|
72
|
+
<Avatar sourceUri={person.avatar || ''} size="lg" showFallback={!person.avatar} />
|
|
73
|
+
<View style={styles.personInfo}>
|
|
74
|
+
<Text style={styles.name} numberOfLines={1}>
|
|
75
|
+
{person.name}
|
|
78
76
|
</Text>
|
|
79
|
-
<
|
|
77
|
+
<View style={styles.birthdateInfo}>
|
|
78
|
+
<Text variant="tertiary" style={styles.birthdateLabel}>
|
|
79
|
+
Birthdate:
|
|
80
|
+
</Text>
|
|
81
|
+
<Text variant="tertiary">{birthdateStamp}</Text>
|
|
82
|
+
</View>
|
|
80
83
|
</View>
|
|
84
|
+
{birthdate && (
|
|
85
|
+
<Button
|
|
86
|
+
title="Edit"
|
|
87
|
+
accessibilityHint="Choose a new birthdate for your profile"
|
|
88
|
+
size="sm"
|
|
89
|
+
variant="outline"
|
|
90
|
+
style={styles.editButton}
|
|
91
|
+
onPress={openBirthdateModal}
|
|
92
|
+
/>
|
|
93
|
+
)}
|
|
81
94
|
</View>
|
|
82
|
-
{birthdate && (
|
|
95
|
+
{!birthdate && (
|
|
83
96
|
<Button
|
|
84
|
-
title="
|
|
85
|
-
accessibilityHint="Choose a
|
|
86
|
-
size="
|
|
87
|
-
|
|
88
|
-
style={styles.editButton}
|
|
97
|
+
title="Add birthdate"
|
|
98
|
+
accessibilityHint="Choose a birthdate for your profile"
|
|
99
|
+
size="lg"
|
|
100
|
+
style={styles.primaryButton}
|
|
89
101
|
onPress={openBirthdateModal}
|
|
90
102
|
/>
|
|
91
103
|
)}
|
|
92
104
|
</View>
|
|
93
|
-
{
|
|
94
|
-
<
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
105
|
+
{birthdate && (
|
|
106
|
+
<View style={styles.card}>
|
|
107
|
+
<Heading variant="h3">Age confirmation</Heading>
|
|
108
|
+
{age !== null && age < 13 ? (
|
|
109
|
+
<Banner appearance="warning" description={confirmationText} />
|
|
110
|
+
) : (
|
|
111
|
+
<Text>{confirmationText}</Text>
|
|
112
|
+
)}
|
|
113
|
+
<Button
|
|
114
|
+
title="Yes, update my profile"
|
|
115
|
+
size="lg"
|
|
116
|
+
style={styles.primaryButton}
|
|
117
|
+
onPress={handleSubmitAgeConfirmation}
|
|
118
|
+
disabled={isPending || isSuccess}
|
|
119
|
+
/>
|
|
120
|
+
</View>
|
|
101
121
|
)}
|
|
102
122
|
</View>
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
<Text>{confirmationText}</Text>
|
|
110
|
-
)}
|
|
111
|
-
<Button
|
|
112
|
-
title="Yes, update my profile"
|
|
113
|
-
size="lg"
|
|
114
|
-
style={styles.primaryButton}
|
|
115
|
-
onPress={handleSubmitAgeConfirmation}
|
|
116
|
-
disabled={isPending || isSuccess}
|
|
117
|
-
/>
|
|
118
|
-
</View>
|
|
119
|
-
)}
|
|
120
|
-
</View>
|
|
121
|
-
<Text variant="tertiary">
|
|
122
|
-
Your birthdate will be added to your profile, but it is only visible to church
|
|
123
|
-
administrators. It will not be shared with other church members, unless you give permission.
|
|
124
|
-
</Text>
|
|
123
|
+
<Text variant="tertiary">
|
|
124
|
+
Your birthdate will be added to your profile, but it is only visible to church
|
|
125
|
+
administrators. It will not be shared with other church members, unless you give
|
|
126
|
+
permission.
|
|
127
|
+
</Text>
|
|
128
|
+
</ScrollView>
|
|
125
129
|
|
|
126
130
|
<AgeCheckSelectBirthdateModal
|
|
127
131
|
onChange={setDraftBirthdate}
|
|
@@ -131,16 +135,18 @@ export function AgeCheckRequiredScreen() {
|
|
|
131
135
|
value={draftBirthdate || new Date()}
|
|
132
136
|
visible={isBirthdateModalOpen}
|
|
133
137
|
/>
|
|
134
|
-
|
|
138
|
+
</>
|
|
135
139
|
)
|
|
136
140
|
}
|
|
137
141
|
|
|
138
142
|
const useStyles = () => {
|
|
139
143
|
const { colors } = useTheme()
|
|
140
144
|
return StyleSheet.create({
|
|
141
|
-
|
|
145
|
+
scrollView: {
|
|
142
146
|
flex: 1,
|
|
143
147
|
backgroundColor: colors.surfaceColor080,
|
|
148
|
+
},
|
|
149
|
+
container: {
|
|
144
150
|
padding: 16,
|
|
145
151
|
gap: 16,
|
|
146
152
|
},
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
|
-
import { Linking, StyleSheet, View } from 'react-native'
|
|
2
|
+
import { Linking, StyleSheet, View, ScrollView } from 'react-native'
|
|
3
3
|
import { Heading } from '../../components'
|
|
4
4
|
import { Icon, Text, TextInlineButton } from '../../components/display'
|
|
5
5
|
import { useTheme } from '../../hooks'
|
|
@@ -26,7 +26,7 @@ export function AgeCheckUnderageScreen({ contactEmail }: AgeCheckUnderageScreenP
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
return (
|
|
29
|
-
<
|
|
29
|
+
<ScrollView style={styles.scrollView} contentContainerStyle={styles.container}>
|
|
30
30
|
<Icon name="general.outlinedTextMessage" size={32} style={styles.icon} />
|
|
31
31
|
|
|
32
32
|
<View style={styles.content}>
|
|
@@ -63,19 +63,22 @@ export function AgeCheckUnderageScreen({ contactEmail }: AgeCheckUnderageScreenP
|
|
|
63
63
|
.
|
|
64
64
|
</Text>
|
|
65
65
|
</View>
|
|
66
|
-
</
|
|
66
|
+
</ScrollView>
|
|
67
67
|
)
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
const useStyles = () => {
|
|
71
71
|
const { colors } = useTheme()
|
|
72
72
|
return StyleSheet.create({
|
|
73
|
-
|
|
73
|
+
scrollView: {
|
|
74
74
|
flex: 1,
|
|
75
|
+
},
|
|
76
|
+
container: {
|
|
75
77
|
alignItems: 'center',
|
|
76
78
|
justifyContent: 'center',
|
|
77
79
|
gap: 16,
|
|
78
80
|
padding: 16,
|
|
81
|
+
minHeight: '100%',
|
|
79
82
|
},
|
|
80
83
|
icon: {
|
|
81
84
|
color: colors.iconColorDefaultDisabled,
|