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

package/src/screens/DeliveryAddress/index.tsx

@@ -0,0 +1,221 @@
+import {
+  ActivityIndicator,
+  View,
+  FlatList,
+  Text,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import React from 'react';
+import styles from './styles';
+import MobileHeader from '../../../src-app/components/MobileHeader';
+import { AppStackParamList } from '../../../src-app/types/navigation';
+import { RouteProp, useIsFocused, useRoute } from '@react-navigation/native';
+import { useAppDispatch } from '../../../src-app/hooks/useAppDispatch';
+import { RootState } from '../../../src-app/redux/store';
+import { useAppSelector } from '../../../src-app/hooks/useAppSelector';
+import { useEffect } from 'react';
+import {
+  createAddressRequest,
+  dashboardInfoRequest,
+  deleteAddressRequest,
+  deliverHereRequest,
+  getAddressListRequest,
+  resetAuthState,
+  updateAddressRequest,
+} from '../../../src-app/redux/authSlice';
+import {
+  CustomButton,
+  CustomImage,
+  CustomLoader,
+  NoDataFound,
+} from '../../../src-app/components';
+import Images from '../../../src-app/constants/Images';
+import { VSCALE } from '../../../src-app/constants/Scaling';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+
+interface DeliveryAddressProps {
+  navigation?: any;
+}
+
+type DeliveryAddressRouteProp = RouteProp<AppStackParamList, 'DeliveryAddress'>;
+
+const DeliveryAddress: React.FC<DeliveryAddressProps> = ({ navigation }) => {
+  const route = useRoute<DeliveryAddressRouteProp>();
+  // const from = route.params?.from;
+  const dispatch = useAppDispatch();
+  const focus = useIsFocused();
+  const { getAddressListData, getAddressListLoading } = useAppSelector(
+    (state: RootState) => state.auth,
+  );
+  const cartId = useAppSelector((state: RootState) => state.auth.cartId);
+  const { deliverHereStatus } = useAppSelector(
+    (state: RootState) => state.auth,
+  );
+  
+  useEffect(() => {
+    dispatch(getAddressListRequest());
+  }, []);
+
+    useEffect(() => {
+      dispatch(dashboardInfoRequest({}));
+    }, [dispatch]);
+  
+  const handleEdit = (item: any) => {
+    navigation.navigate('NewDeliveryAddress', { item });
+  };
+
+  const extractLineAndLandmark = (address: string) => {
+    const raw = (address || '').replace(/\\n/g, '\n');
+
+    const lineMatch = raw.match(/Line:\s*(.*?)(\n|$)/);
+    const landmarkMatch = raw.match(/Landmark:\s*(.*)/);
+
+    const Line = lineMatch ? lineMatch[1].trim() : '';
+    const Landmark = landmarkMatch ? landmarkMatch[1].trim() : '';
+
+    return { Line, Landmark };
+  };
+
+  const renderItem = (item: any) => {  
+    const { Line, Landmark } = extractLineAndLandmark(item.line);
+    return (
+      <View style={styles.cardItem}>
+        <View style={styles.mainContent}>
+          <View style={styles.topRow}>
+            <Text style={styles.name}>{item.name}</Text>
+            <View style={styles.row}>
+              <TouchableOpacity
+                style={styles.editContainer}
+                activeOpacity={0.7}
+                onPress={() => {
+                  handleEdit(item);
+                }}
+              >
+                <CustomImage
+                  source={Images.editIcon}
+                  imgStyle={styles.editIcon}
+                />
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.deleteContainer}
+                activeOpacity={0.7}
+                onPress={() => {
+                  dispatch(deleteAddressRequest({ id: item?.id }));
+                }}
+              >
+                <CustomImage
+                  source={Images.delete}
+                  imgStyle={styles.deleteIcon}
+                />
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <Text style={styles.phone}>+91 {item.phone_numbers.join('\n')}</Text>
+          <Text style={styles.address}>
+            Address : <Text style={styles.addressText}>{Line}</Text>
+          </Text>
+          <Text style={styles.address}>
+            Landmark : <Text style={styles.addressText}>{Landmark}</Text>
+          </Text>
+        </View>
+
+        <CustomButton
+          customButtonContainerStyle={styles.buttonContainer}
+          buttonStyle={styles.button}
+          title="Deliver Here"
+          onPress={() => {
+            dispatch(deliverHereRequest({
+              order_id: cartId,
+              skip_payable_validation: true,
+              order: {
+                shipping: {
+                  shipping_method: "billing_address"
+                },
+                shipping_address: {
+                  zip_code: item?.zip_code,
+                  city: item?.city,
+                  name: item?.name,
+                  latitude: null,
+                  longitude: null,
+                  state: item?.state,
+                  line: item?.line,
+                  country: {
+                    id: "",
+                    name: "India"
+                  },
+                  phone_numbers: item?.phone_numbers,
+                  id: item?.id,
+                  email: item?.email ? item?.email : ""
+                },
+                billing_address: {
+                  zip_code: item?.zip_code,
+                  city: item?.city,
+                  name: item?.name,
+                  latitude: null,
+                  longitude: null,
+                  state: item?.state,
+                  line: item?.line,
+                  country: {
+                    id: "",
+                    name: "India"
+                  },
+                  phone_numbers: item?.phone_numbers,
+                  id: item?.id,
+                  email: item?.email ? item?.email : ""
+                }
+              }
+            }));
+            navigation.navigate('PaymentMethod', { item: item });
+            dispatch(resetAuthState("deliverHereStatus"));
+          }}
+          textStyle={styles.buttonText}
+        />
+      </View>
+    );
+  };
+  return (
+    <View style={styles.container}>
+      <MobileHeader
+        title="Select Delivery Address"
+        showBack
+        onBack={() => {
+          if (navigation.canGoBack()) {
+            navigation.goBack();
+          } else {
+            navigation.navigate('MyCart' as never);
+          }
+        }}
+        disableSafeAreaPadding={true}
+      />
+      <View style={styles.content}>
+        {getAddressListLoading ? (
+          <CustomLoader loading={getAddressListLoading} />
+        ) : getAddressListData?.length > 0 ? (
+          <FlatList
+            data={getAddressListData}
+            renderItem={({ item }) => renderItem(item)}
+            keyExtractor={item => item.id}
+            contentContainerStyle={{ paddingBottom: VSCALE(100) }}
+            showsVerticalScrollIndicator={false}
+          />
+        ) : (
+          <NoDataFound />
+        )}
+      </View>
+      <CustomButton
+        title="Add New Address"
+        onPress={() => {
+          navigation.navigate('NewDeliveryAddress');
+        }}
+        icon={true}
+        iconSrc={Images.addWhiteIcon}
+        customButtonContainerStyle={styles.buttonView}
+      />
+    </View>
+  );
+};
+
+export default DeliveryAddress;

package/src/screens/DeliveryAddress/styles.ts

@@ -0,0 +1,122 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  cardItem: {
+    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',
+  },
+  content: {
+    flex: 1,
+    padding: 20,
+  },
+  button: {
+    borderWidth: 1,
+    borderColor: '#DC291E',
+    borderRadius: 12,
+    alignItems: 'center',
+    backgroundColor: 'white',
+  },
+  buttonText: {
+    color: '#DC291E',
+    fontSize: 12,
+    fontWeight: '600',
+    fontFamily: FontFamily.LEXEND_SEMIBOLD,
+  },
+  mainContent: {
+    padding: 20,
+  },
+  buttonContainer: {
+    marginBottom: 20,
+    paddingHorizontal:20
+  },
+  name: {
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 14,
+    fontWeight: '500',
+    color: 'black',
+    marginBottom: 2,
+  },
+  phone: {
+    color: '#6B7280',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 10,
+    fontWeight: '500',
+    marginBottom: 2,
+  },
+  address: {
+    color: '#1F2937',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 10,
+    fontWeight: '400',
+    marginVertical: 2,
+  },
+  addressText: {
+    color: '#6B7280',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: 10,
+    fontWeight: '500',
+    marginVertical: 2,
+  },
+  editIcon: {
+    width: 12,
+    height: 12,
+    resizeMode: 'contain',
+  },
+  deleteIcon: {
+    width: 22,
+    height: 22,
+    resizeMode: 'contain',
+  },
+  editContainer: {
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#F3F4F7',
+    borderRadius: 5,
+    backgroundColor: '#F3F4F7',
+  },
+  deleteContainer: {
+    width: 28,
+    height: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#FEF2F2',
+    borderRadius: 5,
+    backgroundColor: '#FEF2F2',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: 70,
+  },
+  topRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  buttonView:{
+    paddingHorizontal:20
+  }
+});
+
+export default styles;

package/src/screens/E-Vouchers/index.tsx

@@ -0,0 +1,157 @@
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
+import React, { useState, useMemo } from 'react';
+import styles from './styles';
+import MobileHeader from '../../../src-app/components/MobileHeader';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { AppStackParamList } from '../../../src-app/types/navigation';
+import { useAppSelector } from '../../../src-app/hooks/useAppSelector';
+import { RootState } from '../../../src-app/redux/store';
+import { CustomImage, NoDataFound } from '../../../src-app/components';
+import Images from '../../../src-app/constants/Images';
+import Clipboard from '@react-native-clipboard/clipboard';
+import Toast from 'react-native-toast-message';
+import { FILTER, MAP } from '../../../src-app/utils/filterPins';
+
+type MyEVouchersNavigationProp = StackNavigationProp<
+  AppStackParamList,
+  'MyEVouchers'
+>;
+
+interface Props {
+  navigation: MyEVouchersNavigationProp;
+}
+
+const formatDate = (isoDate: string): 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 `Expires on ${day} ${month}, ${year}`;
+};
+
+const renderItem = (
+  item: any,
+  index: number,
+  visiblePins: { [key: number]: boolean },
+  setVisiblePins: React.Dispatch<
+    React.SetStateAction<{ [key: number]: boolean }>
+  >,
+) => {
+  const isVisible = visiblePins[index];
+
+  return (
+    <View key={index} style={styles.cardItem}>
+      <Text style={styles.name}>{item?.product?.name}</Text>
+      <View style={styles.row}>
+        <Text style={styles.denomination}>Denomination {item?.value}</Text>
+        <Text style={styles.denomination}>
+          Order ID : {item?.order?.order_no}
+        </Text>
+      </View>
+      <TouchableOpacity
+        style={styles.touchable}
+        activeOpacity={0.7}
+        onPress={() => {
+          if (item?.code) {
+            Clipboard.setString(item?.code);
+            Toast.show({
+              type: 'success',
+              text1: 'Copied to clipboard!',
+            });
+          }
+        }}
+      >
+        <Text style={styles.code}>{item?.code}</Text>
+        <CustomImage source={Images.copy} imgStyle={styles.copyIcon} />
+      </TouchableOpacity>
+      <View style={styles.row}>
+        <View style={styles.bottomrow}>
+          <CustomImage source={Images.stopwatch} imgStyle={styles.icon} />
+          <Text style={styles.expiry}>{formatDate(item?.expiry)}</Text>
+        </View>
+        <View style={styles.bottomrow}>
+          <Text style={styles.expiry}>
+            PIN : {isVisible ? item?.pin : '*'.repeat(item?.pin?.length || 0)}
+          </Text>
+          <TouchableOpacity
+            onPress={() => {
+              setVisiblePins(prev => ({ ...prev, [index]: !prev[index] }));
+            }}
+          >
+            <CustomImage source={Images.eye} imgStyle={styles.eyeicon} />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const MyEVouchers: React.FC<Props> = ({ navigation }) => {
+  const { validateEVouchersData, validateEVouchersError } = useAppSelector(
+    (state: RootState) => state.auth,
+  );
+  const [visiblePins, setVisiblePins] = useState<{ [key: number]: boolean }>(
+    {},
+  );
+
+  // Use actual data from backend only
+  const displayData = useMemo(() => {
+    if (Array.isArray(validateEVouchersData) && validateEVouchersData.length > 0) {
+      return validateEVouchersData;
+    }
+    // Return empty array if no data from backend
+    console.log('🎟️ MyEVouchers: No data from backend, showing empty state');
+    return [];
+  }, [validateEVouchersData]);
+
+  // Debug logging
+  console.log('🎟️ MyEVouchers RENDER:', {
+    displayDataLength: displayData.length,
+    validateEVouchersError: !!validateEVouchersError,
+  });
+
+  return (
+    <View style={styles.container}>
+      <MobileHeader
+        title="My E-Vouchers"
+        showBack
+        onBack={() => {
+          if (navigation.canGoBack()) {
+            navigation.goBack();
+          } else {
+            navigation.navigate('DashboardTab' as never, { screen: 'Dashboard' });
+          }
+        }}
+        icon={Images.help}
+        iconPress={() => {
+          navigation.navigate('Help', {
+            from: "MyEVouchers"
+          })
+        }}
+        disableSafeAreaPadding={true}
+      />
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <View>
+          {(() => {
+            console.log('🎟️ MyEVouchers: Rendering', displayData.length, 'items');
+            const filtered = displayData.filter((item: any) => item?.pin);
+            console.log('🎟️ MyEVouchers: After filter', filtered.length, 'items');
+            if (filtered.length > 0) {
+              return filtered.map((item: any, index: number) => {
+                console.log('🎟️ MyEVouchers item:', index, item?.product?.name, item?.pin);
+                return renderItem(item, index, visiblePins, setVisiblePins);
+              });
+            }
+            return <NoDataFound containerstyle={styles.nodataFound}/>;
+          })()}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+export default MyEVouchers;

package/src/screens/E-Vouchers/styles.ts

@@ -0,0 +1,106 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../../src-app/constants/Fonts';
+import { colors } from '../../../src-app/styles/colors';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  content: {
+    padding: 20,
+    width: '100%',
+  },
+  text: {
+    fontSize: 16,
+    color: '#1F2937',
+    fontWeight: '500',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+  },
+  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',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  name: {
+    fontSize: 14,
+    color: '#1F2937',
+    fontWeight: '500',
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+  },
+  denomination: {
+    fontSize: 12,
+    fontWeight: '500',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    color: colors.onSurfaceVariant,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 10,
+    justifyContent: 'space-between',
+    marginTop: 10,
+  },
+  bottomrow: {
+    flexDirection: 'row',
+    gap: 5,
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  touchable: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: colors.outline,
+    padding: 20,
+    borderRadius: 8,
+    marginTop: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  code: {
+    fontSize: 16,
+    fontWeight: '500',
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    color: colors.red,
+  },
+  expiry: {
+    fontSize: 10,
+    fontWeight: '400',
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    color: colors.black,
+  },
+  copyIcon: {
+    height: 20,
+    width: 17,
+    resizeMode: 'contain',
+  },
+  icon: {
+    height: 12,
+    width: 7,
+    resizeMode: 'contain',
+  },
+  eyeicon:{
+    height: 16,
+    width: 16,
+    resizeMode: 'contain',
+  },
+  nodataFound:{
+    minHeight:450
+  }
+});
+
+export default styles;