digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/SelectBusiness.js

@@ -1,177 +1,684 @@
-import { View, Text, StyleSheet, TouchableOpacity, TextInput, Image } from 'react-native'
-import React from 'react'
-import { COLORS, FONT_MEDIUM, FONT_NORMAL, WP } from '../themes/config'
-import LinearGradient from 'react-native-linear-gradient'
-import Ionicons from "react-native-vector-icons/Ionicons"
-import { CountryPhoneInput } from '../components'
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TextInput,
+  Image,
+  Pressable,
+  Animated,
+  FlatList,
+  Alert,
+} from 'react-native';
+import React, { useRef, useState, useEffect } from 'react';
+import {
+  Button_Text_SIZES,
+  COLORS,
+  FONT_MEDIUM,
+  FONT_NORMAL,
+  HP,
+  Input_Field_SIZES,
+  TEXT_SIZES,
+  WP,
+} from '../themes/config';
+import LinearGradient from 'react-native-linear-gradient';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import {
+  BottomView,
+  CountryPhoneInput,
+  CustomToast,
+  DeleteBusinessModal,
+  Header,
+  Loader,
+} from '../components';
+import { generatePDF } from 'react-native-html-to-pdf';
+import { viewDocument } from '@react-native-documents/viewer';
+import {
+  getAllBusinesses,
+  selectBusiness,
+  softDeleteBusiness,
+} from '../database/business';
+import {
+  Menu,
+  MenuOptions,
+  MenuOption,
+  MenuTrigger,
+} from 'react-native-popup-menu';
+import { getAllClients, getClientsByType } from '../database/clients';
+import { useSelector, useDispatch } from 'react-redux';
+import {
+  ALL_CLIENTS,
+  HOME_BANKS,
+  HOME_CUSTOMERS,
+  HOME_SUPPLIERS,
+  SELECTED_BUSINESS,
+} from '../redux/reducers/client/client_types';
+import { USER_BUSINESS, USER_CLIENTS } from '../redux/reducers/user/user_types';
+import axios from 'axios';
+import { GET_CLIENTS_BY_BUSINESS_ID } from '../api/api';
 
 export default function SelectBusiness({ navigation }) {
-    return (
-        <View style={Styles._mainContainers}>
-            <LinearGradient
-                start={{ x: 0, y: 0 }}
-                end={{ x: 1, y: 0 }}
-                colors={[COLORS.primaryColor, COLORS.secondaryColor]}
-                style={Styles._linearGradient}
-            >
-                <View style={Styles._titleMain}>
-                    <TouchableOpacity
-                        activeOpacity={0.8}
-                        onPress={() => { navigation.goBack() }}
+  const dispatch = useDispatch();
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [toast, setToast] = useState(null);
+  const [Loading, setLoading] = useState(false)
+
+  const userBusiness = useSelector((state) => state.user.user_business);
+  const userData = useSelector((state) => state.user.user_data);
+  const userClients = useSelector((state) => state.user.user_clients);
+
+  const slideAnim = useRef(new Animated.Value(0)).current;
+  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
+  const [selectedBusinessName, setSelectedBusinessName] = useState('');
+  const [selectedBusinessId, setSelectedBusinessId] = useState(null);
+  const [Business, setBusiness] = useState([]);
+
+  const openMenu = () => {
+    setMenuVisible(true);
+    Animated.timing(slideAnim, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const closeMenu = () => {
+    Animated.timing(slideAnim, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start(() => setMenuVisible(false));
+  };
+
+  const toggleMenu = () => {
+    if (menuVisible) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  };
+
+  const handleDelete = (business) => {
+    closeMenu();
+    setSelectedBusinessName(business?.name || '');
+    setSelectedBusinessId(business?.id || null);
+    setDeleteModalVisible(true);
+  };
+
+  const confirmDelete = async () => {
+    const finalData = {
+      id: selectedBusinessId,
+      businessName: selectedBusinessName,
+    };
+
+    console.log('Final Delete Data:', finalData);
+
+    try {
+      const result = await softDeleteBusiness(selectedBusinessId); // <-- your delete API call
+      console.log('✅ Business Deleted:', result);
+      // Alert.alert(
+      //   'Success',
+      //   `${selectedBusinessName} has been deleted successfully.`
+      // );
+      setToast({
+        type: 'success',
+        title: 'Business Deleted',
+        message: `${selectedBusinessName} has been deleted successfully.`,
+      });
+
+      // Close modal and refresh list
+      setDeleteModalVisible(false);
+      getAllBusinesses().then(async (res) => {
+        await selectBusiness(res[0]?.id);
+        dispatch({ type: SELECTED_BUSINESS, payload: res[0] });
+        setBusiness(res);
+        setTimeout(() => {
+          navigation?.goBack();
+        }, 200);
+      });
+
+      // Optionally go back or show success message
+      // navigation.goBack();
+    } catch (error) {
+      console.error('❌ Error deleting business:', error);
+      // Alert.alert(
+      //   'Error',
+      //   'Something went wrong while deleting your business.'
+      // );
+    }
+  };
+
+  const slideDownStyle = {
+    transform: [
+      {
+        translateY: slideAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-20, 0], // slide down from above
+        }),
+      },
+    ],
+  };
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', async () => {
+      try {
+        const businesses = await getAllBusinesses();
+        const allClients = await getAllClients();
+
+        if (!businesses || businesses.length === 0) {
+          console.log('No businesses found');
+          setBusiness([]);
+          return;
+        }
+
+        // ✅ Map each business with its number of clients
+        const updatedBusinesses = businesses.map((business) => {
+          const clientCount = allClients.filter(
+            (client) => client?.business_id === business?.id
+          ).length;
+
+          return {
+            ...business,
+            noOfClients: clientCount,
+          };
+        });
+
+        setBusiness(updatedBusinesses);
+      } catch (err) {
+        console.error('Error in focus listener:', err);
+      }
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  const onSelectBusiness = async (item) => {
+    try {
+      await selectBusiness(item?.id);
+
+      // 1️⃣ Get all businesses and clients
+      const businesses = await getAllBusinesses();
+      const allClients = await getAllClients();
+
+      // 2️⃣ Add client counts to each business
+      const updatedBusinesses = businesses.map((business) => {
+        const clientCount = allClients.filter(
+          (client) => client?.business_id === business?.id
+        ).length;
+
+        return {
+          ...business,
+          noOfClients: clientCount,
+        };
+      });
+
+      // 3️⃣ Find selected business (from updated list)
+      const filtered = updatedBusinesses.find((b) => b.id === item?.id);
+
+      if (!filtered) {
+        console.warn('Business not found!');
+        return;
+      }
+
+      // 4️⃣ Load categorized clients (type 0=customers, 1=suppliers, 2=banks)
+      const [customers, suppliers, banks, allClientsForBusiness] =
+        await Promise.all([
+          getClientsByType(0, null, null, filtered.id),
+          getClientsByType(1, null, null, filtered.id),
+          getClientsByType(2, null, null, filtered.id),
+          getAllClients(null, filtered.id),
+        ]);
+
+      // 5️⃣ Dispatch data
+      dispatch({ type: HOME_CUSTOMERS, payload: customers });
+      dispatch({ type: HOME_SUPPLIERS, payload: suppliers });
+      dispatch({ type: HOME_BANKS, payload: banks });
+      dispatch({ type: ALL_CLIENTS, payload: allClientsForBusiness });
+      dispatch({ type: SELECTED_BUSINESS, payload: filtered });
+
+      // 6️⃣ Update UI and navigate
+      setBusiness(updatedBusinesses);
+
+      // Optional logs
+      console.log({
+        filtered,
+        customersCount: customers?.length,
+        suppliersCount: suppliers?.length,
+        banksCount: banks?.length,
+        allClientsCount: allClientsForBusiness?.length,
+      });
+
+      setTimeout(() => {
+        navigation.goBack();
+      }, 200);
+    } catch (error) {
+      console.error('Error in onSelectBusiness:', error);
+    }
+  };
+
+
+  // const onSelectBusiness = async (item) => {
+  //   try {
+  //     setLoading(true)
+
+  //     // 1️⃣ Get all businesses and clients
+  //     const businesses = userBusiness?.data || [];
+  //     const allClients = userClients?.data || [];
+
+  //     // 2️⃣ Add client counts to each business and update isSelected
+  //     const updatedBusinesses = businesses.map((business) => {
+
+  //       return {
+  //         ...business,
+  //         noOfClients: business?.clients?.length,
+  //         isSelected: business?.id === item?.id,
+  //       };
+  //     });
+
+  //     // 3️⃣ Find selected business (from updated list)
+  //     const filtered = updatedBusinesses.find((b) => b.id === item?.id);
+
+  //     dispatch({
+  //       type: USER_BUSINESS,
+  //       payload: { data: updatedBusinesses },
+  //     })
+
+  //     dispatch({
+  //       type: SELECTED_BUSINESS,
+  //       payload: filtered,
+  //     })
+
+  //     const clientResponse = await axios.get(
+  //       `${GET_CLIENTS_BY_BUSINESS_ID}/${item?.id}`,
+  //       {
+  //         headers: {
+  //           Authorization: `Bearer ${userData?.azureToken}`,
+  //         },
+  //       }
+  //     );
+
+  //     const allClientss = clientResponse?.data?.[0]?.data;
+
+  //     dispatch({
+  //       type: USER_CLIENTS,
+  //       payload: allClientss
+  //     })
+
+  //     if (!filtered) {
+  //       console.warn('Business not found!');
+  //       return;
+  //     }
+
+  //     // 4️⃣ Load categorized clients (type 0=customers, 1=suppliers, 2=banks)
+  //     // const [customers, suppliers, banks, allClientsForBusiness] =
+  //     //   await Promise.all([
+  //     //     getClientsByType(0, null, null, filtered.id),
+  //     //     getClientsByType(1, null, null, filtered.id),
+  //     //     getClientsByType(2, null, null, filtered.id),
+  //     //     getAllClients(null, filtered.id),
+  //     //   ]);
+
+  //     // // 5️⃣ Dispatch data
+  //     // dispatch({ type: HOME_CUSTOMERS, payload: customers });
+  //     // dispatch({ type: HOME_SUPPLIERS, payload: suppliers });
+  //     // dispatch({ type: HOME_BANKS, payload: banks });
+  //     // dispatch({ type: ALL_CLIENTS, payload: allClientsForBusiness });
+  //     // dispatch({ type: SELECTED_BUSINESS, payload: filtered });
+
+  //     // // 6️⃣ Update UI and navigate
+  //     // setBusiness(updatedBusinesses);
+
+  //     // // Optional logs
+  //     // console.log({
+  //     //   filtered,
+  //     //   customersCount: customers?.length,
+  //     //   suppliersCount: suppliers?.length,
+  //     //   banksCount: banks?.length,
+  //     //   allClientsCount: allClientsForBusiness?.length,
+  //     // });
+
+  //     setTimeout(() => {
+  //       setLoading(false)
+  //       navigation.goBack();
+  //     }, 200);
+  //   } catch (error) {
+  //     setLoading(false)
+  //     console.error('Error in onSelectBusiness:', error);
+  //   }
+  // };
+
+
+  return (
+    <View style={Styles._mainContainers}>
+      <Loader isVisible={Loading} />
+      <LinearGradient
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+        style={Styles._linearGradient}
+      >
+        {/* <View style={Styles._titleMain}>
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => {
+              navigation.goBack();
+            }}
+          >
+            <Ionicons
+              name={'chevron-back'}
+              color={COLORS.whiteColor}
+              size={24}
+            />
+          </TouchableOpacity>
+
+          <Text style={Styles._title}>Select Business</Text>
+        </View> */}
+        <Header navigation={navigation} title={'Select Business'} />
+      </LinearGradient>
+      <View style={Styles._contentMain}>
+        <View style={{ width: '100%', alignItems: 'center', gap: 12 }}>
+          <FlatList
+            data={Business}
+            // data={userBusiness?.data?.filter(item => item?.is_deleted === "0")}
+            contentContainerStyle={{ paddingBottom: 150 }}
+            renderItem={({ item, index }) => (
+              <TouchableOpacity
+                activeOpacity={0.8}
+                onPress={async () => {
+                  await onSelectBusiness(item);
+                }}
+                style={Styles.businessMain}
+              >
+                <View style={{ flexDirection: 'row', gap: 10 }}>
+                  <Image
+                    source={require('../assets/images/digiKhataSolo256.png')}
+                    resizeMode="contain"
+                    style={Styles._logo}
+                  />
+                  <View>
+                    <Text style={Styles._txt}>{item?.name}</Text>
+                    {item?.noOfClients > 0 && (
+                      <Text style={Styles._txt2}>
+                        {item?.noOfClients} Customers
+                      </Text>
+                    )}
+                  </View>
+                </View>
+
+                <View style={{ flexDirection: 'row', gap: 10 }}>
+                  <Menu>
+                    <MenuTrigger
+                      customStyles={{
+                        TriggerTouchableComponent: TouchableOpacity,
+                        triggerWrapper: Styles.triggerWrapper,
+                      }}
                     >
+                      {item?.isSelected && item?.isSelected != 0 && (
                         <Ionicons
-                            name={"chevron-back"}
-                            color={COLORS.whiteColor}
-                            size={20}
+                          name="checkmark"
+                          color={COLORS.primaryColor}
+                          size={20}
                         />
-                    </TouchableOpacity>
+                      )}
 
-                    <Text style={Styles._title}>Select Business</Text>
-                </View>
-            </LinearGradient>
-
-            <View style={Styles._contentMain}>
-                <View style={{ width: "100%", alignItems: "center", gap: 12 }}>
-                    <View style={Styles.businessMain}>
-                        <View style={{ flexDirection: "row", gap: 10 }}>
-                            <Image
-                                source={require("../assets/images/digiKhataSolo256.png")}
-                                resizeMode='contain'
-                                style={Styles._logo}
-                            />
-                            <View>
-                                <Text style={Styles._txt}>Saud Rehan</Text>
-                                <Text style={Styles._txt2}>12 Customers</Text>
-                            </View>
-                        </View>
-
-                        <View style={{ flexDirection: "row", gap: 10 }}>
-                            <Ionicons
-                                name={"checkmark"}
-                                color={COLORS.primaryColor}
-                                size={20}
-                            />
-
-                            <Ionicons
-                                name={"ellipsis-vertical"}
-                                color={COLORS.grey}
-                                size={20}
-                            />
-                        </View>
-                    </View>
+                      <Ionicons
+                        name="ellipsis-vertical"
+                        color={COLORS.blackColor}
+                        size={20}
+                      />
+                    </MenuTrigger>
+
+                    <MenuOptions optionsContainerStyle={Styles.menuContainer}>
+                      <MenuOption
+                        onSelect={() =>
+                          navigation.navigate('BusinessDetail', {
+                            businessId: item?.id,
+                          })
+                        }
+                      >
+                        <Text style={Styles.menuText}>Update Business</Text>
+                      </MenuOption>
+
+                      {Business && Business?.length != 1 && (
+                        <MenuOption onSelect={() => handleDelete(item)}>
+                          <Text style={Styles.menuText}>Delete Business</Text>
+                        </MenuOption>
+                      )}
+                    </MenuOptions>
+                  </Menu>
                 </View>
+              </TouchableOpacity>
+            )}
+          />
 
-                <TouchableOpacity
-                    activeOpacity={0.8}
-                    style={Styles._continueBtn}
-                >
-                    <Text style={Styles._continueBtnTxt}>Add New Business</Text>
-                </TouchableOpacity>
-            </View>
         </View>
-    )
+      </View>
+      {/* <BottomView style={Styles._btnsMain}>
+        <TouchableOpacity
+          activeOpacity={0.8}
+          style={Styles._continueBtn}
+          // onPress={createPDF}
+          onPress={() => {
+            navigation.navigate('BusinessStack');
+          }}
+        >
+          <Ionicons
+            name="add"
+            size={24}
+            color="#fff" // You can change this to match your theme
+            style={{ marginRight: 10 }}
+          />
+          <Text style={Styles._continueBtnTxt}>Add New Business</Text>
+        </TouchableOpacity>
+      </BottomView> */}
+      <BottomView style={Styles.bottomBar}>
+        <TouchableOpacity
+          style={Styles.totalButton}
+          onPress={() => {
+            navigation.navigate('BusinessStack');
+          }}
+        >
+          <Ionicons
+            name="add"
+            size={24}
+            color="#fff" // You can change this to match your theme
+            style={{ marginRight: 10 }}
+          />
+          <Text style={Styles._continueBtnTxt}>Add New Business</Text>{' '}
+        </TouchableOpacity>
+        {/* <TouchableOpacity
+                  style={styles._continueBtn}
+                  onPress={handleUpdate}
+                  // disabled={isNextDisabled}
+                >
+                  <Text style={styles._continueBtnTxt}>Update</Text>
+                </TouchableOpacity> */}
+      </BottomView>
+
+      <DeleteBusinessModal
+        visible={deleteModalVisible}
+        businessName={selectedBusinessName} // ✅ show correct name in modal
+        selectedBusinessId={selectedBusinessId}
+        onCancel={() => setDeleteModalVisible(false)}
+        onConfirm={confirmDelete}
+      />
+      {toast && (
+        <CustomToast
+          type={toast.type}
+          title={toast.title}
+          message={toast.message}
+          onClose={() => setToast(null)}
+        />
+      )}
+    </View>
+  );
 }
 
 const Styles = StyleSheet.create({
-    _mainContainers: {
-        flex: 1,
-        backgroundColor: COLORS.backgroundColor,
-        alignItems: "center"
-    },
-    _linearGradient: {
-        width: WP(100),
-        height: 80,
-        alignItems: "center",
-    },
-    _titleMain: {
-        width: WP(94),
-        height: 30,
-        // backgroundColor: "red",
-        flexDirection: "row",
-        alignItems: "center",
-        marginTop: 10
-    },
-    _title: {
-        color: COLORS.whiteColor,
-        fontFamily: FONT_NORMAL,
-        fontSize: 15,
-        marginLeft: 15
-    },
-    _contentMain: {
-        width: WP(94),
-        height: "90%",
-        backgroundColor: COLORS.whiteColor,
-        position: "absolute",
-        top: 50,
-        shadowColor: "#000",
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.2,
-        shadowRadius: 3.84,
-        elevation: 5,
-        borderRadius: 10,
-        alignItems: "center",
-        justifyContent: "space-between",
-        paddingVertical: 12,
-    },
-    _input: {
-        width: "95%",
-        height: 50,
-        backgroundColor: COLORS.whiteColor,
-        borderRadius: 15,
-        paddingLeft: 12,
-        borderColor: COLORS.grey,
-        borderWidth: 1,
-        color: COLORS.blackColor,
-        fontFamily: FONT_NORMAL,
-        fontSize: 13
+  _mainContainers: {
+    flex: 1,
+    backgroundColor: COLORS.backgroundColor,
+    alignItems: 'center',
+  },
+  _linearGradient: {
+    width: WP(100),
+    height: 80,
+    alignItems: 'center',
+  },
+  _titleMain: {
+    width: WP(94),
+    height: 30,
+    // backgroundColor: "red",
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  _title: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 18,
+    marginLeft: 20,
+  },
+  _contentMain: {
+    width: WP(95),
+    height: '90%',
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    top: 50,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    _continueBtn: {
-        width: "95%",
-        height: 50,
-        backgroundColor: COLORS.primaryColor,
-        borderRadius: 100,
-        justifyContent: "center",
-        alignItems: "center",
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+  },
+  _input: {
+    width: '95%',
+    height: 50,
+    backgroundColor: COLORS.whiteColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    paddingLeft: 12,
+    borderColor: COLORS.grey,
+    borderWidth: 1,
+    color: COLORS.blackColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+  _continueBtn: {
+    width: '100%',
+    height: 50,
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 40,
+    // bottom: HP(1),
+    flexDirection: 'row',
+  },
+  _btnsMain: {
+    backgroundColor: 'transparent',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  _continueBtnTxt: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: Button_Text_SIZES.Button_Text,
+  },
+  businessMain: {
+    width: '97%',
+    height: Input_Field_SIZES.Input_Field,
+    backgroundColor: COLORS.whiteColor,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
     },
-    _continueBtnTxt: {
-        color: COLORS.whiteColor,
-        fontFamily: FONT_NORMAL,
-        fontSize: 17
-    },
-    businessMain: {
-        width: "95%",
-        height: 60,
-        backgroundColor: COLORS.whiteColor,
-        shadowColor: "#000",
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.2,
-        shadowRadius: 3.84,
-        elevation: 5,
-        borderRadius: 10,
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        paddingHorizontal: 10
-    },
-    _logo: {
-        width: 30,
-        height: 30,
-    },
-    _txt: {
-        color: COLORS.blackColor,
-        fontFamily: FONT_MEDIUM,
-        fontSize: 13
-    },
-    _txt2: {
-        color: COLORS.blackColor,
-        opacity: 0.6,
-        fontFamily: FONT_NORMAL,
-        fontSize: 11
-    },
-})
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 10,
+    marginVertical: 5,
+    alignSelf: 'center',
+  },
+  _logo: {
+    width: 30,
+    height: 30,
+  },
+  _txt: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 13,
+  },
+  _txt2: {
+    color: COLORS.blackColor,
+    opacity: 0.6,
+    fontFamily: FONT_NORMAL,
+    fontSize: 11,
+  },
+
+  triggerWrapper: {
+    padding: 6,
+    flexDirection: 'row',
+    gap: WP(5),
+  },
+  menuContainer: {
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    // paddingVertical: 5,
+    backgroundColor: '#fff',
+    elevation: 6,
+    shadowColor: '#000',
+    shadowOpacity: 0.15,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    minWidth: 160,
+  },
+  menuText: {
+    fontSize: 15,
+    paddingVertical: 5,
+    paddingHorizontal: 14,
+    color: COLORS.blackColor,
+  },
+
+  bottomBar: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderTopRightRadius: TEXT_SIZES.BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 10,
+    elevation: 10,
+  },
+
+  totalButton: {
+    borderWidth: 1,
+    marginBottom: 10,
+    flexDirection: 'row',
+    borderColor: '#FF3B30',
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: 100,
+    width: '100%',
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  totalText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+});