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.
2025-08-20 18:34:31 +05:00
parent 4b3aedbd96
commit b5d3133c24
3 changed files with 140 additions and 3 deletions
--- a/components/CurrencyConverterModal.tsx
+++ b/components/CurrencyConverterModal.tsx
@@ -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;