complated

screens/create-ads/ui/StepThree.tsx

@@ -76,6 +76,17 @@ const StepThree = forwardRef(({ formData, updateForm, data }: StepProps, ref) =>
     }
   };
 
+  const toggleSelectAllCompanies = () => {
+    const selected = formData.company || [];
+    if (selected.length === corporations.length) {
+      // Deselect all
+      updateForm('company', []);
+    } else {
+      // Select all
+      updateForm('company', corporations);
+    }
+  };
+
   useEffect(() => {
     const country = statesData?.find((c) => c.code === formData.country);
     setRegions(country?.region || []);
@@ -90,13 +101,19 @@ const StepThree = forwardRef(({ formData, updateForm, data }: StepProps, ref) =>
     const country = statesData?.find((c) => c.code === formData.country);
     const region = country?.region.find((r) => r.code === formData.region);
     setDistricts(region?.districts || []);
-    if (!region?.districts.some((d) => d.code === formData.district)) {
+
+    // If region is 'all', automatically set district to 'all'
+    if (formData.region === 'all') {
+      updateForm('district', 'all');
+    } else if (!region?.districts.some((d) => d.code === formData.district)) {
       updateForm('district', '');
     }
   }, [formData.region, formData.country, statesData]);
 
-  const getLabel = (arr: { name: string; code: string }[], val: string) =>
-    arr.find((item) => item.code === val)?.name || t('— Tanlang —');
+  const getLabel = (arr: { name: string; code: string }[], val: string) => {
+    if (val === 'all') return t('Hammasi');
+    return arr.find((item) => item.code === val)?.name || t('— Tanlang —');
+  };
 
   const renderCompanyItem = ({ item }: ListRenderItemInfo<{ id: number; latter: string }>) => {
     const isSelected = formData.company?.some((c: any) => c.id === item.id);
@@ -157,7 +174,13 @@ const StepThree = forwardRef(({ formData, updateForm, data }: StepProps, ref) =>
       <TouchableOpacity
         style={[
           styles.pickerButton,
-          { backgroundColor: theme.cardBg, borderColor: theme.cardBorder },
+          {
+            backgroundColor: theme.cardBg,
+            borderColor: theme.cardBorder,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 10,
+          },
         ]}
         onPress={() => setShowCountry(true)}
       >
@@ -190,9 +213,18 @@ const StepThree = forwardRef(({ formData, updateForm, data }: StepProps, ref) =>
       <TouchableOpacity
         style={[
           styles.pickerButton,
-          { backgroundColor: theme.cardBg, borderColor: theme.cardBorder },
+          {
+            backgroundColor: theme.cardBg,
+            borderColor: theme.cardBorder,
+            opacity: formData.region === 'all' ? 0.5 : 1,
+          },
         ]}
-        onPress={() => setShowDistrict(true)}
+        onPress={() => {
+          if (formData.region !== 'all') {
+            setShowDistrict(true);
+          }
+        }}
+        disabled={formData.region === 'all'}
       >
         <Text style={[styles.pickerText, { color: theme.text }]}>
           {getLabel(
@@ -202,9 +234,34 @@ const StepThree = forwardRef(({ formData, updateForm, data }: StepProps, ref) =>
         </Text>
       </TouchableOpacity>
 
-      <Text style={[styles.sectionTitle, { color: theme.text }]}>
-        {t('Reklama joylashtirish kompaniyasi')}
-      </Text>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Text style={[styles.sectionTitle, { color: theme.text }]}>
+          {t('Reklama joylashtirish kompaniyasi')}
+        </Text>
+        <TouchableOpacity
+          style={[
+            styles.selectAllButton,
+            {
+              backgroundColor:
+                formData.company?.length === corporations.length ? theme.primary : theme.cardBg,
+              borderColor: theme.primary,
+            },
+          ]}
+          onPress={toggleSelectAllCompanies}
+        >
+          <Text
+            style={[
+              styles.selectAllText,
+              {
+                color:
+                  formData.company?.length === corporations.length ? '#fff' : theme.primary,
+              },
+            ]}
+          >
+            {formData.company?.length === corporations.length ? t('Bekor qilish') : t('Hammasi')}
+          </Text>
+        </TouchableOpacity>
+      </View>
       <FlatList
         data={corporations}
         renderItem={renderCompanyItem}
@@ -232,21 +289,29 @@ const StepThree = forwardRef(({ formData, updateForm, data }: StepProps, ref) =>
         isOpen={showCountry}
         onClose={() => setShowCountry(false)}
         selectedValue={formData.country}
-        data={statesData ? statesData.map((c) => ({ label: c.name, value: c.code })) : []}
+        data={
+          statesData ? statesData.map((c) => ({ label: c.name, value: c.code, flag: c.flag })) : []
+        }
         onSelect={(v) => updateForm('country', v)}
       />
       <CategorySelectorBottomSheet
         isOpen={showRegion}
         onClose={() => setShowRegion(false)}
         selectedValue={formData.region}
-        data={regions.map((r) => ({ label: r.name, value: r.code }))}
+        data={[
+          { label: t('Hammasi'), value: 'all' },
+          ...regions.map((r) => ({ label: r.name, value: r.code })),
+        ]}
         onSelect={(v) => updateForm('region', v)}
       />
       <CategorySelectorBottomSheet
         isOpen={showDistrict}
         onClose={() => setShowDistrict(false)}
         selectedValue={formData.district}
-        data={districts.map((d) => ({ label: d.name, value: d.code }))}
+        data={[
+          { label: t('Hammasi'), value: 'all' },
+          ...districts.map((d) => ({ label: d.name, value: d.code })),
+        ]}
         onSelect={(v) => updateForm('district', v)}
       />
     </ScrollView>
@@ -286,4 +351,14 @@ const styles = StyleSheet.create({
   priceLine: { fontSize: 15 },
   totalPrice: { fontSize: 18, fontWeight: '700', marginTop: 6 },
   error: { fontWeight: '600', marginBottom: 10 },
+  selectAllButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    borderWidth: 1,
+  },
+  selectAllText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
 });