@oxyhq/services
Version:
229 lines (227 loc) • 8.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _vectorIcons = require("@expo/vector-icons");
var _useThemeStyles = require("../hooks/useThemeStyles.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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 = (0, _useThemeStyles.useThemeStyles)(theme || 'light');
const [expandedIds, setExpandedIds] = (0, _react.useState)(new Set(['what'])); // Start with first section expanded
const toggleExpanded = (0, _react.useCallback)(id => {
setExpandedIds(prev => {
const next = new Set(prev);
if (next.has(id)) {
next.delete(id);
} else {
next.add(id);
}
return next;
});
}, []);
const styles = (0, _react.useMemo)(() => createStyles(themeStyles), [themeStyles]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.container, {
backgroundColor: themeStyles.backgroundColor
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
style: styles.content,
showsVerticalScrollIndicator: false,
contentContainerStyle: styles.contentContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.introSection,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.introIcon, {
backgroundColor: themeStyles.primaryColor + '15'
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "at",
size: 32,
color: themeStyles.primaryColor
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.introTitle, {
color: themeStyles.textColor
}],
children: "Your unique identity"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [styles.section, {
backgroundColor: themeStyles.secondaryBackgroundColor,
borderColor: themeStyles.borderColor
}, index === 0 && styles.sectionFirst],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: styles.sectionHeader,
onPress: () => toggleExpanded(section.id),
accessibilityRole: "button",
accessibilityLabel: section.title,
accessibilityHint: isExpanded ? 'Collapse section' : 'Expand section',
accessibilityState: {
expanded: isExpanded
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.sectionIconContainer, {
backgroundColor: themeStyles.primaryColor + '15'
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: section.icon,
size: 20,
color: themeStyles.primaryColor
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.sectionTitle, {
color: themeStyles.textColor
}],
children: section.title
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: isExpanded ? 'chevron-up' : 'chevron-down',
size: 20,
color: themeStyles.mutedTextColor
})]
}), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [styles.sectionContent, {
borderTopColor: themeStyles.borderColor
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.sectionText, {
color: themeStyles.mutedTextColor
}],
children: section.content
})
})]
}, section.id);
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.footer,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.footerText, {
color: themeStyles.mutedTextColor
}],
children: "Need more help? Visit our Help Center for additional information."
})
})]
})
});
};
const createStyles = themeStyles => _reactNative.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
}
});
var _default = exports.default = LearnMoreUsernamesScreen;
//# sourceMappingURL=LearnMoreUsernamesScreen.js.map