From 7ecbe23e0d5a99372af1ffb098ccc70e6aca3835 Mon Sep 17 00:00:00 2001
From: Nurmuhammet Allanov <nurmuhammet@mail.com>
Date: Thu, 21 Aug 2025 17:35:03 +0500
Subject: [PATCH] Refactor ServicesScreen to enhance modal management and
 localization

- Updated modal state management by introducing separate states for each service modal.
- Changed service titles to localized versions in Turkmen.
- Improved CurrencyConverterModal integration by updating visibility state and placeholder text color for better user experience.
---
 app/(tabs)/services.tsx               | 28 ++++++++++++++++++---------
 components/CurrencyConverterModal.tsx |  1 +
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/(tabs)/services.tsx b/app/(tabs)/services.tsx
index 2d2d14d..e49cb7b 100644
--- a/app/(tabs)/services.tsx
+++ b/app/(tabs)/services.tsx
@@ -7,25 +7,35 @@ import React, { useState } from 'react';
 import CurrencyConverterModal from '@/components/CurrencyConverterModal';
 
 export default function ServicesScreen() {
-  const [modalVisible, setModalVisible] = useState(false);
+  const [currencyModalVisible, setCurrencyModalVisible] = useState(false);
+  const [hotelModalVisible, setHotelModalVisible] = useState(false);
+  const [lostKeyModalVisible, setLostKeyModalVisible] = useState(false);
+  const [translatorModalVisible, setTranslatorModalVisible] = useState(false);
 
   const services = [
     {
-      title: 'currencyConverter',
+      title: 'Pul',
+      name: 'currencyConverter',
       icon: <FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />,
-      onPress: () => setModalVisible(true),
+      onPress: () => setCurrencyModalVisible(true),
     },
     {
-      title: 'hotelCard',
+      title: 'Otel',
+      name: 'hotelCard',
       icon: <FontAwesome5 name="hotel" size={24} color="#D4AF37" />,
+      onPress: () => setHotelModalVisible(true),
     },
     {
-      title: 'lostKey',
+      title: 'Açar içinde galdy',
+      name: 'lostKey',
       icon: <FontAwesome5 name="key" size={24} color="#D4AF37" />,
+      onPress: () => setLostKeyModalVisible(true),
     },
     {
-      title: 'translator',
+      title: 'Perewod',
+      name: 'translator',
       icon: <FontAwesome5 name="language" size={24} color="#D4AF37" />,
+      onPress: () => setTranslatorModalVisible(true),
     },
   ];
 
@@ -36,13 +46,13 @@ export default function ServicesScreen() {
       <View style={styles.grid}>
         {services.map((service, index) => (
           <TouchableOpacity key={index} style={styles.cardContainer} onPress={service.onPress}>
-            <ServiceCard title={i18n.t(service.title)} icon={service.icon} />
+            <ServiceCard title={service.title} icon={service.icon} />
           </TouchableOpacity>
         ))}
       </View>
       <CurrencyConverterModal
-        visible={modalVisible}
-        onClose={() => setModalVisible(false)}
+        visible={currencyModalVisible}
+        onClose={() => setCurrencyModalVisible(false)}
       />
     </SafeAreaView>
   );
diff --git a/components/CurrencyConverterModal.tsx b/components/CurrencyConverterModal.tsx
index 71a3918..5c560e4 100644
--- a/components/CurrencyConverterModal.tsx
+++ b/components/CurrencyConverterModal.tsx
@@ -48,6 +48,7 @@ const CurrencyConverterModal: React.FC<CurrencyConverterModalProps> = ({ visible
               style={styles.input}
               keyboardType="numeric"
               placeholder="0.00"
+              placeholderTextColor="#666"
               value={sar}
               onChangeText={handleSarChange}
             />