@oxyhq/services
Version:
224 lines (222 loc) • 7.27 kB
JavaScript
"use strict";
import React, { useState, useCallback, useMemo } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useThemeStyles } from "../hooks/useThemeStyles.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const INFO_SECTIONS = [{
id: 'what',
title: 'What is a username?',
content: 'Your username is your unique identifier on Oxy. It\'s how other people find and mention you. Think of it like your handle on social media - it\'s public and represents your identity across all Oxy apps.',
icon: 'at-outline'
}, {
id: 'rules',
title: 'Username rules',
content: 'Usernames can only contain lowercase letters (a-z) and numbers (0-9). They must be at least 4 characters long. Special characters, spaces, and uppercase letters are not allowed to keep usernames simple and easy to remember.',
icon: 'list-outline'
}, {
id: 'unique',
title: 'Why must it be unique?',
content: 'Each username can only belong to one person. This ensures that when someone searches for you or mentions you, they find the right person. It also prevents confusion and impersonation.',
icon: 'finger-print-outline'
}, {
id: 'change',
title: 'Can I change it later?',
content: 'Yes! You can change your username anytime in your account settings. Keep in mind that your old username will become available for others to use, and people who knew your old username will need to find you with the new one.',
icon: 'refresh-outline'
}, {
id: 'tips',
title: 'Tips for choosing a username',
content: 'Choose something memorable and easy to spell. Avoid using personal information like your birth year or phone number. Consider using a name that represents you across all contexts - professional and personal.',
icon: 'bulb-outline'
}];
const LearnMoreUsernamesScreen = ({
theme
}) => {
const themeStyles = useThemeStyles(theme || 'light');
const [expandedIds, setExpandedIds] = useState(new Set(['what'])); // Start with first section expanded
const toggleExpanded = useCallback(id => {
setExpandedIds(prev => {
const next = new Set(prev);
if (next.has(id)) {
next.delete(id);
} else {
next.add(id);
}
return next;
});
}, []);
const styles = useMemo(() => createStyles(themeStyles), [themeStyles]);
return /*#__PURE__*/_jsx(View, {
style: [styles.container, {
backgroundColor: themeStyles.backgroundColor
}],
children: /*#__PURE__*/_jsxs(ScrollView, {
style: styles.content,
showsVerticalScrollIndicator: false,
contentContainerStyle: styles.contentContainer,
children: [/*#__PURE__*/_jsxs(View, {
style: styles.introSection,
children: [/*#__PURE__*/_jsx(View, {
style: [styles.introIcon, {
backgroundColor: themeStyles.primaryColor + '15'
}],
children: /*#__PURE__*/_jsx(Ionicons, {
name: "at",
size: 32,
color: themeStyles.primaryColor
})
}), /*#__PURE__*/_jsx(Text, {
style: [styles.introTitle, {
color: themeStyles.textColor
}],
children: "Your unique identity"
}), /*#__PURE__*/_jsx(Text, {
style: [styles.introText, {
color: themeStyles.mutedTextColor
}],
children: "Your username is how people find and recognize you across all Oxy apps."
})]
}), INFO_SECTIONS.map((section, index) => {
const isExpanded = expandedIds.has(section.id);
return /*#__PURE__*/_jsxs(View, {
style: [styles.section, {
backgroundColor: themeStyles.secondaryBackgroundColor,
borderColor: themeStyles.borderColor
}, index === 0 && styles.sectionFirst],
children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
style: styles.sectionHeader,
onPress: () => toggleExpanded(section.id),
accessibilityRole: "button",
accessibilityLabel: section.title,
accessibilityHint: isExpanded ? 'Collapse section' : 'Expand section',
accessibilityState: {
expanded: isExpanded
},
children: [/*#__PURE__*/_jsx(View, {
style: [styles.sectionIconContainer, {
backgroundColor: themeStyles.primaryColor + '15'
}],
children: /*#__PURE__*/_jsx(Ionicons, {
name: section.icon,
size: 20,
color: themeStyles.primaryColor
})
}), /*#__PURE__*/_jsx(Text, {
style: [styles.sectionTitle, {
color: themeStyles.textColor
}],
children: section.title
}), /*#__PURE__*/_jsx(Ionicons, {
name: isExpanded ? 'chevron-up' : 'chevron-down',
size: 20,
color: themeStyles.mutedTextColor
})]
}), isExpanded && /*#__PURE__*/_jsx(View, {
style: [styles.sectionContent, {
borderTopColor: themeStyles.borderColor
}],
children: /*#__PURE__*/_jsx(Text, {
style: [styles.sectionText, {
color: themeStyles.mutedTextColor
}],
children: section.content
})
})]
}, section.id);
}), /*#__PURE__*/_jsx(View, {
style: styles.footer,
children: /*#__PURE__*/_jsx(Text, {
style: [styles.footerText, {
color: themeStyles.mutedTextColor
}],
children: "Need more help? Visit our Help Center for additional information."
})
})]
})
});
};
const createStyles = themeStyles => StyleSheet.create({
container: {
flex: 1
},
content: {
flex: 1
},
contentContainer: {
padding: 16,
paddingBottom: 32
},
introSection: {
alignItems: 'center',
paddingVertical: 24,
paddingHorizontal: 16
},
introIcon: {
width: 64,
height: 64,
borderRadius: 32,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 16
},
introTitle: {
fontSize: 24,
fontWeight: '700',
marginBottom: 8,
textAlign: 'center'
},
introText: {
fontSize: 16,
lineHeight: 24,
textAlign: 'center'
},
section: {
borderRadius: 12,
borderWidth: 1,
marginBottom: 12,
overflow: 'hidden'
},
sectionFirst: {
marginTop: 8
},
sectionHeader: {
flexDirection: 'row',
alignItems: 'center',
padding: 16
},
sectionIconContainer: {
width: 36,
height: 36,
borderRadius: 18,
alignItems: 'center',
justifyContent: 'center',
marginRight: 12
},
sectionTitle: {
flex: 1,
fontSize: 16,
fontWeight: '600',
marginRight: 12
},
sectionContent: {
padding: 16,
paddingTop: 12,
borderTopWidth: 1
},
sectionText: {
fontSize: 14,
lineHeight: 22
},
footer: {
marginTop: 16,
paddingHorizontal: 16
},
footerText: {
fontSize: 14,
textAlign: 'center',
lineHeight: 20
}
});
export default LearnMoreUsernamesScreen;
//# sourceMappingURL=LearnMoreUsernamesScreen.js.map