@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/screens/EditProfileFieldScreen.js

@@ -0,0 +1,549 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const vector_icons_1 = require("@expo/vector-icons");
+const useThemeStyles_1 = require("../hooks/useThemeStyles");
+const useColorScheme_1 = require("../hooks/useColorScheme");
+const themeUtils_1 = require("../utils/themeUtils");
+const components_1 = require("../components");
+const useI18n_1 = require("../hooks/useI18n");
+const OxyContext_1 = require("../context/OxyContext");
+const useProfileEditing_1 = require("../hooks/useProfileEditing");
+const fonts_1 = require("../styles/fonts");
+const sonner_1 = require("../../lib/sonner");
+const core_1 = require("@oxyhq/core");
+/**
+ * EditProfileFieldScreen - A dedicated screen for editing profile fields
+ *
+ * Navigate to this screen with a fieldType prop to edit that specific field.
+ *
+ * @example
+ * navigate('EditProfileField', { fieldType: 'username' })
+ */
+const EditProfileFieldScreen = ({ goBack, onClose, theme, fieldType = 'displayName', }) => {
+    const { user } = (0, OxyContext_1.useOxy)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const { saveProfile, updateField, isSaving } = (0, useProfileEditing_1.useProfileEditing)();
+    const colorScheme = (0, useColorScheme_1.useColorScheme)();
+    const normalizedTheme = (0, themeUtils_1.normalizeTheme)(theme);
+    const themeStyles = (0, useThemeStyles_1.useThemeStyles)(normalizedTheme, colorScheme);
+    const colors = themeStyles.colors;
+    // State for field values
+    const [fieldValues, setFieldValues] = (0, react_1.useState)({});
+    const [fieldErrors, setFieldErrors] = (0, react_1.useState)({});
+    // State for list fields (locations, links)
+    const [listItems, setListItems] = (0, react_1.useState)([]);
+    const [newItemValue, setNewItemValue] = (0, react_1.useState)('');
+    // Get field configuration based on fieldType
+    const fieldConfig = (0, react_1.useMemo)(() => {
+        switch (fieldType) {
+            case 'displayName':
+                return {
+                    title: t('editProfile.items.displayName.title') || 'Display Name',
+                    subtitle: t('editProfile.items.displayName.subtitle') || 'This is how your name will appear to others',
+                    fields: [
+                        {
+                            key: 'displayName',
+                            label: t('editProfile.items.displayName.firstName') || 'First Name',
+                            placeholder: t('editProfile.items.displayName.firstNamePlaceholder') || 'Enter first name',
+                        },
+                        {
+                            key: 'lastName',
+                            label: t('editProfile.items.displayName.lastName') || 'Last Name',
+                            placeholder: t('editProfile.items.displayName.lastNamePlaceholder') || 'Enter last name (optional)',
+                        },
+                    ],
+                };
+            case 'username':
+                return {
+                    title: t('editProfile.items.username.title') || 'Username',
+                    subtitle: t('editProfile.items.username.subtitle') || 'Your unique identifier on the platform',
+                    fields: [
+                        {
+                            key: 'username',
+                            label: t('editProfile.items.username.label') || 'Username',
+                            placeholder: t('editProfile.items.username.placeholder') || 'Choose a username',
+                            validation: (value) => {
+                                if (!value.trim()) {
+                                    return t('editProfile.items.username.required') || 'Username is required';
+                                }
+                                if (value.length < 3) {
+                                    return t('editProfile.items.username.tooShort') || 'Username must be at least 3 characters';
+                                }
+                                return undefined;
+                            },
+                            inputProps: {
+                                autoCapitalize: 'none',
+                                autoCorrect: false,
+                            },
+                        },
+                    ],
+                };
+            case 'email':
+                return {
+                    title: t('editProfile.items.email.title') || 'Email',
+                    subtitle: t('editProfile.items.email.subtitle') || 'Your primary email address',
+                    fields: [
+                        {
+                            key: 'email',
+                            label: t('editProfile.items.email.label') || 'Email Address',
+                            placeholder: t('editProfile.items.email.placeholder') || 'Enter your email address',
+                            type: 'email',
+                            validation: (value) => {
+                                if (!core_1.EMAIL_REGEX.test(value)) {
+                                    return t('editProfile.items.email.invalid') || 'Please enter a valid email address';
+                                }
+                                return undefined;
+                            },
+                            inputProps: {
+                                keyboardType: 'email-address',
+                                autoCapitalize: 'none',
+                                autoCorrect: false,
+                            },
+                        },
+                    ],
+                };
+            case 'bio':
+                return {
+                    title: t('editProfile.items.bio.title') || 'Bio',
+                    subtitle: t('editProfile.items.bio.subtitle') || 'Tell people a bit about yourself',
+                    fields: [
+                        {
+                            key: 'bio',
+                            label: t('editProfile.items.bio.label') || 'Bio',
+                            placeholder: t('editProfile.items.bio.placeholder') || 'Tell people about yourself...',
+                            type: 'textarea',
+                            inputProps: {
+                                multiline: true,
+                                numberOfLines: 6,
+                                textAlignVertical: 'top',
+                            },
+                        },
+                    ],
+                };
+            case 'phone':
+                return {
+                    title: t('editProfile.items.phone.title') || 'Phone Number',
+                    subtitle: t('editProfile.items.phone.subtitle') || 'Your contact phone number',
+                    fields: [
+                        {
+                            key: 'phone',
+                            label: t('editProfile.items.phone.label') || 'Phone Number',
+                            placeholder: t('editProfile.items.phone.placeholder') || 'Enter your phone number',
+                            inputProps: {
+                                keyboardType: 'phone-pad',
+                                autoCapitalize: 'none',
+                                autoCorrect: false,
+                            },
+                        },
+                    ],
+                };
+            case 'address':
+                return {
+                    title: t('editProfile.items.address.title') || 'Address',
+                    subtitle: t('editProfile.items.address.subtitle') || 'Your physical address',
+                    fields: [
+                        {
+                            key: 'address',
+                            label: t('editProfile.items.address.label') || 'Address',
+                            placeholder: t('editProfile.items.address.placeholder') || 'Enter your address',
+                            type: 'textarea',
+                            inputProps: {
+                                multiline: true,
+                                numberOfLines: 3,
+                                textAlignVertical: 'top',
+                            },
+                        },
+                    ],
+                };
+            case 'birthday':
+                return {
+                    title: t('editProfile.items.birthday.title') || 'Birthday',
+                    subtitle: t('editProfile.items.birthday.subtitle') || 'Your date of birth',
+                    fields: [
+                        {
+                            key: 'birthday',
+                            label: t('editProfile.items.birthday.label') || 'Birthday',
+                            placeholder: t('editProfile.items.birthday.placeholder') || 'YYYY-MM-DD',
+                            inputProps: {
+                                autoCapitalize: 'none',
+                                autoCorrect: false,
+                            },
+                        },
+                    ],
+                };
+            case 'locations':
+                return {
+                    title: t('editProfile.items.locations.title') || 'Locations',
+                    subtitle: t('editProfile.items.locations.subtitle') || 'Places you\'ve been or live',
+                    fields: [],
+                    isList: true,
+                };
+            case 'links':
+                return {
+                    title: t('editProfile.items.links.title') || 'Links',
+                    subtitle: t('editProfile.items.links.subtitle') || 'Share your website, social profiles, etc.',
+                    fields: [],
+                    isList: true,
+                };
+            default:
+                return {
+                    title: 'Edit Field',
+                    fields: [],
+                };
+        }
+    }, [fieldType, t]);
+    // Initialize field values from user data
+    (0, react_1.useEffect)(() => {
+        if (!user)
+            return;
+        const userData = user;
+        if (fieldConfig.isList) {
+            if (fieldType === 'locations') {
+                const locations = Array.isArray(userData.locations) ? userData.locations : [];
+                setListItems(locations.map((loc, i) => ({
+                    id: String(loc.id || `location-${i}`),
+                    name: String(loc.name || ''),
+                    ...loc,
+                })));
+            }
+            else if (fieldType === 'links') {
+                const linksMetadata = Array.isArray(userData.linksMetadata) ? userData.linksMetadata : [];
+                const links = Array.isArray(userData.links) ? userData.links : [];
+                // Use linksMetadata if available, otherwise convert links array
+                if (linksMetadata.length > 0) {
+                    setListItems(linksMetadata.map((link, i) => ({
+                        id: String(link.id || `link-${i}`),
+                        url: String(link.url || link.link || ''),
+                        title: String(link.title || ''),
+                        ...link,
+                    })));
+                }
+                else {
+                    setListItems(links.map((item, i) => {
+                        const url = typeof item === 'string' ? item : (item.link || '');
+                        return {
+                            id: `link-${i}`,
+                            url,
+                            title: url.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+                        };
+                    }));
+                }
+            }
+        }
+        else {
+            const initialValues = {};
+            fieldConfig.fields.forEach(field => {
+                if (field.key === 'displayName') {
+                    initialValues[field.key] = String(userData.displayName || userData.name?.first || '');
+                }
+                else if (field.key === 'lastName') {
+                    initialValues[field.key] = String(userData.lastName || userData.name?.last || '');
+                }
+                else if (field.key === 'birthday') {
+                    initialValues[field.key] = String(userData.birthday || userData.dateOfBirth || '');
+                }
+                else if (field.key === 'address') {
+                    initialValues[field.key] = String(userData.address || userData.location || '');
+                }
+                else {
+                    initialValues[field.key] = String(userData[field.key] || '');
+                }
+            });
+            setFieldValues(initialValues);
+        }
+    }, [user, fieldConfig, fieldType]);
+    // Field change handler
+    const handleFieldChange = (0, react_1.useCallback)((key, value) => {
+        setFieldValues(prev => ({ ...prev, [key]: value }));
+        if (fieldErrors[key]) {
+            setFieldErrors(prev => ({ ...prev, [key]: undefined }));
+        }
+    }, [fieldErrors]);
+    // Validate all fields
+    const validateFields = (0, react_1.useCallback)(() => {
+        const errors = {};
+        let isValid = true;
+        fieldConfig.fields.forEach(field => {
+            if (field.validation) {
+                const error = field.validation(fieldValues[field.key] || '');
+                if (error) {
+                    errors[field.key] = error;
+                    isValid = false;
+                }
+            }
+        });
+        setFieldErrors(errors);
+        return isValid;
+    }, [fieldConfig.fields, fieldValues]);
+    // Add item to list
+    const handleAddItem = (0, react_1.useCallback)(() => {
+        if (!newItemValue.trim())
+            return;
+        if (fieldType === 'locations') {
+            const newItem = {
+                id: `location-${Date.now()}`,
+                name: newItemValue.trim(),
+            };
+            setListItems(prev => [...prev, newItem]);
+        }
+        else if (fieldType === 'links') {
+            const newItem = {
+                id: `link-${Date.now()}`,
+                url: newItemValue.trim(),
+                title: newItemValue.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+            };
+            setListItems(prev => [...prev, newItem]);
+        }
+        setNewItemValue('');
+    }, [newItemValue, fieldType]);
+    // Remove item from list
+    const handleRemoveItem = (0, react_1.useCallback)((id) => {
+        setListItems(prev => prev.filter(item => item.id !== id));
+    }, []);
+    // Save handler
+    const handleSave = async () => {
+        if (fieldConfig.isList) {
+            let success = false;
+            if (fieldType === 'locations') {
+                success = await saveProfile({
+                    locations: listItems.map(item => ({
+                        id: item.id,
+                        name: String(item.name || ''),
+                        ...(item.label !== undefined && { label: String(item.label) }),
+                        ...(item.coordinates !== undefined && { coordinates: item.coordinates }),
+                    })),
+                });
+            }
+            else if (fieldType === 'links') {
+                success = await saveProfile({
+                    linksMetadata: listItems.map(item => ({
+                        id: item.id,
+                        url: String(item.url || ''),
+                        ...(item.title !== undefined && { title: String(item.title) }),
+                        ...(item.description !== undefined && { description: String(item.description) }),
+                        ...(item.image !== undefined && { image: String(item.image) }),
+                    })),
+                    links: listItems.map(item => String(item.url || '')),
+                });
+            }
+            if (success) {
+                sonner_1.toast.success(t('common.saved') || 'Saved successfully');
+                (onClose || goBack)?.();
+            }
+        }
+        else {
+            if (!validateFields())
+                return;
+            let success = false;
+            if (fieldType === 'displayName') {
+                success = await saveProfile({
+                    displayName: fieldValues.displayName,
+                    lastName: fieldValues.lastName,
+                });
+            }
+            else {
+                const key = fieldConfig.fields[0]?.key;
+                if (key) {
+                    success = await updateField(key, fieldValues[key]);
+                }
+            }
+            if (success) {
+                sonner_1.toast.success(t('common.saved') || 'Saved successfully');
+                (onClose || goBack)?.();
+            }
+        }
+    };
+    // Render a single field input
+    const renderField = (field, index) => {
+        const isTextarea = field.type === 'textarea';
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.inputGroup, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: colors.text }], children: field.label }), (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [
+                        isTextarea ? styles.textArea : styles.input,
+                        {
+                            backgroundColor: colors.card,
+                            color: colors.text,
+                            borderColor: fieldErrors[field.key] ? '#FF3B30' : colors.border,
+                        },
+                    ], value: fieldValues[field.key] || '', onChangeText: (value) => handleFieldChange(field.key, value), placeholder: field.placeholder, placeholderTextColor: colors.secondaryText, autoFocus: index === 0, selectionColor: colors.tint, ...field.inputProps }), fieldErrors[field.key] && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.errorText, children: fieldErrors[field.key] }))] }, field.key));
+    };
+    // Render list content (locations or links)
+    const renderListContent = () => {
+        const addLabel = fieldType === 'locations'
+            ? (t('editProfile.items.locations.add') || 'Add Location')
+            : (t('editProfile.items.links.add') || 'Add Link');
+        const placeholder = fieldType === 'locations'
+            ? (t('editProfile.items.locations.placeholder') || 'Enter location name')
+            : (t('editProfile.items.links.placeholder') || 'Enter URL');
+        const listTitle = fieldType === 'locations'
+            ? (t('editProfile.items.locations.yourLocations') || 'Your Locations')
+            : (t('editProfile.items.links.yourLinks') || 'Your Links');
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.inputGroup, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: colors.text }], children: addLabel }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.addItemRow, children: [(0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [
+                                        styles.input,
+                                        {
+                                            backgroundColor: colors.card,
+                                            color: colors.text,
+                                            borderColor: colors.border,
+                                            flex: 1,
+                                        },
+                                    ], value: newItemValue, onChangeText: setNewItemValue, placeholder: placeholder, placeholderTextColor: colors.secondaryText, selectionColor: colors.tint, autoCapitalize: "none", autoCorrect: false, onSubmitEditing: handleAddItem, returnKeyType: "done", keyboardType: fieldType === 'links' ? 'url' : 'default' }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: [
+                                        styles.addButton,
+                                        { backgroundColor: newItemValue.trim() ? colors.tint : colors.border }
+                                    ], onPress: handleAddItem, disabled: !newItemValue.trim(), children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "add", size: 20, color: "#fff" }) })] })] }), listItems.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.listSection, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { style: [styles.listTitle, { color: colors.text }], children: [listTitle, " (", listItems.length, ")"] }), listItems.map((item) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                styles.listItem,
+                                { backgroundColor: colors.card, borderColor: colors.border }
+                            ], children: [fieldType === 'links' && item.image && ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: item.image }, style: styles.linkImage })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.listItemContent, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.listItemTitle, { color: colors.text }], numberOfLines: 1, children: fieldType === 'locations' ? item.name : (item.title || item.url) }), fieldType === 'links' && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.listItemSubtitle, { color: colors.secondaryText }], numberOfLines: 1, children: item.url }))] }), (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: () => handleRemoveItem(item.id), style: styles.removeButton, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Ionicons, { name: "trash-outline", size: 18, color: "#FF3B30" }) })] }, item.id)))] }))] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.KeyboardAvoidingView, { style: [styles.container, { backgroundColor: normalizedTheme === 'dark' ? '#000000' : '#F5F5F5' }], behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : undefined, children: [(0, jsx_runtime_1.jsx)(components_1.Header, { title: "", subtitle: "", theme: normalizedTheme, onBack: onClose || goBack, variant: "minimal", elevation: "none", rightAction: {
+                    text: isSaving ? (t('common.saving') || 'Saving...') : (t('common.save') || 'Save'),
+                    onPress: handleSave,
+                    disabled: isSaving,
+                    loading: isSaving,
+                } }), (0, jsx_runtime_1.jsxs)(react_native_1.ScrollView, { style: styles.content, contentContainerStyle: styles.contentContainer, showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: "handled", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.titleContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.bigTitle, { color: colors.text }], children: fieldConfig.title }), fieldConfig.subtitle && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.bigSubtitle, { color: colors.secondaryText }], children: fieldConfig.subtitle }))] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.formCard, { backgroundColor: colors.card }], children: fieldConfig.isList ? renderListContent() : fieldConfig.fields.map(renderField) })] })] }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        flex: 1,
+    },
+    contentContainer: {
+        padding: 16,
+        paddingTop: 24,
+        paddingBottom: 40,
+    },
+    titleContainer: {
+        marginBottom: 24,
+    },
+    bigTitle: {
+        fontSize: 34,
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+        fontFamily: fonts_1.fontFamilies.interBold,
+        lineHeight: 40,
+        marginBottom: 8,
+        letterSpacing: -0.5,
+    },
+    bigSubtitle: {
+        fontSize: 16,
+        lineHeight: 22,
+        opacity: 0.7,
+        marginTop: 4,
+    },
+    formCard: {
+        borderRadius: 16,
+        padding: 16,
+        gap: 16,
+    },
+    inputGroup: {
+        gap: 8,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: fonts_1.fontFamilies.interSemiBold,
+    },
+    input: {
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderRadius: 12,
+        padding: 16,
+        fontSize: 16,
+        minHeight: 52,
+    },
+    textArea: {
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderRadius: 12,
+        padding: 16,
+        fontSize: 16,
+        minHeight: 140,
+    },
+    errorText: {
+        fontSize: 12,
+        color: '#FF3B30',
+        marginTop: 4,
+    },
+    addItemRow: {
+        flexDirection: 'row',
+        gap: 8,
+        alignItems: 'center',
+    },
+    addButton: {
+        width: 52,
+        height: 52,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    listSection: {
+        marginTop: 8,
+    },
+    listTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fonts_1.fontFamilies.interSemiBold,
+        marginBottom: 12,
+    },
+    listItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        borderRadius: 12,
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        gap: 12,
+        marginBottom: 8,
+    },
+    listItemContent: {
+        flex: 1,
+        gap: 4,
+    },
+    listItemTitle: {
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    listItemSubtitle: {
+        fontSize: 13,
+    },
+    linkImage: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+    },
+    removeButton: {
+        padding: 8,
+    },
+});
+exports.default = react_1.default.memo(EditProfileFieldScreen);

package/src/ui/screens/FAQScreen.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+declare const FAQScreen: React.FC<BaseScreenProps>;
+export default FAQScreen;