@whatmore-repo/whatmore-reactnative-sdk 1.0.34 → 1.0.36

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/components/EventShoppingOverlay.js +17 -20
  3. package/src/components/carousel-view/EventTileWithProduct.js +8 -4
  4. package/src/components/cta-buttons/ShopNowButton.jsx +1 -2
  5. package/src/components/product-tiles/ProductPriceBadge.js +2 -0
  6. package/src/components/product-tiles/ProductTileV1.js +11 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whatmore-repo/whatmore-reactnative-sdk",
3
- "version": "1.0.34",
3
+ "version": "1.0.36",
4
4
  "description": "",
5
5
  "private": false,
6
6
  "main": "index.js",
package/src/components/EventShoppingOverlay.js CHANGED
@@ -4,6 +4,7 @@ import { getGlobalState, setGlobalState, useGlobalState } from '../globals/useAp
4
4
  import AppMuteUnmuteIcon from './commons/AppMuteUnmuteIcon.js';
5
5
  import ProductTileV1 from './product-tiles/ProductTileV1.js';
6
6
  import CrossIcon from '../icons/icon-components/CloseIcon.jsx';
7
+ import Swiper from 'react-native-swiper'
7
8
 
8
9
  export default function EventShoppingOverlay(props) {
9
10
  var event = props.event;
@@ -33,7 +34,6 @@ export default function EventShoppingOverlay(props) {
33
34
  <View
34
35
  style={{
35
36
  width: '100%',
36
- height: 'auto',
37
37
  flex: 1,
38
38
  flexDirection: 'column',
39
39
  justifyContent: 'space-between', alignItems: 'center', backgroundColor: 'transparent'
@@ -42,35 +42,32 @@ export default function EventShoppingOverlay(props) {
42
42
  <TouchableOpacity
43
43
  style={{
44
44
  width: '100%',
45
- height: 'auto',
46
- flex: 1,
47
- flexDirection: 'row',
48
- justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent'
45
+ flex: 1
49
46
  }}
50
47
  onPress={() => {
51
48
  setGlobalState("isAppMuted", getGlobalState("isAppMuted") ? false : true);
52
49
  }}
53
50
  >
54
51
  </TouchableOpacity>
55
- <View
56
- // add style here to make it horizontally scrollable
52
+ <View
57
53
  style={{
58
- width: '100%', height: 'auto',
59
- flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center',
60
- paddingLeft: 10, paddingRight: 10, paddingBottom: 10
54
+ height: 180,
55
+ paddingLeft: 10,
56
+ paddingRight: 10,
57
+ paddingBottom: 10
61
58
  }}
62
- >
63
- {
64
- event.products.map((product, index) => {
65
- return (
66
- index == 0 && <ProductTileV1 setIsModalOpen={props.setIsModalOpen} key={index} onAction={props.onAction} event={event} product={product} />
67
- );
68
- })
69
- }
59
+ >
60
+ <Swiper
61
+ scrollViewProps={{
62
+ scrollEventThrottle: 1
63
+ }}
64
+ autoplay={true} autoplayTimeout={4} index={0} horizontal={true} loop={false} showsPagination={false} >
65
+ {event.products.map((product, index) => (
66
+ <ProductTileV1 setIsModalOpen={props.setIsModalOpen} key={index} onAction={props.onAction} event={event} product={product} />
67
+ ))}
68
+ </Swiper>
70
69
  </View>
71
70
  </View>
72
-
73
-
74
71
  </View>
75
72
  );
76
73
 
package/src/components/carousel-view/EventTileWithProduct.js CHANGED
@@ -12,11 +12,14 @@ export default function EventTileWithProduct(props) {
12
12
  const [renderedEvents, setRenderedEvents] = useState(5)
13
13
  const { width } = Dimensions.get('window');
14
14
  const customStyles= getGlobalState('customStyles');
15
+ const whatmorePrimaryFont= getGlobalState('whatmorePrimaryFont');
15
16
  const ITEM_WIDTH = width * 0.33;
16
17
  const CARD_HEIGHT = 40 * (customStyles?.videoTileSize ?? 5.5);
17
18
  const appMarginBottom = customStyles?.widgetMarginBottom ?? 50
18
19
  const safeAreaViewHeight = customStyles?.showProductDetails ? 50 + (appMarginBottom) : (appMarginBottom);
19
20
  const brandThemeColor = customStyles?.brandThemeColor;
21
+ const BASE_FONT_SIZE = customStyles?.fontSize ?? 20
22
+ const fontFamily = customStyles?.fontFamily ?? whatmorePrimaryFont
20
23
  // const brandThemeFont = customStyles?.brandThemeFont;
21
24
 
22
25
  const styles = StyleSheet.create({
@@ -111,21 +114,21 @@ export default function EventTileWithProduct(props) {
111
114
  {(customStyles?.showProductDetails) &&
112
115
  <View style={{ display: 'flex', paddingTop: 10, gap: 4 }}>
113
116
  <Text
114
- style={{ fontSize: 9, paddingRight: 4 }}
117
+ style={{ fontSize: BASE_FONT_SIZE*0.5, paddingRight: 4, fontFamily: fontFamily }}
115
118
  numberOfLines={1}
116
119
  ellipsizeMode="tail">
117
120
  {item?.products?.[0]?.title}
118
121
  </Text>
119
122
  <View style={{ display: 'flex', flexDirection: 'row', gap: 6 }}>
120
123
  <Text
121
- style={{ fontSize: 9, fontWeight: 'bold' }}
124
+ style={{ fontSize: BASE_FONT_SIZE*0.5, fontFamily: fontFamily, fontWeight: 'bold' }}
122
125
  numberOfLines={1}
123
126
  ellipsizeMode="tail">
124
127
  {getPriceStringWithCurrency(price, " ", item.products?.[0]?.currency)}
125
128
  </Text>
126
129
  {!isNaN(compare_price) && compare_price > price &&
127
130
  <Text
128
- style={{ fontSize: 9, textDecorationLine: 'line-through', color: '#808191' }}
131
+ style={{ fontSize: BASE_FONT_SIZE*0.5, fontFamily: fontFamily, textDecorationLine: 'line-through', color: '#808191' }}
129
132
  numberOfLines={1}
130
133
  ellipsizeMode="tail">
131
134
  {getPriceStringWithCurrency(compare_price, " ", item.products?.[0]?.currency)}
@@ -143,7 +146,8 @@ export default function EventTileWithProduct(props) {
143
146
  paddingHorizontal: 4
144
147
  }}>
145
148
  <Text style={{
146
- fontSize: 9,
149
+ fontSize: BASE_FONT_SIZE*0.5,
150
+ fontFamily: fontFamily,
147
151
  color: 'white',
148
152
  width: "fit-content",
149
153
 
package/src/components/cta-buttons/ShopNowButton.jsx CHANGED
@@ -3,7 +3,6 @@ import { Text, TouchableOpacity, View } from "react-native";
3
3
 
4
4
  function ShopNow(props){
5
5
  const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
6
- const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
7
6
  const customStyles= getGlobalState('customStyles');
8
7
  // const onClick = props.onClick;
9
8
  const height = props.height;
@@ -36,7 +35,7 @@ function ShopNow(props){
36
35
  style={{
37
36
  fontSize: props.fontSize,
38
37
  fontWeight: 'bold',
39
- fontFamily: whatmorePrimaryFont,
38
+ fontFamily: props.fontFamily,
40
39
  color: 'white'
41
40
  }}
42
41
  >
package/src/components/product-tiles/ProductPriceBadge.js CHANGED
@@ -25,6 +25,7 @@ export default function ProductPriceBadge(props) {
25
25
  style={{
26
26
  fontWeight: 'bold',
27
27
  fontSize: fontSize,
28
+ fontFamily: props.fontFamily,
28
29
  color: color
29
30
  }}
30
31
  >
@@ -39,6 +40,7 @@ export default function ProductPriceBadge(props) {
39
40
  numberOfLines={1}
40
41
  style={{
41
42
  fontWeight: 'normal',
43
+ fontFamily: props.fontFamily,
42
44
  textDecorationLine: 'line-through',
43
45
  fontSize: fontSize
44
46
  }}
package/src/components/product-tiles/ProductTileV1.js CHANGED
@@ -18,8 +18,10 @@ export default function ProductTileV1(props) {
18
18
  const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
19
19
  const brandDomainContext = getGlobalState('brandDomainContext');
20
20
  const whatmoreShopId = getGlobalState('whatmoreShopId');
21
+ const customStyles= getGlobalState('customStyles');
21
22
  const PRODUCT_TILE_TOTAL_HEIGHT = Dimensions.get('window').height * 0.2;
22
- const BASE_FONT_SIZE = 20;
23
+ const BASE_FONT_SIZE = customStyles?.fontSize ?? 20;
24
+ const fontFamily = customStyles?.fontFamily ?? whatmorePrimaryFont
23
25
 
24
26
  useEffect(() => {
25
27
  if(tileTapAnimate){
@@ -57,13 +59,13 @@ export default function ProductTileV1(props) {
57
59
  duration={100} iterationCount={1}
58
60
  easing="ease-out"
59
61
  style={{
60
- width: '90%', // Adjust width as needed, e.g., '80%'
62
+ width: '85%', // Adjust width as needed, e.g., '80%'
61
63
  alignSelf: 'center',
62
64
  height: 'auto',
63
65
  flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center',
64
66
  borderRadius: 5, overflow: 'hidden',
65
67
  shadowColor: 'black', shadowOpacity: 1, shadowOffset: {width: 0, height: 0},
66
- shadowRadius: 20, elevation: 10
68
+ shadowRadius: 20, elevation: 2
67
69
  }}
68
70
  >
69
71
  <View
@@ -98,8 +100,8 @@ export default function ProductTileV1(props) {
98
100
  style={{
99
101
 
100
102
  fontWeight: 'normal',
101
- fontFamily: whatmorePrimaryFont,
102
- fontSize: BASE_FONT_SIZE * 0.9,
103
+ fontFamily: fontFamily,
104
+ fontSize: BASE_FONT_SIZE * 0.8,
103
105
  color: 'black',
104
106
  overflow: 'hidden',
105
107
 
@@ -114,7 +116,7 @@ export default function ProductTileV1(props) {
114
116
  }}
115
117
  ></View>
116
118
 
117
- <ProductPriceBadge product={product} event={event} fontSize={BASE_FONT_SIZE * 0.9} color={'black'} />
119
+ <ProductPriceBadge fontFamily={fontFamily} product={product} event={event} fontSize={BASE_FONT_SIZE * 0.75} color={'black'} />
118
120
  </View>
119
121
 
120
122
 
@@ -131,8 +133,9 @@ export default function ProductTileV1(props) {
131
133
 
132
134
  <View style={{ flexDirection: 'row', width: '100%', justifyContent: 'center', alignItems: 'center'}}>
133
135
  <ShopNow
134
- height={PRODUCT_TILE_TOTAL_HEIGHT * 0.3}
135
- fontSize={BASE_FONT_SIZE*1.1}
136
+ height={PRODUCT_TILE_TOTAL_HEIGHT * 0.28}
137
+ fontSize={BASE_FONT_SIZE}
138
+ fontFamily={fontFamily}
136
139
  />
137
140
  </View>
138
141
  </View>