@propel-nsl/propel-react-native-sdk 1.2.0 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/screens/Dashboard/index.tsx +7 -5
  3. package/src/screens/ProductDetails/index.tsx +11 -8
  4. package/src/screens/ProductDetails/styles.ts +24 -20
  5. package/src/screens/Reedem/index.tsx +20 -14
  6. package/src/screens/Reedem/styles.ts +24 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@propel-nsl/propel-react-native-sdk",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "Propel Mobile SDK - React Native Core",
5
5
  "files": [
6
6
  "src/",
package/src/screens/Dashboard/index.tsx CHANGED
@@ -283,6 +283,8 @@ const Dashboard: React.FC<Props> = ({ navigation }) => {
283
283
  navigateToDashboardScreen("MyCart", { from: "Dashboard" });
284
284
  };
285
285
 
286
+ const cartItemCount = viewMyCartData?.items?.length || 0;
287
+
286
288
  // Categories data with actual images
287
289
  const categoriesData = [
288
290
  { id: "1", name: "Apparel", image: Images.categoryApparel },
@@ -358,11 +360,11 @@ const Dashboard: React.FC<Props> = ({ navigation }) => {
358
360
  style={styles.cartButton}
359
361
  onPress={() => navigateToCart()}
360
362
  >
361
- <View style={styles.cartCountContainer}>
362
- <Text style={styles.cartCountText}>
363
- {viewMyCartData?.items?.length || 0}
364
- </Text>
365
- </View>
363
+ {cartItemCount > 0 && (
364
+ <View style={styles.cartCountContainer}>
365
+ <Text style={styles.cartCountText}>{cartItemCount}</Text>
366
+ </View>
367
+ )}
366
368
  <CustomImage source={Images.cart} imgStyle={styles.headerIcon} />
367
369
  </TouchableOpacity>
368
370
  </View>
package/src/screens/ProductDetails/index.tsx CHANGED
@@ -481,26 +481,29 @@ const ProductDetail: React.FC = () => {
481
481
  ).trim();
482
482
 
483
483
  const shrinkLabel = isPureText(variantLabel);
484
+ const cartItemCount = viewMyCartData?.items?.length || 0;
484
485
 
485
486
  return (
486
487
  <SafeAreaView style={styles.container}>
487
- <View style={styles.header}>
488
- <View style={styles.headerContent}>
488
+ <View style={styles.headerSection}>
489
+ <View style={styles.userInfo}>
489
490
  <TouchableOpacity
490
491
  onPress={() => handleGoBack()}
491
492
  >
492
493
  <BackIcon />
493
494
  </TouchableOpacity>
495
+ </View>
496
+ <View style={styles.headerIcons}>
494
497
  <TouchableOpacity
495
498
  activeOpacity={0.7}
496
- style={styles.cartBadge}
499
+ style={styles.cartButton}
497
500
  onPress={() => navigateToCart()}
498
501
  >
499
- <View style={styles.cartCountContainer}>
500
- <Text style={styles.cartCountText}>
501
- {viewMyCartData?.items?.length}
502
- </Text>
503
- </View>
502
+ {cartItemCount > 0 && (
503
+ <View style={styles.cartCountContainer}>
504
+ <Text style={styles.cartCountText}>{cartItemCount}</Text>
505
+ </View>
506
+ )}
504
507
  <CustomImage source={Images.cart} imgStyle={styles.cartIcon} />
505
508
  </TouchableOpacity>
506
509
  </View>
package/src/screens/ProductDetails/styles.ts CHANGED
@@ -9,11 +9,12 @@ const styles = StyleSheet.create({
9
9
  flex: 1,
10
10
  backgroundColor: colors.white,
11
11
  },
12
- header: {
13
- backgroundColor: colors.white,
14
- paddingHorizontal: 20,
15
- paddingTop: 20,
16
- paddingBottom: 20,
12
+ headerSection: {
13
+ flexDirection: 'row',
14
+ justifyContent: 'space-between',
15
+ alignItems: 'center',
16
+ paddingHorizontal: SCALE(20),
17
+ paddingBottom: VSCALE(16),
17
18
  },
18
19
  statusBar: {
19
20
  flexDirection: 'row',
@@ -41,19 +42,20 @@ const styles = StyleSheet.create({
41
42
  justifyContent: 'space-between',
42
43
  alignItems: 'center',
43
44
  },
44
- cartButton: {
45
- width: 42,
46
- height: 42,
47
- borderRadius: 100,
48
- backgroundColor: colors.white,
49
- justifyContent: 'center',
45
+ userInfo: {
46
+ flexDirection: 'row',
47
+ alignItems: 'center',
48
+ gap: SCALE(12),
49
+ },
50
+ headerIcons: {
51
+ flexDirection: 'row',
50
52
  alignItems: 'center',
51
- position: 'relative',
53
+ },
54
+ cartButton: {
55
+ padding: SCALE(8),
52
56
  },
53
57
  cartBadge: {
54
- position: 'absolute',
55
- top: 0,
56
- right: 9,
58
+ padding: SCALE(8),
57
59
  width: 11,
58
60
  height: 12,
59
61
  justifyContent: 'center',
@@ -282,8 +284,8 @@ const styles = StyleSheet.create({
282
284
  color: colors.white,
283
285
  },
284
286
  cartIcon: {
285
- width: 24,
286
- height: 26,
287
+ width: SCALE(20),
288
+ height: SCALE(20),
287
289
  resizeMode: 'contain',
288
290
  },
289
291
  variantTitle: {
@@ -312,12 +314,14 @@ const styles = StyleSheet.create({
312
314
  },
313
315
  cartCountContainer: {
314
316
  position: 'absolute',
315
- right: SCALE(-4),
317
+ top: VSCALE(2),
318
+ right: SCALE(8),
319
+ backgroundColor: colors.error,
320
+ borderRadius: SCALE(10),
316
321
  width: SCALE(16),
317
- height: VSCALE(14),
322
+ height: SCALE(16),
318
323
  justifyContent: 'center',
319
324
  alignItems: 'center',
320
- top: VSCALE(-8),
321
325
  },
322
326
  cartCountText: {
323
327
  fontFamily: FontFamily.LEXEND_REGULAR,
package/src/screens/Reedem/index.tsx CHANGED
@@ -259,22 +259,28 @@ const Redeem: React.FC = () => {
259
259
  navigation.navigate(ROUTES.MyCart as any, { from: ROUTES.REDEEM });
260
260
  };
261
261
 
262
+ const cartItemCount = viewMyCartData?.items?.length || 0;
263
+
262
264
  return (
263
265
  <SafeAreaView style={styles.container}>
264
- <View style={styles.headerContent}>
265
- <Text style={styles.headerTitle}>{ROUTES.REDEEM}</Text>
266
- <TouchableOpacity
267
- activeOpacity={0.7}
268
- style={styles.cartBadge}
269
- onPress={navigateToCart}
270
- >
271
- <View style={styles.cartCountContainer}>
272
- <Text style={styles.cartCountText}>
273
- {viewMyCartData?.items?.length}
274
- </Text>
275
- </View>
276
- <CustomImage source={Images.cart} imgStyle={styles.cartIcon} />
277
- </TouchableOpacity>
266
+ <View style={styles.headerSection}>
267
+ <View style={styles.userInfo}>
268
+ <Text style={styles.headerTitle}>{ROUTES.REDEEM}</Text>
269
+ </View>
270
+ <View style={styles.headerIcons}>
271
+ <TouchableOpacity
272
+ activeOpacity={0.7}
273
+ style={styles.cartButton}
274
+ onPress={navigateToCart}
275
+ >
276
+ {cartItemCount > 0 && (
277
+ <View style={styles.cartCountContainer}>
278
+ <Text style={styles.cartCountText}>{cartItemCount}</Text>
279
+ </View>
280
+ )}
281
+ <CustomImage source={Images.cart} imgStyle={styles.cartIcon} />
282
+ </TouchableOpacity>
283
+ </View>
278
284
  </View>
279
285
  <View style={styles.searchSection}>
280
286
  <View style={styles.searchBar}>
package/src/screens/Reedem/styles.ts CHANGED
@@ -8,11 +8,12 @@ const styles = StyleSheet.create({
8
8
  flex: 1,
9
9
  backgroundColor: colors.background,
10
10
  },
11
- header: {
12
- backgroundColor: colors.background,
11
+ headerSection: {
12
+ flexDirection: 'row',
13
+ justifyContent: 'space-between',
14
+ alignItems: 'center',
13
15
  paddingHorizontal: SCALE(20),
14
- paddingTop: VSCALE(20),
15
- paddingBottom: VSCALE(28),
16
+ paddingBottom: VSCALE(16),
16
17
  },
17
18
  statusBar: {
18
19
  flexDirection: 'row',
@@ -35,8 +36,14 @@ const styles = StyleSheet.create({
35
36
  width: SCALE(77),
36
37
  height: VSCALE(13),
37
38
  },
38
- headerContent: {
39
- marginTop: VSCALE(30),
39
+ userInfo: {
40
+ flexDirection: 'row',
41
+ alignItems: 'center',
42
+ gap: SCALE(12),
43
+ },
44
+ headerIcons: {
45
+ flexDirection: 'row',
46
+ alignItems: 'center',
40
47
  },
41
48
  headerTitle: {
42
49
  fontFamily: FontFamily.LEXEND_REGULAR,
@@ -46,14 +53,11 @@ const styles = StyleSheet.create({
46
53
  textTransform: 'capitalize',
47
54
  textAlign: 'center',
48
55
  },
56
+ headerContent: {
57
+ marginTop: VSCALE(30),
58
+ },
49
59
  cartButton: {
50
- width: SCALE(42),
51
- height: SCALE(42),
52
- borderRadius: SCALE(100),
53
- backgroundColor: 'rgba(255, 255, 255, 0.45)',
54
- justifyContent: 'center',
55
- alignItems: 'center',
56
- position: 'relative',
60
+ padding: SCALE(8),
57
61
  },
58
62
  cartBadge: {
59
63
  position: 'absolute',
@@ -235,8 +239,8 @@ const styles = StyleSheet.create({
235
239
  alignItems: 'center',
236
240
  },
237
241
  cartIcon: {
238
- width: SCALE(24),
239
- height: VSCALE(26),
242
+ width: SCALE(20),
243
+ height: SCALE(20),
240
244
  resizeMode: 'contain',
241
245
  },
242
246
  emptyText: {
@@ -247,12 +251,14 @@ const styles = StyleSheet.create({
247
251
  },
248
252
  cartCountContainer: {
249
253
  position: 'absolute',
250
- right: SCALE(0),
254
+ top: VSCALE(2),
255
+ right: SCALE(8),
256
+ backgroundColor: colors.error,
257
+ borderRadius: SCALE(10),
251
258
  width: SCALE(16),
252
- height: VSCALE(14),
259
+ height: SCALE(16),
253
260
  justifyContent: 'center',
254
261
  alignItems: 'center',
255
- top: VSCALE(-5),
256
262
  },
257
263
  cartCountText: {
258
264
  fontFamily: FontFamily.LEXEND_REGULAR,