@propel-nsl/propel-react-native-sdk 1.0.0

package/src/screens/Reedem/index.tsx

@@ -0,0 +1,345 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  SafeAreaView,
+  Dimensions,
+  TextInput,
+} from 'react-native';
+import Svg, { Path, G, Defs, ClipPath, Rect } from 'react-native-svg';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
+import { AppStackParamList, ProductData } from '../../../src-app/types/navigation';
+import styles from './styles';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { useAppDispatch } from '../../../src-app/hooks/useAppDispatch';
+import {
+  myProductsListRequest,
+  productTypesRequest,
+  resetAuthState,
+} from '../../../src-app/redux/authSlice';
+import { useAppSelector } from '../../../src-app/hooks/useAppSelector';
+import { RootState } from '../../../src-app/redux/store';
+import {
+  CustomImage,
+  CustomLoader,
+  CustomMessagePopUp,
+  FilterModal,
+  NoDataFound,
+} from '../../../src-app/components';
+import Images from '../../../src-app/constants/Images';
+import { colors } from '../../../src-app/styles/colors';
+import { CATEGORY_LABELS } from '../../../src-app/constants/Labels';
+import { formatPointsRange } from '../../../src-app/constants/Formatter';
+import { NUMBER } from '../../../src-app/constants/Messages';
+import { MAP, PUSH, REDUCE } from '../../../src-app/utils/filterPins';
+import { ROUTES } from '../../../src-app/constants/Routes';
+
+const AmbraneIcon: React.FC = () => (
+  <Svg width="45" height="6" viewBox="0 0 46 6" fill="none">
+    <G clipPath="url(#clip0_244_4835)">
+      <Path
+        d="M13.07 1.7372C12.6479 1.40724 12.1502 1.23657 11.5848 1.23657C11.0194 1.23657 10.3704 1.46034 9.90857 1.90029C9.44671 2.34024 9.21179 2.8788 9.21179 3.50079C9.21179 4.12279 9.44671 4.65756 9.90857 5.09751C10.3704 5.53746 10.9358 5.76122 11.5848 5.76122C12.2338 5.76122 12.6479 5.59435 13.07 5.26059V5.76122H13.9579V1.24037H13.07V1.7372ZM12.636 2.49953C12.9226 2.7726 13.07 3.11015 13.07 3.50079C13.07 3.89144 12.9226 4.22519 12.636 4.50206C12.3493 4.77513 11.9949 4.91546 11.5848 4.91546C11.1747 4.91546 10.8243 4.77513 10.5337 4.50206C10.247 4.22519 10.0997 3.88765 10.0997 3.50079C10.0997 3.11394 10.247 2.7726 10.5337 2.49953C10.8243 2.22646 11.1787 2.08613 11.5848 2.08613C11.9909 2.08613 12.3453 2.22646 12.636 2.49953Z"
+        fill="#FF5206"
+      />
+      <Path
+        d="M19.5122 1.24023C18.9309 1.24023 18.4451 1.45642 18.0669 1.88878C17.6926 1.45642 17.2069 1.24023 16.6176 1.24023C16.0283 1.24023 15.9089 1.33505 15.6142 1.52089V1.24023H14.7263V5.76109H15.6142V3.04175C15.6142 2.77626 15.7098 2.55629 15.9049 2.36666C16.104 2.17702 16.3389 2.086 16.6176 2.086C16.8963 2.086 17.1312 2.17702 17.3263 2.37045C17.5254 2.55629 17.6209 2.77626 17.6209 3.04554V5.76489H18.5049V3.04175C18.5049 2.77626 18.6004 2.55629 18.7955 2.36666C18.9946 2.17702 19.2295 2.086 19.5082 2.086C19.7869 2.086 20.0218 2.17702 20.2169 2.37045C20.416 2.55629 20.5116 2.77626 20.5116 3.04554V5.76489H21.3995V3.04175C21.3995 2.54491 21.2123 2.11634 20.846 1.76742C20.4837 1.41849 20.0338 1.24023 19.5122 1.24023Z"
+        fill="#FF5206"
+      />
+      <Path
+        d="M24.4891 1.24032C23.9237 1.24032 23.426 1.40719 23.004 1.74095V0.00390625H22.1161V5.76117H23.004V5.26054C23.426 5.59051 23.9237 5.76117 24.4891 5.76117C25.0545 5.76117 25.7035 5.53741 26.1654 5.09746C26.6272 4.65751 26.8621 4.11895 26.8621 3.50075C26.8621 2.88254 26.6272 2.34019 26.1654 1.90024C25.6995 1.46029 25.1381 1.24032 24.4891 1.24032ZM25.9743 3.50075C25.9743 3.8876 25.8269 4.22514 25.5363 4.50201C25.2496 4.77508 24.8952 4.91541 24.4891 4.91541C24.083 4.91541 23.7247 4.77508 23.438 4.50201C23.1513 4.22514 23.004 3.8876 23.004 3.50075C23.004 3.11389 23.1513 2.77255 23.438 2.49948C23.7247 2.22641 24.079 2.08608 24.4891 2.08608C24.8992 2.08608 25.2496 2.22641 25.5363 2.49948C25.8269 2.77255 25.9743 3.1101 25.9743 3.50075Z"
+        fill="#FF5206"
+      />
+      <Path
+        d="M29.936 1.24023H29.8125C29.2471 1.24023 28.7494 1.40711 28.3274 1.74087V1.24023H27.4435V5.76489H28.3274V3.50066C28.3274 3.11381 28.4747 2.77626 28.7614 2.50319C29.052 2.22633 29.4064 2.086 29.8125 2.086H29.936V1.24023Z"
+        fill="#FF5206"
+      />
+      <Path
+        d="M33.7623 1.7372C33.3403 1.40724 32.8426 1.23657 32.2772 1.23657C31.7118 1.23657 31.0628 1.46034 30.601 1.90029C30.1391 2.34024 29.9042 2.8788 29.9042 3.50079C29.9042 4.12279 30.1391 4.65756 30.601 5.09751C31.0628 5.53746 31.6282 5.76122 32.2772 5.76122C32.9262 5.76122 33.3403 5.59435 33.7623 5.26059V5.76122H34.6502V1.24037H33.7623V1.7372ZM33.3283 2.49953C33.615 2.7726 33.7623 3.11015 33.7623 3.50079C33.7623 3.89144 33.615 4.22519 33.3283 4.50206C33.0417 4.77513 32.6873 4.91546 32.2772 4.91546C31.8671 4.91546 31.5167 4.77513 31.2261 4.50206C30.9394 4.22519 30.7921 3.88765 30.7921 3.50079C30.7921 3.11394 30.9394 2.7726 31.2261 2.49953C31.5167 2.22646 31.8711 2.08613 32.2772 2.08613C32.6833 2.08613 33.0417 2.22646 33.3283 2.49953Z"
+        fill="#FF5206"
+      />
+      <Path
+        d="M37.7599 1.24027C37.1945 1.24027 36.6968 1.40715 36.2747 1.7409V1.2251H35.3868V5.76492H36.2747V3.5007C36.2747 3.11005 36.4221 2.77251 36.7087 2.49943C36.9994 2.22636 37.3537 2.08603 37.7599 2.08603C38.166 2.08603 38.5204 2.22636 38.807 2.49943C39.0977 2.77251 39.245 3.11005 39.245 3.5007V5.76113H40.1329V3.5007C40.1329 2.8787 39.898 2.34014 39.4361 1.90019C38.9743 1.46024 38.4089 1.24027 37.7599 1.24027Z"
+        fill="#FF5206"
+      />
+      <Path
+        d="M44.8033 1.90395C44.3414 1.464 43.7761 1.24023 43.1231 1.24023C42.4701 1.24023 41.9087 1.464 41.4468 1.90395C40.9889 2.3439 40.754 2.88246 40.754 3.50066C40.754 4.11887 40.9889 4.65743 41.4508 5.09738C41.9127 5.53733 42.4781 5.76109 43.1271 5.76109C43.7761 5.76109 44.7277 5.36286 45.2015 4.57778H44.0906C43.8238 4.80534 43.5013 4.91912 43.1271 4.91912C42.7528 4.91912 42.4582 4.81293 42.1874 4.60433C41.9565 4.41849 41.7972 4.19472 41.7096 3.92544H45.4324L45.4603 3.8458C45.4682 3.82304 45.4682 3.80408 45.4722 3.78891C45.4921 3.70168 45.5001 3.60307 45.5001 3.50066C45.5001 2.88246 45.2652 2.3439 44.8033 1.90395ZM41.7136 3.07589C41.8012 2.8104 41.9605 2.58663 42.1874 2.40458C42.4542 2.19219 42.7727 2.08221 43.1271 2.08221C43.4814 2.08221 43.8039 2.1884 44.0667 2.40458C44.2976 2.58284 44.4569 2.80661 44.5445 3.07589H41.7136Z"
+        fill="#FF5206"
+      />
+      <Path
+        d="M5.07485 0.743363C4.88374 0.307206 4.42984 0 3.90427 0C3.37869 0 2.87303 0.345133 2.7058 0.823009C2.61025 1.05057 2.59034 1.31226 2.65803 1.61188C2.87303 2.56764 2.55052 3.14033 1.63874 3.53856C1.54716 3.58028 1.45558 3.61821 1.36002 3.64475H1.35604C1.08131 3.73957 0.850381 3.91403 0.69908 4.14159C0.57565 4.32743 0.5 4.5512 0.5 4.78635C0.5 5.15044 0.667227 5.47661 0.933994 5.69659C1.15696 5.88243 1.44762 5.99241 1.76615 5.99241C2.43506 5.99241 2.98452 5.49558 3.02831 4.86979C3.02831 4.84324 3.02831 4.81669 3.02831 4.79014V4.75601C3.02831 4.54741 2.99646 4.33881 2.9885 4.13022C2.96063 3.24273 3.2473 2.84071 4.07149 2.4842C4.21881 2.41972 4.36613 2.34766 4.50549 2.26043C4.66077 2.18078 4.79614 2.067 4.90365 1.93426C5.06689 1.73325 5.16245 1.47914 5.16245 1.20228C5.16245 0.925411 5.12662 0.883692 5.06689 0.743363H5.07485Z"
+        fill="#FF5206"
+      />
+      <Path
+        d="M6.04239 6.00003C6.74167 6.00003 7.30854 5.46005 7.30854 4.79396C7.30854 4.12787 6.74167 3.58789 6.04239 3.58789C5.34312 3.58789 4.77625 4.12787 4.77625 4.79396C4.77625 5.46005 5.34312 6.00003 6.04239 6.00003Z"
+        fill="#FF5206"
+      />
+    </G>
+    <Defs>
+      <ClipPath id="clip0_244_4835">
+        <Rect width="45" height="6" fill="white" transform="translate(0.5)" />
+      </ClipPath>
+    </Defs>
+  </Svg>
+);
+
+const TitanLogo: React.FC = () => (
+  <Svg width="22" height="14" viewBox="0 0 22 14" fill="none">
+    <Path
+      d="M7.33203 2.98438H9.82812V13H12.8496V2.98438H15.3457V0.351562H7.33203V2.98438ZM17.1348 13H20.1562V0.351562H17.1348V13Z"
+      fill="#000000"
+    />
+  </Svg>
+);
+
+const RayBanLogo: React.FC = () => (
+  <Svg width="21" height="11" viewBox="0 0 21 11" fill="none">
+    <Path
+      d="M3.5 0.5H17.5C18.8807 0.5 20 1.61929 20 3V8C20 9.38071 18.8807 10.5 17.5 10.5H3.5C2.11929 10.5 1 9.38071 1 8V3C1 1.61929 2.11929 0.5 3.5 0.5Z"
+      stroke="#000000"
+      strokeWidth="1"
+    />
+    <Path
+      d="M7 3C7 2.44772 7.44772 2 8 2H13C13.5523 2 14 2.44772 14 3V8C14 8.55228 13.5523 9 13 9H8C7.44772 9 7 8.55228 7 8V3Z"
+      fill="#000000"
+    />
+  </Svg>
+);
+
+const getCategoryLabel = (category: string) => CATEGORY_LABELS[category] ?? "";
+
+const ProductCard: React.FC<{
+  title: string;
+  imageUrl: string;
+  category: string;
+  logo?: React.ReactNode;
+  backgroundColor?: string;
+  onPress: () => void;
+  priceCents: number
+}> = ({
+  title,
+  imageUrl,
+  category,
+  logo,
+  backgroundColor = colors.orderDetailsBackground,
+  onPress,
+  priceCents=0,
+}) => (
+    <TouchableOpacity style={styles.productCard} onPress={onPress}>
+      <View style={[styles.productImageContainer, { backgroundColor }]}>
+        {logo && <View style={styles.logoContainer}>{logo}</View>}
+        <CustomImage source={{ uri: imageUrl }} imgStyle={styles.productImage} />
+        <View style={styles.categoryBadge}>
+          <Text style={styles.categoryText}>{getCategoryLabel(category)}</Text>
+        </View>
+      </View>
+      <View style={styles.productInfo}>
+        <Text style={styles.productTitle}>{title}</Text>
+          <Text style={styles.productPoints}>
+            {((priceCents ?? 0) / 100)} Points
+          </Text>
+      
+      </View>
+    </TouchableOpacity>
+  );
+
+const Redeem: React.FC = () => {
+  type ProductDetailNavigationProp = StackNavigationProp<
+    AppStackParamList,
+    'ProductDetail'
+  >;
+
+  const navigation = useNavigation<ProductDetailNavigationProp>();
+  const dispatch = useAppDispatch();
+  const [isFilterModalVisible, setIsFilterModalVisible] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [messagepopUpVisible, setMessagepopUpVisible] = useState(false);
+  const DEFAULT_FILTERS = { productType: 'Physical Voucher', categories: [] as string[] };
+  const [selectedFilters, setSelectedFilters] = useState(DEFAULT_FILTERS);
+
+
+  const { myProductsListError, viewMyCartData } = useAppSelector(
+    (state: RootState) => state.auth,
+  );
+
+  const screenWidth = Dimensions.get('window').width;
+  const cardWidth = (screenWidth - 60) / 2;
+
+  const handleProductPress = (product: ProductData) => {
+    console.log('🚀 Redeem navigating to ProductDetail with id:', product?.id);
+    // In SDK, ProductDetail is a hidden tab, not nested inside DashboardTab
+    // Navigate directly to the ProductDetail tab
+    navigation.navigate(ROUTES.ProductDetail as any, { 
+      id: product?.id, 
+      from: ROUTES.REDEEM 
+    });
+  };
+
+  const { productTypesData, myProductsListLoading } = useAppSelector(
+    (state: RootState) => state.auth,
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      console.log('🏪 Redeem Screen: useFocusEffect triggered - refreshing data');
+      setSelectedFilters(DEFAULT_FILTERS);
+      setSearchQuery('');
+      dispatch(myProductsListRequest({}));
+    }, [dispatch])
+  );
+
+  useEffect(() => {
+    dispatch(productTypesRequest({}));
+  }, [dispatch])
+
+  const { myProductsListData } = useAppSelector(
+    (state: RootState) => state.auth,
+  );
+  
+  const handleSearch = (text: string) => {
+    console.log('🔍 Redeem Screen: Search triggered with text:', text);
+    setSearchQuery(text);
+    if (text.length >= 3) {
+      console.log('🔍 Redeem Screen: Dispatching search request with name:', text);
+      dispatch(myProductsListRequest({ name: text }));
+    }
+    if (text.length === 0) {
+      console.log('🔍 Redeem Screen: Dispatching clear search request');
+      dispatch(myProductsListRequest({}));
+    }
+  };
+
+  const navigateToCart = () => {
+    // In SDK, MyCart is a hidden tab screen, navigate directly to it
+    navigation.navigate(ROUTES.MyCart as any, { from: ROUTES.REDEEM });
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.headerContent}>
+        <Text style={styles.headerTitle}>{ROUTES.REDEEM}</Text>
+        <TouchableOpacity
+          activeOpacity={0.7}
+          style={styles.cartBadge}
+          onPress={navigateToCart}
+        >
+          <View style={styles.cartCountContainer}>
+            <Text style={styles.cartCountText}>
+              {viewMyCartData?.items?.length}
+            </Text>
+          </View>
+          <CustomImage source={Images.cart} imgStyle={styles.cartIcon} />
+        </TouchableOpacity>
+      </View>
+      <View style={styles.searchSection}>
+        <View style={styles.searchBar}>
+          <View style={styles.searchContainer}>
+            <CustomImage source={Images.search} imgStyle={styles.searchIcon} />
+            <TextInput
+              value={searchQuery}
+              onChangeText={handleSearch}
+              placeholder="Search"
+              placeholderTextColor={colors.onSurfaceVariant}
+              style={styles.searchPlaceholder}
+            />
+          </View>
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={styles.filterButton}
+            onPress={() => {
+              setIsFilterModalVisible(true);
+            }}
+          >
+            <CustomImage
+              source={Images.filtericon}
+              imgStyle={styles.filterIcon}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {myProductsListLoading ? (
+        <CustomLoader loading={myProductsListLoading} />
+      ) : (
+        <ScrollView
+          style={styles.scrollContainer}
+          showsVerticalScrollIndicator={false}
+        >
+          {Array.isArray(myProductsListData) &&
+            myProductsListData?.length > 0 ? (
+            <View style={styles.productsGrid}>
+              {myProductsListData
+                ?.[REDUCE]((rows: any[], product, index) => {
+                  if (index % 2 === 0) {
+                    rows?.[PUSH]([product]);
+                  } else {
+                    rows?.[rows.length - 1]?.[PUSH](product);
+                  }
+                  return rows;
+                }, [])
+                ?.[MAP]((row: any[], rowIndex: number) => (
+                  <View key={rowIndex} style={styles.productRow}>
+                    {row?.[MAP]((product, productIndex) => (
+                      <ProductCard
+                        key={`${rowIndex}-${productIndex}`}
+                        title={product?.name}
+                        priceCents={product?.price?.price_cents}                        imageUrl={product?.image?.url}
+                        category={product?.product_type}
+                        logo={
+                          product?.logo === 'titan' ? (
+                            <TitanLogo />
+                          ) : product?.logo === 'ambrane' ? (
+                            <AmbraneIcon />
+                          ) : product?.logo === 'rayban' ? (
+                            <RayBanLogo />
+                          ) : undefined
+                        }
+                        backgroundColor={product?.backgroundColor}
+                        onPress={() => handleProductPress(product)}
+                      />
+                    ))}
+                    {row?.length === 1 && <View style={{ width: cardWidth }} />}
+                  </View>
+                ))}
+            </View>
+          ) : (
+            <NoDataFound containerstyle={styles.nodataFound} />
+          )}
+        </ScrollView>
+      )}
+
+      <FilterModal
+        key={`${selectedFilters.productType}|${[...selectedFilters.categories].sort().join(',')}`}
+        visible={isFilterModalVisible}
+        data={productTypesData}
+        initialFilters={selectedFilters}
+        onClose={() => setIsFilterModalVisible(false)}
+        onApply={(filters) => {
+          setSelectedFilters(filters);
+          setIsFilterModalVisible(false);
+        }}
+        onClear={() => {
+          setSelectedFilters(DEFAULT_FILTERS);
+          setIsFilterModalVisible(false);
+          dispatch(myProductsListRequest({}));
+        }}
+      />
+
+
+
+      <CustomMessagePopUp
+        title="Error"
+        message={myProductsListError || ''}
+        visible={messagepopUpVisible}
+        onClose={() => {
+          setMessagepopUpVisible(false);
+          dispatch(resetAuthState('myProductsListError'));
+        }}
+        icon={Images?.pendingIcon}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default Redeem;

package/src/screens/Reedem/styles.ts

@@ -0,0 +1,269 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+import { colors } from '../../../src-app/styles/colors';
+import { SCALE, VSCALE } from '../../../src-app/constants/Scaling';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  header: {
+    backgroundColor: colors.background,
+    paddingHorizontal: SCALE(20),
+    paddingTop: VSCALE(20),
+    paddingBottom: VSCALE(28),
+  },
+  statusBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: VSCALE(28),
+  },
+  timeText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(16),
+    fontWeight: '600',
+    color: colors.onSurface,
+    textAlign: 'center',
+    width: SCALE(95),
+  },
+  statusIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SCALE(6),
+    width: SCALE(77),
+    height: VSCALE(13),
+  },
+  headerContent: {
+    marginTop: VSCALE(30),
+  },
+  headerTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(18),
+    fontWeight: '600',
+    color: colors.onSurface,
+    textTransform: 'capitalize',
+    textAlign: 'center',
+  },
+  cartButton: {
+    width: SCALE(42),
+    height: SCALE(42),
+    borderRadius: SCALE(100),
+    backgroundColor: 'rgba(255, 255, 255, 0.45)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  cartBadge: {
+    position: 'absolute',
+    top: VSCALE(0),
+    right: SCALE(25),
+    width: SCALE(20),
+    height: VSCALE(20),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cartBadgeText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(10),
+    fontWeight: '600',
+    color: colors.primary,
+    textTransform: 'capitalize',
+  },
+  searchSection: {
+    flexDirection: 'row',
+    paddingHorizontal: SCALE(20),
+    paddingTop: VSCALE(20),
+    gap: SCALE(16),
+    alignItems: 'center',
+  },
+  searchBar: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: SCALE(16),
+    paddingVertical: VSCALE(14),
+    borderRadius: SCALE(12),
+    borderWidth: 1,
+    borderColor: colors.outline,
+    gap: SCALE(12),
+    height: VSCALE(48),
+    justifyContent: 'space-between',
+  },
+  searchPlaceholder: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    color: colors.onSurfaceVariant,
+    width: '85%',
+    minHeight: VSCALE(40),
+  },
+  filterButton: {
+    width: SCALE(48),
+    height: VSCALE(48),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  scrollContainer: {
+    flex: 1,
+    paddingTop: VSCALE(20),
+  },
+  productsGrid: {
+    paddingHorizontal: SCALE(20),
+    flexDirection: 'column',
+    gap: VSCALE(28),
+    paddingBottom: VSCALE(100),
+  },
+  productRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  productCard: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: VSCALE(12),
+    flex: 1,
+    marginHorizontal: SCALE(8),
+  },
+  productImageContainer: {
+    width: '100%',
+    height: VSCALE(112),
+    shadowColor: colors.shadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    backgroundColor: colors.background,
+    borderRadius: SCALE(12),
+    borderWidth: 0.25,
+    borderColor: colors.outline,
+  },
+  logoContainer: {
+    position: 'absolute',
+    top: VSCALE(12),
+    right: SCALE(12),
+    zIndex: 10,
+  },
+  productImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+  categoryBadge: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    borderTopLeftRadius: SCALE(12),
+    borderBottomRightRadius: SCALE(12),
+    backgroundColor: colors.surface,
+    padding: SCALE(10),
+  },
+  categoryText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(8),
+    fontWeight: '400',
+    color: colors.onSurface,
+    textAlign: 'center',
+  },
+  productInfo: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: VSCALE(4),
+    width: '100%',
+  },
+  productTitle: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(12),
+    fontWeight: '500',
+    color: colors.onSurface,
+  },
+  productPoints: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(10),
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+  },
+  footer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: VSCALE(48),
+    backgroundColor: colors.background,
+    shadowColor: 'rgba(0, 0, 0, 0.04)',
+    shadowOffset: {
+      width: 0,
+      height: -2,
+    },
+    shadowOpacity: 1,
+    shadowRadius: SCALE(10),
+    elevation: 5,
+    paddingHorizontal: SCALE(120),
+    paddingVertical: VSCALE(14),
+  },
+  footerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: SCALE(4),
+  },
+  poweredByText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(8),
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    textTransform: 'capitalize',
+  },
+  footerLogo: {
+    width: SCALE(103),
+    height: VSCALE(20),
+    resizeMode: 'contain',
+  },
+  filterIcon: {
+    width: SCALE(16),
+    height: SCALE(16),
+    resizeMode: 'contain',
+    right: SCALE(30),
+  },
+  searchIcon: {
+    width: SCALE(14),
+    height: SCALE(14),
+    resizeMode: 'contain',
+  },
+  searchContainer: {
+    flexDirection: 'row',
+    gap: SCALE(10),
+    alignItems: 'center',
+  },
+  cartIcon: {
+    width: SCALE(24),
+    height: VSCALE(26),
+    resizeMode: 'contain',
+  },
+  emptyText: {
+    textAlign: 'center',
+    marginTop: VSCALE(20),
+    fontSize: SCALE(16),
+    color: colors.onSurface,
+  },
+  cartCountContainer: {
+    position: 'absolute',
+    right: SCALE(0),
+    width: SCALE(16),
+    height: VSCALE(14),
+    justifyContent: 'center',
+    alignItems: 'center',
+    top: VSCALE(-5),
+  },
+  cartCountText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(10),
+    fontWeight: '700',
+    color: colors.red,
+  },
+  nodataFound:{
+    minHeight:450
+  }
+});
+
+export default styles;