@oxyhq/services
Version:
207 lines (206 loc) • 7.42 kB
JavaScript
"use strict";
import React, { useState, useCallback, useMemo } from 'react';
import { View, Text, StyleSheet, ScrollView, TextInput, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
import { toast } from '../../lib/sonner';
import { Header, Section } from "../components/index.js";
import { useI18n } from "../hooks/useI18n.js";
import { useThemeStyles } from "../hooks/useThemeStyles.js";
import { normalizeTheme } from "../utils/themeUtils.js";
import { useOxy } from "../context/OxyContext.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const AccountVerificationScreen = ({
onClose,
theme,
goBack
}) => {
// Use useOxy() hook for OxyContext values
const {
oxyServices,
user
} = useOxy();
const {
t
} = useI18n();
const [reason, setReason] = useState('');
const [evidence, setEvidence] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
const normalizedTheme = normalizeTheme(theme);
const baseThemeStyles = useThemeStyles(normalizedTheme);
const themeStyles = useMemo(() => ({
...baseThemeStyles,
inputBackgroundColor: baseThemeStyles.isDarkTheme ? '#1C1C1E' : '#F2F2F7',
inputTextColor: baseThemeStyles.textColor,
placeholderTextColor: baseThemeStyles.mutedTextColor
}), [baseThemeStyles]);
const handleSubmit = useCallback(async () => {
if (!reason.trim()) {
toast.error(t('accountVerification.reasonRequired') || 'Please provide a reason for verification');
return;
}
if (!oxyServices) {
toast.error(t('accountVerification.error') || 'Service not available');
return;
}
setIsSubmitting(true);
try {
const result = await oxyServices.requestAccountVerification(reason.trim(), evidence.trim() || undefined);
Alert.alert(t('accountVerification.successTitle') || 'Request Submitted', t('accountVerification.successMessage') || `Your verification request has been submitted. Request ID: ${result.requestId}`, [{
text: t('accountVerification.ok') || 'OK',
onPress: () => {
setReason('');
setEvidence('');
goBack?.();
}
}]);
} catch (error) {
if (__DEV__) {
console.error('Failed to submit verification request:', error);
}
toast.error(error?.message || t('accountVerification.submitError') || 'Failed to submit verification request');
} finally {
setIsSubmitting(false);
}
}, [reason, evidence, oxyServices, t, goBack]);
return /*#__PURE__*/_jsxs(View, {
style: [styles.container, {
backgroundColor: themeStyles.backgroundColor
}],
children: [/*#__PURE__*/_jsx(Header, {
title: t('accountVerification.title') || 'Account Verification',
onBack: goBack || onClose,
variant: "minimal",
elevation: "subtle"
}), /*#__PURE__*/_jsxs(ScrollView, {
style: styles.content,
children: [/*#__PURE__*/_jsx(Section, {
isFirst: true,
children: /*#__PURE__*/_jsx(Text, {
style: [styles.description, {
color: themeStyles.mutedTextColor
}],
children: t('accountVerification.description') || 'Request a verified badge for your account. Verified accounts help establish authenticity and credibility.'
})
}), /*#__PURE__*/_jsxs(Section, {
title: t('accountVerification.sections.request') || 'VERIFICATION REQUEST',
children: [/*#__PURE__*/_jsxs(View, {
style: styles.inputGroup,
children: [/*#__PURE__*/_jsx(Text, {
style: [styles.label, {
color: themeStyles.textColor
}],
children: t('accountVerification.reasonLabel') || 'Reason for Verification *'
}), /*#__PURE__*/_jsx(TextInput, {
style: [styles.textInput, styles.textArea, {
backgroundColor: themeStyles.inputBackgroundColor,
color: themeStyles.inputTextColor,
borderColor: themeStyles.borderColor
}],
value: reason,
onChangeText: setReason,
placeholder: t('accountVerification.reasonPlaceholder') || 'Explain why you need a verified badge (e.g., public figure, brand, organization)',
placeholderTextColor: themeStyles.placeholderTextColor,
multiline: true,
numberOfLines: 4,
textAlignVertical: "top",
editable: !isSubmitting
})]
}), /*#__PURE__*/_jsxs(View, {
style: styles.inputGroup,
children: [/*#__PURE__*/_jsx(Text, {
style: [styles.label, {
color: themeStyles.textColor
}],
children: t('accountVerification.evidenceLabel') || 'Evidence (Optional)'
}), /*#__PURE__*/_jsx(TextInput, {
style: [styles.textInput, styles.textArea, {
backgroundColor: themeStyles.inputBackgroundColor,
color: themeStyles.inputTextColor,
borderColor: themeStyles.borderColor
}],
value: evidence,
onChangeText: setEvidence,
placeholder: t('accountVerification.evidencePlaceholder') || 'Provide any supporting documentation or links (e.g., official website, social media profiles)',
placeholderTextColor: themeStyles.placeholderTextColor,
multiline: true,
numberOfLines: 4,
textAlignVertical: "top",
editable: !isSubmitting
})]
})]
}), /*#__PURE__*/_jsx(Section, {
children: /*#__PURE__*/_jsx(TouchableOpacity, {
style: [styles.submitButton, {
backgroundColor: isSubmitting ? themeStyles.mutedTextColor : '#007AFF'
}],
onPress: handleSubmit,
disabled: isSubmitting || !reason.trim(),
children: isSubmitting ? /*#__PURE__*/_jsx(ActivityIndicator, {
color: "#FFFFFF"
}) : /*#__PURE__*/_jsx(Text, {
style: styles.submitButtonText,
children: t('accountVerification.submit') || 'Submit Request'
})
})
}), /*#__PURE__*/_jsx(Section, {
children: /*#__PURE__*/_jsx(Text, {
style: [styles.note, {
color: themeStyles.mutedTextColor
}],
children: t('accountVerification.note') || 'Note: Verification requests are reviewed manually and may take several days. We will notify you once your request has been reviewed.'
})
})]
})]
});
};
const styles = StyleSheet.create({
container: {
flex: 1
},
content: {
flex: 1,
padding: 16
},
description: {
fontSize: 16,
lineHeight: 24,
marginBottom: 8
},
inputGroup: {
marginBottom: 24
},
label: {
fontSize: 16,
fontWeight: '500',
marginBottom: 8
},
textInput: {
borderWidth: 1,
borderRadius: 8,
padding: 12,
fontSize: 16,
minHeight: 44
},
textArea: {
minHeight: 100,
paddingTop: 12
},
submitButton: {
borderRadius: 8,
padding: 16,
alignItems: 'center',
justifyContent: 'center',
minHeight: 50
},
submitButtonText: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '600'
},
note: {
fontSize: 14,
lineHeight: 20,
fontStyle: 'italic'
}
});
export default /*#__PURE__*/React.memo(AccountVerificationScreen);
//# sourceMappingURL=AccountVerificationScreen.js.map