memowake-front/components/owner/qualification/privacy.tsx

import { fetchApi } from '@/lib/server-api-util';
import { Policy } from '@/types/personal-info';
import React, { useEffect, useState } from 'react';
import { Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import RenderHtml from 'react-native-render-html';
import { useSafeAreaInsets } from "react-native-safe-area-context";

interface PrivacyModalProps {
    modalVisible: boolean;
    setModalVisible: (visible: boolean) => void;
    type: 'ai' | 'terms' | 'privacy' | 'user' | 'membership';
}

const titleMap = {
    ai: 'AI Policy',
    terms: 'Terms of Service',
    privacy: 'Privacy Policy',
    user: 'User Agreement',
    membership: 'Membership Agreement'
};

const PrivacyModal = ({ modalVisible, setModalVisible, type }: PrivacyModalProps) => {
    const [article, setArticle] = useState<Policy>({} as Policy);
    const insets = useSafeAreaInsets();
    useEffect(() => {
        const loadArticle = async () => {
            // ai协议
            if (type === 'ai') {
                fetchApi<Policy>(`/system-config/policy/ai_policy`).then((res: any) => {
                    setArticle(res)
                }).catch((error: any) => {
                    console.log(error)
                })
            }
            // 应用协议
            if (type === 'terms') {
                fetchApi<Policy>(`/system-config/policy/terms_of_service`).then((res: any) => {
                    setArticle(res)
                }).catch((error: any) => {
                    console.log(error)
                })
            }
            // 隐私协议
            if (type === 'privacy') {
                fetchApi<Policy>(`/system-config/policy/privacy_policy`).then((res: any) => {
                    setArticle(res)
                }).catch((error: any) => {
                    console.log(error)
                })
            }
            //用户协议
            if (type === 'user') {
                fetchApi<Policy>(`/system-config/policy/user_agreement`).then((res: any) => {
                    setArticle(res)
                }).catch((error: any) => {
                    console.log(error)
                })
            }
            // 会员协议
            if (type === 'membership') {
                fetchApi<Policy>(`/system-config/policy/membership_agreement`).then((res: any) => {
                    setArticle(res)
                }).catch((error: any) => {
                    console.log(error)
                })
            }
        };
        if (type) {
            loadArticle();
        }
    }, [type]);

    if (!article) {
        return (
            <View style={styles.container}>
                <Text>加载中...</Text>
            </View>
        );
    }

    return (
        <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => {
                setModalVisible(!modalVisible);
            }}>
            <View style={[styles.centeredView, { bottom: insets.bottom }]}>
                <View style={styles.modalView}>
                    <View style={styles.modalHeader}>
                        <Text style={{ opacity: 0 }}>Settings</Text>
                        <Text style={styles.modalTitle}>
                            {titleMap[type] || 'User Agreement'}
                        </Text>
                        <TouchableOpacity onPress={() => setModalVisible(false)}>
                            <Text style={styles.closeButton}>×</Text>
                        </TouchableOpacity>
                    </View>
                    <ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>
                        <RenderHtml
                            source={{ html: article.content }}
                            tagsStyles={{
                                p: { fontSize: 16, lineHeight: 24 },
                                strong: { fontWeight: 'bold' },
                                em: { fontStyle: 'italic' },
                            }}
                        />
                    </ScrollView>
                </View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: 'flex-end',
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    container: {
        flex: 1,
    },
    modalView: {
        width: '100%',
        height: '80%',
        backgroundColor: 'white',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        paddingHorizontal: 16,
    },
    modalHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 20,
    },
    modalTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#4C320C',
    },
    closeButton: {
        fontSize: 28,
        color: '#4C320C',
        padding: 10,
    },
    modalContent: {
        flex: 1,
    },
    modalText: {
        fontSize: 16,
        color: '#4C320C',
    },
    premium: {
        backgroundColor: "#FAF9F6",
        padding: 16,
        borderRadius: 24,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    content: {
        flex: 1,
        flexDirection: 'column',
        gap: 4,
        backgroundColor: '#FAF9F6',
        borderRadius: 24,
        paddingVertical: 8
    },
    item: {
        paddingHorizontal: 16,
        paddingVertical: 8,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    itemText: {
        fontSize: 14,
        fontWeight: '600',
        color: '#4C320C',
    },
    upgradeButton: {
        backgroundColor: '#E2793F',
        borderRadius: 20,
        paddingHorizontal: 16,
        paddingVertical: 8,
    },
    upgradeButtonText: {
        color: '#fff',
        fontSize: 14,
        fontWeight: "600"
    },
    switchContainer: {
        width: 50,
        height: 30,
        borderRadius: 15,
        justifyContent: 'center',
        paddingHorizontal: 2,
    },
    switchOn: {
        backgroundColor: '#E2793F',
        alignItems: 'flex-end',
    },
    switchOff: {
        backgroundColor: '#E5E5E5',
        alignItems: 'flex-start',
    },
    switchCircle: {
        width: 26,
        height: 26,
        borderRadius: 13,
    },
    switchCircleOn: {
        backgroundColor: 'white',
    },
    switchCircleOff: {
        backgroundColor: '#A5A5A5',
    },
});
export default PrivacyModal;