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

package/src-app/constants/Images.ts

@@ -0,0 +1,81 @@
+ const Images = {
+  zaggleLogo: require('../../assets/images/zagglePropelLogo.png'),
+  apnaClubLogo: require('../../assets/images/apnaClubLogo.png'),
+  hinduPencilsLogo: require('../../assets/images/hinduPencilsLogo.png'),
+  topWave: require('../../assets/images/topWave.png'),
+  bottomWave: require('../../assets/images/bottomWave.png'),
+  logo: require('../../assets/images/logo.png'),
+  greyDownArrow: require('../../assets/images/icons/greyDownArrow.png'),
+  successTick: require('../../assets/images/icons/successTick.gif'),
+  i_icon: require('../../assets/images/icons/i_icon.png'),
+  homeInactive: require('../../assets/images/icons/homeinactive.png'),
+  redeemInactive: require('../../assets/images/icons/redeem.png'),
+  user: require('../../assets/images/icons/user.png'),
+  help: require('../../assets/images/icons/help.png'),
+  homeActive: require('../../assets/images/icons/home.png'),
+  redeemActive: require('../../assets/images/icons/redeemactive.png'),
+  redemptionHistory: require('../../assets/images/icons/redemptionHistory.png'),
+  myOrders: require('../../assets/images/icons/myOrders.png'),
+  eVoucher: require('../../assets/images/icons/eVoucher.png'),
+  cart: require('../../assets/images/icons/cart.png'),
+  bannerCard: require('../../assets/images/bannerCard.png'),
+  giftIcon: require('../../assets/images/gift.png'),
+  // New images for updated Home tab UI
+  floralBackground: require('../../assets/images/oq3p0u0_1.png'),
+  discountBanner: require('../../assets/images/herobanner.png'),
+  coinIcon: require('../../assets/images/coin_1_1.png'),
+  bellIcon: require('../../assets/images/icons/help.png'),
+  // Category images
+  categoryApparel: require('../../assets/images/apparel.png'),
+  categoryHomeGoods: require('../../assets/images/HomeGoods.png'),
+  categoryFootwear: require('../../assets/images/frame_1171278967.png'),
+  categoryAccessories: require('../../assets/images/accessories.png'),
+  // E-Voucher logos
+  myntraLogo: require('../../assets/images/myntra_copy.png'),
+  flipkartLogo: require('../../assets/images/flipkart.png'),
+  amazonLogo: require('../../assets/images/amazon.png'),
+  nikeLogo: require('../../assets/images/nike.png'),
+  crossIcon: require('../../assets/images/icons/cross.png'),
+  tickIcon: require('../../assets/images/icons/tick.png'),
+  redCrossIcon: require('../../assets/images/icons/redCross.png'),
+  pendingIcon: require('../../assets/images/icons/pending.png'),
+  i_blackIcon: require('../../assets/images/icons/i_blackicon.png'),
+  blackcrossIcon: require('../../assets/images/icons/blackcross.png'),
+  logout: require('../../assets/images/icons/logout.png'),
+  orders: require('../../assets/images/icons/orders.png'),
+  tnc: require('../../assets/images/icons/tnc.png'),
+  faq: require('../../assets/images/icons/faq.png'),
+  arrowright: require('../../assets/images/icons/arrowright.png'),
+  userRed: require('../../assets/images/icons/userredicon.png'),
+  plusIcon: require('../../assets/images/icons/plus.png'),
+  minusIcon: require('../../assets/images/icons/minus.png'),
+  arrowBack: require('../../assets/images/icons/arrow-back.png'),
+  chat: require('../../assets/images/icons/chat.png'),
+  email: require('../../assets/images/icons/email.png'),
+  call: require('../../assets/images/icons/call.png'),
+  camera: require('../../assets/images/icons/camera.png'),
+  filtericon: require('../../assets/images/icons/filtericon.png'),
+  search: require('../../assets/images/icons/search.png'),
+  delivery: require('../../assets/images/icons/delivery.png'),
+  arrowred: require('../../assets/images/icons/arrowred.png'),
+  delete: require('../../assets/images/icons/delete.png'),
+  editIcon: require('../../assets/images/icons/editIcon.png'),
+  addWhiteIcon: require('../../assets/images/icons/addwhiteicon.png'),
+  location: require('../../assets/images/icons/location.png'),
+  downArrow: require('../../assets/images/icons/blackarrowdown.png'),
+  upArrow: require('../../assets/images/icons/blackarrowup.png'),
+  arrowgreen: require('../../assets/images/icons/arrowgreen.png'),
+  pencillogo: require('../../assets/images/icons/pencillogo.png'),
+  wavecorner: require('../../assets/images/icons/wavecorner.png'),
+  backgroundblue: require('../../assets/images/backgroundblue.png'),
+  copy: require('../../assets/images/icons/copy.png'),
+  stopwatch: require('../../assets/images/icons/stopwatch.png'),
+  eye: require('../../assets/images/icons/eye.png'),
+  profileicon: require('../../assets/images/profileicon.png'),
+  redhelpicon: require('../../assets/images/icons/redhelpicon.png'),
+  redErrorCrossIcon: require('../../assets/images/icons/redCrossicon.png'),
+  warningIcon: require('../../assets/images/icons/redWarningicon.png'),
+  circleblack: require('../../assets/images/icons/circleblack.png'),
+};
+
+export default Images;

package/src-app/constants/Labels.ts

@@ -0,0 +1,8 @@
+export const CATEGORY_LABELS: Record<string, string> = {
+    merchandise: "Merchandise",
+    physical_voucher: "Physical Voucher",
+    evoucher: "E - Voucher",
+    wallet: "Wallet",
+    kiosk_card: "Kiosk Card",
+  };
+  

package/src-app/constants/Messages.ts

@@ -0,0 +1,108 @@
+export const EMAIL_INVALID = 'Please enter a valid email address';
+export const ENTER_4_DIGIT_CODE = 'Enter 4 Digit Code';
+export const OTP_SENT = 'OTP has been sent to';
+export const OTP = 'One-Time Password';
+export const TEXT = 'text';
+export const OTP_DIGIT = 'OTP digit';
+export const OTP_LENGTH = 4;
+export const DIDNT_RECEIVE_OTP = 'Didn\'t Receive OTP ?';
+export const RESEND_OTP = 'Resend OTP';
+
+// Login screen
+export const LOGIN_WELCOME_BACK_TITLE = "Welcome Back.!";
+export const LOGIN_ENTER_MOBILE_TITLE = "Enter Mobile Number";
+export const LOGIN_SIGNIN_OR_SIGNUP_SUBTITLE =
+  "SignIn Or Signup With Your Mobile Number";
+export const LOGIN_BTN_SEND_OTP = "Send OTP";
+export const LOGIN_BTN_VERIFY = "Verify";
+export const EDIT_DELIVERY_ADDRESS = "Edit Delivery Address";
+export const ADD_NEW_DELIVERY_ADDRESS = "Add New Delivery Address";
+export const OTP_SUBTITLE = "Enter the OTP sent to your registered mobile";
+export const PROCESSING_ORDER = "Processing your order...";
+export const OTP_TITLE =  "Verify your order"
+export const SEND_OTP_LOADER= "Please wait..."
+export const OTP_VERIFY_LOADER="Verifying OTP..."
+
+// Product Details screen
+export const NO_VARIATION_SELECTED = 'No variation selected.';
+export const ERROR = 'error';
+export const SELECT_VARIANT = 'Select Varient';
+export const QUANTITY = 'Quantity';
+export const DELIVERY_WITHIN = 'Delivery within';
+export const DAYS = "days";
+export const DESCRIPTION = "Description";
+export const REDEMPTION_TERMS = "Redemption Terms";
+export const SHOPPING_HANDLING_TERMS = "Shopping & Handling Terms";
+export const PRODUCT_DESCRIPTION_NOT_AVAILABLE = "Product description not available.";
+export const REDEMPTION_TERMS_NOT_AVAILABLE = "Redemption terms not available.";
+export const SHOPPING_HANDLING_TERMS_NOT_AVAILABLE = "Shopping and handling terms not available.";
+export const VIEW_DETAILS = "View Details";
+export const ADD_TO_CART = "Add to Cart";
+export const ORDER_AMOUNT = "Order Amount";
+export const DELIVERY_CHARGES = "Delivery Charges";
+export const ERROR_TITLE = "Error";
+export const ITEM_ADDED_TO_CART_SUCCESSFULLY = "Item added to cart successfully!";
+export const SUCCESS = 'success';
+export const INSUFFICIENT_BALANCE= "Insufficient Apna Points Balance";
+export const EMPTY_CART_TITLE= "Your cart is empty";
+export const EMPTY_CART_SUBTITLE= "Looks like you haven't added anything to your cart yet.";
+export const ITEM_DELETE_TITLE="Are you sure you want to delete the item ?";
+export const ITEM_DELETE_CONFIRM="Yes";
+export const ITEM_DELETE_CANCEL="No";
+
+// REEDEM
+export const NUMBER = "number";
+
+// NEW DELIVERY ADDRESS
+export const FULL_NAME = "fullName";
+export const MOBILE_NUMBER = "mobileNumber";
+export const EMAIL_ID = "email";
+export const ADDRESS = "address";
+export const LANDMARK = "landmark";
+export const CITY = "city";
+export const STATE = "state";
+export const PINCODE = "pincode";
+export const UPDATE_AND_PROCEED = "Update and Proceed";
+export const SAVE_AND_PROCEED = "Save and Proceed";
+
+// NEW DELIVERY ADDRESS - Labels
+export const FULL_NAME_LABEL = "Full Name";
+export const MOBILE_NUMBER_LABEL = "Mobile Number";
+export const EMAIL_ID_LABEL = "Email ID";
+export const ADDRESS_LABEL = "Address";
+export const LANDMARK_LABEL = "Landmark";
+export const CITY_LABEL = "City";
+export const STATE_LABEL = "State";
+export const PINCODE_LABEL = "Pincode";
+export const BILLING_ADDRESS = "billing_address";
+
+// NEW DELIVERY ADDRESS - Other constants
+export const COUNTRY_INDIA = "India";
+export const ADDRESS_LINE_PREFIX = "Line: ";
+export const ADDRESS_LANDMARK_PREFIX = "Landmark: ";
+
+// Help screen
+export const HELP_CENTER_TITLE = "Help Center";
+export const HELP_CALL_TITLE = "Call for PROPEL";
+export const HELP_CALL_SUBTITLE = "Call us at 1860 500 3748";
+export const HELP_CHAT_TITLE = "Chat";
+export const HELP_CHAT_SUBTITLE = "Chat with us on Whatsapp";
+export const HELP_MAIL_TITLE = "Mail";
+export const HELP_MAIL_SUBTITLE = "Write a mail at team@zaggle.in";
+export const HELP_NOTE_TITLE = "Note:";
+export const HELP_NOTE_TEXT = "Call Option is available from Monday to Saturday between 10:00 AM to 07:00 PM";
+export const ORDER_DETAILS_SUPPORT_INTRO = "If you need any support, let us know";
+export const ORDER_DETAILS_SUPPORT_EMAIL = "team@zaggle.in";
+export const ORDER_DETAILS_SUPPORT_PHONE = "1860 500 3748";
+export const ORDER_DETAILS_SUPPORT_HOURS = "( 10:00 AM - 07:00 PM, Mon-Fri )";
+export const EMAIL = "Email :";
+export const PHONE = "Phone :";
+export const REMAINING_AMOUNT = "Remaining Amount";
+export const DISCOUNTED_AMOUNT = "Discounted Amount";
+export const DATE = "Date :";
+export const ORDER_NO = "Order No :";
+
+export const AMOUNT_TO_BE_PAID = "Amount to be Paid";
+export const POINTS = "Points";
+export const AMOUNT_BREAKDOWN = "Amount Breakdown"
+

package/src-app/constants/Routes.ts

@@ -0,0 +1,17 @@
+export const ROUTES = {
+  MY_ORDERS: 'MyOrders',
+  MY_E_VOUCHERS: 'MyEVouchers',
+  REDEMPTION_HISTORY: 'RedemptionHistory',
+  FAQ: "FAQ",
+  PROFILE : "Profile",
+  DASHBOARD : "Dashboard",
+  REDEEM: "Redeem",
+  TnC : "TnC",
+  DashboardTab : "DashboardTab",
+  MyCart : "MyCart",
+  ProductDetail : "ProductDetail"
+
+
+} as const;
+
+export type RouteName = typeof ROUTES[keyof typeof ROUTES]; 

package/src-app/constants/Scaling.ts

@@ -0,0 +1,5 @@
+import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
+
+export const SCALE = scale;
+export const VSCALE = verticalScale;
+export const MSCALE = moderateScale;

package/src-app/constants/Text.ts

@@ -0,0 +1,8 @@
+export const HTML_TAG_RE = /<\/?[a-z][\s\S]*?>/i;
+export const HTML_ENTITY_RE = /&(?:[a-z]+|#\d+|#x[0-9a-f]+);/i;
+
+export const isPureText = (v: unknown): v is string => {
+  if (typeof v !== 'string') return false;
+  const s = v.trim();
+  return !!s && !HTML_TAG_RE.test(s) && !HTML_ENTITY_RE.test(s);
+};

package/src-app/constants/offSets.ts

@@ -0,0 +1,18 @@
+import { Dimensions, Platform } from "react-native";
+import { VSCALE } from "./Scaling";
+
+const { height } = Dimensions.get('window');
+
+let leftOffset = 0;
+
+if (Platform.OS === 'ios') {
+  if (height === 812 && height < 956 ) {
+    leftOffset = VSCALE(10);
+  } else if (height === 956) {
+    leftOffset = VSCALE(40);
+  } else {
+    leftOffset = VSCALE(10);
+  }
+}
+
+export default leftOffset;

package/src-app/hooks/useAppDispatch.ts

@@ -0,0 +1,4 @@
+import { useDispatch } from 'react-redux';
+import type { AppDispatch } from '../redux/store';
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();

package/src-app/hooks/useAppSelector.ts

@@ -0,0 +1,4 @@
+import { useSelector } from 'react-redux';
+import type { RootState } from '../redux/store';
+
+export const useAppSelector = useSelector.withTypes<RootState>();

package/src-app/hooks/useBackHandler.ts

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { BackHandler } from 'react-native';
+import { useNavigation, useNavigationState } from '@react-navigation/native';
+
+export const useBackHandler = (customHandler?: () => boolean) => {
+  const navigation = useNavigation();
+  const navigationState = useNavigationState(state => state);
+
+  useEffect(() => {
+    const backAction = () => {
+      // If custom handler is provided and returns true, prevent default behavior
+      if (customHandler && customHandler()) {
+        return true;
+      }
+
+      // Check if we're on a tab screen (root level)
+      const currentRoute = navigationState?.routes[navigationState.index];
+      const isOnTabScreen = currentRoute?.state?.index === 0 || !currentRoute?.state;
+
+      if (isOnTabScreen) {
+        // If on Dashboard tab, exit app
+        if (currentRoute?.name === 'DashboardTab') {
+          return false; // Allow default behavior (exit app)
+        }
+        
+        // If on other tabs, navigate to Dashboard
+        navigation.navigate('DashboardTab' as never);
+        return true; // Prevent default behavior
+      }
+
+      // If in a stack, use default navigation back
+      if (navigation.canGoBack()) {
+        navigation.goBack();
+        return true;
+      }
+
+      // Default behavior (exit app)
+      return false;
+    };
+
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+
+    return () => backHandler.remove();
+  }, [navigation, navigationState, customHandler]);
+};
+
+export default useBackHandler;

package/src-app/hooks/useScreenBackHandler.ts

@@ -0,0 +1,91 @@
+import { useEffect } from 'react';
+import { BackHandler, Alert } from 'react-native';
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
+
+interface BackHandlerOptions {
+  // Show confirmation dialog before going back
+  showConfirmation?: boolean;
+  confirmationTitle?: string;
+  confirmationMessage?: string;
+  // Custom back action
+  onBackPress?: () => boolean | void;
+  // Navigate to specific screen instead of default back
+  navigateTo?: string;
+  // Exit app confirmation (for root screens)
+  showExitConfirmation?: boolean;
+}
+
+export const useScreenBackHandler = (options: BackHandlerOptions = {}) => {
+  const navigation = useNavigation();
+
+  useFocusEffect(() => {
+    const backAction = () => {
+      // Custom back press handler
+      if (options.onBackPress) {
+        const result = options.onBackPress();
+        if (result === true) {
+          return true; // Prevent default behavior
+        }
+      }
+
+      // Show confirmation dialog
+      if (options.showConfirmation) {
+        Alert.alert(
+          options.confirmationTitle || 'Confirm',
+          options.confirmationMessage || 'Are you sure you want to go back?',
+          [
+            {
+              text: 'Cancel',
+              style: 'cancel',
+            },
+            {
+              text: 'Yes',
+              onPress: () => {
+                if (options.navigateTo) {
+                  navigation.navigate(options.navigateTo as never);
+                } else if (navigation.canGoBack()) {
+                  navigation.goBack();
+                }
+              },
+            },
+          ]
+        );
+        return true; // Prevent default behavior
+      }
+
+      // Navigate to specific screen
+      if (options.navigateTo) {
+        navigation.navigate(options.navigateTo as never);
+        return true;
+      }
+
+      // Show exit confirmation for root screens
+      if (options.showExitConfirmation && !navigation.canGoBack()) {
+        Alert.alert(
+          'Exit App',
+          'Are you sure you want to exit?',
+          [
+            {
+              text: 'Cancel',
+              style: 'cancel',
+            },
+            {
+              text: 'Exit',
+              onPress: () => BackHandler.exitApp(),
+            },
+          ]
+        );
+        return true;
+      }
+
+      // Default behavior
+      return false;
+    };
+
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', backAction);
+
+    return () => backHandler.remove();
+  });
+};
+
+export default useScreenBackHandler;

package/src-app/navigation/AppNavigator.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { RootStackParamList } from '../types/navigation';
+import MainTabNavigator from './MainTabNavigator';
+import {
+  Login,
+  MyProfile,
+  Onboarding,
+  OTPVerification,
+  Verification,
+} from '../screens';
+
+const Stack = createStackNavigator<RootStackParamList>();
+
+const AppNavigator: React.FC = () => {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+        gestureEnabled: false,
+      }}
+      initialRouteName="Login"
+    >
+      <Stack.Screen name="Onboarding" component={Onboarding} />
+      <Stack.Screen name="Login" component={Login} />
+      <Stack.Screen name="OTPVerification" component={OTPVerification} />
+      <Stack.Screen name="VerificationComplete" component={Verification} />
+      <Stack.Screen name="MainTabs"   component={MainTabNavigator} options={{ gestureEnabled: false }} />
+      <Stack.Screen name="MyProfile" component={MyProfile} />
+    </Stack.Navigator>
+  );
+};
+
+export default AppNavigator;