digikhata-mashreq-sdk 1.0.0 → 1.1.0

package/src/app/screens/BusinessDetail.js

@@ -0,0 +1,939 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  Animated,
+  FlatList,
+  StyleSheet,
+  Platform,
+  PermissionsAndroid,
+  Image,
+  ScrollView,
+} from 'react-native';
+import {
+  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 Share from 'react-native-share';
+
+import {
+  BottomView,
+  CountryPhoneInput,
+  FloatingInput,
+  PickerModal,
+} 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 { useRoute } from '@react-navigation/native';
+import { getAllBusinesses, updateBusiness } from '../database/business';
+import { getClientDetails, setProfilePic } from '../database/clients';
+import { useSelector, useDispatch } from 'react-redux';
+import Carousel from 'react-native-reanimated-carousel';
+import {
+  Card1,
+  Card10,
+  Card2,
+  Card3,
+  Card4,
+  Card5,
+  Card6,
+  Card7,
+  Card8,
+  Card9,
+} from '../components/BusinessCards';
+import ViewShot from 'react-native-view-shot';
+
+export default function BusinessDetail({ navigation }) {
+  const route = useRoute();
+  const { businessId } = route.params || {};
+  const dispatch = useDispatch();
+
+  const [step, setStep] = useState(1);
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+  const [inputValue, setInputValue] = useState('');
+  const [photo, setPhoto] = useState(null);
+  const [Business, setBusiness] = useState([]);
+  const [selectedBusiness, setSelectedBusiness] = useState(null);
+  const [IsPicker, setIsPicker] = useState(false);
+  const viewShotRef = useRef();
+  const carouselRef = useRef(null);
+  const viewShotRefs = useRef([]);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [capturedUri, setCapturedUri] = useState(null); // ✅ store last captured URI
+
+  console.log('photo_photo', selectedBusiness);
+
+  const [businessName, setBusinessName] = React.useState('');
+  const [phone, setPhone] = React.useState('');
+  const [ownerName, setOwnerName] = React.useState('');
+  const [businessType, setBusinessType] = React.useState('');
+  const [businessCategory, setBusinessCategory] = React.useState('');
+  const [location, setLocation] = React.useState('');
+  const [email, setEmail] = React.useState('');
+  const [city, setCity] = React.useState('');
+  const [id, setId] = useState('');
+  const cardComponents = [
+    Card8,
+    Card2,
+    Card3,
+    Card4,
+    Card7,
+    Card5,
+    Card6,
+    Card1,
+    Card10,
+    Card9,
+  ];
+
+  console.log('id_id', id);
+  const typeData = [
+    { id: '1', title: 'Retailer/ Shop', icon: 'storefront-outline' },
+    { id: '2', title: 'Wholesaler', icon: 'restaurant-outline' },
+    { id: '3', title: 'Distributor', icon: 'business-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' },
+  ];
+
+  const handleNavigate = (field, value) => {
+    navigation.navigate('UpdateBusiness', { field, value, selectedBusiness });
+  };
+  const handleNavigateGeolocation = (field, value) => {
+    navigation.navigate('Geolocation', { field, value, selectedBusiness });
+  };
+
+  const [address, setAddress] = useState({
+    building: '',
+    area: '',
+    city: '',
+  });
+
+  const getLocation = () => {
+    Geolocation.getCurrentPosition((position) => {
+      const { latitude, longitude } = position.coords;
+      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();
+        } else {
+          console.log('Location permission not granted');
+        }
+      } catch (err) {
+        console.warn('Permission error:', err);
+      }
+    } else {
+      getLocation(); // iOS
+    }
+  };
+
+  // 👇 Run when user reaches step 5
+  useEffect(() => {
+    if (step === 5) {
+      requestLocationPermission();
+    }
+  }, [step]);
+
+  const handleNext = () => {
+    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 {
+      console.log('✅ Final Data:', {
+        ownerName,
+        businessName,
+        businessType,
+        businessCategory,
+        address,
+      });
+    }
+  };
+
+  const handleShareWhatsApp = async () => {
+    try {
+      const currentRef = viewShotRefs.current[currentIndex]; // 👈 get current card ref
+      if (!currentRef) {
+        console.warn('No ViewShot ref found for index', currentIndex);
+        return;
+      }
+
+      const uri = await currentRef.capture(); // 👈 capture only current card
+      setCapturedUri(uri); // ✅ save for reuse
+      console.log('Captured URI:', uri);
+
+      await Share.open({
+        url: uri,
+        social: Share.Social.WHATSAPP,
+        // whatsAppNumber: '+923247299205',
+        filename: `BusinessCard_${Date.now()}.jpg`,
+        type: 'image/jpeg',
+      });
+    } catch (error) {
+      console.log('WhatsApp share error:', error);
+    }
+  };
+
+  const handleDownload = async () => {
+    try {
+      const currentRef = viewShotRefs.current[currentIndex];
+      if (!currentRef) {
+        console.warn('No ViewShot ref found for index', currentIndex);
+        return;
+      }
+
+      const uri = await currentRef.capture();
+      setCapturedUri(uri); // optional
+      console.log('Opening document URI:', uri);
+
+      await viewDocument({
+        uri: uri.startsWith('file://') ? uri : `file://${uri}`,
+      });
+    } catch (error) {
+      console.log('Error viewing document:', error);
+    }
+  };
+
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      getAllBusinesses().then((res) => {
+        setBusiness(res);
+      });
+    });
+    return () => unsubscribe();
+  }, [navigation]);
+
+  // 🔍 Filter business when Business state or ID changes
+  useEffect(() => {
+    if (Business.length > 0 && businessId) {
+      const found = Business.find((b) => b.id === businessId);
+      setSelectedBusiness(found || null);
+    }
+  }, [Business, businessId]);
+
+  useEffect(() => {
+    if (selectedBusiness) {
+      setId(selectedBusiness.id || '');
+      setBusinessName(selectedBusiness.name || '');
+      setPhoto(selectedBusiness.local_path || '');
+      setPhone(
+        typeof selectedBusiness.phone === 'object'
+          ? selectedBusiness.phone.number || ''
+          : selectedBusiness.phone || ''
+      );
+      setOwnerName(selectedBusiness.owner_name || '');
+
+      // 🏷️ Match type ID with its title
+      const matchedType =
+        typeData.find((t) => t.id === String(selectedBusiness.type))?.title ||
+        '';
+
+      // 🏷️ Match category ID with its title
+      const matchedCategory =
+        categoryData.find((c) => c.id === String(selectedBusiness.category))
+          ?.title || '';
+
+      setBusinessType(matchedType);
+      setBusinessCategory(matchedCategory);
+      setLocation(selectedBusiness.address || '');
+      setCity(selectedBusiness.city || '');
+      setEmail(selectedBusiness.email || '');
+    }
+  }, [selectedBusiness]);
+
+  const togglePicker = () => {
+    setIsPicker(!IsPicker);
+  };
+
+  const onPictureUpdate = async (uri) => {
+    console.log({ uri });
+    setPhoto(uri);
+    handleUpdate(uri); // Pass directly
+  };
+
+  const handleUpdate = async (updatedPhoto) => {
+    const finalData = {
+      id,
+      businessName,
+      phone,
+      ownerName,
+      businessType: selectedBusiness.type, // ✅ fixed
+      businessCategory: selectedBusiness.category,
+      location,
+      email,
+      photo: updatedPhoto || photo, // prefer param if provided
+    };
+
+    console.log('Final Data:', finalData);
+    debugger;
+    try {
+      const all = await updateBusiness(
+        id,
+        businessName,
+        phone,
+        ownerName,
+        selectedBusiness.type,
+        selectedBusiness.category,
+        location,
+        email,
+        updatedPhoto || photo
+      );
+      console.log('Business Updated:', all);
+    } catch (error) {
+      console.error('Error updating business:', error);
+    }
+  };
+
+  // console.log('id:', businessId);
+  // console.log('selectedBusiness:', selectedBusiness);
+
+  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}>
+          <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={() => {
+              navigation.goBack();
+            }}
+          >
+            <Ionicons
+              name={'chevron-back'}
+              color={COLORS.whiteColor}
+              size={20}
+            />
+          </TouchableOpacity>
+
+          <Text style={styles._title}>Business Details</Text>
+        </View>
+      </LinearGradient>
+
+      <View style={[styles._contentMain]}>
+        <ScrollView
+          contentContainerStyle={{
+            // alignItems: 'center',
+            paddingBottom: HP(20),
+            // width: '95%',
+          }}
+          showsVerticalScrollIndicator={false}
+        >
+          <View>
+            <Carousel
+              ref={carouselRef}
+              width={WP(100)}
+              height={HP(30)}
+              data={cardComponents}
+              mode="parallax"
+              loop
+              onSnapToItem={(index) => {
+                setCurrentIndex(index);
+                setCapturedUri(null); // 👈 clear captured URI for new card
+              }}
+              renderItem={({ item: Card, index }) => (
+                <View style={{ width: '100%', height: '100%' }}>
+                  <ViewShot
+                    ref={(ref) => (viewShotRefs.current[index] = ref)}
+                    style={{
+                      backgroundColor: COLORS.whiteColor,
+                    }}
+                    options={{
+                      fileName: `Snapshot_${new Date().toISOString().replace(/[:.]/g, '-')}_${Date.now()}`,
+                      format: 'jpg',
+                      quality: 0.9,
+                    }}
+                  >
+                    <Card
+                      businessName={businessName}
+                      ownerName={ownerName}
+                      address={location}
+                      phoneNumber={phone}
+                      businessTypeDetail={businessType}
+                      businessCategoryDetail={businessCategory}
+                      email={email}
+                      city={city}
+                      // businessNameOther={businessNameOther}
+                      // businessNameOtherCategory={businessNameOtherCategory}
+                    />
+                  </ViewShot>
+                </View>
+              )}
+            />
+          </View>
+
+          <View style={styles.imageContainer}>
+            <View style={styles.imageCircle}>
+              {photo ? (
+                <Image source={{ uri: photo }} style={styles.image} />
+              ) : (
+                <Ionicons name="storefront-outline" size={50} color="#ccc" />
+              )}
+
+              <TouchableOpacity
+                style={styles.cameraButton}
+                onPress={togglePicker}
+              >
+                <Ionicons name="camera-outline" size={24} color="#fff" />
+              </TouchableOpacity>
+            </View>
+
+            <Text style={styles.registeredText}>Registered Mobile Number</Text>
+            <Text style={styles.mobileNumber}>{phone}</Text>
+          </View>
+
+          {/* <TouchableOpacity
+            style={styles.inputBox}
+            onPress={() => handleNavigate('businessName', businessName)}
+          >
+            <TextInput
+              style={styles.input}
+              placeholder="Business Name"
+              value={businessName}
+              editable={false}
+              placeholderTextColor="#888"
+            />
+            <View style={styles.IoniconsParent}>
+              <Ionicons
+                name="storefront-outline"
+                size={24}
+                color={COLORS.primaryColor}
+              />
+            </View>
+          </TouchableOpacity> */}
+          <View style={styles.stepContainer}>
+            <FloatingInput
+              label="Business Name"
+              value={businessName}
+              editable={false}
+              placeholder="Select City"
+              iconName="storefront-outline"
+              iconPosition="right"
+              onPress={() => handleNavigate('businessName', businessName)}
+            />
+
+            {/* <TouchableOpacity
+              style={styles.inputBox}
+              onPress={() => handleNavigate('phone', phone)}
+            >
+              <TextInput
+                style={styles.input}
+                placeholder="Phone Number"
+                value={phone}
+                editable={false}
+                placeholderTextColor="#888"
+              />
+              <View style={styles.IoniconsParent}>
+                <Ionicons
+                  name="call-outline"
+                  size={24}
+                  color={COLORS.primaryColor}
+                />
+              </View>
+            </TouchableOpacity> */}
+
+            <FloatingInput
+              label="Phone Number"
+              value={phone}
+              editable={false}
+              placeholder="Phone Number"
+              iconName="call-outline"
+              iconPosition="right"
+              onPress={() => handleNavigate('phone', phone)}
+            />
+
+            {/* <TouchableOpacity
+              style={styles.inputBox}
+              onPress={() => handleNavigate('ownerName', ownerName)}
+            >
+              <TextInput
+                style={styles.input}
+                placeholder="Owner Name"
+                value={ownerName}
+                editable={false}
+                placeholderTextColor="#888"
+              />
+              <View style={styles.IoniconsParent}>
+                <Ionicons
+                  name="person-outline"
+                  size={24}
+                  color={COLORS.primaryColor}
+                />
+              </View>
+            </TouchableOpacity> */}
+
+            <FloatingInput
+              label="Owner Name"
+              value={ownerName}
+              editable={false}
+              placeholder="Owner Name"
+              iconName="person-outline"
+              iconPosition="right"
+              onPress={() => handleNavigate('ownerName', ownerName)}
+            />
+
+            {/* <TouchableOpacity
+              style={styles.inputBox}
+              onPress={() => handleNavigate('businessType', businessType)}
+            >
+              <TextInput
+                style={styles.input}
+                placeholder="Business Type"
+                value={businessType}
+                editable={false}
+                placeholderTextColor="#888"
+              />
+              <View style={styles.IoniconsParent}>
+                <Ionicons
+                  name="briefcase-outline"
+                  size={24}
+                  color={COLORS.primaryColor}
+                />
+              </View>
+            </TouchableOpacity> */}
+
+            <FloatingInput
+              label="Business Type"
+              value={businessType}
+              editable={false}
+              placeholder="Business Type"
+              iconName="briefcase-outline"
+              iconPosition="right"
+              onPress={() => handleNavigate('businessType', businessType)}
+            />
+
+            {/* <TouchableOpacity
+              style={styles.inputBox}
+              onPress={() =>
+                handleNavigate('businessCategory', businessCategory)
+              }
+            >
+              <TextInput
+                style={styles.input}
+                placeholder="Business Category"
+                value={businessCategory}
+                editable={false}
+                placeholderTextColor="#888"
+              />
+              <View style={styles.IoniconsParent}>
+                <Ionicons
+                  name="grid-outline"
+                  size={24}
+                  color={COLORS.primaryColor}
+                />
+              </View>
+            </TouchableOpacity> */}
+
+            <FloatingInput
+              label="Business Category"
+              value={businessCategory}
+              editable={false}
+              placeholder="Business Category"
+              iconName="briefcase-outline"
+              iconPosition="right"
+              onPress={() =>
+                handleNavigate('businessCategory', businessCategory)
+              }
+            />
+
+            {/* <TouchableOpacity
+              style={styles.inputBox}
+              onPress={() => handleNavigateGeolocation('location', location)}
+            >
+              <TextInput
+                style={styles.input}
+                placeholder="Location"
+                value={location}
+                editable={false}
+                placeholderTextColor="#888"
+              />
+              <View style={styles.IoniconsParent}>
+                <Ionicons
+                  name="location-outline"
+                  size={24}
+                  color={COLORS.primaryColor}
+                />
+              </View>
+            </TouchableOpacity> */}
+
+            <FloatingInput
+              label="Location"
+              value={location}
+              editable={false}
+              placeholder="Location"
+              iconName="location-outline"
+              iconPosition="right"
+              onPress={() => handleNavigateGeolocation('location', location)}
+            />
+
+            {/* <TouchableOpacity
+              style={styles.inputBox}
+              onPress={() => handleNavigate('email', email)}
+            >
+              <TextInput
+                style={styles.input}
+                placeholder="Email"
+                value={email}
+                editable={false}
+                placeholderTextColor="#888"
+              />
+              <View style={styles.IoniconsParent}>
+                <Ionicons
+                  name="mail-outline"
+                  size={24}
+                  color={COLORS.primaryColor}
+                />
+              </View>
+            </TouchableOpacity> */}
+
+            <FloatingInput
+              label="Email"
+              value={email}
+              editable={false}
+              placeholder="Email"
+              iconName="mail-outline"
+              iconPosition="right"
+              onPress={() => handleNavigate('email', email)}
+            />
+          </View>
+        </ScrollView>
+      </View>
+      <BottomView style={[styles.bottomBar]}>
+        <TouchableOpacity style={[styles.totalButton,{backgroundColor:COLORS.whiteColor}]} onPress={handleDownload}>
+          <Ionicons
+            name="download-outline"
+            size={24}
+            color={COLORS.primaryColor} // You can change this to match your theme
+            style={{ marginRight: 10 }}
+          />
+          <Text style={[styles._continueBtnTxt,{color:COLORS.primaryColor}]}>Download</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.totalButton}
+          onPress={handleShareWhatsApp}
+        >
+          <Ionicons
+            name="logo-whatsapp"
+            size={24}
+            color="#fff" // You can change this to match your theme
+            style={{ marginRight: 10 }}
+          />
+          <Text style={styles._continueBtnTxt}>Share</Text>
+        </TouchableOpacity>
+      </BottomView>
+
+      <PickerModal
+        isVisible={IsPicker}
+        onBackButtonPress={togglePicker}
+        onBackdropPress={togglePicker}
+        onCameraPress={(a) => {
+          onPictureUpdate(a?.uri);
+        }}
+        onGalleryPress={(a) => {
+          onPictureUpdate(a?.uri);
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  _mainContainers: {
+    flex: 1,
+    backgroundColor: COLORS.whiteColor,
+    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: {
+    // flex: 1,
+    width: WP(95),
+    // height: '100%',
+    backgroundColor: COLORS.whiteColor,
+    position: 'absolute',
+    top: 60,
+    bottom: 0, // 👈 Add this
+
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 3.84,
+    elevation: 5,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    // alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 12,
+    // padding: 10,
+  },
+  stepContainer: {
+    width: '95%',
+    alignSelf: 'center',
+    // gap: 12,
+  },
+  businesTittleParent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    alignContent: 'center',
+    width: '100%', // 👈 ADD THIS
+  },
+  label: {
+    fontSize: 17,
+    fontFamily: FONT_MEDIUM,
+    color: COLORS.blackColor,
+    alignSelf: 'flex-start',
+    // marginBottom: 10,
+  },
+  getLocationParent: {
+    backgroundColor: '#cdf0f5',
+    padding: 6,
+    borderRadius: 50,
+    flexDirection: 'row',
+    gap: 5,
+  },
+  getLocationChild: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 12,
+  },
+  topText: {
+    color: COLORS.blackColor,
+    fontFamily: FONT_MEDIUM,
+    fontSize: 12,
+    marginBottom: HP(1),
+  },
+  inputBox: {
+    width: '100%',
+    height: Input_Field_SIZES.Input_Field,
+    borderWidth: 1,
+    borderColor: COLORS.grey,
+    borderRadius: TEXT_SIZES.BORDER_RADIUS,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    marginBottom: HP(2),
+  },
+  input: {
+    flex: 1,
+    // marginLeft: 8,
+    fontSize: 15,
+    color: COLORS.blackColor,
+    fontSize: Input_Field_SIZES.Input_Font_Size,
+    fontFamily: FONT_MEDIUM,
+  },
+  card: {
+    width: '48%',
+    height: 60,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: 6,
+    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,
+  },
+
+  IoniconsParent: {
+    // backgroundColor: COLORS.iconBG,
+    padding: 10,
+    borderRadius: 50,
+  },
+  cardTitle: {
+    fontSize: 14,
+    marginTop: 6,
+  },
+  _bottomContainer: {
+    position: 'absolute',
+    bottom: HP(5),
+    width: '100%',
+    backgroundColor: COLORS.whiteColor,
+    borderTopLeftRadius: 25,
+    borderTopRightRadius: 25,
+    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_NORMAL,
+    fontSize: 17,
+  },
+
+  // shop  image styling
+  imageContainer: {
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  imageCircle: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    backgroundColor: '#f2f2f2',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 60,
+  },
+  cameraButton: {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    backgroundColor: '#F44336',
+    width: 45,
+    height: 45,
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 3,
+    borderColor: '#fff',
+  },
+  registeredText: {
+    fontSize: 14,
+    color: '#777',
+    marginTop: 10,
+  },
+  mobileNumber: {
+    fontSize: 16,
+    color: '#555',
+    fontWeight: '500',
+  },
+  _scrollMain: {
+    width: '95%',
+    alignItems: 'center',
+    // gap: 12,
+    paddingBottom: HP(100),
+    // backgroundColor: "green",
+    // maxHeight: Platform.OS == "ios" ? 200 : 250,
+  },
+
+  bottomBar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    backgroundColor: '#fff',
+    borderTopLeftRadius: TEXT_SIZES.BORDER_RADIUS,
+    borderTopRightRadius: TEXT_SIZES.BORDER_RADIUS,
+    // alignItems: 'center',
+    justifyContent: 'space-between',
+    // paddingVertical: 10,
+    elevation: 10,
+  },
+
+  totalButton: {
+    borderWidth: 1.5,
+    marginBottom: 10,
+    flexDirection: 'row',
+    borderColor: '#FF3B30',
+    backgroundColor: COLORS.primaryColor,
+    borderRadius: 100,
+    width: '49%',
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  totalText: {
+    color: COLORS.whiteColor,
+    fontFamily: FONT_NORMAL,
+    fontSize: 13,
+  },
+});