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

package/src-app/components/FilterModal.tsx

@@ -0,0 +1,372 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  ScrollView,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import { spacing, typography, borderRadius } from '../styles/shared';
+import { useAppDispatch } from '../hooks/useAppDispatch';
+import {
+  myProductsListRequest,
+  productCategoriesByTypeRequest,
+} from '../redux/authSlice';
+import { useAppSelector } from '../hooks/useAppSelector';
+import { RootState } from '../redux/store';
+import FontFamily from '../constants/Fonts';
+import { colors } from '../styles/colors';
+
+const { height: screenHeight, width: screenWidth } = Dimensions.get('window');
+
+interface FilterModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onApply: (filters: FilterState) => void;
+  onClear: () => void;
+  data: any;
+  initialFilters?: FilterState;
+}
+
+interface FilterState {
+  productType: string;
+  categories: string[];
+}
+
+const DEFAULT_PRODUCT_TYPE = 'Physical Voucher';
+
+const FilterModal: React.FC<FilterModalProps> = ({
+  visible,
+  onClose,
+  onApply,
+  onClear,
+  data,
+  initialFilters,
+}) => {
+  const [filters, setFilters] = useState<FilterState>(
+    initialFilters || { productType: DEFAULT_PRODUCT_TYPE, categories: [] }
+  );
+  const isClearDisabled =
+    filters.productType === DEFAULT_PRODUCT_TYPE &&
+    filters.categories.length === 0;
+
+  const dispatch = useAppDispatch();
+  const { productCategoriesByTypeData } = useAppSelector(
+    (state: RootState) => state?.auth,
+  );
+
+useEffect(() => {
+  if (visible) {
+    setFilters(initialFilters || { productType: DEFAULT_PRODUCT_TYPE, categories: [] });
+
+      dispatch?.(
+        productCategoriesByTypeRequest?.({
+          product_type: initialFilters?.productType || DEFAULT_PRODUCT_TYPE,
+        }),
+      );
+    }
+  }, [visible, initialFilters]);
+
+  const handleProductTypeSelect = (type: string) => {
+    setFilters(prev => ({
+      ...prev,
+      productType: type,
+    }));
+    dispatch?.(
+      productCategoriesByTypeRequest?.({
+        product_type: type,
+      }),
+    );
+  };
+
+  const handleCategoryToggle = (categoryId: string) => {
+    setFilters(prev => {
+      const updatedCategories = prev?.categories?.includes?.(categoryId)
+        ? prev?.categories?.filter?.(c => c !== categoryId)
+        : [...(prev?.categories ?? []), categoryId];
+      return { ...prev, categories: updatedCategories };
+    });
+  };
+
+  const handleClear = () => {
+     const resetFilters = {
+      productType: DEFAULT_PRODUCT_TYPE,
+      categories: [],
+    };
+    setFilters(resetFilters);   // update state    
+    dispatch(productCategoriesByTypeRequest?.({ product_type: resetFilters.productType })); 
+  };
+
+  const handleApply = () => {
+  const payload: any = {};
+  if (filters?.productType) payload.product_types = filters?.productType;
+  if (filters?.categories?.length > 0) {
+    payload.category_ids = filters?.categories?.join?.(',');
+  }
+  dispatch?.(myProductsListRequest?.(payload));
+  onApply?.(filters);
+  onClose?.();
+};
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <View style={styles.absoluteContainer} pointerEvents="box-none">
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay} />
+      </TouchableWithoutFeedback>
+
+      <View style={styles.modalContainer}>
+        <ScrollView
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={styles.sheetContent}
+          showsVerticalScrollIndicator={false}
+        >
+          <View style={styles.handleBar} />
+
+          <View style={styles.headerRow}>
+            <Text style={styles.sectionHeader}>Product Type</Text>
+            <Text style={styles.sectionHeader}>Category</Text>
+          </View>
+
+          <View style={styles.content}>
+            {/* Product Type Section */}
+            <View style={styles.productTypeSection}>
+              {Array.isArray(data) &&
+                data?.length > 0 &&
+                data?.map?.((item: any) => {
+                  const key = Object.keys(item ?? {})?.[0];
+                  const value = item?.[key];
+
+                  return (
+                    <TouchableOpacity
+                      key={key}
+                      style={[
+                        styles.productTypeItem,
+                        filters?.productType === key &&
+                          styles.productTypeItemSelected,
+                      ]}
+                      onPress={() => handleProductTypeSelect(key)}
+                    >
+                      <Text style={styles.productTypeText}>{value}</Text>
+                    </TouchableOpacity>
+                  );
+                })}
+            </View>
+
+            {/* Category Section */}
+            <ScrollView
+              style={styles.categorySection}
+              showsVerticalScrollIndicator={false}
+              contentContainerStyle={{paddingBottom:40}}
+            >
+              {Array.isArray(productCategoriesByTypeData) &&
+                productCategoriesByTypeData?.map?.(
+                  (category: any, index: number) => (
+                    <TouchableOpacity
+                      key={index}
+                      style={styles.categoryItem}
+                      onPress={() => handleCategoryToggle(category?.id)}
+                    >
+                      <View
+                        style={[
+                          styles.checkbox,
+                          filters?.categories?.includes?.(category?.id) &&
+                            styles.checkboxSelected,
+                        ]}
+                      >
+                        {filters?.categories?.includes?.(category?.id) && (
+                          <Text style={styles.checkmark}>✓</Text>
+                        )}
+                      </View>
+                      <Text style={styles.categoryText}>{category?.name}</Text>
+                    </TouchableOpacity>
+                  ))}
+            </ScrollView>
+          </View>
+
+          {/* Footer Buttons */}
+          <View style={styles.footer}>
+            <TouchableOpacity
+              onPress={handleClear}
+              activeOpacity={0.7}
+              disabled={isClearDisabled}
+              style={[styles.clearButton, isClearDisabled && {opacity:0.4}]}
+            >
+              <Text style={styles.clearButtonText}>Clear</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.applyButton}
+              onPress={handleApply}
+            >
+              <Text style={styles.applyButtonText}>Apply</Text>
+            </TouchableOpacity>
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  absoluteContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: screenWidth,
+    height: screenHeight,
+    justifyContent: 'flex-end',
+    zIndex: 50000,
+    elevation: 50000,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  modalContainer: {
+    backgroundColor: colors.background,
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 36,
+    height: '80%',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: -2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 50001,
+  },
+  sheetContent: {
+   paddingBottom:150
+  },
+  handleBar: {
+    width: 48,
+    height: 4,
+    backgroundColor: colors.outline,
+    borderRadius: 6,
+    alignSelf: 'center',
+    marginBottom: 15,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    paddingHorizontal: 0,
+    marginBottom: spacing.md,
+  },
+  sectionHeader: {
+    ...typography.bodySmall,
+    color: colors.onSurfaceVariant,
+    fontWeight: '500',
+    flex: 1,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  content: {
+    flexDirection: 'row',
+    flex: 1,
+    minHeight: 300,
+  },
+  productTypeSection: {
+    width: 156,
+    backgroundColor: 'rgba(243, 244, 247, 0.65)',
+    marginRight: spacing.md,
+  },
+  productTypeItem: {
+    padding: spacing.sm,
+    borderLeftWidth: 2,
+    borderLeftColor: 'transparent',
+  },
+  productTypeItemSelected: {
+    borderLeftColor: colors.primary,
+    backgroundColor: 'rgba(237, 59, 65, 0.15)',
+  },
+  productTypeText: {
+    ...typography.caption,
+    color: colors.onSurface,
+    lineHeight: 18,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  categorySection: {
+    flex: 1,
+  },
+  categoryItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: spacing.sm,
+    gap: spacing.sm,
+  },
+  checkbox: {
+    width: 16,
+    height: 16,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: colors.outline,
+    backgroundColor: colors.background,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkboxSelected: {
+    backgroundColor: '#DC291E',
+    borderColor: '#DC291E',
+  },
+  checkmark: {
+    color: colors.background,
+    fontSize: 10,
+    fontWeight: 'bold',
+  },
+  categoryText: {
+    ...typography.caption,
+    color: colors.onSurface,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  footer: {
+    flexDirection: 'row',
+    paddingTop: spacing.xl,
+    gap: spacing.md,
+  },
+  clearButton: {
+    flex: 1,
+    height: 55,
+    borderRadius: borderRadius.md,
+    borderWidth: 1,
+    borderColor: colors.onSurface,
+    backgroundColor: colors.background,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  clearButtonText: {
+    ...typography.button,
+    color: colors.onSurface,
+    fontWeight: '400',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  applyButton: {
+    flex: 1,
+    height: 55,
+    borderRadius: borderRadius.md,
+    backgroundColor: '#DC291E',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  applyButtonText: {
+    ...typography.button,
+    color: colors.background,
+    fontWeight: '700',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+});
+
+export default FilterModal;

package/src-app/components/Footer/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import styles from './styles';
+import { MIN_PADDING_BOTTOM } from './styles';
+import Images from '../../constants/Images';
+import CustomImage from '../CustomImage';
+
+const Footer = () => {
+  const insets = useSafeAreaInsets();
+  const bottomPadding = Math.max(MIN_PADDING_BOTTOM, insets.bottom);
+
+  return (
+    <View style={[styles.footer, { paddingBottom: bottomPadding }]}>
+      <View style={styles.footerContent}>
+        <Text style={styles.poweredByText}>Powered By</Text>
+        <CustomImage source={Images?.zaggleLogo} imgStyle={styles.logo} />
+      </View>
+    </View>
+  );
+};
+
+export default Footer;

package/src-app/components/Footer/styles.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../constants/Fonts';
+import { SCALE, VSCALE } from '../../constants/Scaling';
+
+export const MIN_PADDING_BOTTOM = VSCALE(4);
+
+const styles = StyleSheet.create({
+  footer: {
+    // position: 'absolute',
+    // bottom: 0,
+    // left: 0,
+    // right: 0,
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    height: VSCALE(40),
+    // zIndex: 1,
+  },
+  footerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: SCALE(4),
+    top: VSCALE(12),
+  },
+  poweredByText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: SCALE(8),
+    color: '#6B7280',
+  },
+  logo: {
+    width: SCALE(103),
+    height: VSCALE(20),
+    resizeMode: 'contain',
+  },
+});
+
+export default styles;

package/src-app/components/Icon.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { Text, StyleSheet } from "react-native";
+
+interface IconProps {
+  name: string;
+  size?: number;
+  color?: string;
+  style?: any;
+}
+
+const Icon: React.FC<IconProps> = ({
+  name,
+  size = 24,
+  color = "#000",
+  style,
+}) => {
+  const getIconText = (iconName: string) => {
+    switch (iconName) {
+      case "home":
+        return "🏠";
+      case "card-giftcard":
+        return "🎁";
+      case "person":
+        return "👤";
+      case "headset":
+        return "🎧";
+      case "help":
+        return "❓";
+      case "shopping-cart":
+        return "🛒";
+      case "arrow-back":
+        return "←";
+      case "keyboard-arrow-down":
+        return "▼";
+      case "info-outline":
+        return "ℹ️";
+      case "trending-up":
+        return "📈";
+      case "check-circle":
+        return "✅";
+      case "shopping-bag":
+        return "🛍️";
+      case "wifi":
+        return "📶";
+      case "history":
+        return "🕐";
+      case "trending-down":
+        return "📉";
+      case "filter":
+        return "📋";
+      case "search":
+        return "🔍";
+      default:
+        return "•";
+    }
+  };
+
+  return (
+    <Text
+      style={[
+        styles.icon,
+        {
+          fontSize: size,
+          color: color,
+        },
+        style,
+      ]}
+    >
+      {getIconText(name)}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    textAlign: "center",
+  },
+});
+
+export default Icon;

package/src-app/components/Logout/index.tsx

@@ -0,0 +1,82 @@
+import React, { useRef, useEffect } from 'react';
+import {
+  View,
+  Modal,
+  Animated,
+  TouchableWithoutFeedback,
+  Dimensions,
+  Text,
+} from 'react-native';
+import styles from './styles';
+import CustomButton from '../CustomButton';
+
+const { height: screenHeight } = Dimensions.get('window');
+
+interface LogoutProps {
+  visible: boolean;
+  onClose: () => void;
+  onPress: () => void;
+}
+
+const Logout: React.FC<LogoutProps> = ({ visible, onClose, onPress }) => {
+  const slideAnim = useRef(new Animated.Value(screenHeight)).current;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(slideAnim, {
+        toValue: screenHeight,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [visible]);
+
+  if (!visible) return null;
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="none"
+      onRequestClose={onClose}
+    >
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay}>
+          <TouchableWithoutFeedback>
+            <Animated.View
+              style={[
+                styles.modalContainer,
+                {
+                  transform: [{ translateY: slideAnim }],
+                },
+              ]}
+            >
+              <Text style={styles.title}>Are you sure you want Logout ?</Text>
+              <View style={styles.row}>
+                <CustomButton
+                  title="No"
+                  onPress={onClose}
+                  buttonStyle={styles.leftButton}
+                  textStyle={styles.leftButtonText}
+                />
+                <CustomButton
+                  title="Yes"
+                  onPress={onPress}
+                  customButtonContainerStyle={styles.buttonContainer}
+                />
+              </View>
+            </Animated.View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+};
+
+export default Logout;

package/src-app/components/Logout/styles.ts

@@ -0,0 +1,116 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../constants/Fonts';
+import { VSCALE } from '../../constants/Scaling';
+import { colors } from '../../styles/colors';
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  modalContainer: {
+    width: '100%',
+    maxWidth: '100%',
+    height: '30%',
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 36,
+  },
+  handleBar: {
+    width: 48,
+    height: 4,
+    backgroundColor: '#D1D5DB',
+    borderRadius: 6,
+    alignSelf: 'center',
+    marginBottom: 27,
+  },
+  title: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 16,
+    fontWeight: '500',
+    color: colors.logOutTitle,
+    // textTransform: 'capitalize',
+    marginBottom: VSCALE(8),
+    textAlign: 'center',
+    marginTop: VSCALE(29),
+  },
+  icon: {
+    height: 24,
+    width: 24,
+    bottom: 3,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: VSCALE(10),
+    marginTop: VSCALE(20),
+  },
+  leftText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '500',
+    color: '#6B7280',
+    textTransform: 'capitalize',
+    marginBottom: VSCALE(12),
+  },
+  amountText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#6B7280',
+    textTransform: 'capitalize',
+    marginTop: 10,
+  },
+  separator: {
+    height: 1.2,
+    backgroundColor: 'transparent',
+    marginVertical: 8,
+    width: '100%',
+    alignSelf: 'center',
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(209, 213, 219, 0.65)',
+  },
+  content: {
+    marginTop: 20,
+  },
+  rightText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#1F2937',
+    textTransform: 'capitalize',
+    marginBottom: 12,
+  },
+  amountPoints: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    textTransform: 'capitalize',
+    marginTop: 10,
+  },
+  buttonContainer: {
+    width: VSCALE(130),
+  },
+  leftButton: {
+    width: VSCALE(130),
+    borderWidth: 1,
+    borderColor: colors.black,
+    backgroundColor: colors.white,
+  },
+  leftButtonText: {
+    color: colors.black,
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    fontSize: 14,
+    fontWeight: '600',
+    textTransform: 'capitalize',
+  },
+});
+
+export default styles;