Enhance ServicesScreen with Currency Converter Modal and localization updates

- Added a CurrencyConverterModal to the ServicesScreen, triggered by a new TouchableOpacity around the service card for currency calculation.
- Updated localization file to include a new key for the currency converter.
This commit is contained in:
2025-08-20 18:34:31 +05:00
parent 4b3aedbd96
commit b5d3133c24
3 changed files with 140 additions and 3 deletions

View File

@@ -1,20 +1,31 @@
import { StyleSheet, SafeAreaView, FlatList, View } from 'react-native';
import { StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
import { Text } from '@/components/Themed';
import i18n from '@/i18n';
import { FontAwesome5 } from '@expo/vector-icons';
import ServiceCard from '@/components/ServiceCard';
import React, { useState } from 'react';
import CurrencyConverterModal from '@/components/CurrencyConverterModal';
export default function ServicesScreen() {
const [modalVisible, setModalVisible] = useState(false);
return (
<SafeAreaView style={styles.container}>
<Text style={styles.title}>{i18n.t('services')}</Text>
<View style={styles.row}>
<ServiceCard title="Manat kursy" icon={<FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />} />
<TouchableOpacity onPress={() => setModalVisible(true)}>
<ServiceCard title="Real Manat hasaplama" icon={<FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />} />
</TouchableOpacity>
<ServiceCard title="Oteliň wizitkasy" icon={<FontAwesome5 name="hotel" size={24} color="#D4AF37" />} />
<ServiceCard title="Oteliň açary içinde galsa" icon={<FontAwesome5 name="key" size={24} color="#D4AF37" />} />
<ServiceCard title="Terjimeçi" icon={<FontAwesome5 name="language" size={24} color="#D4AF37" />} />
</View>
<CurrencyConverterModal
visible={modalVisible}
onClose={() => setModalVisible(false)}
/>
</SafeAreaView>
);
}

View File

@@ -0,0 +1,125 @@
import React, { useState } from 'react';
import { View, Text, TextInput, Modal, StyleSheet, TouchableOpacity, KeyboardAvoidingView, Platform } from 'react-native';
import { FontAwesome } from '@expo/vector-icons';
import i18n from '@/i18n';
interface CurrencyConverterModalProps {
visible: boolean;
onClose: () => void;
}
const CurrencyConverterModal: React.FC<CurrencyConverterModalProps> = ({ visible, onClose }) => {
const [sar, setSar] = useState('');
const [tmt, setTmt] = useState('');
const USD_TO_SAR = '3.70';
const USD_TO_TMT = '19.5';
const handleSarChange = (value: string) => {
setSar(value);
if (value) {
const tmtValue = ((Number(value) / Number(USD_TO_SAR)) * Number(USD_TO_TMT)).toFixed(2);
setTmt(tmtValue);
} else {
setTmt('');
}
};
return (
<Modal
animationType="slide"
transparent={true}
visible={visible}
onRequestClose={onClose}
>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.centeredView}
>
<View style={styles.modalView}>
<TouchableOpacity style={styles.closeButton} onPress={onClose}>
<FontAwesome name="close" size={24} color="black" />
</TouchableOpacity>
<Text style={styles.modalTitle}>{i18n.t('currencyConverter')}</Text>
<View style={styles.inputContainer}>
<Text style={styles.currencyLabel}>Riyal</Text>
<TextInput
style={styles.input}
keyboardType="numeric"
placeholder="0.00"
value={sar}
onChangeText={handleSarChange}
/>
</View>
<View style={styles.inputContainer}>
<Text style={styles.currencyLabel}>Manat</Text>
<Text style={styles.resultText}>{tmt || '0.00'}</Text>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
);
};
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.5)',
},
modalView: {
margin: 20,
backgroundColor: 'white',
borderRadius: 20,
padding: 35,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
width: '80%',
},
closeButton: {
position: 'absolute',
right: 15,
top: 15,
},
modalTitle: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 20,
},
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 15,
width: '100%',
},
currencyLabel: {
fontSize: 18,
marginRight: 10,
width: 60,
},
input: {
borderBottomWidth: 1,
borderBottomColor: '#ccc',
fontSize: 18,
padding: 5,
flex: 1,
},
resultText: {
fontSize: 18,
padding: 5,
flex: 1,
}
});
export default CurrencyConverterModal;

View File

@@ -37,5 +37,6 @@
"sarToTmt": "SAR-dan TMT-a",
"hotelBusinessCard": "Myhmanhananyň wizit karty",
"masterkeyBox": "Masterkey gutusy",
"translator": "Terjimeçi"
"translator": "Terjimeçi",
"currencyConverter": "Walýuta hasaplama"
}