managarten/apps-archived/memoro/apps/mobile/features/settings/components/EmailNewsletterSettings.tsx

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { useTranslation } from 'react-i18next';
import SettingsToggle from '~/components/organisms/SettingsToggle';
import Text from '~/components/atoms/Text';
import { useUserSettings } from '../hooks/useUserSettings';
import { useTheme } from '~/features/theme/ThemeProvider';
import { useToast } from '~/features/toast';

export function EmailNewsletterSettings() {
	const { t } = useTranslation();
	const { isDark } = useTheme();
	const { settings, loading, updateEmailNewsletter, error } = useUserSettings();
	const [isUpdating, setIsUpdating] = useState(false);
	const { showSuccess, showError } = useToast();

	const handleEmailNewsletterToggle = async (optIn: boolean) => {
		setIsUpdating(true);
		try {
			await updateEmailNewsletter(optIn);
			showSuccess(
				t('settings.newsletter_updated', 'Newsletter Preference Updated'),
				t(
					optIn
						? 'settings.newsletter_subscribed_message'
						: 'settings.newsletter_unsubscribed_message',
					optIn
						? 'You have subscribed to the Memoro newsletter.'
						: 'You have unsubscribed from the Memoro newsletter.'
				)
			);
		} catch (err) {
			showError(
				t('settings.error', 'Error'),
				t('settings.newsletter_error', 'Failed to update newsletter preference. Please try again.')
			);
		} finally {
			setIsUpdating(false);
		}
	};

	const styles = StyleSheet.create({
		container: {
			marginBottom: 16,
		},
		errorText: {
			fontSize: 12,
			color: isDark ? '#FF6B6B' : '#DC3545',
			marginTop: 4,
			marginLeft: 16,
		},
	});

	return (
		<View style={styles.container}>
			<SettingsToggle
				title={t('settings.newsletter', 'Newsletter')}
				description={t(
					'settings.newsletter_description',
					'Erhalte Updates über neue Funktionen und Verbesserungen'
				)}
				type="toggle"
				isOn={settings.emailNewsletterOptIn || false}
				onToggle={handleEmailNewsletterToggle}
				disabled={loading || isUpdating}
				loading={isUpdating}
			/>
			{error && (
				<Text style={styles.errorText}>
					{t('settings.newsletter_error', 'Failed to update newsletter preference')}
				</Text>
			)}
		</View>
	);
}