digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/AddBusiness.js

@@ -0,0 +1,1161 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Animated,
+  FlatList,
+  StyleSheet,
+  Platform,
+  PermissionsAndroid,
+  ActivityIndicator,
+  BackHandler,
+  Alert,
+  Keyboard,
+  ScrollView,
+  ImageBackground,
+} from 'react-native';
+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,
+  FloatingInput,
+} from '../components';
+import { generatePDF } from 'react-native-html-to-pdf';
+import { viewDocument } from '@react-native-documents/viewer';
+import Geolocation from '@react-native-community/geolocation';
+import axios from 'axios';
+import {
+  addNewBusiness,
+  getAllBusinesses,
+  selectBusiness,
+} from '../database/business';
+import { useDispatch, useSelector } from 'react-redux';
+import { SELECTED_BUSINESS } from '../redux/reducers/client/client_types';
+import CityModal from '../components/CityModal';
+import Carousel from 'react-native-reanimated-carousel';
+import {
+  Card1,
+  Card10,
+  Card2,
+  Card3,
+  Card4,
+  Card5,
+  Card6,
+  Card7,
+  Card8,
+  Card9,
+} from '../components/BusinessCards';
+
+export default function AddBusiness({ navigation }) {
+  const dispatch = useDispatch();
+  const user = useSelector((state) => state.user.user_data);
+  const [step, setStep] = useState(1);
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+  const [ownerName, setOwnerName] = useState('');
+  const [businessName, setBusinessName] = useState('');
+  const [businessNameOther, setBusinessNameOther] = useState('');
+  const [businessNameOtherCategory, setBusinessNameOtherCategory] =
+    useState('');
+  const [phone, setPhone] = useState('');
+  const [businessType, setBusinessType] = useState(null);
+  const [businessCategory, setBusinessCategory] = useState(null);
+  const [inputValue, setInputValue] = useState('');
+  const [locationData, setLocationData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [coords, setCoords] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showCityModal, setShowCityModal] = useState(false);
+  const [otherType, setOtherType] = useState('');
+  const [toast, setToast] = useState(null); // { type, title, message }
+  const [keyboardPadding, setKeyboardPadding] = useState(0);
+
+  const cardComponents = [
+    Card8,
+    Card2,
+    Card3,
+    Card4,
+    Card7,
+    Card5,
+    Card6,
+    Card1,
+    Card10,
+    Card9,
+  ];
+
+  const businessCards = [
+    require('../assets/businessCards/card_wall_01.jpeg'),
+    require('../assets/businessCards/card_wall_02.jpeg'),
+    require('../assets/businessCards/card_wall_03.jpeg'),
+    require('../assets/businessCards/card_wall_04.jpeg'),
+    require('../assets/businessCards/card_wall_05.jpeg'),
+    require('../assets/businessCards/card_wall_06.jpeg'),
+    require('../assets/businessCards/card_wall_07.jpeg'),
+    require('../assets/businessCards/card_wall_08.jpeg'),
+    require('../assets/businessCards/card_11.png'),
+    require('../assets/businessCards/card_12_bg.png'),
+  ];
+
+  const [address, setAddress] = useState({
+    formattedAddress: '',
+    building: '',
+    area: '',
+    city: '',
+  });
+
+  const fetchLocation = async () => {
+    try {
+      if (!coords?.latitude || !coords?.longitude) {
+        console.warn('❗ Coordinates not found yet');
+        return;
+      }
+
+      setLoading(true);
+
+      const formData = new FormData();
+      formData.append('coords', `${coords.latitude},${coords.longitude}`);
+
+      const response = await axios.post(
+        'https://ai-api.invoicex.tech/minikyc/find-location',
+        formData,
+        { headers: { 'Content-Type': 'multipart/form-data' } }
+      );
+
+      const data = response.data;
+      console.log('Location Response:', data);
+
+      // Extract parts of formatted address for better display
+      const parts =
+        data.FormattedAddress?.split(',').map((p) => p.trim()) || [];
+
+      setAddress({
+        formattedAddress: data.FormattedAddress || '',
+        building: parts[0] || '',
+        area: data['Area/Province'] || '',
+        city: data.City || '',
+      });
+    } catch (error) {
+      console.error('❌ Error fetching location:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getLocation = () => {
+    Geolocation.getCurrentPosition((position) => {
+      const { latitude, longitude } = position.coords;
+      setCoords({ latitude, longitude });
+
+      console.log('Location_obtained:', { latitude, longitude });
+    });
+  };
+
+  const requestLocationPermission = async () => {
+    console.log('Requesting location permission...');
+    if (Platform.OS === 'android') {
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
+        );
+
+        console.log('Permission granted:', granted);
+        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+          getLocation();
+          fetchLocation();
+        } else {
+          console.log('Location permission not granted');
+        }
+      } catch (err) {
+        console.warn('Permission error:', err);
+      }
+    } else {
+      getLocation(); // iOS
+      fetchLocation();
+    }
+  };
+
+  // 👇 Run when user reaches step 5
+  useEffect(() => {
+    if (step === 5) {
+      requestLocationPermission();
+      fetchLocation();
+    }
+  }, [step]);
+
+  useEffect(() => {
+    if (coords) {
+      fetchLocation(); // 👈 only runs when coords is available
+    }
+  }, [coords]);
+
+  const handleNext = async () => {
+    if (isSubmitting) return; // Prevent double taps during submission
+
+    // 🧩 Validation by step
+    switch (step) {
+      case 1:
+        if (!ownerName.trim()) {
+          setToast({
+            type: 'warning',
+            title: 'Missing Info',
+            message: 'Please enter owner name.',
+          });
+          return;
+        }
+        break;
+
+      case 2:
+        if (!businessName.trim() || !phone.trim()) {
+          setToast({
+            type: 'warning',
+            title: 'Incomplete Info',
+            message: 'Please enter business name and phone number.',
+          });
+          return;
+        }
+        break;
+
+      case 3:
+        if (!businessType) {
+          setToast({
+            type: 'warning',
+            title: 'Missing Selection',
+            message: 'Please select a business type.',
+          });
+          return;
+        }
+        break;
+
+      case 4:
+        if (!businessCategory) {
+          setToast({
+            type: 'warning',
+            title: 'Missing Selection',
+            message: 'Please select a business category.',
+          });
+          return;
+        }
+        break;
+
+      case 5:
+        if (
+          !address?.building?.trim() ||
+          !address?.area?.trim() ||
+          !address?.city?.trim()
+        ) {
+          setToast({
+            type: 'warning',
+            title: 'Address Required',
+            message: 'Please fill in your complete address.',
+          });
+          return;
+        }
+
+      default:
+        break;
+    }
+
+    // ✅ If validation passes:
+    if (step < 5) {
+      Animated.sequence([
+        Animated.timing(fadeAnim, {
+          toValue: 0,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+      ]).start(() => setStep(step + 1));
+    } else {
+      // ✅ When step 5 is reached, submit final data
+      const finalData = {
+        ownerName,
+        phone,
+        businessName,
+        businessType,
+        businessCategory,
+        address,
+        businessNameOther,
+        businessNameOtherCategory,
+      };
+
+      console.log('Final Data:', finalData);
+
+      try {
+        setIsSubmitting(true); // 🔒 lock submission
+
+        const added = await addNewBusiness(
+          businessName,
+          phone,
+          ownerName,
+          businessType,
+          businessCategory,
+          address.formattedAddress, // ✅ fixed key
+          address.area, // ✅ fixed key
+          address.city,
+          businessNameOtherCategory,
+          businessNameOther
+        );
+
+        console.log('Business_Added', added);
+
+        const insertedId = added?.insertId;
+
+        if (insertedId) {
+          await selectBusiness(insertedId);
+
+          const all = await getAllBusinesses();
+          const filtered = all.find((item) => item?.id == insertedId);
+
+          if (filtered) {
+            dispatch({
+              type: SELECTED_BUSINESS,
+              payload: filtered,
+            });
+          }
+        }
+
+        setToast({
+          type: 'success',
+          title: 'Business Added',
+          message: `${businessName} has been added successfully.`,
+        });
+
+        navigation.reset({
+          index: 0,
+          routes: [
+            {
+              name: 'HomeStack',
+              state: {
+                routes: [{ name: 'HomeScreen' }],
+              },
+            },
+          ],
+        });
+      } catch (error) {
+        console.error('Error adding business:', error);
+        setToast({
+          type: 'error',
+          title: 'Error',
+          message: 'Something went wrong while adding your business.',
+        });
+      } finally {
+        setIsSubmitting(false); // 🔓 unlock once complete
+      }
+    }
+  };
+
+  // ---- Card data ----
+  const typeData = [
+    { id: '1', title: 'Retailer/ Shop', icon: 'storefront-outline' },
+    { id: '2', title: 'Wholesaler', icon: 'restaurant-outline' },
+    { id: '3', title: 'Distributor', icon: 'storefront-outline' },
+    { id: '4', title: 'Manufacturer', icon: 'briefcase-outline' },
+    { id: '5', title: 'Services', icon: 'briefcase-outline' },
+    { id: '6', title: 'Other', icon: 'briefcase-outline' },
+  ];
+
+  const categoryData = [
+    { id: '1', title: 'Kirana/Grocery', icon: 'cart-outline' },
+    { id: '2', title: 'Textile/Fashion', icon: 'shirt-outline' },
+    { id: '3', title: 'Medical', icon: 'medkit-outline' },
+    { id: '4', title: 'Electronics', icon: 'tv-outline' },
+    { id: '5', title: 'Mobile', icon: 'phone-portrait-outline' },
+    { id: '6', title: 'Automobile', icon: 'car-outline' },
+    { id: '7', title: 'Sports', icon: 'bicycle-outline' },
+    { id: '8', title: 'Kids/Toys', icon: 'happy-outline' },
+    { id: '9', title: 'Hardware/Tools', icon: 'construct-outline' },
+    { id: '10', title: 'Others', icon: 'apps-outline' },
+  ];
+
+  // ---- Step UI ----
+  const renderStep = () => {
+    switch (step) {
+      case 1:
+        return (
+          <View style={styles.stepContainer}>
+            <Text style={styles.label}>Owner Name</Text>
+            {/* <View style={styles.inputBox}>
+              <TextInput
+                style={styles.input}
+                placeholder="Enter owner name"
+                value={ownerName}
+                onChangeText={(text) => {
+                  // Allow letters, numbers, and spaces, limit to 15 characters
+                  const filtered = text
+                    .replace(/[^A-Za-z0-9\s]/g, '')
+                    .slice(0, 15);
+                  setOwnerName(filtered);
+                }}
+                placeholderTextColor="#888"
+              />
+              <View style={styles.IoniconsParent}>
+                <Ionicons
+                  name="person-outline"
+                  size={24}
+                  color={COLORS.primaryColor}
+                />
+              </View>
+            </View> */}
+            <FloatingInput
+              label="Enter owner Name"
+              iconName="person-outline"
+              iconPosition="left"
+              value={ownerName}
+              onChangeText={(text) => setOwnerName(text)}
+              allowedChars={/[^A-Za-z0-9\s]/g}
+              maxLength={15}
+            />
+          </View>
+        );
+
+      case 2:
+        return (
+          <View style={styles.stepContainer}>
+            {/* <Text style={styles.label}>Business Name</Text>
+            <View style={styles.inputBox}>
+              <TextInput
+                style={styles.input}
+                placeholder="Enter business name"
+                value={businessName}
+                onChangeText={(text) => {
+                  // Allow only letters (A-Z, a-z) and limit to 15 characters
+                  const filtered = text
+                    .replace(/[^A-Za-z0-9\s]/g, '')
+                    .slice(0, 15);
+
+                  setBusinessName(filtered);
+                }}
+                placeholderTextColor="#888"
+              />
+              <View style={styles.IoniconsParent}>
+                <Ionicons
+                  name="storefront-outline"
+                  size={24}
+                  color={COLORS.primaryColor}
+                />
+              </View>
+            </View> */}
+            <Text style={styles.label}>Business Name</Text>
+            <FloatingInput
+              label="Enter your business name"
+              iconName="storefront-outline"
+              iconPosition="left"
+              value={businessName}
+              onChangeText={(text) => {
+                // Allow only letters (A-Z, a-z) and limit to 15 characters
+                const filtered = text
+                  .replace(/[^A-Za-z0-9\s]/g, '')
+                  .slice(0, 15);
+
+                setBusinessName(filtered);
+              }}
+              allowedChars={/[^A-Za-z0-9\s]/g}
+            // maxLength={15}
+            />
+            <Text style={styles.label}>Phone</Text>
+            <View style={{ width: '100%', marginTop: 8 }}>
+              {/* <Ionicons
+                name="phone-portrait-outline"
+                size={20}
+                color={COLORS.primaryColor}
+              /> */}
+              {/* <TextInput
+                style={styles.input}
+                placeholder="Enter phone number"
+                value={phone}
+                onChangeText={setPhone}
+                placeholderTextColor="#888"
+              /> */}
+              <CountryPhoneInput
+                onChange={(text) => setPhone(text.fullNumber)}
+              />
+            </View>
+          </View>
+        );
+
+      case 3:
+        return (
+          <View style={styles.stepContainer}>
+            <Text style={styles.label}>Select Business Type</Text>
+            <FlatList
+              data={typeData}
+              numColumns={2}
+              columnWrapperStyle={{
+                justifyContent: 'space-between',
+                paddingHorizontal: 3,
+              }}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={[
+                    styles.card,
+                    businessType === item.id && {
+                      borderColor: COLORS.primaryColor,
+                      elevation: 4,
+                    },
+                  ]}
+                  onPress={() => setBusinessType(item.id)}
+                  activeOpacity={0.8}
+                >
+                  {/* Icon Circle */}
+                  <View
+                    style={{
+                      width: 40,
+                      height: 40,
+                      borderRadius: 25,
+                      backgroundColor: COLORS.primaryBase,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <Ionicons
+                      name={item.icon}
+                      size={24}
+                      color={
+                        businessType === item.id ? COLORS.primaryColor : '#444'
+                      }
+                    />
+                  </View>
+
+                  {/* Title */}
+                  <Text
+                    style={[
+                      styles.cardTitle,
+                      {
+                        color:
+                          businessType === item.id
+                            ? COLORS.primaryColor
+                            : '#333',
+                      },
+                    ]}
+                  >
+                    {item.title}
+                  </Text>
+                </TouchableOpacity>
+              )}
+              keyExtractor={(item) => item.id}
+            />
+            {businessType === '6' && (
+              <View>
+                {/* <View style={styles.inputBox}>
+                  <TextInput
+                    style={styles.input}
+                    placeholder="Other"
+                    value={businessNameOther}
+                    onChangeText={(text) => {
+                      // Allow only letters (A-Z, a-z) and limit to 15 characters
+                      const filtered = text
+                        .replace(/[^A-Za-z0-9\s]/g, '')
+                        .slice(0, 25);
+
+                      setBusinessNameOther(filtered);
+                    }}
+                    placeholderTextColor="#888"
+                  />
+                  <View style={styles.IoniconsParent}>
+                    <Ionicons
+                      name="create-outline"
+                      size={24}
+                      color={COLORS.primaryColor}
+                    />
+                  </View>
+                </View> */}
+                <FloatingInput
+                  label="Other"
+                  iconName="create-outline"
+                  iconPosition="right"
+                  value={businessNameOther}
+                  onChangeText={(text) => setBusinessNameOther(text)}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  maxLength={25}
+                />
+              </View>
+            )}
+          </View>
+        );
+
+      case 4:
+        return (
+          <View style={styles.stepContainer}>
+            <Text style={styles.label}>Select Business Category</Text>
+            <FlatList
+              data={categoryData}
+              numColumns={2}
+              columnWrapperStyle={{
+                justifyContent: 'space-between',
+                paddingHorizontal: 3,
+              }}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={[
+                    styles.card,
+                    businessCategory === item.id && {
+                      borderColor: COLORS.primaryColor,
+                      elevation: 4,
+                    },
+                  ]}
+                  onPress={() => setBusinessCategory(item.id)}
+                  activeOpacity={0.8}
+                >
+                  {/* Icon Circle */}
+                  <View
+                    style={{
+                      width: 40,
+                      height: 40,
+                      borderRadius: 25,
+                      backgroundColor: COLORS.primaryBase,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <Ionicons
+                      name={item.icon}
+                      size={24}
+                      color={
+                        businessCategory === item.id
+                          ? COLORS.primaryColor
+                          : '#444'
+                      }
+                    />
+                  </View>
+
+                  {/* Title */}
+                  <Text
+                    style={[
+                      styles.cardTitle,
+                      {
+                        color:
+                          businessCategory === item.id
+                            ? COLORS.primaryColor
+                            : '#333',
+                      },
+                    ]}
+                  >
+                    {item.title}
+                  </Text>
+                </TouchableOpacity>
+              )}
+              keyExtractor={(item) => item.id}
+            />
+
+            {businessCategory === '10' && (
+              <View>
+                {/* <TextInput
+                    style={styles.input}
+                    placeholder="Other"
+                    value={businessNameOtherCategory}
+                    onChangeText={(text) => {
+                      // Allow only letters (A-Z, a-z) and limit to 15 characters
+                      const filtered = text
+                        .replace(/[^A-Za-z0-9\s]/g, '')
+                        .slice(0, 25);
+
+                      setBusinessNameOtherCategory(filtered);
+                    }}
+                    placeholderTextColor="#888"
+                  />
+                  <View style={styles.IoniconsParent}>
+                    <Ionicons
+                      name="create-outline"
+                      size={24}
+                      color={COLORS.primaryColor}
+                    />
+                  </View> */}
+                <FloatingInput
+                  label="Other"
+                  iconName="create-outline"
+                  iconPosition="right"
+                  value={businessNameOtherCategory}
+                  onChangeText={(text) => setBusinessNameOtherCategory(text)}
+                  allowedChars={/[^A-Za-z0-9\s]/g}
+                  maxLength={25}
+                />
+              </View>
+            )}
+          </View>
+        );
+
+      case 5:
+        return (
+          <View style={styles.stepContainer}>
+            <View style={styles.businesTittleParent}>
+              <View>
+                <Text style={styles.label}>Business Address</Text>
+              </View>
+
+              <TouchableOpacity
+                style={styles.getLocationParent}
+                onPress={fetchLocation}
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <ActivityIndicator
+                      size="small"
+                      color={COLORS.primaryColor}
+                    />
+                    <Text style={styles.getLocationChild}>Google Location</Text>
+                  </>
+                ) : (
+                  <>
+                    <Ionicons
+                      name="location-outline"
+                      size={22}
+                      color={COLORS.primaryColor}
+                    />
+                    <Text style={styles.getLocationChild}>Google Location</Text>
+                  </>
+                )}
+              </TouchableOpacity>
+            </View>
+
+            {/* Building / Shop */}
+            <View>
+              {/* <Text style={styles.topText}>Shop / Building Number</Text> */}
+              {/* <View style={styles.inputBox}>
+                <TextInput
+                  style={styles.input}
+                  placeholder="Shop / Building Number"
+                  value={address.formattedAddress}
+                  onChangeText={(text) =>
+                    setAddress({ ...address, formattedAddress: text })
+                  }
+                  placeholderTextColor="#888"
+                />
+                <View style={styles.IoniconsParent}>
+                  <Ionicons
+                    name="home-outline"
+                    size={24}
+                    color={COLORS.primaryColor}
+                  />
+                </View>
+              </View> */}
+              <FloatingInput
+                label="Shop / Building Number"
+                iconName=""
+                iconPosition="right"
+                value={address.building}
+                onChangeText={(text) =>
+                  setAddress({ ...address, building: text })
+                }
+              // allowedChars={/[^A-Za-z0-9\s]/g}
+              // maxLength={15}
+              />
+            </View>
+
+            {/* Area */}
+            <View>
+              {/* <Text style={styles.topText}>Area / Locality</Text> */}
+              {/* <View style={styles.inputBox}>
+                <TextInput
+                  style={styles.input}
+                  placeholder="Area / Locality"
+                  value={address.area}
+                  onChangeText={(text) =>
+                    setAddress({ ...address, area: text })
+                  }
+                  placeholderTextColor="#888"
+                />
+                <View style={styles.IoniconsParent}>
+                  <Ionicons
+                    name="location-outline"
+                    size={24}
+                    color={COLORS.primaryColor}
+                  />
+                </View>
+              </View> */}
+              <FloatingInput
+                label="Area / Locality"
+                iconName=""
+                iconPosition="right"
+                value={address.area}
+                onChangeText={(text) => setAddress({ ...address, area: text })}
+              // allowedChars={/[^A-Za-z0-9\s]/g}
+              // maxLength={15}
+              />
+            </View>
+
+            {/* City */}
+            <View>
+              {/* <Text style={styles.topText}>Select City</Text> */}
+              <FloatingInput
+                label="City"
+                value={address.city}
+                editable={false}
+                placeholder="Select City"
+                iconName=""
+                iconPosition="right"
+                onPress={() => setShowCityModal(true)} // 👈 opens modal
+              />
+            </View>
+          </View>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const progressAnim = useRef(new Animated.Value(0)).current;
+
+  // Animate progress whenever step changes
+  useEffect(() => {
+    // Make the button start at 20% fill instead of 0%
+    const progress = 0.2 + ((step - 1) / 4) * 0.8; // 0.2 = initial fill, remaining 0.8 covers all 5 steps
+
+    Animated.timing(progressAnim, {
+      toValue: progress,
+      duration: 400,
+      useNativeDriver: false,
+    }).start();
+  }, [step]);
+
+  useEffect(() => {
+    const backAction = () => {
+      (async () => {
+        try {
+          const all = await getAllBusinesses();
+
+          if (all && all.length > 0) {
+            navigation?.goBack();
+          } else {
+            console.log('Do nothing!');
+          }
+        } catch (err) {
+          console.error('BackHandler error:', err);
+        }
+      })();
+
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      backAction
+    );
+
+    return () => backHandler.remove();
+  }, [navigation]);
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      console.log('Keyboard Shown');
+      setKeyboardPadding(260);
+    });
+
+    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      console.log('Keyboard Hidden');
+      setKeyboardPadding(0);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return (
+    <View style={styles._mainContainers}>
+      {/* Header */}
+      <LinearGradient
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        colors={[COLORS.secondaryColor, COLORS.primaryColor]}
+        style={styles._linearGradient}
+      >
+        <View style={styles._titleMain}>
+          <Text style={styles._title}>Set up New Business</Text>
+        </View>
+      </LinearGradient>
+
+      {/* Animated Content */}
+      <Animated.View style={[styles._contentMain]}>
+        <ScrollView
+          contentContainerStyle={{ alignItems: 'center', paddingBottom: 350 }}
+          showsVerticalScrollIndicator={false}
+        >
+          <View>
+            <Carousel
+              width={WP(100)}
+              height={HP(30)}
+              data={cardComponents}
+              mode="parallax"
+              loop
+              renderItem={({ item: Card }) => (
+                <View style={{ width: '100%', height: '100%' }}>
+                  <Card
+                    businessName={businessName}
+                    ownerName={ownerName}
+                    createAddress={address}
+                    phoneNumber={phone}
+                    businessType={businessType}
+                    businessCategory={businessCategory}
+                    businessNameOther={businessNameOther}
+                    businessNameOtherCategory={businessNameOtherCategory}
+                  />
+                </View>
+              )}
+            />
+          </View>
+          {renderStep()}
+        </ScrollView>
+      </Animated.View>
+
+      {/* Bottom Button */}
+      <BottomView style={[styles.bottomBar]}>
+        <TouchableOpacity
+          activeOpacity={0.9}
+          style={styles.totalButton}
+          onPress={handleNext}
+        // disabled={isNextDisabled} // disable when empty
+        >
+          {/* Animated fill background */}
+          <Animated.View
+            style={[
+              styles.progressFill,
+              {
+                width: progressAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: ['0%', '100%'],
+                }),
+              },
+            ]}
+          />
+          <Text style={styles._continueBtnTxt}>
+            NEXT
+            {/* {step === 5 ? 'Save' : 'Next'} */}
+          </Text>
+        </TouchableOpacity>
+      </BottomView>
+      <CityModal
+        visible={showCityModal}
+        onClose={() => setShowCityModal(false)}
+        onSelect={(selectedCity) =>
+          setAddress({ ...address, city: selectedCity })
+        }
+      />
+      {toast && (
+        <CustomToast
+          type={toast.type}
+          title={toast.title}
+          message={toast.message}
+          onClose={() => setToast(null)}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  _mainContainers: {
+    flex: 1,
+    backgroundColor: COLORS.whiteColor,
+    alignItems: 'center',
+  },
+  _linearGradient: {
+    width: WP(100),
+    height: 80,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    paddingBottom: 20,
+  },
+  _titleMain: {
+    width: WP(94),
+    flexDirection: 'row',
+    alignItems: 'center',
+    textAlign: 'center',
+    justifyContent: 'center',
+    marginBottom: HP(2),
+  },
+  _title: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 17,
+    // marginLeft: 15,
+  },
+  _contentMain: {
+    // width: WP(94),
+    width: '95%',
+    height: '90%',
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    top: 60,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    borderRadius: 10,
+    // alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    padding: 10,
+  },
+  stepContainer: {
+    width: '100%',
+    gap: 4,
+  },
+  businesTittleParent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    alignContent: 'center',
+    width: '100%', // 👈 ADD THIS
+    // backgroundColor: COLORS.redColor,
+  },
+  label: {
+    fontSize: TEXT_SIZES.Normal_Heading,
+    fontFamily: FONT_MEDIUM,
+    color: COLORS.blackColor,
+    alignSelf: 'flex-start',
+    // marginBottom: 10,
+  },
+  getLocationParent: {
+    backgroundColor: '#cdf0f5',
+    padding: 6,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    flexDirection: 'row',
+    gap: 5,
+    alignItems: "center"
+  },
+  getLocationChild: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 12,
+  },
+  topText: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 12,
+    marginBottom: HP(1),
+  },
+  inputBox: {
+    width: '98%',
+    height: Input_Field_SIZES.Input_Height,
+    borderWidth: 1,
+    borderColor: COLORS.grey,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    // marginBottom: 10,
+  },
+  input: {
+    flex: 1,
+    // marginLeft: 8,
+    fontSize: Input_Field_SIZES.Input_Font_Size,
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+  },
+  IoniconsParent: {
+    // backgroundColor: COLORS.iconBG,
+    padding: 10,
+    borderRadius: 50,
+  },
+  card: {
+    width: '49.5%',
+    height: 60,
+    borderRadius: 100,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: 5,
+    padding: 3,
+    marginVertical: 6,
+    backgroundColor: '#fff',
+    flexDirection: 'row',
+    // 💡 3D effect using light and dark edges
+    borderTopWidth: 1,
+    borderLeftWidth: 1,
+    borderBottomWidth: 1,
+    borderRightWidth: 1,
+    borderTopColor: '#f2f2f2', // light edge (top/left)
+    borderLeftColor: '#f2f2f2',
+    borderBottomColor: '#f2f2f2', // darker edge (bottom/right)
+    borderRightColor: '#f2f2f2',
+    elevation: 5,
+  },
+
+  cardTitle: {
+    fontSize: 13,
+    // marginTop: 6,
+  },
+  _bottomContainer: {
+    position: 'absolute',
+    bottom: HP(5),
+    width: '100%',
+    backgroundColor: 'transparent',
+    paddingVertical: 15,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    // elevation: 8,
+  },
+  _continueBtn: {
+    width: '90%',
+    height: 50,
+    backgroundColor: '#FF1900' + '30', // light base
+    borderRadius: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden', // ensure animated fill stays rounded
+  },
+
+  progressFill: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: 100,
+    width: '0%',
+  },
+  _continueBtnTxt: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_MEDIUM,
+    // fontSize: Button_Text_SIZES.Button_Text,
+    fontSize: 15
+  },
+
+  bottomBar: {
+    position: 'absolute',
+    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,
+    // borderColor: '#FF3B30',
+    backgroundColor: '#FF1900' + '30', // light base
+    borderRadius: 100,
+    width: '95%',
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});