diff --git a/src/components/MajorUpdateOverlay.tsx b/src/components/MajorUpdateOverlay.tsx index bd21d963..e4494c77 100644 --- a/src/components/MajorUpdateOverlay.tsx +++ b/src/components/MajorUpdateOverlay.tsx @@ -1,95 +1,238 @@ import React from 'react'; -import { Modal, View, Text, StyleSheet, TouchableOpacity, Linking } from 'react-native'; +import { + Modal, + View, + Text, + StyleSheet, + TouchableOpacity, + Linking, +} from 'react-native'; import { MaterialIcons } from '@expo/vector-icons'; import { useTheme } from '../contexts/ThemeContext'; +import { useTranslation } from 'react-i18next'; interface Props { - visible: boolean; - latestTag?: string; - releaseNotes?: string; - releaseUrl?: string; - onDismiss: () => void; - onLater: () => void; - onUpdateAction?: () => void; - isDownloading?: boolean; - downloadProgress?: number; + visible: boolean; + latestTag?: string; + releaseNotes?: string; + releaseUrl?: string; + onDismiss: () => void; + onLater: () => void; + onUpdateAction?: () => void; + isDownloading?: boolean; + downloadProgress?: number; } -const MajorUpdateOverlay: React.FC = ({ visible, latestTag, releaseNotes, releaseUrl, onDismiss, onLater, onUpdateAction, isDownloading, downloadProgress }) => { - const { currentTheme } = useTheme(); +const MajorUpdateOverlay: React.FC = ({ + visible, + latestTag, + releaseNotes, + releaseUrl, + onDismiss, + onLater, + onUpdateAction, + isDownloading, + downloadProgress, +}) => { + const { currentTheme } = useTheme(); + const { t } = useTranslation(); + if (!visible) return null; - if (!visible) return null; + const progressPercent = downloadProgress + ? Math.round(downloadProgress * 100) + : 0; - const progressPercent = downloadProgress ? Math.round(downloadProgress * 100) : 0; + return ( + + + + + + + + + {t('major_update_screen.major_update_title')} + + {!!latestTag && ( + + {t('major_update_screen.latest')} {latestTag} + + )} + - return ( - - - - - - - - Major update available - {!!latestTag && ( - Latest: {latestTag} - )} - + {!!releaseNotes && ( + + + {releaseNotes} + + + )} - {!!releaseNotes && ( - - - {releaseNotes} - - - )} + + {releaseUrl || onUpdateAction ? ( + releaseUrl && Linking.openURL(releaseUrl)) + } + disabled={isDownloading} + > + + + {isDownloading + ? `${t('major_update_screen.downloading')}... ${progressPercent}%` + : onUpdateAction + ? t('major_update_screen.update_now') + : t('major_update_screen.view_release')} + + + ) : null} - - {releaseUrl || onUpdateAction ? ( - releaseUrl && Linking.openURL(releaseUrl))} - disabled={isDownloading} - > - - - {isDownloading ? `Downloading... ${progressPercent}%` : (onUpdateAction ? 'Update Now' : 'View release')} - - - ) : null} - - - - Later - - - Dismiss - - - - - - - ); + + + + {t('major_update_screen.later')} + + + + + {t('major_update_screen.dismiss')} + + + + + + + + ); }; const styles = StyleSheet.create({ - backdrop: { flex: 1, backgroundColor: 'rgba(0,0,0,0.8)', alignItems: 'center', justifyContent: 'center', padding: 20 }, - card: { width: 380, maxWidth: '100%', borderRadius: 20, borderWidth: 1, overflow: 'hidden' }, - header: { alignItems: 'center', paddingTop: 28, paddingBottom: 16, paddingHorizontal: 20 }, - iconCircle: { width: 56, height: 56, borderRadius: 28, alignItems: 'center', justifyContent: 'center', marginBottom: 12 }, - title: { fontSize: 20, fontWeight: '700', marginBottom: 6 }, - version: { fontSize: 14 }, - notesBox: { marginHorizontal: 20, marginBottom: 16, padding: 12, borderRadius: 12, backgroundColor: 'rgba(255,255,255,0.08)' }, - notes: { fontSize: 14, lineHeight: 20 }, - actions: { paddingHorizontal: 20, paddingBottom: 20 }, - primaryBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, justifyContent: 'center', paddingVertical: 12, borderRadius: 12, marginBottom: 12 }, - primaryText: { color: '#fff', fontSize: 16, fontWeight: '600' }, - secondaryRow: { flexDirection: 'row', gap: 10 }, - secondaryBtn: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingVertical: 12, borderRadius: 12, borderWidth: 1 }, - secondaryText: { fontSize: 15, fontWeight: '500' }, + backdrop: { + flex: 1, + backgroundColor: 'rgba(0,0,0,0.8)', + alignItems: 'center', + justifyContent: 'center', + padding: 20, + }, + card: { + width: 380, + maxWidth: '100%', + borderRadius: 20, + borderWidth: 1, + overflow: 'hidden', + }, + header: { + alignItems: 'center', + paddingTop: 28, + paddingBottom: 16, + paddingHorizontal: 20, + }, + iconCircle: { + width: 56, + height: 56, + borderRadius: 28, + alignItems: 'center', + justifyContent: 'center', + marginBottom: 12, + }, + title: { fontSize: 20, fontWeight: '700', marginBottom: 6 }, + version: { fontSize: 14 }, + notesBox: { + marginHorizontal: 20, + marginBottom: 16, + padding: 12, + borderRadius: 12, + backgroundColor: 'rgba(255,255,255,0.08)', + }, + notes: { fontSize: 14, lineHeight: 20 }, + actions: { paddingHorizontal: 20, paddingBottom: 20 }, + primaryBtn: { + flexDirection: 'row', + alignItems: 'center', + gap: 8, + justifyContent: 'center', + paddingVertical: 12, + borderRadius: 12, + marginBottom: 12, + }, + primaryText: { color: '#fff', fontSize: 16, fontWeight: '600' }, + secondaryRow: { flexDirection: 'row', gap: 10 }, + secondaryBtn: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + paddingVertical: 12, + borderRadius: 12, + borderWidth: 1, + }, + secondaryText: { fontSize: 15, fontWeight: '500' }, }); export default MajorUpdateOverlay; - - diff --git a/src/components/UpdatePopup.tsx b/src/components/UpdatePopup.tsx index e90dac8a..89074b49 100644 --- a/src/components/UpdatePopup.tsx +++ b/src/components/UpdatePopup.tsx @@ -13,7 +13,7 @@ import { useTheme } from '../contexts/ThemeContext'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import * as Haptics from 'expo-haptics'; import AndroidUpdatePopup from './AndroidUpdatePopup'; -import { t } from 'i18next'; +import { useTranslation } from 'react-i18next'; const { width, height } = Dimensions.get('window'); @@ -43,7 +43,7 @@ const UpdatePopup: React.FC = ({ }) => { const { currentTheme } = useTheme(); const insets = useSafeAreaInsets(); - + const { t } = useTranslation(); const getReleaseNotes = () => { const manifest: any = updateInfo?.manifest || {}; return ( diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index e1027bf7..9de40bf3 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -1564,5 +1564,14 @@ "installing": "Installing...", "later": "Later", "dismiss": "Dismiss" - } + }, + "major_update_screen":{ + "major_update_title":"Major update available", + "latest":"Latest:", + "downloading":"Downloading...", + "update_now":"Update Now", + "later":"Later", + "dismiss":"Dismiss", + "view_release":"View Release" + } } diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json index c241b56c..a654b5ba 100644 --- a/src/i18n/locales/it.json +++ b/src/i18n/locales/it.json @@ -1564,5 +1564,14 @@ "installing": "Installazione...", "later": "Dopo", "dismiss": "Ignora" + }, + "major_update_screen": { + "major_update_title": "Aggiornamento Importante Disponibile", + "latest": "Ultima:", + "downloading": "Download in corso...", + "update_now": "Aggiorna Ora", + "later": "Dopo", + "dismiss": "Ignora", + "view_release": "Vedi Release" } }