@planningcenter/chat-react-native 3.19.1-rc.0 → 3.19.1-rc.2
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 +43 -37
- 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 +67 -61
- 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;AAuBvC,wBAAgB,sBAAsB,
|
|
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,sBAkHrC"}
|
|
@@ -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';
|
|
@@ -44,54 +44,57 @@ export function AgeCheckRequiredScreen() {
|
|
|
44
44
|
return;
|
|
45
45
|
submitAgeCheck(birthdate);
|
|
46
46
|
};
|
|
47
|
-
return (
|
|
48
|
-
<
|
|
49
|
-
<View style={styles.
|
|
50
|
-
<
|
|
51
|
-
|
|
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>
|
|
52
55
|
</View>
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
Birthdate:
|
|
67
|
-
</Text>
|
|
68
|
-
<Text variant="tertiary">{birthdateStamp}</Text>
|
|
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}>{person.name}</Text>
|
|
63
|
+
<View style={styles.birthdateInfo}>
|
|
64
|
+
<Text variant="tertiary" style={styles.birthdateLabel}>
|
|
65
|
+
Birthdate:{' '}
|
|
66
|
+
</Text>
|
|
67
|
+
<Text variant="tertiary">{birthdateStamp}</Text>
|
|
68
|
+
</View>
|
|
69
69
|
</View>
|
|
70
|
+
{birthdate && (<Button title="Edit" accessibilityHint="Choose a new birthdate for your profile" size="sm" variant="outline" style={styles.editButton} onPress={openBirthdateModal}/>)}
|
|
70
71
|
</View>
|
|
71
|
-
{birthdate && (<Button title="
|
|
72
|
+
{!birthdate && (<Button title="Add birthdate" accessibilityHint="Choose a birthdate for your profile" size="lg" style={styles.primaryButton} onPress={openBirthdateModal}/>)}
|
|
72
73
|
</View>
|
|
73
|
-
{
|
|
74
|
+
{birthdate && (<View style={styles.card}>
|
|
75
|
+
<Heading variant="h3">Age confirmation</Heading>
|
|
76
|
+
{age !== null && age < 13 ? (<Banner appearance="warning" description={confirmationText}/>) : (<Text>{confirmationText}</Text>)}
|
|
77
|
+
<Button title="Yes, update my profile" size="lg" style={styles.primaryButton} onPress={handleSubmitAgeConfirmation} disabled={isPending || isSuccess}/>
|
|
78
|
+
</View>)}
|
|
74
79
|
</View>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
</
|
|
81
|
-
<Text variant="tertiary">
|
|
82
|
-
Your birthdate will be added to your profile, but it is only visible to church
|
|
83
|
-
administrators. It will not be shared with other church members, unless you give permission.
|
|
84
|
-
</Text>
|
|
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
|
|
83
|
+
permission.
|
|
84
|
+
</Text>
|
|
85
|
+
</ScrollView>
|
|
85
86
|
|
|
86
87
|
<AgeCheckSelectBirthdateModal onChange={setDraftBirthdate} onDismiss={closeBirthdateModal} onRequestClose={closeBirthdateModal} onSubmit={setBirthdate} value={draftBirthdate || new Date()} visible={isBirthdateModalOpen}/>
|
|
87
|
-
|
|
88
|
+
</>);
|
|
88
89
|
}
|
|
89
90
|
const useStyles = () => {
|
|
90
91
|
const { colors } = useTheme();
|
|
91
92
|
return StyleSheet.create({
|
|
92
|
-
|
|
93
|
+
scrollView: {
|
|
93
94
|
flex: 1,
|
|
94
95
|
backgroundColor: colors.surfaceColor080,
|
|
96
|
+
},
|
|
97
|
+
container: {
|
|
95
98
|
padding: 16,
|
|
96
99
|
gap: 16,
|
|
97
100
|
},
|
|
@@ -117,11 +120,13 @@ const useStyles = () => {
|
|
|
117
120
|
},
|
|
118
121
|
profileContent: {
|
|
119
122
|
flexDirection: 'row',
|
|
120
|
-
|
|
123
|
+
flexWrap: 'wrap',
|
|
124
|
+
alignItems: 'flex-start',
|
|
121
125
|
gap: 8,
|
|
122
126
|
},
|
|
123
127
|
personInfo: {
|
|
124
128
|
flex: 1,
|
|
129
|
+
minWidth: 0,
|
|
125
130
|
},
|
|
126
131
|
primaryButton: {
|
|
127
132
|
alignSelf: 'center',
|
|
@@ -135,6 +140,7 @@ const useStyles = () => {
|
|
|
135
140
|
},
|
|
136
141
|
birthdateInfo: {
|
|
137
142
|
flexDirection: 'row',
|
|
143
|
+
flexWrap: 'wrap',
|
|
138
144
|
alignItems: 'center',
|
|
139
145
|
gap: 4,
|
|
140
146
|
},
|
|
@@ -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.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 <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}>{person.name}</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 flexWrap: 'wrap',\n alignItems: 'flex-start',\n gap: 8,\n },\n personInfo: {\n flex: 1,\n minWidth: 0,\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 flexWrap: 'wrap',\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.1-rc.
|
|
3
|
+
"version": "3.19.1-rc.2",
|
|
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": "fe9eb61cdd4101e85b7934eef8803339c4d365f1"
|
|
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'
|
|
@@ -56,73 +56,74 @@ export function AgeCheckRequiredScreen() {
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
return (
|
|
59
|
-
|
|
60
|
-
<
|
|
61
|
-
<View style={styles.
|
|
62
|
-
<
|
|
63
|
-
|
|
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>
|
|
64
67
|
</View>
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
Birthdate:
|
|
79
|
-
</Text>
|
|
80
|
-
<Text variant="tertiary">{birthdateStamp}</Text>
|
|
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}>{person.name}</Text>
|
|
75
|
+
<View style={styles.birthdateInfo}>
|
|
76
|
+
<Text variant="tertiary" style={styles.birthdateLabel}>
|
|
77
|
+
Birthdate:{' '}
|
|
78
|
+
</Text>
|
|
79
|
+
<Text variant="tertiary">{birthdateStamp}</Text>
|
|
80
|
+
</View>
|
|
81
81
|
</View>
|
|
82
|
+
{birthdate && (
|
|
83
|
+
<Button
|
|
84
|
+
title="Edit"
|
|
85
|
+
accessibilityHint="Choose a new birthdate for your profile"
|
|
86
|
+
size="sm"
|
|
87
|
+
variant="outline"
|
|
88
|
+
style={styles.editButton}
|
|
89
|
+
onPress={openBirthdateModal}
|
|
90
|
+
/>
|
|
91
|
+
)}
|
|
82
92
|
</View>
|
|
83
|
-
{birthdate && (
|
|
93
|
+
{!birthdate && (
|
|
84
94
|
<Button
|
|
85
|
-
title="
|
|
86
|
-
accessibilityHint="Choose a
|
|
87
|
-
size="
|
|
88
|
-
|
|
89
|
-
style={styles.editButton}
|
|
95
|
+
title="Add birthdate"
|
|
96
|
+
accessibilityHint="Choose a birthdate for your profile"
|
|
97
|
+
size="lg"
|
|
98
|
+
style={styles.primaryButton}
|
|
90
99
|
onPress={openBirthdateModal}
|
|
91
100
|
/>
|
|
92
101
|
)}
|
|
93
102
|
</View>
|
|
94
|
-
{
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
103
|
+
{birthdate && (
|
|
104
|
+
<View style={styles.card}>
|
|
105
|
+
<Heading variant="h3">Age confirmation</Heading>
|
|
106
|
+
{age !== null && age < 13 ? (
|
|
107
|
+
<Banner appearance="warning" description={confirmationText} />
|
|
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>
|
|
102
119
|
)}
|
|
103
120
|
</View>
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
<Text>{confirmationText}</Text>
|
|
111
|
-
)}
|
|
112
|
-
<Button
|
|
113
|
-
title="Yes, update my profile"
|
|
114
|
-
size="lg"
|
|
115
|
-
style={styles.primaryButton}
|
|
116
|
-
onPress={handleSubmitAgeConfirmation}
|
|
117
|
-
disabled={isPending || isSuccess}
|
|
118
|
-
/>
|
|
119
|
-
</View>
|
|
120
|
-
)}
|
|
121
|
-
</View>
|
|
122
|
-
<Text variant="tertiary">
|
|
123
|
-
Your birthdate will be added to your profile, but it is only visible to church
|
|
124
|
-
administrators. It will not be shared with other church members, unless you give permission.
|
|
125
|
-
</Text>
|
|
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
|
|
124
|
+
permission.
|
|
125
|
+
</Text>
|
|
126
|
+
</ScrollView>
|
|
126
127
|
|
|
127
128
|
<AgeCheckSelectBirthdateModal
|
|
128
129
|
onChange={setDraftBirthdate}
|
|
@@ -132,16 +133,18 @@ export function AgeCheckRequiredScreen() {
|
|
|
132
133
|
value={draftBirthdate || new Date()}
|
|
133
134
|
visible={isBirthdateModalOpen}
|
|
134
135
|
/>
|
|
135
|
-
|
|
136
|
+
</>
|
|
136
137
|
)
|
|
137
138
|
}
|
|
138
139
|
|
|
139
140
|
const useStyles = () => {
|
|
140
141
|
const { colors } = useTheme()
|
|
141
142
|
return StyleSheet.create({
|
|
142
|
-
|
|
143
|
+
scrollView: {
|
|
143
144
|
flex: 1,
|
|
144
145
|
backgroundColor: colors.surfaceColor080,
|
|
146
|
+
},
|
|
147
|
+
container: {
|
|
145
148
|
padding: 16,
|
|
146
149
|
gap: 16,
|
|
147
150
|
},
|
|
@@ -167,11 +170,13 @@ const useStyles = () => {
|
|
|
167
170
|
},
|
|
168
171
|
profileContent: {
|
|
169
172
|
flexDirection: 'row',
|
|
170
|
-
|
|
173
|
+
flexWrap: 'wrap',
|
|
174
|
+
alignItems: 'flex-start',
|
|
171
175
|
gap: 8,
|
|
172
176
|
},
|
|
173
177
|
personInfo: {
|
|
174
178
|
flex: 1,
|
|
179
|
+
minWidth: 0,
|
|
175
180
|
},
|
|
176
181
|
primaryButton: {
|
|
177
182
|
alignSelf: 'center',
|
|
@@ -185,6 +190,7 @@ const useStyles = () => {
|
|
|
185
190
|
},
|
|
186
191
|
birthdateInfo: {
|
|
187
192
|
flexDirection: 'row',
|
|
193
|
+
flexWrap: 'wrap',
|
|
188
194
|
alignItems: 'center',
|
|
189
195
|
gap: 4,
|
|
190
196
|
},
|
|
@@ -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,
|