@oxyhq/services 5.13.40 → 5.15.0

package/src/ui/components/profile/EditLinksModal.tsx

@@ -0,0 +1,316 @@
+import React, { useState, useEffect } from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    StyleSheet,
+    Modal,
+    Platform,
+    ScrollView,
+    Image,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { useColorScheme } from '../../hooks/use-color-scheme';
+import { useI18n } from '../../hooks/useI18n';
+import { fontFamilies } from '../../styles/fonts';
+import { useProfileEditing } from '../../hooks/useProfileEditing';
+
+interface LinkMetadata {
+    url: string;
+    title?: string;
+    description?: string;
+    image?: string;
+    id: string;
+}
+
+interface EditLinksModalProps {
+    visible: boolean;
+    onClose: () => void;
+    initialLinks?: LinkMetadata[];
+    theme?: 'light' | 'dark';
+    onSave?: () => void;
+}
+
+export const EditLinksModal: React.FC<EditLinksModalProps> = ({
+    visible,
+    onClose,
+    initialLinks = [],
+    theme = 'light',
+    onSave,
+}) => {
+    const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const colors = themeStyles.colors;
+    const { saveProfile, isSaving } = useProfileEditing();
+
+    const [links, setLinks] = useState<LinkMetadata[]>(initialLinks);
+    const [newLinkUrl, setNewLinkUrl] = useState('');
+
+    useEffect(() => {
+        if (visible) {
+            setLinks(initialLinks);
+            setNewLinkUrl('');
+        }
+    }, [visible, initialLinks]);
+
+    const handleAddLink = () => {
+        if (!newLinkUrl.trim()) return;
+        const link: LinkMetadata = {
+            id: `link-${Date.now()}`,
+            url: newLinkUrl.trim(),
+            title: newLinkUrl.replace(/^https?:\/\//, '').replace(/\/$/, ''),
+            description: `Link to ${newLinkUrl}`,
+        };
+        setLinks([...links, link]);
+        setNewLinkUrl('');
+    };
+
+    const handleRemoveLink = (id: string) => {
+        setLinks(links.filter(link => link.id !== id));
+    };
+
+    const handleSave = async () => {
+        const success = await saveProfile({
+            linksMetadata: links,
+            links: links.map(link => link.url),
+        });
+        if (success) {
+            onSave?.();
+            onClose();
+        }
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            animationType="slide"
+            transparent={true}
+            onRequestClose={onClose}
+        >
+            <View style={styles.modalOverlay}>
+                <View style={[styles.modalContent, { backgroundColor: colors.background }]}>
+                    <View style={styles.modalHeader}>
+                        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                            <Ionicons name="close" size={24} color={colors.text} />
+                        </TouchableOpacity>
+                        <Text style={[styles.modalTitle, { color: colors.text }]}>
+                            {t('editProfile.items.links.title') || 'Links'}
+                        </Text>
+                        <TouchableOpacity
+                            onPress={handleSave}
+                            disabled={isSaving}
+                            style={[styles.saveButton, { opacity: isSaving ? 0.5 : 1 }]}
+                        >
+                            <Text style={[styles.saveButtonText, { color: colors.tint }]}>
+                                {isSaving ? 'Saving...' : 'Save'}
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+
+                    <ScrollView style={styles.modalBody}>
+                        <View style={styles.inputGroup}>
+                            <Text style={[styles.label, { color: colors.text }]}>
+                                {t('editProfile.items.links.add') || 'Add Link'}
+                            </Text>
+                            <View style={styles.addLinkRow}>
+                                <TextInput
+                                    style={[
+                                        styles.input,
+                                        {
+                                            backgroundColor: colors.card,
+                                            color: colors.text,
+                                            borderColor: colors.border,
+                                            flex: 1,
+                                        },
+                                    ]}
+                                    value={newLinkUrl}
+                                    onChangeText={setNewLinkUrl}
+                                    placeholder={t('editProfile.items.links.placeholder') || 'Enter URL (e.g., https://example.com)'}
+                                    placeholderTextColor={colors.secondaryText}
+                                    keyboardType="url"
+                                    autoCapitalize="none"
+                                    autoCorrect={false}
+                                    selectionColor={colors.tint}
+                                />
+                                <TouchableOpacity
+                                    style={[styles.addButton, { backgroundColor: colors.tint }]}
+                                    onPress={handleAddLink}
+                                    disabled={!newLinkUrl.trim()}
+                                >
+                                    <Ionicons name="add" size={20} color="#fff" />
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+
+                        {links.length > 0 && (
+                            <View style={styles.linksList}>
+                                <Text style={[styles.listTitle, { color: colors.text }]}>
+                                    {t('editProfile.items.links.yourLinks') || 'Your Links'} ({links.length})
+                                </Text>
+                                {links.map((link, index) => (
+                                    <View
+                                        key={link.id}
+                                        style={[
+                                            styles.linkItem,
+                                            { backgroundColor: colors.card, borderColor: colors.border },
+                                            index < links.length - 1 && { borderBottomWidth: StyleSheet.hairlineWidth },
+                                        ]}
+                                    >
+                                        {link.image && (
+                                            <Image source={{ uri: link.image }} style={styles.linkImage} />
+                                        )}
+                                        <View style={styles.linkInfo}>
+                                            <Text style={[styles.linkTitle, { color: colors.text }]} numberOfLines={1}>
+                                                {link.title || link.url}
+                                            </Text>
+                                            {link.description && link.description !== link.title && (
+                                                <Text style={[styles.linkDescription, { color: colors.secondaryText }]} numberOfLines={1}>
+                                                    {link.description}
+                                                </Text>
+                                            )}
+                                            <Text style={[styles.linkUrl, { color: colors.secondaryText }]} numberOfLines={1}>
+                                                {link.url}
+                                            </Text>
+                                        </View>
+                                        <TouchableOpacity
+                                            onPress={() => handleRemoveLink(link.id)}
+                                            style={styles.removeButton}
+                                        >
+                                            <Ionicons name="trash-outline" size={18} color="#FF3B30" />
+                                        </TouchableOpacity>
+                                    </View>
+                                ))}
+                            </View>
+                        )}
+                    </ScrollView>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'flex-end',
+    },
+    modalContent: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        paddingTop: Platform.OS === 'ios' ? 20 : 16,
+        maxHeight: '80%',
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingBottom: 16,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E5EA',
+    },
+    closeButton: {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    modalTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        flex: 1,
+        textAlign: 'center',
+    },
+    saveButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    saveButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    modalBody: {
+        padding: 16,
+    },
+    inputGroup: {
+        gap: 8,
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    addLinkRow: {
+        flexDirection: 'row',
+        gap: 8,
+        alignItems: 'center',
+    },
+    input: {
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 12,
+        padding: 16,
+        fontSize: 16,
+        minHeight: 52,
+    },
+    addButton: {
+        width: 52,
+        height: 52,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    linksList: {
+        gap: 8,
+    },
+    listTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        marginBottom: 8,
+    },
+    linkItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        borderRadius: 12,
+        borderWidth: StyleSheet.hairlineWidth,
+        gap: 12,
+    },
+    linkImage: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+    },
+    linkInfo: {
+        flex: 1,
+        gap: 4,
+    },
+    linkTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    linkDescription: {
+        fontSize: 14,
+    },
+    linkUrl: {
+        fontSize: 12,
+    },
+    removeButton: {
+        padding: 8,
+    },
+});
+
+
+
+
+
+
+
+

package/src/ui/components/profile/EditLocationModal.tsx

@@ -0,0 +1,278 @@
+import React, { useState, useEffect } from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    StyleSheet,
+    Modal,
+    Platform,
+    ScrollView,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useThemeStyles } from '../../hooks/useThemeStyles';
+import { useColorScheme } from '../../hooks/use-color-scheme';
+import { useI18n } from '../../hooks/useI18n';
+import { fontFamilies } from '../../styles/fonts';
+import { useProfileEditing } from '../../hooks/useProfileEditing';
+
+interface Location {
+    id: string;
+    name: string;
+    label?: string;
+    coordinates?: { lat: number; lon: number };
+}
+
+interface EditLocationModalProps {
+    visible: boolean;
+    onClose: () => void;
+    initialLocations?: Location[];
+    theme?: 'light' | 'dark';
+    onSave?: () => void;
+}
+
+export const EditLocationModal: React.FC<EditLocationModalProps> = ({
+    visible,
+    onClose,
+    initialLocations = [],
+    theme = 'light',
+    onSave,
+}) => {
+    const { t } = useI18n();
+    const colorScheme = useColorScheme();
+    const themeStyles = useThemeStyles(theme || 'light', colorScheme);
+    const colors = themeStyles.colors;
+    const { saveProfile, isSaving } = useProfileEditing();
+
+    const [locations, setLocations] = useState<Location[]>(initialLocations);
+    const [newLocation, setNewLocation] = useState('');
+
+    useEffect(() => {
+        if (visible) {
+            setLocations(initialLocations);
+            setNewLocation('');
+        }
+    }, [visible, initialLocations]);
+
+    const handleAddLocation = () => {
+        if (!newLocation.trim()) return;
+        const location: Location = {
+            id: `location-${Date.now()}`,
+            name: newLocation.trim(),
+        };
+        setLocations([...locations, location]);
+        setNewLocation('');
+    };
+
+    const handleRemoveLocation = (id: string) => {
+        setLocations(locations.filter(loc => loc.id !== id));
+    };
+
+    const handleSave = async () => {
+        const success = await saveProfile({ locations });
+        if (success) {
+            onSave?.();
+            onClose();
+        }
+    };
+
+    return (
+        <Modal
+            visible={visible}
+            animationType="slide"
+            transparent={true}
+            onRequestClose={onClose}
+        >
+            <View style={styles.modalOverlay}>
+                <View style={[styles.modalContent, { backgroundColor: colors.background }]}>
+                    <View style={styles.modalHeader}>
+                        <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+                            <Ionicons name="close" size={24} color={colors.text} />
+                        </TouchableOpacity>
+                        <Text style={[styles.modalTitle, { color: colors.text }]}>
+                            {t('editProfile.items.locations.title') || 'Locations'}
+                        </Text>
+                        <TouchableOpacity
+                            onPress={handleSave}
+                            disabled={isSaving}
+                            style={[styles.saveButton, { opacity: isSaving ? 0.5 : 1 }]}
+                        >
+                            <Text style={[styles.saveButtonText, { color: colors.tint }]}>
+                                {isSaving ? 'Saving...' : 'Save'}
+                            </Text>
+                        </TouchableOpacity>
+                    </View>
+
+                    <ScrollView style={styles.modalBody}>
+                        <View style={styles.inputGroup}>
+                            <Text style={[styles.label, { color: colors.text }]}>
+                                {t('editProfile.items.locations.add') || 'Add Location'}
+                            </Text>
+                            <View style={styles.addLocationRow}>
+                                <TextInput
+                                    style={[
+                                        styles.input,
+                                        {
+                                            backgroundColor: colors.card,
+                                            color: colors.text,
+                                            borderColor: colors.border,
+                                            flex: 1,
+                                        },
+                                    ]}
+                                    value={newLocation}
+                                    onChangeText={setNewLocation}
+                                    placeholder={t('editProfile.items.locations.placeholder') || 'Enter location name'}
+                                    placeholderTextColor={colors.secondaryText}
+                                    selectionColor={colors.tint}
+                                />
+                                <TouchableOpacity
+                                    style={[styles.addButton, { backgroundColor: colors.tint }]}
+                                    onPress={handleAddLocation}
+                                    disabled={!newLocation.trim()}
+                                >
+                                    <Ionicons name="add" size={20} color="#fff" />
+                                </TouchableOpacity>
+                            </View>
+                        </View>
+
+                        {locations.length > 0 && (
+                            <View style={styles.locationsList}>
+                                <Text style={[styles.listTitle, { color: colors.text }]}>
+                                    {t('editProfile.items.locations.yourLocations') || 'Your Locations'} ({locations.length})
+                                </Text>
+                                {locations.map((location, index) => (
+                                    <View
+                                        key={location.id}
+                                        style={[
+                                            styles.locationItem,
+                                            { backgroundColor: colors.card, borderColor: colors.border },
+                                            index < locations.length - 1 && { borderBottomWidth: StyleSheet.hairlineWidth },
+                                        ]}
+                                    >
+                                        <Text style={[styles.locationName, { color: colors.text }]}>
+                                            {location.name}
+                                        </Text>
+                                        <TouchableOpacity
+                                            onPress={() => handleRemoveLocation(location.id)}
+                                            style={styles.removeButton}
+                                        >
+                                            <Ionicons name="trash-outline" size={18} color="#FF3B30" />
+                                        </TouchableOpacity>
+                                    </View>
+                                ))}
+                            </View>
+                        )}
+                    </ScrollView>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    modalOverlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'flex-end',
+    },
+    modalContent: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        paddingTop: Platform.OS === 'ios' ? 20 : 16,
+        maxHeight: '80%',
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingBottom: 16,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E5EA',
+    },
+    closeButton: {
+        width: 40,
+        height: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    modalTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        flex: 1,
+        textAlign: 'center',
+    },
+    saveButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    saveButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    modalBody: {
+        padding: 16,
+    },
+    inputGroup: {
+        gap: 8,
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+    },
+    addLocationRow: {
+        flexDirection: 'row',
+        gap: 8,
+        alignItems: 'center',
+    },
+    input: {
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 12,
+        padding: 16,
+        fontSize: 16,
+        minHeight: 52,
+    },
+    addButton: {
+        width: 52,
+        height: 52,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    locationsList: {
+        gap: 8,
+    },
+    listTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontFamily: fontFamilies.phuduSemiBold,
+        marginBottom: 8,
+    },
+    locationItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: 16,
+        borderRadius: 12,
+        borderWidth: StyleSheet.hairlineWidth,
+    },
+    locationName: {
+        fontSize: 16,
+        flex: 1,
+    },
+    removeButton: {
+        padding: 8,
+    },
+});
+
+
+
+
+
+
+
+