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

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

@@ -0,0 +1,167 @@
+import { StyleSheet, Dimensions } from 'react-native';
+import FontFamily from '../../constants/Fonts';
+import { VSCALE } from '../../constants/Scaling';
+import { colors } from '../../styles/colors';
+
+const { height: screenHeight, width: screenWidth } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  absoluteContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: screenWidth,
+    height: screenHeight,
+    justifyContent: 'flex-end',
+    paddingBottom: screenHeight < 700 ? 60 : 0,
+    zIndex: 50000,
+    elevation: 50000,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  modalContainer: {
+    width: '100%',
+    maxWidth: '100%',
+    height: '50%',
+    backgroundColor: colors.white,
+    borderTopLeftRadius: 30,
+    borderTopRightRadius: 30,
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 36,
+  },
+  handleBar: {
+    width: 48,
+    height: 4,
+    backgroundColor: colors.outline,
+    borderRadius: 6,
+    alignSelf: 'center',
+    marginBottom: 27,
+  },
+  title: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 16,
+    fontWeight: '500',
+    color: colors.logOutTitle,
+    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: colors.onSurfaceVariant,
+    textTransform: 'capitalize',
+    marginBottom: VSCALE(12),
+  },
+  amountText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '600',
+    color: colors.onSurfaceVariant,
+    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: colors.black,
+    textTransform: 'capitalize',
+    marginBottom: 12,
+  },
+  amountPoints: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 16,
+    fontWeight: '600',
+    color: colors.black,
+    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',
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: VSCALE(24),
+  },
+  btnHalf: {
+    width: '48%',          
+  },
+  btnOutlined: {
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.btnOutlinedcolor,
+    borderRadius: 12,     
+    height: VSCALE(44),   
+  },
+  btnOutlinedText: {
+    color: colors.btnOutlinedcolor,
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  btnFilled: {
+    backgroundColor: colors.primary, 
+    borderRadius: 12,
+    height: VSCALE(44),
+  },
+  btnFilledText: {
+    color: colors.white,
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Platform,
+  TouchableOpacity,
+  GestureResponderEvent,
+  ViewStyle,
+  TextStyle,
+  ActivityIndicator,
+} from 'react-native';
+import styles from './styles';
+import Images from '../../constants/Images';
+import CustomImage from '../CustomImage';
+
+interface CustomButtonProps {
+  title: string;
+  onPress: (event: GestureResponderEvent) => void;
+  buttonStyle?: ViewStyle;
+  textStyle?: TextStyle;
+  disabled?: boolean;
+  customButtonContainerStyle?: ViewStyle;
+  icon?: boolean;
+  iconSrc?: { uri: string };
+  loading?: boolean;
+}
+
+const CustomButton: React.FC<CustomButtonProps> = ({
+  title,
+  onPress,
+  buttonStyle,
+  textStyle,
+  disabled = false,
+  customButtonContainerStyle,
+  icon = false,
+  iconSrc,
+  loading = false,
+}) => {
+  return (
+    <View style={[styles.buttonContainer, customButtonContainerStyle]}>
+      <TouchableOpacity
+        style={[
+          styles.verifyButton,
+          disabled ? styles.verifyButtonInactive : styles.verifyButtonActive,
+          buttonStyle,
+        ]}
+        onPress={onPress}
+        disabled={disabled}
+      >
+        <View style={styles.row}>
+          {loading ? (
+            <ActivityIndicator size="small" color="#FFFFFF" />
+          ) : (
+            <>
+              {iconSrc && icon && (
+                <CustomImage source={iconSrc} imgStyle={styles.icon} />
+              )}
+              <Text style={[styles.verifyButtonText, textStyle]}>{title}</Text>
+            </>
+          )}
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default CustomButton;

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

@@ -0,0 +1,44 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../constants/Fonts';
+import { colors } from '../../styles/colors';
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    marginTop: 'auto',
+    marginBottom: 50,
+  },
+  verifyButton: {
+    height: 55,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  verifyButtonActive: {
+    backgroundColor: '#DC2626',
+  },
+  verifyButtonInactive: {
+    backgroundColor: '#DC2626',
+    opacity: 0.5,
+  },
+  verifyButtonText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.verifyButtonText,
+    textAlign: 'center',
+    lineHeight: 16,
+  },
+  icon: {
+    height: 12,
+    width: 12,
+    resizeMode: 'contain',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent:'center',
+    gap: 12,
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,221 @@
+import React from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  ListRenderItem,
+  TouchableOpacity,
+  Image,
+  ActivityIndicator,
+} from "react-native";
+import styles from "./styles";
+import Svg, { Path } from "react-native-svg";
+import { useNavigation } from "@react-navigation/native";
+import CustomImage from "../CustomImage";
+import Images from "../../constants/Images";
+import { CardItem, AppStackParamList } from "../../types/navigation";
+import { StackNavigationProp } from "@react-navigation/stack";
+import NoDataFound from "../NoDataFound";
+import { useAppSelector } from "../../hooks/useAppSelector";
+import { RootState } from "../../redux/store";
+import CustomLoader from "../CustomLoader";
+import { pointsFromCentsFixed } from "../../constants/Formatter";
+
+import { colors } from "../../styles/colors";
+// Types
+
+interface CustomCardProps {
+  data: CardItem[];
+  loading: boolean;
+}
+
+const ChevronRightIcon = () => (
+  <Svg width="6" height="10" viewBox="0 0 6 10" fill="none">
+    <Path
+      d="M1 9L5 5L1 1"
+      stroke="#DC291E"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+const getStatusIcon = (status: string) => {
+  console.log('📦 CustomCard getStatusIcon - status:', status);
+  switch (status?.toLowerCase()) {
+    case 'failed':
+      return (
+        <CustomImage source={Images?.crossIcon} imgStyle={[styles.icon]} />
+      );
+    case 'dispatched':
+      return (
+        <CustomImage source={Images?.tickIcon} imgStyle={[styles.icon]} />
+      );
+    case 'complete':
+    case 'confirmed':
+    case 'Complete':
+      return (
+        <CustomImage source={Images?.tickIcon} imgStyle={[styles.icon]} />
+      );
+    case 'pending':
+    case 'Pending':
+      return (
+        <CustomImage source={Images?.pendingIcon} imgStyle={[styles.icon]} />
+      );
+    case 'partial':
+    case 'Partial':
+      return (
+        <CustomImage source={Images?.pendingIcon} imgStyle={[styles.icon]} />
+      );
+    default:
+      return null;
+  }
+};
+
+const getStatusColor = (status: string) => {
+  switch (status?.toLowerCase()) {
+    case 'failed':
+      return colors.red;
+    case 'dispatched':
+      return colors.green;
+    case 'pending':
+      return colors.orange;
+    case 'partial':
+      return colors.orange;
+    case 'complete':
+    case 'confirmed':
+      return colors.green;
+    default:
+      return colors.orderDetailsText;
+  }
+};
+
+const getStatusText = (status: string) => {
+  switch (status?.toLowerCase()) {
+    case 'failed':
+      return 'Failed';
+    case 'dispatched':
+      return 'Dispatched';
+    case 'pending':
+      return 'Pending';
+    case 'partial':
+    case 'cancelled':
+      return 'Partial';
+    case 'complete':
+      return 'Complete';
+    case 'confirmed':
+      return 'Confirmed';
+    default:
+      return '';
+  }
+};
+
+const formatDate = (isoDate: string) => {
+  const date = new Date(isoDate);
+  const day = date.toLocaleString("en-GB", { day: "2-digit" });
+  const month = date.toLocaleString("en-GB", { month: "short" });
+  const year = date.getFullYear();
+  return `${day} ${month}, ${year}`;
+};
+
+const CustomCard: React.FC<CustomCardProps> = ({ data, loading }) => {
+  const navigation =
+    useNavigation<StackNavigationProp<AppStackParamList, "OrderDetails">>();
+  const renderProduct = (productItem: any, item: any) => {
+    const { product, quantity } = productItem;
+    const imageUrl = product?.image?.image?.url;
+
+    return (
+      <View key={productItem.id} style={styles.productRow}>
+        <View style={styles.productLeft}>
+          <View style={styles.productImageContainer}>
+            {imageUrl ? (
+              <CustomImage
+                source={{ uri: imageUrl }}
+                imgStyle={styles.productImage}
+              />
+            ) : (
+              <View
+                style={[styles.productImage, { backgroundColor: "#eee" }]}
+              />
+            )}
+          </View>
+          <View style={styles.productDetails}>
+            <Text style={styles.productName}>{product?.name}</Text>
+            <Text style={styles.productName}>{product?.product_type}</Text>
+            <Text style={styles.productQuantity}>Qty : {quantity}</Text>
+          </View>
+        </View>
+        <Text style={styles.productPoints}>{item / 100} Points</Text>
+      </View>
+    );
+  };
+
+  const renderItem: ListRenderItem<CardItem> = ({ item }) => (
+    <View style={styles.cardItem}>
+      <View style={styles.orderHeader}>
+        <View style={styles.statusRow}>
+          <View style={styles.row}>
+            {getStatusIcon(item.status ?? "")}
+            <Text
+              style={[
+                styles.statusText,
+                { color: getStatusColor(item.status ?? "") },
+              ]}
+            >
+              {getStatusText(item.status ?? "")}
+            </Text>
+          </View>
+
+          <Text style={styles.totalPoints}>{pointsFromCentsFixed(item.grand_total, 2)} Points</Text>
+        </View>
+      </View>
+
+      <View style={styles.orderInfo}>
+        <Text style={styles.orderNumber}>Order No : {item.order_no}</Text>
+        <Text style={styles.orderDate}>{formatDate(item.created_at ?? "")}</Text>
+      </View>
+
+      <View style={styles.productsContainer}>
+        {(item.items ?? []).map((subItem, i) => (
+          <View key={subItem.id}>
+            {renderProduct(subItem, subItem.amount_cents)}
+            {i < (item.items ?? []).length - 1 && <View style={styles.separator} />}
+          </View>
+        ))}
+      </View>
+
+      <TouchableOpacity
+        style={styles.viewDetails}
+        onPress={() => navigation.navigate("OrderDetails", { item: item })}
+      >
+        <Text style={styles.viewDetailsText}>View Details</Text>
+        <ChevronRightIcon />
+      </TouchableOpacity>
+    </View>
+  );
+
+
+  return (
+    <View style={styles.container}>
+      {loading ? (
+        <CustomLoader loading={true} />
+      ) : Array.isArray(data) && data.length > 0 ? (
+        <FlatList
+          data={data}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          style={{ flex: 1 }}
+          contentContainerStyle={{ paddingBottom: 80 }}
+          showsVerticalScrollIndicator={false}
+        />
+      ) : (
+        <NoDataFound containerstyle={styles.nodataFound}/>
+      )}
+    </View>
+  );
+};
+
+export default CustomCard;
+

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

@@ -0,0 +1,184 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../constants/Fonts';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+    backgroundColor: 'white',
+    paddingVertical: 10,
+  },
+  cardItem: {
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    backgroundColor: '#fff',
+    borderRadius: 16,
+    marginBottom: 20,
+    borderWidth: 0.25,
+    borderColor: '#ccc',
+  },
+  orderHeader: {
+    marginBottom: 16,
+  },
+  orderStatus: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  statusRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  statusText: {
+    fontSize: 14,
+    fontWeight: '500',
+    textTransform: 'capitalize',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  totalPoints: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    fontFamily: FontFamily.LEXEND_SEMIBOLD,
+    textAlign: 'right',
+  },
+  orderInfo: {
+    gap: 8,
+    marginBottom: '2%',
+  },
+  orderNumber: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: '#6B7280',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    textTransform: 'capitalize',
+  },
+  orderDate: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: '#6B7280',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    textTransform: 'capitalize',
+  },
+  productsContainer: {
+    marginBottom: 5,
+  },
+  productRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    paddingVertical: 8,
+  },
+  productLeft: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12,
+    flex: 1,
+  },
+  productImageContainer: {
+    width: 81,
+    height: 60,
+    backgroundColor: '#FFF',
+    borderRadius: 6.75,
+    shadowColor: 'rgba(75, 85, 98, 0.10)',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 3.84,
+    elevation: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 0.25,
+    borderColor: '#ccc',
+  },
+  productImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+  },
+  productDetails: {
+    flex: 1,
+    height: 54,
+    justifyContent: 'space-between',
+  },
+  productName: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: '#1F2937',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  productDescription: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: '#6B7280',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  productQuantity: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: '#6B7280',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  productPoints: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#1F2937',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    textAlign: 'right',
+  },
+  separator: {
+    height: 1.2,
+    marginVertical: 8,
+    width: 313,
+    alignSelf: 'center',
+    backgroundColor: '#F3F4F7',
+  },
+  viewDetails: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: 12,
+    paddingTop: 8,
+  },
+  viewDetailsText: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: '#DC291E',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  crossIcon: {
+    height: 9,
+    width: 9,
+  },
+  tickIcon: {
+    height: 22,
+    width: 22,
+  },
+  icon: {
+    height: 18,
+    width: 18,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  nodataFound:{
+    minHeight:450
+  }
+});
+
+export default styles;