@propel-nsl/propel-react-native-sdk 1.1.7 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propel-nsl/propel-react-native-sdk",
-  "version": "1.1.7",
+  "version": "1.2.1",
   "description": "Propel Mobile SDK - React Native Core",
   "files": [
     "src/",

package/src/screens/OrdersDetails/index.tsx

@@ -85,6 +85,10 @@ const OrderDetails: React.FC<Props> = ({ navigation, route }) => {
         return (
           <CustomImage source={Images?.pendingIcon} imgStyle={[styles.icon]} />
         );
+      case 'cancelled':
+        return (
+          <CustomImage source={Images?.redCrossIcon} imgStyle={[styles.icon]} />
+        );
       default:
         return null;
     }
@@ -106,6 +110,8 @@ const OrderDetails: React.FC<Props> = ({ navigation, route }) => {
       case 'complete':
       case 'Complete':
         return colors.green;
+      case 'cancelled':
+        return colors.red;
       default:
         return colors.orderDetailsText;
     }

package/src/screens/OtpVerification/index.tsx

@@ -128,7 +128,11 @@ const wasPhoneAlreadyVerified = useAppSelector(
     getDeviceId();
   }, []);
 
+  const isSubmitting = useRef(false);
+
   const handleVerify = async () => {
+    if (isSubmitting.current || verifyOtpLoading) return;
+    isSubmitting.current = true;
     dispatch(
       verifyMobileOtpRequest({
         client_key: "mobile_app",
@@ -143,6 +147,8 @@ const wasPhoneAlreadyVerified = useAppSelector(
         is_hppl_login: true,
       })
     );
+    // Reset guard after a short delay to allow retry on error
+    setTimeout(() => { isSubmitting.current = false; }, 1500);
   };
 
   const handleResendOTP = () => {
@@ -257,6 +263,7 @@ const wasPhoneAlreadyVerified = useAppSelector(
             title="Verify"
             onPress={handleVerify}
             disabled={otpInput.length < 4}
+            loading={verifyOtpLoading}
             customButtonContainerStyle={styles.buttonContainer}
           />
 

package/src/screens/PaymentMethod/index.tsx

@@ -84,6 +84,14 @@ const PaymentMethod: React.FC<{
     }
   }, [cartId, dispatch]);
 
+  // Reset Apply button state when screen gains focus
+  useFocusEffect(
+    useCallback(() => {
+      setShowPointsApply(false);
+      return () => {};
+    }, [])
+  );
+
 
   return (
     <View style={styles.container}>

package/src/screens/ProductDetails/index.tsx

@@ -484,21 +484,23 @@ const ProductDetail: React.FC = () => {
 
   return (
     <SafeAreaView style={styles.container}>
-      <View style={styles.header}>
-        <View style={styles.headerContent}>
+      <View style={styles.headerSection}>
+        <View style={styles.userInfo}>
           <TouchableOpacity
             onPress={() => handleGoBack()}
           >
             <BackIcon />
           </TouchableOpacity>
+        </View>
+        <View style={styles.headerIcons}>
           <TouchableOpacity
             activeOpacity={0.7}
-            style={styles.cartBadge}
+            style={styles.cartButton}
             onPress={() => navigateToCart()}
           >
             <View style={styles.cartCountContainer}>
               <Text style={styles.cartCountText}>
-                {viewMyCartData?.items?.length}
+                {viewMyCartData?.items?.length || 0}
               </Text>
             </View>
             <CustomImage source={Images.cart} imgStyle={styles.cartIcon} />

package/src/screens/ProductDetails/styles.ts

@@ -9,11 +9,12 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: colors.white,
   },
-  header: {
-    backgroundColor: colors.white,
-    paddingHorizontal: 20,
-    paddingTop: 20,
-    paddingBottom: 20,
+  headerSection: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: SCALE(20),
+    paddingBottom: VSCALE(16),
   },
   statusBar: {
     flexDirection: 'row',
@@ -41,23 +42,25 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  cartButton: {
-    width: 42,
-    height: 42,
-    borderRadius: 100,
-    backgroundColor: colors.white,
-    justifyContent: 'center',
+  userInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SCALE(12),
+  },
+  headerIcons: {
+    flexDirection: 'row',
     alignItems: 'center',
-    position: 'relative',
+  },
+  cartButton: {
+    padding: SCALE(8),
   },
   cartBadge: {
-    position: 'absolute',
-    top: 0,
-    right: 9,
+    padding: SCALE(8),
     width: 11,
     height: 12,
     justifyContent: 'center',
     alignItems: 'center',
+    overflow: 'visible',
   },
   cartBadgeText: {
     fontFamily: FontFamily.LEXEND_REGULAR,
@@ -281,8 +284,8 @@ const styles = StyleSheet.create({
     color: colors.white,
   },
   cartIcon: {
-    width: 24,
-    height: 26,
+    width: SCALE(20),
+    height: SCALE(20),
     resizeMode: 'contain',
   },
   variantTitle: {
@@ -311,12 +314,14 @@ const styles = StyleSheet.create({
   },
   cartCountContainer: {
     position: 'absolute',
-    right: SCALE(-4),
+    top: VSCALE(2),
+    right: SCALE(8),
+    backgroundColor: colors.error,
+    borderRadius: SCALE(10),
     width: SCALE(16),
-    height: VSCALE(14),
+    height: SCALE(16),
     justifyContent: 'center',
     alignItems: 'center',
-    top: VSCALE(-8),
   },
   cartCountText: {
     fontFamily: FontFamily.LEXEND_REGULAR,

package/src/screens/Reedem/index.tsx

@@ -261,20 +261,24 @@ const Redeem: React.FC = () => {
 
   return (
     <SafeAreaView style={styles.container}>
-      <View style={styles.headerContent}>
-        <Text style={styles.headerTitle}>{ROUTES.REDEEM}</Text>
-        <TouchableOpacity
-          activeOpacity={0.7}
-          style={styles.cartBadge}
-          onPress={navigateToCart}
-        >
-          <View style={styles.cartCountContainer}>
-            <Text style={styles.cartCountText}>
-              {viewMyCartData?.items?.length}
-            </Text>
-          </View>
-          <CustomImage source={Images.cart} imgStyle={styles.cartIcon} />
-        </TouchableOpacity>
+      <View style={styles.headerSection}>
+        <View style={styles.userInfo}>
+          <Text style={styles.headerTitle}>{ROUTES.REDEEM}</Text>
+        </View>
+        <View style={styles.headerIcons}>
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={styles.cartButton}
+            onPress={navigateToCart}
+          >
+            <View style={styles.cartCountContainer}>
+              <Text style={styles.cartCountText}>
+                {viewMyCartData?.items?.length || 0}
+              </Text>
+            </View>
+            <CustomImage source={Images.cart} imgStyle={styles.cartIcon} />
+          </TouchableOpacity>
+        </View>
       </View>
       <View style={styles.searchSection}>
         <View style={styles.searchBar}>

package/src/screens/Reedem/styles.ts

@@ -8,11 +8,12 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: colors.background,
   },
-  header: {
-    backgroundColor: colors.background,
+  headerSection: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     paddingHorizontal: SCALE(20),
-    paddingTop: VSCALE(20),
-    paddingBottom: VSCALE(28),
+    paddingBottom: VSCALE(16),
   },
   statusBar: {
     flexDirection: 'row',
@@ -35,8 +36,14 @@ const styles = StyleSheet.create({
     width: SCALE(77),
     height: VSCALE(13),
   },
-  headerContent: {
-    marginTop: VSCALE(30),
+  userInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SCALE(12),
+  },
+  headerIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
   },
   headerTitle: {
     fontFamily: FontFamily.LEXEND_REGULAR,
@@ -46,14 +53,11 @@ const styles = StyleSheet.create({
     textTransform: 'capitalize',
     textAlign: 'center',
   },
+  headerContent: {
+    marginTop: VSCALE(30),
+  },
   cartButton: {
-    width: SCALE(42),
-    height: SCALE(42),
-    borderRadius: SCALE(100),
-    backgroundColor: 'rgba(255, 255, 255, 0.45)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    position: 'relative',
+    padding: SCALE(8),
   },
   cartBadge: {
     position: 'absolute',
@@ -63,6 +67,7 @@ const styles = StyleSheet.create({
     height: VSCALE(20),
     justifyContent: 'center',
     alignItems: 'center',
+    overflow: 'visible',
   },
   cartBadgeText: {
     fontFamily: FontFamily.LEXEND_REGULAR,
@@ -234,8 +239,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   cartIcon: {
-    width: SCALE(24),
-    height: VSCALE(26),
+    width: SCALE(20),
+    height: SCALE(20),
     resizeMode: 'contain',
   },
   emptyText: {
@@ -246,12 +251,14 @@ const styles = StyleSheet.create({
   },
   cartCountContainer: {
     position: 'absolute',
-    right: SCALE(0),
+    top: VSCALE(2),
+    right: SCALE(8),
+    backgroundColor: colors.error,
+    borderRadius: SCALE(10),
     width: SCALE(16),
-    height: VSCALE(14),
+    height: SCALE(16),
     justifyContent: 'center',
     alignItems: 'center',
-    top: VSCALE(-5),
   },
   cartCountText: {
     fontFamily: FontFamily.LEXEND_REGULAR,

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

@@ -45,7 +45,7 @@ const CustomButton: React.FC<CustomButtonProps> = ({
           buttonStyle,
         ]}
         onPress={onPress}
-        disabled={disabled}
+        disabled={disabled || loading}
       >
         <View style={styles.row}>
           {loading ? (

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

@@ -70,7 +70,7 @@ const getStatusIcon = (status: string) => {
       );
     case 'cancelled':
       return (
-        <CustomImage source={Images?.crossIcon} imgStyle={[styles.icon]} />
+        <CustomImage source={Images?.redCrossIcon} imgStyle={[styles.icon]} />
       );
     default:
       return null;

package/src-app/components/OTPModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import {
   View,
   Text,
@@ -79,6 +79,7 @@ const OTPModal: React.FC<OTPModalProps> = ({
     if (visible) {
       setCountdown(60);
       setNewOtp('');
+      isSubmitting.current = false;
     }
   }, [visible]);
 
@@ -90,8 +91,14 @@ const OTPModal: React.FC<OTPModalProps> = ({
     return () => clearTimeout(timer);
   }, [visible, countdown]);
 
+  const isSubmitting = useRef(false);
+
   const handleVerify = () => {
+    if (isSubmitting.current || isVerifying) return;
+    isSubmitting.current = true;
     onVerify(newOtp);
+    // Reset guard after a short delay to allow retry on error
+    setTimeout(() => { isSubmitting.current = false; }, 1500);
   };
 
   const handleResendOTP = () => {