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

package/src/screens/MyCart/styles.ts

@@ -0,0 +1,249 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+import { VSCALE } from '../../../src-app/constants/Scaling';
+import { colors } from '../../../src-app/styles/colors';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+  },
+  productRow: {
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    shadowColor: colors.shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+    backgroundColor: colors.background,
+    borderRadius: 16,
+    marginBottom: 30,
+    borderWidth: 0.25,
+    borderColor: colors.outline,
+  },
+  productLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  productImageContainer: {
+    width: 71,
+    height: 47,
+    marginRight: 12,
+    borderWidth: 0.25,
+    borderRadius: 5,
+    borderColor: colors.outline,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  productImage: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 5,
+    resizeMode: 'contain',
+  },
+  productDetails: {
+    flexShrink: 1,
+  },
+  productName: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.onSurface,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    width: 150,
+  },
+  productQuantity: {
+    fontSize: 10,
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontWeight: '600',
+  },
+  productQuantityText: {
+    fontSize: 10,
+    color: colors.onSurface,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontWeight: '600',
+  },
+  productPoints: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: colors.onSurface,
+    textAlign: 'right',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  emptyText: {
+    textAlign: 'center',
+    marginTop: 20,
+    fontSize: 16,
+    color: colors.onSurface,
+  },
+  productQuantityContainer: {
+    borderWidth: 1,
+    padding: 8,
+    borderRadius: 6,
+    width: '20%',
+    borderColor: colors.outline,
+    flexDirection: 'row',
+    gap: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 5,
+  },
+  icon: {
+    width: 8,
+    height: 4,
+    resizeMode: 'contain',
+  },
+  deleteIcon: {
+    width: 28,
+    height: 28,
+    resizeMode: 'contain',
+  },
+  iconRow: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 15,
+  },
+  left: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  separator: {
+    height: 1.2,
+    backgroundColor: 'transparent',
+    marginVertical: 8,
+    width: '100%',
+    alignSelf: 'center',
+    borderTopWidth: 1,
+    borderTopColor: colors.paymentSeparatorBorder,
+  },
+  leftText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.onSurfaceVariant,
+    textTransform: 'capitalize',
+    marginBottom: 12,
+  },
+  amountText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 12,
+    fontWeight: '600',
+    color: colors.onSurfaceVariant,
+    marginTop: 10,
+  },
+  rightText: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.onSurface,
+    textTransform: 'capitalize',
+    marginBottom: 12,
+  },
+  amountPoints: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 16,
+    fontWeight: '600',
+    color: colors.onSurface,
+    textTransform: 'capitalize',
+    marginTop: 10,
+  },
+  bottomRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  bottomContent: {
+    paddingHorizontal: 7,
+    marginBottom: 20,
+  },
+  buttonView: {
+    justifyContent: 'space-between',
+    flex: 1,
+  },
+  mainContent: {
+    justifyContent: 'space-between',
+  },
+  loaderContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    flex: 1,
+  },
+  fullScreenLoader: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(255, 255, 255, 0.7)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 10, 
+    zIndex: 100,
+  },
+  buttonStyle: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: VSCALE(200),
+  },
+  stickyButtonContainer: {
+    position: 'absolute',
+    bottom: VSCALE(-40),
+    left: 0,
+    right: 0,
+    backgroundColor: colors.background,
+    paddingVertical: VSCALE(12),
+    paddingHorizontal: 20,
+    elevation: 10,
+    shadowColor: colors.shadow,
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+  },
+  contentContainer: {
+    paddingBottom: VSCALE(160),
+  },
+  emptyCartCenter: {
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+  paddingHorizontal: 24,
+},
+emptyCartTitle: {
+  fontFamily: FontFamily.LEXEND_REGULAR,
+  fontSize: 18,
+  fontWeight: '600',
+  color: colors.onSurface,  marginBottom: 8,
+  textAlign: 'center',
+},
+emptyCartSubtitle: {
+  fontFamily: FontFamily.LEXEND_REGULAR,
+  fontSize: 14,
+  color: colors.onSurfaceVariant,
+  textAlign: 'center',
+},
+emptyCartButtonContainer: {
+  padding: 20,
+  paddingBottom: VSCALE(40),
+  backgroundColor: colors.background,
+},
+
+
+});

package/src/screens/MyOrders/index.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { StackNavigationProp } from "@react-navigation/stack";
+import { AppStackParamList } from "../../../src-app/types/navigation";
+import styles from "./styles";
+import { CustomCard } from "../../../src-app/components";
+import { useAppSelector } from "../../../src-app/hooks/useAppSelector";
+import { RootState } from "../../../src-app/redux/store";
+import MobileHeader from "../../../src-app/components/MobileHeader";
+import { useRoute, RouteProp } from "@react-navigation/native";
+
+type MyOrdersNavigationProp = StackNavigationProp<
+  AppStackParamList,
+  "MyOrders"
+>;
+
+type MyOrdersRouteProp = RouteProp<AppStackParamList, "MyOrders">;
+
+interface Props {
+  navigation: MyOrdersNavigationProp;
+}
+
+const MyOrders: React.FC<Props> = ({ navigation }) => {
+  const myvalidateOtpData = useAppSelector(
+    (state: RootState) => state.auth.myOrdersValidateOtpData
+  );
+  const { myOrdersValidateOtpLoading, myOrdersValidateOtpError } = useAppSelector(
+    (state: RootState) => state.auth
+  );
+
+  const route = useRoute<MyOrdersRouteProp>();
+  const from = route.params?.from;
+
+  // Use actual data from backend only
+  const displayData = useMemo(() => {
+    if (Array.isArray(myvalidateOtpData) && myvalidateOtpData.length > 0) {
+      return myvalidateOtpData;
+    }
+    // Return empty array if no data from backend
+    console.log('📦 MyOrders: No data from backend, showing empty state');
+    return [];
+  }, [myvalidateOtpData]);
+
+  // Show loader only when loading and no error
+  const showLoader = !myOrdersValidateOtpError && myOrdersValidateOtpLoading;
+
+  // Debug logging
+  console.log('📦 MyOrders RENDER:', {
+    showLoader,
+    displayDataLength: displayData.length,
+    myOrdersValidateOtpLoading,
+    myOrdersValidateOtpError: !!myOrdersValidateOtpError,
+    firstItem: displayData[0] ? { id: displayData[0].id, order_no: displayData[0].order_no } : null,
+  });
+
+  const handleGoBack = () => {
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+      return true;
+    }
+    // Fallback: navigate to originating screen or Dashboard
+    if (from) {
+      navigation.navigate(from as never);
+      return true;
+    }
+    navigation.navigate('DashboardTab' as never, { screen: 'Dashboard' });
+    return true;
+  };
+  
+  return (
+    <View style={styles.container}>
+      <MobileHeader
+        title="My orders"
+        showBack
+        onBack={() => handleGoBack()}
+        disableSafeAreaPadding={true}
+      />
+
+      <CustomCard
+        data={displayData}
+        loading={showLoader}
+      />
+    </View>
+  );
+};
+
+export default MyOrders;

package/src/screens/MyOrders/styles.ts

@@ -0,0 +1,281 @@
+import { StyleSheet } from 'react-native';
+import { colors } from '../../../src-app/styles/colors';
+import FontFamily from '../../../src-app/constants/Fonts';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  statusBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+  },
+  timeText: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: colors.onSurface,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  statusIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
+  signalBars: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 2,
+  },
+  signalBar: {
+    width: 3,
+    backgroundColor: colors.onSurface,
+    borderRadius: 1,
+  },
+  iconText: {
+    fontSize: 10,
+    color: colors.onSurface,
+  },
+  battery: {
+    width: 27,
+    height: 13,
+    borderWidth: 1,
+    borderColor: colors.onSurface,
+    borderRadius: 2,
+    position: 'relative',
+    opacity: 0.35,
+  },
+  batteryInner: {
+    position: 'absolute',
+    top: 1,
+    left: 1,
+    right: 1,
+    bottom: 1,
+    backgroundColor: colors.onSurface,
+    borderRadius: 1,
+  },
+  batteryTip: {
+    position: 'absolute',
+    right: -3,
+    top: 4,
+    width: 2,
+    height: 5,
+    backgroundColor: colors.onSurface,
+    borderRadius: 1,
+    opacity: 0.4,
+  },
+  header: {
+    backgroundColor: colors.background,
+    paddingHorizontal: 20,
+    paddingTop: 20,
+    paddingBottom: 20,
+    maxWidth: 393,
+    width: '100%',
+    alignSelf: 'center',
+  },
+  headerContent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 28,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '500',
+    color: colors.onSurface,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    textTransform: 'capitalize',
+  },
+  successBanner: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: colors.surface,
+    borderColor: colors.green,
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    marginHorizontal: 20,
+    marginBottom: 20,
+    maxWidth: 353,
+    alignSelf: 'center',
+  },
+  successContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent:'space-between'
+  },
+  successText: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.green,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingHorizontal: 20,
+    paddingBottom: 100,
+    maxWidth: 393,
+    width: '100%',
+    alignSelf: 'center',
+  },
+  orderCard: {
+    backgroundColor: colors.background,
+    borderRadius: 16,
+    padding: 20,
+    marginBottom: 20,
+    shadowColor: 'rgba(75, 85, 98, 0.15)',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 12,
+    elevation: 5,
+  },
+  orderHeader: {
+    marginBottom: 16,
+  },
+  orderStatus: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  statusRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flex: 1,
+  },
+  statusText: {
+    fontSize: 14,
+    fontWeight: '500',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    textTransform: 'capitalize',
+  },
+  totalPoints: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: colors.onSurface,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  orderInfo: {
+    gap: 8,
+  },
+  orderNumber: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    textTransform: 'capitalize',
+  },
+  orderDate: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    textTransform: 'capitalize',
+  },
+  productsContainer: {
+    marginBottom: 16,
+  },
+  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: 54,
+    backgroundColor: colors.background,
+    borderRadius: 6.75,
+    shadowColor: 'rgba(75, 85, 98, 0.10)',
+    shadowOffset: {
+      width: 0,
+      height: 0.964,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 5.786,
+    elevation: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+  productImage: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  productDetails: {
+    flex: 1,
+    height: 54,
+    justifyContent: 'space-between',
+  },
+  productName: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.onSurface,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  productDescription: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  productQuantity: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: colors.onSurfaceVariant,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  productPoints: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: colors.onSurface,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  separator: {
+    height: 1.2,
+    backgroundColor: 'transparent',
+    marginVertical: 8,
+    width: 313,
+    alignSelf: 'center',
+  },
+  viewDetails: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: 12,
+    paddingTop: 8,
+  },
+  viewDetailsText: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: colors.primary,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  crossIcon: {
+    height: 9,
+    width: 9,
+  },
+  tickIcon: {
+    height: 22,
+    width: 22,
+  },
+});
+
+export default styles;

package/src/screens/MyProfile/index.tsx

@@ -0,0 +1,72 @@
+import { ScrollView, Text, View } from 'react-native';
+import ProfileField from '../../../src-app/components/ProfileField';
+import CustomButton from '../../../src-app/components/CustomButton';
+import React from 'react';
+import styles from './styles';
+import MobileHeader from '../../../src-app/components/MobileHeader';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RootStackParamList } from '../../../src-app/types/navigation';
+import { RouteProp } from '@react-navigation/native';
+import { CustomImage, Footer } from '../../../src-app/components';
+import Images from '../../../src-app/constants/Images';
+
+type MyProfileNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  'MyProfile'
+>;
+
+type MyProfileRouteProp = RouteProp<RootStackParamList, 'OTPVerification'>;
+
+interface Props {
+  navigation: MyProfileNavigationProp;
+  route: MyProfileRouteProp;
+}
+
+const MyProfile: React.FC<Props> = ({ navigation }) => {
+  return (
+    <View style={styles.main}>
+      <MobileHeader
+        title="My Profile"
+        showBack
+        onBack={() => {
+          if (navigation.canGoBack()) {
+            navigation.goBack();
+          } else {
+            navigation.navigate('Profile' as never);
+          }
+        }}
+      />
+      <ScrollView
+        contentContainerStyle={styles.contentContainer}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={styles.content}>
+          <ProfileField label="Shop name" value="Mahaveer" />
+          <ProfileField label="Mobile number" value="+91-7359222222" />
+          <ProfileField label="Email ID" value="Mahaveer.stn@gmail.com" />
+          <ProfileField
+            label="Address"
+            value="Flat no 4, Sravya Residency, near Jubliee Garden, Hanuman Nagar, Kondapur, Hyderabad 500084"
+          />
+
+          <View style={styles.row}>
+            <CustomImage source={Images.i_icon} imgStyle={styles.i_icon} />
+            <Text style={styles.text}>
+              For above changes or updates please contact HP pencils team
+            </Text>
+          </View>
+        </View>
+        <CustomButton
+          title="Confirm"
+          onPress={() => {
+            navigation.navigate('VerificationComplete');
+          }}
+          customButtonContainerStyle={styles.customButtonContainerStyle}
+        />
+        <Footer />
+      </ScrollView>
+    </View>
+  );
+};
+
+export default MyProfile;