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

package/src/screens/PointsLog/index.tsx

@@ -0,0 +1,286 @@
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+  ActivityIndicator,
+} from "react-native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import { AppStackParamList } from "../../../src-app/types/navigation";
+import { colors } from "../../../src-app/styles/colors";
+import MobileHeader from "../../../src-app/components/MobileHeader";
+import Icon from "../../../src-app/components/Icon";
+import Button from "../../../src-app/components/Button";
+import styles from "./styles";
+import { useAppDispatch } from "../../../src-app/hooks/useAppDispatch";
+import {
+  dashboardInfoRequest,
+  pointsLogRequest,
+  redemptionHistoryRequest,
+} from "../../../src-app/redux/authSlice";
+import { useAppSelector } from "../../../src-app/hooks/useAppSelector";
+import { RootState } from "../../../src-app/redux/store";
+import { useIsFocused } from "@react-navigation/native";
+import Images from "../../../src-app/constants/Images";
+import { CustomImage, NoDataFound } from "../../../src-app/components";
+
+type PointsLogNavigationProp = StackNavigationProp<
+  AppStackParamList,
+  "PointsLog"
+>;
+
+interface Props {
+  navigation: PointsLogNavigationProp;
+}
+
+const PointsLog: React.FC<Props> = ({ navigation }) => {
+  const focus = useIsFocused();
+  const [activeTab, setActiveTab] = useState<"log" | "history">("log");
+  const dispatch = useAppDispatch();
+  const {
+    pointsLogLoading,
+    pointsLogData,
+    redemptionHistoryData,
+    redemptionHistoryLoading,
+    dashboardInfoData,
+  } = useAppSelector((state: RootState) => state.auth);
+
+  useEffect(() => {
+    dispatch(dashboardInfoRequest());
+  }, []);
+
+  useEffect(() => {
+    if (focus) {
+      if (activeTab === "log") {
+        dispatch(pointsLogRequest({}));
+      } else if (dashboardInfoData?.id) {
+        // Only call redemptionHistoryRequest when dashboardInfoData.id is available
+        console.log('Calling redemptionHistoryRequest with id:', dashboardInfoData.id);
+        dispatch(
+          redemptionHistoryRequest({
+            id: dashboardInfoData.id,
+          })
+        );
+      }
+    }
+  }, [focus, activeTab, dashboardInfoData]);
+
+  const handleTabChange = (tab: "log" | "history") => {
+    setActiveTab(tab);
+
+    if (tab === "log") {
+      dispatch(pointsLogRequest({}));
+    } else {
+      dispatch(
+        redemptionHistoryRequest({
+          id: dashboardInfoData.id,
+        })
+      );
+    }
+  };
+
+  const renderPointsCard = () => (
+    <View style={styles.pointsCard}>
+      <View style={styles.pointsInfo}>
+        <Image
+          source={{
+            uri: "https://api.builder.io/api/v1/image/assets/TEMP/e4b22688789024f193d03ad18d3ba19cb8dfba9c?width=96",
+          }}
+          style={styles.coinIcon}
+        />
+        <Text style={styles.pointsValue}>{(dashboardInfoData?.current_balance)}</Text>
+      </View>
+      <Button
+        title="Redeem Now"
+        variant="primary"
+        size="small"
+        onPress={() => navigation.navigate("Redeem")}
+        style={styles.redeemButton}
+      />
+    </View>
+  );
+
+  const renderTabs = () => (
+    <View style={styles.tabContainer}>
+      <TouchableOpacity
+        style={[styles.tab, activeTab === "log" && styles.activeTab]}
+        onPress={() => handleTabChange("log")}
+      >
+        <Text
+          style={[styles.tabText, activeTab === "log" && styles.activeTabText]}
+        >
+          Points Log
+        </Text>
+        {activeTab === "log" && <View style={styles.tabIndicator} />}
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={[styles.tab, activeTab === "history" && styles.activeTab]}
+        onPress={() => handleTabChange("history")}
+      >
+        <Text
+          style={[
+            styles.tabText,
+            activeTab === "history" && styles.activeTabText,
+          ]}
+        >
+          Redemption History
+        </Text>
+        {activeTab === "history" && <View style={styles.tabIndicator} />}
+      </TouchableOpacity>
+    </View>
+  );
+
+  const formatDate = (dateTimeStr: string) => {
+    if (!dateTimeStr) return "";
+  
+    const [datePart] = dateTimeStr.split(" - ");
+    const [day, month, year] = datePart.split("/");
+  
+    const monthNames = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+  
+    const formatted = `${day} ${monthNames[parseInt(month) - 1]}, ${year}`;
+    return formatted;
+  };
+  
+
+  const renderPointsLogContent = () => {
+    if (pointsLogLoading) {
+      return <ActivityIndicator size="small" color={colors.primary} />;
+    }
+    return (
+      <View style={styles.listContent}>
+        {Array.isArray(pointsLogData) && pointsLogData.length > 0 ? (
+          pointsLogData.map((item, index) => (
+            <View key={item.id}>
+              <View style={styles.logItem}>
+                <View style={styles.itemDetails}>
+                  <Text style={styles.itemTitle}>{item?.transaction_type}</Text>
+                  <Text style={styles.itemDescription}>
+                    {item?.transaction_type === "Credit"
+                      ? "Credited On : "
+                      : "Debited On : "}
+                    {formatDate(item?.date_and_time)}
+                  </Text>
+                </View>
+                <View style={styles.itemPoints}>
+                  <CustomImage
+                    source={
+                      item?.transaction_type === "Credit"
+                        ? Images.arrowgreen
+                        : Images.arrowred
+                    }
+                    imgStyle={styles.arrowIcon}
+                  />
+                  <Text style={styles.pointsValue}>{item?.amount}</Text>
+                </View>
+              </View>
+              {index < pointsLogData.length - 1 && (
+                <View style={styles.separator} />
+              )}
+            </View>
+          ))
+        ) : (
+          <NoDataFound containerstyle={styles.noDataFound} />
+        )}
+      </View>
+    );
+  };
+
+  const formatRedemptionDate = (isoDate: string) => {
+    const date = new Date(isoDate);
+    const day = date.toLocaleString("en-GB", { day: "2-digit" });
+    const month = date.toLocaleString("en-GB", { month: "long" });
+    const year = date.getFullYear();
+    return `${day} ${month}, ${year}`;
+  };
+
+  const renderRedemptionHistoryContent = () => {
+    if (redemptionHistoryLoading) {
+      return <ActivityIndicator size="small" color={colors.primary} />;
+    }
+
+    return (
+      <View style={styles.listContent}>
+        {Array.isArray(redemptionHistoryData) &&
+        redemptionHistoryData.length > 0 ? (
+          redemptionHistoryData.map((item, index) => (
+            <View key={index}>
+              <View style={styles.redemptionItem}>
+                <View style={styles.itemDetails}>
+                  <Text style={styles.itemTitle}>Points Redeemed</Text>
+                  <Text style={styles.itemOrderNo}>
+                    Order No : {item?.order_no}
+                  </Text>
+                  <Text style={styles.itemDate}>
+                    {formatRedemptionDate(item?.date)}
+                  </Text>
+                </View>
+                <View style={styles.itemPoints}>
+                  <CustomImage
+                    source={Images.arrowred}
+                    imgStyle={styles.arrowIcon}
+                  />
+                  <Text style={styles.pointsValue}>
+                    {item?.amount}
+                  </Text>
+                </View>
+              </View>
+              {index < redemptionHistoryData.length - 1 && (
+                <View style={styles.separator} />
+              )}
+            </View>
+          ))
+        ) : (
+          <NoDataFound containerstyle={styles.noDataFound} />
+        )}
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <MobileHeader
+        title="Apna Points"
+        showBack
+        onBack={() => {
+          if (navigation.canGoBack()) {
+            navigation.goBack();
+          } else {
+            navigation.navigate('DashboardTab' as never, { screen: 'Dashboard' });
+          }
+        }}
+        disableSafeAreaPadding={true}
+      />
+
+      <ScrollView
+        style={styles.scrollView}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={styles.content}>
+          {renderPointsCard()}
+          {renderTabs()}
+          {activeTab === "log"
+            ? renderPointsLogContent()
+            : renderRedemptionHistoryContent()}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default PointsLog;

package/src/screens/PointsLog/styles.ts

@@ -0,0 +1,156 @@
+import { StyleSheet } from 'react-native';
+import { borderRadius, spacing, typography } from '../../../src-app/styles/shared';
+import { VSCALE } from '../../../src-app/constants/Scaling';
+import { colors } from '../../../src-app/styles/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  content: {
+    paddingHorizontal: spacing.lg,
+    paddingTop: spacing.lg,
+    paddingBottom: 120, // Space for tab bar
+  },
+  pointsCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: colors.background,
+    borderRadius: borderRadius.md,
+    borderWidth: 1,
+    borderColor: colors.primary,
+    padding: spacing.md,
+    marginBottom: spacing.xl,
+  },
+  pointsInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  coinIcon: {
+    width: 48,
+    height: 48,
+  },
+  pointsValue: {
+    ...typography.h3,
+    color: colors.onSurface,
+    fontWeight: '700',
+  },
+  redeemButton: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  tabContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: colors.outline,
+    marginBottom: spacing.md,
+    gap: spacing.lg,
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    paddingBottom: spacing.md,
+    position: 'relative',
+  },
+  activeTab: {
+    // Additional styling for active tab if needed
+  },
+  tabText: {
+    ...typography.caption,
+    color: colors.onSurfaceVariant,
+    textAlign: 'center',
+  },
+  activeTabText: {
+    ...typography.caption,
+    color: colors.primary,
+    fontWeight: '600',
+  },
+  tabIndicator: {
+    position: 'absolute',
+    bottom: -1,
+    left: 0,
+    right: 0,
+    height: 3,
+    backgroundColor: colors.primary,
+    borderRadius: borderRadius.lg,
+  },
+  listContent: {
+    gap: spacing.sm,
+  },
+  logItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    paddingVertical: spacing.md,
+  },
+  redemptionItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    paddingVertical: spacing.sm,
+  },
+  itemDetails: {
+    flex: 1,
+    gap: spacing.sm,
+  },
+  itemTitle: {
+    ...typography.caption,
+    color: colors.onSurface,
+    fontWeight: '600',
+    textTransform: 'capitalize',
+  },
+  itemDescription: {
+    ...typography.caption,
+    color: colors.onSurfaceVariant,
+    fontSize: 10,
+    textTransform: 'capitalize',
+  },
+  itemOrderNo: {
+    ...typography.caption,
+    color: colors.onSurfaceVariant,
+    fontSize: 12,
+    textTransform: 'capitalize',
+  },
+  itemDate: {
+    ...typography.caption,
+    color: colors.onSurfaceVariant,
+    fontSize: 10,
+    textTransform: 'capitalize',
+  },
+  itemPoints: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  arrowContainer: {
+    width: 16,
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  arrowIcon: {
+    height: 8,
+    width: 10,
+    resizeMode: 'contain',
+  },
+  separator: {
+    width: '100%',
+    height: 1.2,
+    backgroundColor: 'rgba(209, 213, 219, 0.45)',
+    marginTop: spacing.sm,
+  },
+  noDataFound: {
+    marginTop: VSCALE(80),
+    // borderWidth:1
+  },
+});
+
+export default styles;