@whatmore-repo/whatmore-reactnative-sdk 1.0.10 → 1.0.12

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 (36) hide show
  1. package/commands.txt +45 -45
  2. package/index.js +31 -31
  3. package/package.json +29 -29
  4. package/pre-integration-steps.txt +2 -2
  5. package/src/api/cart-commands/CartCommands.js +26 -26
  6. package/src/api/navigation-commands/NavigationCommands.js +16 -16
  7. package/src/api/partners/PartnerUtils.js +10 -10
  8. package/src/api/partners/appbrew/AppbrewCommands.js +26 -26
  9. package/src/api/product-details-commands/ProductDetailsCommands.js +389 -389
  10. package/src/api/shopify-commands/ShopifyCommands.js +28 -28
  11. package/src/api/whatmore-backend/WhatmoreMetricCommands.js +159 -159
  12. package/src/components/EventClickComponent.js +30 -30
  13. package/src/components/EventShoppingOverlay.js +74 -74
  14. package/src/components/EventShoppingView.js +31 -31
  15. package/src/components/EventsVerticalSwipeView.js +59 -59
  16. package/src/components/EventsVerticalSwipeViewNoModal.js +51 -51
  17. package/src/components/WhatmoreRootComponent.js +88 -88
  18. package/src/components/commons/AppMuteUnmuteIcon.js +35 -35
  19. package/src/components/cta-buttons/AddToCartButton.jsx +345 -345
  20. package/src/components/product-tiles/ProductPriceBadge.js +51 -51
  21. package/src/components/product-tiles/ProductTileV1.js +204 -204
  22. package/src/components/product-tiles/SelectVariantComponent.js +116 -116
  23. package/src/components/video-player/AppVideoPlayer.js +25 -25
  24. package/src/constants/AppGlobalVars.js +12 -12
  25. package/src/globals/useAppState_APP.js +17 -17
  26. package/src/hooks/useAddToCartStates.js +194 -194
  27. package/src/icons/icon-components/CartIcon.jsx +26 -26
  28. package/src/icons/icon-components/LoadingIcon.jsx +17 -17
  29. package/src/icons/icon-components/MuteIcon.jsx +22 -22
  30. package/src/icons/icon-components/PlusIcon.jsx +26 -26
  31. package/src/icons/icon-components/UnmuteIcon.jsx +22 -22
  32. package/src/icons/svg-utils.txt +6 -6
  33. package/src/utils/ColorUtils.js +39 -39
  34. package/src/utils/EventSanityUtils.js +21 -21
  35. package/src/utils/PriceUtils.js +27 -27
  36. package/src/utils/ProductUtils.js +5 -5
@@ -1,60 +1,60 @@
1
- import * as React from 'react';
2
- import { Dimensions, Modal, View } from "react-native";
3
- import AppVideoPlayer from './video-player/AppVideoPlayer.js'
4
- import Swiper from 'react-native-swiper'
5
- import { InView } from 'react-native-intersection-observer'
6
- import EventShoppingView from './EventShoppingView.js';
7
- import { setGlobalState } from '../globals/useAppState_APP.js';
8
-
9
- export default function EventsVerticalSwipeView(props) {
10
- const [modalVisible, setModalVisible] = React.useState(true);
11
- var events = props.events;
12
-
13
- return (
14
- <Modal
15
- style={{
16
- flex: 1,
17
- height: '100%',
18
- width: '100%'
19
- }}
20
- animationType="slide"
21
- transparent={true}
22
- visible={modalVisible}
23
- onRequestClose={() => {
24
- setModalVisible(!modalVisible);
25
- }}
26
- >
27
- <Swiper
28
- style={{}}
29
- horizontal={false}
30
- loop={true}
31
- showsPagination={false}
32
- loadMinimal={true}
33
- loadMinimalSize={1}
34
- index={props.initialEventIndex}
35
- onIndexChanged={(index) => {
36
- setGlobalState('verticalSwiperViewActiveIndex', index);
37
- }}
38
-
39
- >
40
- {
41
- events.map((event, eventIndex) => {
42
- return(
43
- <View
44
- key={event.event_id}
45
- style={{
46
- flex: 1,
47
- justifyContent: 'center',
48
- alignItems: 'center',
49
- backgroundColor: 'transparent'
50
- }}
51
- >
52
- <EventShoppingView event={event} eventIndex={eventIndex} />
53
- </View>
54
- )
55
- })
56
- }
57
- </Swiper>
58
- </Modal>
59
- );
1
+ import * as React from 'react';
2
+ import { Dimensions, Modal, View } from "react-native";
3
+ import AppVideoPlayer from './video-player/AppVideoPlayer.js'
4
+ import Swiper from 'react-native-swiper'
5
+ import { InView } from 'react-native-intersection-observer'
6
+ import EventShoppingView from './EventShoppingView.js';
7
+ import { setGlobalState } from '../globals/useAppState_APP.js';
8
+
9
+ export default function EventsVerticalSwipeView(props) {
10
+ const [modalVisible, setModalVisible] = React.useState(true);
11
+ var events = props.events;
12
+
13
+ return (
14
+ <Modal
15
+ style={{
16
+ flex: 1,
17
+ height: '100%',
18
+ width: '100%'
19
+ }}
20
+ animationType="slide"
21
+ transparent={true}
22
+ visible={modalVisible}
23
+ onRequestClose={() => {
24
+ setModalVisible(!modalVisible);
25
+ }}
26
+ >
27
+ <Swiper
28
+ style={{}}
29
+ horizontal={false}
30
+ loop={true}
31
+ showsPagination={false}
32
+ loadMinimal={true}
33
+ loadMinimalSize={1}
34
+ index={props.initialEventIndex}
35
+ onIndexChanged={(index) => {
36
+ setGlobalState('verticalSwiperViewActiveIndex', index);
37
+ }}
38
+
39
+ >
40
+ {
41
+ events.map((event, eventIndex) => {
42
+ return(
43
+ <View
44
+ key={event.event_id}
45
+ style={{
46
+ flex: 1,
47
+ justifyContent: 'center',
48
+ alignItems: 'center',
49
+ backgroundColor: 'transparent'
50
+ }}
51
+ >
52
+ <EventShoppingView event={event} eventIndex={eventIndex} />
53
+ </View>
54
+ )
55
+ })
56
+ }
57
+ </Swiper>
58
+ </Modal>
59
+ );
60
60
  }
@@ -1,52 +1,52 @@
1
- import * as React from 'react';
2
- import { Dimensions, Modal, View } from "react-native";
3
- import AppVideoPlayer from './video-player/AppVideoPlayer.js'
4
- import Swiper from 'react-native-swiper'
5
- import { InView } from 'react-native-intersection-observer'
6
- import EventShoppingView from './EventShoppingView.js';
7
- import { setGlobalState } from '../globals/useAppState_APP.js';
8
-
9
- export default function EventsVerticalSwipeViewNoModal(props) {
10
- var events = props.events;
11
- return (
12
- <View
13
- style={{
14
- flex: 1,
15
- height: '100%',
16
- width: '100%'
17
- }}
18
- >
19
- <Swiper
20
- style={{}}
21
- horizontal={false}
22
- loop={true}
23
- showsPagination={false}
24
- loadMinimal={true}
25
- loadMinimalSize={1}
26
- index={props.initialEventIndex}
27
- onIndexChanged={(index) => {
28
- setGlobalState('verticalSwiperViewActiveIndex', index);
29
- }}
30
-
31
- >
32
- {
33
- events.map((event, eventIndex) => {
34
- return(
35
- <View
36
- key={event.event_id}
37
- style={{
38
- flex: 1,
39
- justifyContent: 'center',
40
- alignItems: 'center',
41
- backgroundColor: 'transparent'
42
- }}
43
- >
44
- <EventShoppingView event={event} eventIndex={eventIndex} />
45
- </View>
46
- )
47
- })
48
- }
49
- </Swiper>
50
- </View>
51
- );
1
+ import * as React from 'react';
2
+ import { Dimensions, Modal, View } from "react-native";
3
+ import AppVideoPlayer from './video-player/AppVideoPlayer.js'
4
+ import Swiper from 'react-native-swiper'
5
+ import { InView } from 'react-native-intersection-observer'
6
+ import EventShoppingView from './EventShoppingView.js';
7
+ import { setGlobalState } from '../globals/useAppState_APP.js';
8
+
9
+ export default function EventsVerticalSwipeViewNoModal(props) {
10
+ var events = props.events;
11
+ return (
12
+ <View
13
+ style={{
14
+ flex: 1,
15
+ height: '100%',
16
+ width: '100%'
17
+ }}
18
+ >
19
+ <Swiper
20
+ style={{}}
21
+ horizontal={false}
22
+ loop={true}
23
+ showsPagination={false}
24
+ loadMinimal={true}
25
+ loadMinimalSize={1}
26
+ index={props.initialEventIndex}
27
+ onIndexChanged={(index) => {
28
+ setGlobalState('verticalSwiperViewActiveIndex', index);
29
+ }}
30
+
31
+ >
32
+ {
33
+ events.map((event, eventIndex) => {
34
+ return(
35
+ <View
36
+ key={event.event_id}
37
+ style={{
38
+ flex: 1,
39
+ justifyContent: 'center',
40
+ alignItems: 'center',
41
+ backgroundColor: 'transparent'
42
+ }}
43
+ >
44
+ <EventShoppingView event={event} eventIndex={eventIndex} />
45
+ </View>
46
+ )
47
+ })
48
+ }
49
+ </Swiper>
50
+ </View>
51
+ );
52
52
  }
@@ -1,89 +1,89 @@
1
- import * as React from 'react';
2
- import { useState, useEffect } from 'react';
3
- import EventClickComponent from "./EventClickComponent";
4
- import { WHATMORE_BACKEND_BASE_URL } from '../constants/AppGlobalVars';
5
- import { extractEvents, removeInvalidEvents } from '../utils/EventSanityUtils';
6
- import { View } from 'react-native';
7
-
8
- const logEventData = false;
9
-
10
- function logResponse(data, response = '200'){
11
- // log response details
12
- console.log("###=======Whatmore Log start.======####");
13
- console.log("Fetched Events from Whatmore")
14
- console.log("response status code : " + response.status)
15
- console.log("total events received : " + (data && data.length));
16
- logEventData && console.log("events data : " + JSON.stringify(data));
17
- console.log("###=======Whatmore Log end.======####")
18
- }
19
-
20
- function transformEventData(data, brandId){
21
- if(data == null){
22
- return;
23
- }
24
-
25
- var index = 0;
26
- data.forEach((event) => {
27
- event.index = index++;
28
- });
29
-
30
- }
31
-
32
- export default function WhatmoreRootComponent(props) {
33
- const [data, setData] = useState();
34
- const [error, setError] = useState();
35
-
36
- var brandId = props.shopId;
37
- var eventStatuses = "live,upcoming";
38
- var isActive = "true";
39
-
40
- var whatmoreBackendEventsUrl = WHATMORE_BACKEND_BASE_URL + "/v1/events/";
41
-
42
- /**
43
- * external network calls
44
- */
45
-
46
- useEffect(() => {
47
- var url;
48
- url = whatmoreBackendEventsUrl.toString() + brandId.toString()
49
- + '?status=' + eventStatuses.toString()
50
- + '&is_active=' + isActive.toString();
51
- fetch(url)
52
- .then((response) => response.json())
53
- .then((data) => {
54
- return extractEvents(data, false);
55
- })
56
- .then((data) => {
57
- logEventData && console.log("initial received events size : " + data.length);
58
- return removeInvalidEvents(data, brandId);
59
- })
60
- .then((data) => {
61
- setData(data);
62
- })
63
- .catch((err) => {
64
- setError(err.message);
65
- });
66
- }, []);
67
-
68
- // show nothing if any errors occurs or if no close events are scheduled or if still loading
69
- if((data == null || data.length == 0) || error){
70
- return (
71
- <View
72
- style={{
73
- width: '100%',
74
- height: '100%'
75
- }}
76
- >
77
- </View>
78
- );
79
- }
80
-
81
- logEventData && logResponse(data);
82
- transformEventData(data, brandId);
83
- logEventData && console.log("final transformed events data : " + JSON.stringify(data));
84
- logEventData && console.log("valid events size : " + data.length);
85
-
86
- return (
87
- <EventClickComponent events={data} initialEventIndex={0} />
88
- );
1
+ import * as React from 'react';
2
+ import { useState, useEffect } from 'react';
3
+ import EventClickComponent from "./EventClickComponent";
4
+ import { WHATMORE_BACKEND_BASE_URL } from '../constants/AppGlobalVars';
5
+ import { extractEvents, removeInvalidEvents } from '../utils/EventSanityUtils';
6
+ import { View } from 'react-native';
7
+
8
+ const logEventData = false;
9
+
10
+ function logResponse(data, response = '200'){
11
+ // log response details
12
+ console.log("###=======Whatmore Log start.======####");
13
+ console.log("Fetched Events from Whatmore")
14
+ console.log("response status code : " + response.status)
15
+ console.log("total events received : " + (data && data.length));
16
+ logEventData && console.log("events data : " + JSON.stringify(data));
17
+ console.log("###=======Whatmore Log end.======####")
18
+ }
19
+
20
+ function transformEventData(data, brandId){
21
+ if(data == null){
22
+ return;
23
+ }
24
+
25
+ var index = 0;
26
+ data.forEach((event) => {
27
+ event.index = index++;
28
+ });
29
+
30
+ }
31
+
32
+ export default function WhatmoreRootComponent(props) {
33
+ const [data, setData] = useState();
34
+ const [error, setError] = useState();
35
+
36
+ var brandId = props.shopId;
37
+ var eventStatuses = "live,upcoming";
38
+ var isActive = "true";
39
+
40
+ var whatmoreBackendEventsUrl = WHATMORE_BACKEND_BASE_URL + "/v1/events/";
41
+
42
+ /**
43
+ * external network calls
44
+ */
45
+
46
+ useEffect(() => {
47
+ var url;
48
+ url = whatmoreBackendEventsUrl.toString() + brandId.toString()
49
+ + '?status=' + eventStatuses.toString()
50
+ + '&is_active=' + isActive.toString();
51
+ fetch(url)
52
+ .then((response) => response.json())
53
+ .then((data) => {
54
+ return extractEvents(data, false);
55
+ })
56
+ .then((data) => {
57
+ logEventData && console.log("initial received events size : " + data.length);
58
+ return removeInvalidEvents(data, brandId);
59
+ })
60
+ .then((data) => {
61
+ setData(data);
62
+ })
63
+ .catch((err) => {
64
+ setError(err.message);
65
+ });
66
+ }, []);
67
+
68
+ // show nothing if any errors occurs or if no close events are scheduled or if still loading
69
+ if((data == null || data.length == 0) || error){
70
+ return (
71
+ <View
72
+ style={{
73
+ width: '100%',
74
+ height: '100%'
75
+ }}
76
+ >
77
+ </View>
78
+ );
79
+ }
80
+
81
+ logEventData && logResponse(data);
82
+ transformEventData(data, brandId);
83
+ logEventData && console.log("final transformed events data : " + JSON.stringify(data));
84
+ logEventData && console.log("valid events size : " + data.length);
85
+
86
+ return (
87
+ <EventClickComponent events={data} initialEventIndex={0} />
88
+ );
89
89
  }
@@ -1,36 +1,36 @@
1
- import * as React from 'react';
2
- import { getGlobalState, setGlobalState, useGlobalState } from '../../globals/useAppState_APP.js';
3
- import { Text, TouchableOpacity, View } from "react-native";
4
- import UnmuteIcon from '../../icons/icon-components/UnmuteIcon.jsx';
5
- import MuteIcon from '../../icons/icon-components/MuteIcon.jsx';
6
-
7
- export default function AppMuteUnmuteIcon(props) {
8
- const [isAppMuted] = useGlobalState("isAppMuted");
9
-
10
- return (
11
- isAppMuted
12
- ?
13
- <TouchableOpacity
14
- style={{
15
- padding: 10
16
- }}
17
- onPress={()=>{
18
- setGlobalState("isAppMuted", false);
19
- }}
20
- >
21
- <MuteIcon color={"#F5F5F5"} size={40} />
22
- </TouchableOpacity>
23
- :
24
- <TouchableOpacity
25
- style={{
26
- padding: 10
27
- }}
28
- onPress={()=>{
29
- setGlobalState("isAppMuted", true);
30
- }}
31
- >
32
- <UnmuteIcon color={"#F5F5F5"} size={40} />
33
- </TouchableOpacity>
34
- );
35
-
1
+ import * as React from 'react';
2
+ import { getGlobalState, setGlobalState, useGlobalState } from '../../globals/useAppState_APP.js';
3
+ import { Text, TouchableOpacity, View } from "react-native";
4
+ import UnmuteIcon from '../../icons/icon-components/UnmuteIcon.jsx';
5
+ import MuteIcon from '../../icons/icon-components/MuteIcon.jsx';
6
+
7
+ export default function AppMuteUnmuteIcon(props) {
8
+ const [isAppMuted] = useGlobalState("isAppMuted");
9
+
10
+ return (
11
+ isAppMuted
12
+ ?
13
+ <TouchableOpacity
14
+ style={{
15
+ padding: 10
16
+ }}
17
+ onPress={()=>{
18
+ setGlobalState("isAppMuted", false);
19
+ }}
20
+ >
21
+ <MuteIcon color={"#F5F5F5"} size={40} />
22
+ </TouchableOpacity>
23
+ :
24
+ <TouchableOpacity
25
+ style={{
26
+ padding: 10
27
+ }}
28
+ onPress={()=>{
29
+ setGlobalState("isAppMuted", true);
30
+ }}
31
+ >
32
+ <UnmuteIcon color={"#F5F5F5"} size={40} />
33
+ </TouchableOpacity>
34
+ );
35
+
36
36
  }