@whatmore-repo/whatmore-reactnative-sdk 1.0.8

package/src/api/whatmore-backend/WhatmoreMetricCommands.js

@@ -0,0 +1,159 @@
+const WHATMORE_BACKEND_BASE_URL = "https://api.whatmore.live";
+
+export function registerUser(eventId, userName, phoneNumber) {
+    const requestBody = {
+        "event_id": eventId,
+        "customer_name": userName,
+        "customer_phone": phoneNumber 
+    }
+    const response = fetch(WHATMORE_BACKEND_BASE_URL + "/notification/register", {
+        method: 'POST',
+        headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        },
+    ).then(response => {
+        console.debug("user registration response : HTTP " + response.status);
+        return response.json();
+    }).then(data => {
+        console.debug("user registration response : " + JSON.stringify(data));
+    }).catch(error => {
+        console.error("error while registering user for event : ", error);
+    });
+}
+
+
+export function increaseViewCount(event) {
+    console.debug("updating user view count for event.");
+    const requestBody = {
+        "event_id": event.event_id,
+        "increase_by": 1
+    }
+    const response = fetch(WHATMORE_BACKEND_BASE_URL + "/event/metrics/views", {
+        method: 'POST',
+        headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        },
+    ).then(response => {
+        console.debug("updating user view count response : HTTP " + response.status);
+        return response.json();
+    }).then(data => {
+        console.debug("updating user view count response : " + JSON.stringify(data));
+    }).catch(error => {
+        console.error("error updating user view count user for event : ", error);
+    });
+}
+
+
+export function increaseEventProductClickCount(event, product) {
+    console.debug("updating event-product click count for event {} and product {}.", event.event_id, product.product_id);
+    const requestBody = {
+        "event_id": event.event_id,
+        "product_id": product.product_id,
+        "increase_by": 1
+    }
+    const response = fetch(WHATMORE_BACKEND_BASE_URL + "/event/metrics/clicks", {
+        method: 'POST',
+        headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        },
+    ).then(response => {
+        console.debug("updating user event-product click count response : HTTP " + response.status);
+        return response.json();
+    }).then(data => {
+        console.debug("updating user event-product click count response : " + JSON.stringify(data));
+    }).catch(error => {
+        console.error("error updating user event-product click count for event {} : ", event.event_id, error);
+    });
+}
+
+export function increaseEventProductAddToCartCount(event, product, quantity) {
+    console.debug("updating event-product add to cart count for event {} and product {}.", event.event_id, product.product_id);
+    const requestBody = {
+        "event_id": event.event_id,
+        "product_id": product.product_id,
+        "increase_by": quantity
+    }
+    const response = fetch(WHATMORE_BACKEND_BASE_URL + "/event/metrics/add_to_cart", {
+        method: 'POST',
+        headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        },
+    ).then(response => {
+        console.debug("updating user event-product add to cart count response : HTTP " + response.status);
+        return response.json();
+    }).then(data => {
+        console.debug("updating user event-product add to cart count response : " + JSON.stringify(data));
+    }).catch(error => {
+        console.error("error updating user event-product add to cart count for event {} : ", event.event_id, error);
+    });
+}
+
+export function increaseEventProductBuyNowCount(event, product) {
+    console.debug("updating event-product buy now count for event {} and product {}.", event.event_id, product.product_id);
+    const requestBody = {
+        "event_id": event.event_id,
+        "product_id": product.product_id,
+        "increase_by": 1
+    }
+    const response = fetch(WHATMORE_BACKEND_BASE_URL + "/event/metrics/buy_now", {
+        method: 'POST',
+        headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        },
+    ).then(response => {
+        console.debug("updating user event-product buy now count response : HTTP " + response.status);
+        return response.json();
+    }).then(data => {
+        console.debug("updating user event-product buy now count response : " + JSON.stringify(data));
+    }).catch(error => {
+        console.error("error updating user event-product buy now count for event {} : ", event.event_id, error);
+    });
+}
+
+export async function orderTrackingAddToCartEvent(
+    {storeId = '', eventId = 0, productId = '', variantId = '', cartToken = '', checkoutToken = '', quantity = 0, price = '', actionType = '', trackingId = ''} = {}
+) {
+    let data = {
+        'event_id': eventId,
+        'product_id': productId,
+        'cart_token': cartToken,
+        'checkout_token': checkoutToken,
+        'quantity': quantity,
+        'price': price,
+        'variant_id': variantId,
+        'action_type': actionType,
+        'tracking_id' : trackingId
+    };
+    console.debug("initiating ATC metadata event for eventId {}, productId {}, variantId {} ", eventId, productId, variantId);
+    const res = await fetch(WHATMORE_BACKEND_BASE_URL + '/cart-metadata/' + storeId, {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+    }).then(response => {
+        console.debug("initiating ATC metadata event for eventId {}, productId {}, variantId {} : HTTP " + response.status);
+        return response.json();
+    }).catch(error => {
+        console.error("error initiating ATC metadata event for eventId {}, productId {}, variantId {} : ", eventId, productId, variantId);
+    });        
+
+    return res
+}
+

package/src/components/EventClickComponent.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { SafeAreaView, StatusBar, View } from "react-native";
+import EventsVerticalSwipeView from './EventsVerticalSwipeView';
+import { getGlobalState } from '../globals/useAppState_APP';
+import EventsVerticalSwipeViewNoModal from './EventsVerticalSwipeViewNoModal';
+
+export default function EventClickComponent(props) {
+    const modalUsed = getGlobalState('modalUsed');
+
+    return (
+        <SafeAreaView  style={{
+            width: '100%',
+            height: '100%'
+        }}>
+            <StatusBar
+                animated={true}
+                backgroundColor='black'
+                barStyle={"default"}
+                hidden={false}
+                showHideTransition={"fade"}
+            />
+            {
+                modalUsed
+                ?
+                    <EventsVerticalSwipeView events={props.events} initialEventIndex={props.initialEventIndex} />
+                :
+                    <EventsVerticalSwipeViewNoModal events={props.events} initialEventIndex={props.initialEventIndex} />
+            }
+        </SafeAreaView>
+      );
+}

package/src/components/EventShoppingOverlay.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { Text, TouchableOpacity, View } from "react-native";
+import { getGlobalState, setGlobalState, useGlobalState } from '../globals/useAppState_APP.js';
+import AppMuteUnmuteIcon from './commons/AppMuteUnmuteIcon.js';
+import ProductTileV1 from './product-tiles/ProductTileV1.js';
+
+export default function EventShoppingOverlay(props) {
+    var event = props.event;
+
+    return (
+        <View 
+            style={{
+                width: '100%', height: '100%',
+                flex: 1, flexDirection: 'column', 
+                justifyContent: 'flex-start', alignItems: 'center'
+            }}
+        >
+            {/* <Text style={{fontSize: 20, fontWeight: 'bold'}}> ABCD </Text> */}
+
+            <View
+                style={{
+                    width: '100%', 
+                    height: 'auto',
+                    flexDirection: 'row',
+                    justifyContent: 'flex-end', alignItems: 'center', backgroundColor: 'transparent',
+                    paddingLeft: 10, paddingRight: 10, paddingTop: 10, paddingBottom: 10
+                }}
+            >   
+                <AppMuteUnmuteIcon />
+            </View>
+            <View
+                style={{
+                    width: '100%', 
+                    height: 'auto',
+                    flex: 1,
+                    flexDirection: 'column',
+                    justifyContent: 'space-between', alignItems: 'center', backgroundColor: 'transparent'
+                }}
+            >   
+                <TouchableOpacity
+                    style={{
+                        width: '100%', 
+                        height: 'auto',
+                        flex: 1,
+                        flexDirection: 'row',
+                        justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent'
+                    }}
+                    onPress={()=>{
+                        setGlobalState("isAppMuted", getGlobalState("isAppMuted") ? false : true);
+                    }}
+                >
+                </TouchableOpacity>
+                <View
+                    // add style here to make it horizontally scrollable 
+                    style={{
+                        width: '100%', height: 'auto',
+                        flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center',
+                        paddingLeft: 10, paddingRight: 10, paddingBottom: 10
+                    }}
+                >
+                    {
+                        event.products.map((product, index) => {
+                            return (
+                                <ProductTileV1 key={index} event={event} product={product} />
+                            );
+                        })
+                    }
+                </View>
+            </View>
+            
+
+        </View>
+    );
+                                    
+}

package/src/components/EventShoppingView.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { View } from "react-native";
+import AppVideoPlayer from './video-player/AppVideoPlayer.js'
+import { useGlobalState } from '../globals/useAppState_APP.js';
+import EventShoppingOverlay from './EventShoppingOverlay.js';
+
+export default function EventShoppingView(props) {
+    const [activeSwiperIndex, setActiveSwiperIndex] = useGlobalState('verticalSwiperViewActiveIndex');
+
+    var event = props.event;
+    var eventIndex = props.eventIndex;
+
+    return (
+        <View 
+            style={{
+                width: '100%', height: '100%'
+            }}
+        >
+            <AppVideoPlayer videoUrl={event.event_hls_url} isMuted={activeSwiperIndex != eventIndex} />
+            <View
+                style={{
+                    width: '100%', height: '100%',
+                    position: 'relative', zIndex: 1, 
+                    backgroundColor: 'transparent',
+                }}
+            >
+                <EventShoppingOverlay event={event} />
+            </View>
+        </View>
+    );
+                                    
+}

package/src/components/EventsVerticalSwipeView.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Dimensions, Modal, View } from "react-native";
+import AppVideoPlayer from './video-player/AppVideoPlayer.js'
+import Swiper from 'react-native-swiper'
+import { InView } from 'react-native-intersection-observer'
+import EventShoppingView from './EventShoppingView.js';
+import { setGlobalState } from '../globals/useAppState_APP.js';
+
+export default function EventsVerticalSwipeView(props) {
+    const [modalVisible, setModalVisible] = React.useState(true);
+    var events = props.events;
+
+    return (
+            <Modal 
+                style={{
+                    flex: 1,
+                    height: '100%',
+                    width: '100%'
+                }}
+                animationType="slide"
+                transparent={true}
+                visible={modalVisible}
+                onRequestClose={() => {
+                    setModalVisible(!modalVisible);
+                }}
+            >
+                <Swiper
+                    style={{}} 
+                    horizontal={false}
+                    loop={true}
+                    showsPagination={false}
+                    loadMinimal={true}
+                    loadMinimalSize={1}
+                    index={props.initialEventIndex}
+                    onIndexChanged={(index) => { 
+                        setGlobalState('verticalSwiperViewActiveIndex', index);
+                    }}
+
+                >
+                    {
+                        events.map((event, eventIndex) => {
+                            return(
+                                <View
+                                    key={event.event_id}
+                                    style={{
+                                        flex: 1,
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        backgroundColor: 'transparent'
+                                    }}
+                                >
+                                    <EventShoppingView event={event} eventIndex={eventIndex}  />
+                                </View> 
+                            )
+                        })
+                    }                    
+                </Swiper>   
+            </Modal>
+      );
+}

package/src/components/EventsVerticalSwipeViewNoModal.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Dimensions, Modal, View } from "react-native";
+import AppVideoPlayer from './video-player/AppVideoPlayer.js'
+import Swiper from 'react-native-swiper'
+import { InView } from 'react-native-intersection-observer'
+import EventShoppingView from './EventShoppingView.js';
+import { setGlobalState } from '../globals/useAppState_APP.js';
+
+export default function EventsVerticalSwipeViewNoModal(props) {
+    var events = props.events;
+    return (
+            <View 
+                style={{
+                    flex: 1,
+                    height: '100%',
+                    width: '100%'
+                }}
+            >
+                <Swiper
+                    style={{}} 
+                    horizontal={false}
+                    loop={true}
+                    showsPagination={false}
+                    loadMinimal={true}
+                    loadMinimalSize={1}
+                    index={props.initialEventIndex}
+                    onIndexChanged={(index) => { 
+                        setGlobalState('verticalSwiperViewActiveIndex', index);
+                    }}
+
+                >
+                    {
+                        events.map((event, eventIndex) => {
+                            return(
+                                <View
+                                    key={event.event_id}
+                                    style={{
+                                        flex: 1,
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        backgroundColor: 'transparent'
+                                    }}
+                                >
+                                    <EventShoppingView event={event} eventIndex={eventIndex}  />
+                                </View>
+                            )
+                        })
+                    }                    
+                </Swiper>   
+            </View>
+      );
+}

package/src/components/WhatmoreRootComponent.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import EventClickComponent from "./EventClickComponent";
+import { WHATMORE_BACKEND_BASE_URL } from '../constants/AppGlobalVars';
+import { extractEvents, removeInvalidEvents } from '../utils/EventSanityUtils';
+import { View } from 'react-native';
+
+const logEventData = false;
+
+function logResponse(data, response = '200'){
+    // log response details
+    console.log("###=======Whatmore Log start.======####");
+    console.log("Fetched Events from Whatmore")
+    console.log("response status code : " + response.status)
+    console.log("total events received : " + (data && data.length));
+    logEventData && console.log("events data : " + JSON.stringify(data));
+    console.log("###=======Whatmore Log end.======####")
+}
+
+function transformEventData(data, brandId){
+    if(data == null){
+        return;
+    }
+
+    var index = 0;
+    data.forEach((event) => {
+        event.index = index++;        
+    });
+
+}
+
+export default function WhatmoreRootComponent(props) {
+    const [data, setData] = useState();
+    const [error, setError] = useState();
+
+    var brandId = props.shopId;
+    var eventStatuses = "live,upcoming";
+    var isActive = "true";
+
+    var whatmoreBackendEventsUrl = WHATMORE_BACKEND_BASE_URL + "/v1/events/";
+
+    /**
+     * external network calls
+     */
+
+    useEffect(() => {
+      var url;
+      url = whatmoreBackendEventsUrl.toString() + brandId.toString() 
+                  + '?status=' + eventStatuses.toString() 
+                  + '&is_active=' + isActive.toString();
+      fetch(url)
+          .then((response) => response.json())
+          .then((data) => {
+              return extractEvents(data, false);
+          })
+          .then((data) => {
+              logEventData && console.log("initial received events size : " + data.length);
+              return removeInvalidEvents(data, brandId);
+          })
+          .then((data) => {
+              setData(data);
+          })
+          .catch((err) => {
+              setError(err.message);
+          });
+    }, []);
+
+    // show nothing if any errors occurs or if no close events are scheduled or if still loading
+    if((data == null || data.length == 0) || error){
+        return (
+            <View
+                style={{
+                    width: '100%', 
+                    height: '100%'
+                }}
+            >
+            </View>
+        );
+    }
+
+    logEventData && logResponse(data);
+    transformEventData(data, brandId);
+    logEventData && console.log("final transformed events data : " + JSON.stringify(data));
+    logEventData && console.log("valid events size : " + data.length);
+
+    return (
+        <EventClickComponent events={data} initialEventIndex={0} /> 
+      );
+}

package/src/components/commons/AppMuteUnmuteIcon.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { getGlobalState, setGlobalState, useGlobalState } from '../../globals/useAppState_APP.js';
+import { Text, TouchableOpacity, View } from "react-native";
+import UnmuteIcon from '../../icons/icon-components/UnmuteIcon.jsx';
+import MuteIcon from '../../icons/icon-components/MuteIcon.jsx';
+
+export default function AppMuteUnmuteIcon(props) {
+    const [isAppMuted] = useGlobalState("isAppMuted");
+    
+    return (
+        isAppMuted
+        ?
+            <TouchableOpacity
+                style={{
+                    padding: 10
+                }}
+                onPress={()=>{
+                    setGlobalState("isAppMuted", false);
+                }}
+            >
+                <MuteIcon color={"#F5F5F5"} size={40} />
+            </TouchableOpacity>
+        :
+            <TouchableOpacity
+                style={{
+                    padding: 10
+                }}
+                onPress={()=>{
+                    setGlobalState("isAppMuted", true);
+                }}
+            >
+                <UnmuteIcon color={"#F5F5F5"} size={40} />
+            </TouchableOpacity>
+    );
+                                    
+}