@whatmore-repo/whatmore-reactnative-sdk 1.0.20 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whatmore-repo/whatmore-reactnative-sdk",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "",
   "private": false,
   "main": "index.js",

package/src/api/navigation-commands/NavigationCommands.js

@@ -4,7 +4,7 @@ import { isAppBrew, isAppMaker, isPlobalApps } from "../partners/PartnerUtils.js
 import { appbrewNavigateToProductPageCommand } from "../partners/appbrew/AppbrewCommands.js";
 
 function handleClick(product, props){
-    props.setModalVisible(false);
+    props.setIsModalOpen(false);
     props.onAction({
         action: "OPEN_PRODUCT",
         params:{

package/src/components/EventClickComponent.js

@@ -22,7 +22,7 @@ export default function EventClickComponent(props) {
             {
                 modalUsed
                 ?
-                    <EventsVerticalSwipeView events={props.events} onAction={props.onAction} initialEventIndex={props.initialEventIndex} />
+                    <EventsVerticalSwipeView setIsModalOpen={props.setIsModalOpen} isModalOpen={props.isModalOpen} events={props.events} onAction={props.onAction} initialEventIndex={props.initialEventIndex} />
                 :
                     <EventsVerticalSwipeViewNoModal events={props.events} initialEventIndex={props.initialEventIndex} />
             }

package/src/components/EventShoppingOverlay.js

@@ -3,6 +3,7 @@ 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';
+import CrossIcon from '../icons/icon-components/CloseIcon.jsx';
 
 export default function EventShoppingOverlay(props) {
     var event = props.event;
@@ -15,16 +16,18 @@ export default function EventShoppingOverlay(props) {
             }}
         >
             {/* <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
-                }}
-            >   
+    <View style={{
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+        paddingTop: 10,
+    }}>
+        <TouchableOpacity onPress={()=>props.setIsModalOpen(false)} style={{paddingLeft: 20}}>
+                <CrossIcon/>
+                </TouchableOpacity>
+            
                 <AppMuteUnmuteIcon />
             </View>
             <View
@@ -60,7 +63,7 @@ export default function EventShoppingOverlay(props) {
                     {
                         event.products.map((product, index) => {
                             return (
-                               index == 0 && <ProductTileV1 key={index} setModalVisible={props.setModalVisible} onAction={props.onAction} event={event} product={product} />
+                               index == 0 && <ProductTileV1 setIsModalOpen={props.setIsModalOpen} key={index} onAction={props.onAction} event={event} product={product} />
                             );
                         })
                     }

package/src/components/EventShoppingView.js

@@ -29,7 +29,7 @@ export default function EventShoppingView(props) {
                     backgroundColor: 'transparent',
                 }}
             >
-                <EventShoppingOverlay setModalVisible={props.setModalVisible} event={event} onAction={props.onAction} />
+                <EventShoppingOverlay setIsModalOpen={props.setIsModalOpen} event={event} onAction={props.onAction} />
             </View>
         </View>
     );

package/src/components/EventsVerticalSwipeView.js

@@ -7,7 +7,6 @@ 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 
@@ -18,10 +17,7 @@ export default function EventsVerticalSwipeView(props) {
                 }}
                 animationType="slide"
                 transparent={false}
-                visible={modalVisible}
-                onRequestClose={() => {
-                    setModalVisible(!modalVisible);
-                }}
+                visible={props.isModalOpen}
             >
                 <Swiper
                     style={{}} 
@@ -48,7 +44,7 @@ export default function EventsVerticalSwipeView(props) {
                                         backgroundColor: 'transparent'
                                     }}
                                 >
-                                    <EventShoppingView setModalVisible={setModalVisible} onAction={props.onAction} event={event} eventIndex={eventIndex}  />
+                                    <EventShoppingView setIsModalOpen={props.setIsModalOpen} onAction={props.onAction} event={event} eventIndex={eventIndex}  />
                                 </View> 
                             )
                         })

package/src/components/WhatmoreRootComponent.js

@@ -1,10 +1,12 @@
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import EventClickComponent from "./EventClickComponent";
+import React, { useState, useEffect, lazy } from 'react';
+
 import { WHATMORE_BACKEND_BASE_URL } from '../constants/AppGlobalVars';
 import { extractEvents, removeInvalidEvents } from '../utils/EventSanityUtils';
 import { View } from 'react-native';
 
+const EventTileWithProduct = lazy(() => import('./carousel-view/EventTileWithProduct.js'));
+const EventClickComponent = lazy(() => import('./EventClickComponent'));
+
 const logEventData = false;
 
 function logResponse(data, response = '200'){
@@ -30,10 +32,12 @@ function transformEventData(data, brandId){
 }
 
 export default function WhatmoreRootComponent(props) {
+    var brandId = props.shopId;
     const [data, setData] = useState();
     const [error, setError] = useState();
+    const [isModalOpen, setIsModalOpen] = useState(brandId !== '27358003275');
+    const [initialEventIndex, setInitialEventIndex] = useState(0)
 
-    var brandId = props.shopId;
     var eventStatuses = "live,upcoming";
     var isActive = "true";
 
@@ -50,9 +54,9 @@ export default function WhatmoreRootComponent(props) {
                   + '&is_active=' + isActive.toString();
       fetch(url)
           .then((response) => response.json())
-          .then((data) => {
-              return extractEvents(data, false);
-          })
+        //   .then((data) => {
+        //       return extractEvents(data, false);
+        //   })
           .then((data) => {
               logEventData && console.log("initial received events size : " + data.length);
               return removeInvalidEvents(data, brandId);
@@ -79,11 +83,14 @@ export default function WhatmoreRootComponent(props) {
     }
 
     logEventData && logResponse(data);
-    transformEventData(data, brandId);
+    // 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} onAction={props.onAction} /> 
+        <>   
+            {brandId == '27358003275' && <EventTileWithProduct isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} events={data} setInitialEventIndex={setInitialEventIndex} />}
+            {(isModalOpen || brandId !== '27358003275') && <EventClickComponent isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} events={data} initialEventIndex={initialEventIndex} onAction={props.onAction} /> }
+        </>
       );
 }

package/src/components/carousel-view/EventTileWithProduct.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Text, TouchableOpacity, View, StyleSheet, Image, SafeAreaView, FlatList, Dimensions } from "react-native";
+import { Text, TouchableOpacity, View, StyleSheet, SafeAreaView, Dimensions } from "react-native";
 import { getGlobalState } from '../../globals/useAppState_APP';
-import Swiper from 'react-native-swiper';
 import Video from 'react-native-video';
 import { useState, useEffect } from 'react';
 import Carousel from 'react-native-snap-carousel'
@@ -10,94 +9,90 @@ import Carousel from 'react-native-snap-carousel'
 export default function EventTileWithProduct(props) {
 
     const events = props.events;
-    const { width } = Dimensions.get('window');
+    const [renderedEvents, setRenderedEvents] = useState(6);
     const isCarousel = React.useRef(null)
-    const SLIDER_WIDTH = Dimensions.get('window').width + 80
-    const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.7)
+    const videoRef = React.useRef(null);
 
-    function handleClick(props, index){
+    const { width, height } = Dimensions.get('window');
+    const SLIDER_WIDTH = width + 75;
+    const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.3)
+    const CARD_HEIGHT = height * 0.2;
+    const styles = StyleSheet.create({
+        cardContainer: {
+            borderRadius: 30,
+            width: ITEM_WIDTH*0.7,
+            height: CARD_HEIGHT,
+            position: 'absolute',
+            borderRadius: 30,
+            elevation: 3,
+
+            top: 40,
+            transform: [{ scale: 1.3 }],
+
+        },
+        video: {
+            width: '100%',
+            height: '100%',
+            borderRadius: 10,
+            elevation: 8
+        }
+    });
+
+    // const [currentIndex, setCurrentIndex] = useState(1);
+
+    // const handleVideoLoad = (index) => {
+    //     if (index !== currentIndex && videoRef.current) {
+    //         videoRef.current.setNativeProps({ paused: false });
+            
+    //     }
+    // };
+    const CarouselCardItem = ({ item, index }) => {
+
+        return (
+            <TouchableOpacity onPress={()=>handleClick(props, index)} key={index}>
+                <View style={styles.cardContainer}>
+                    <Video
+                        ref={videoRef}
+
+                      source={{ uri: item?.thumbnail_image }}
+                        controls={false}
+                        repeat
+                        muted
+                        style={styles.video}
+                        // paused={!isFocused}
+                        // onLoad={() => handleVideoLoad(index)}
+                    />
+                </View>
+            </TouchableOpacity>
+        )
+    }
+
+    function handleClick(props, index) {
         console.log('hello', index)
         props.setInitialEventIndex(index);
         props.setIsModalOpen(true);
     }
+    function handleSnapToItem(index) {
+        setRenderedEvents(prev => prev+1);
+    }
+
     return (
         <SafeAreaView style={{
             width: '100%',
-            height: '100%'
+            height: '100%',
         }}>
-              <View>
-      <Carousel
-        layout="tinder"
-        layoutCardOffset={9}
-        ref={isCarousel}
-        // data={data}
-        // renderItem={CarouselCardItem}
-        sliderWidth={SLIDER_WIDTH}
-        itemWidth={ITEM_WIDTH}
-        inactiveSlideShift={0}
-        useScrollView={true}
-      />
-    </View>
-            {/* <View
-                style={{
-                    flex: 1,
-                    height: '100%',
-                    width: '100%'
-                }}
-            >
-    <FlatList
-      data={events}
-      horizontal
-      keyExtractor={(item, index) => index.toString()}
-      renderItem={({ item, index }) => (
-        <TouchableOpacity onPress={()=>handleClick(props, index)} style={{ width: width / 2.5, height: width / 2 }}>
-          <Video 
-            source={{ uri: item.thumbnail_image }}    
-            style={{ width: '100%', height: '100%' }}
-            controls={false}
-            muted
-            repeat
-          />
-        </TouchableOpacity>
-      )}
-    /> */}
-                {/* <Swiper horizontal={true}
-                    style={{}}
-
-                    loop={true}
-                    showsPagination={false}
-                    loadMinimal={true}
-                    loadMinimalSize={1}
-                >
-                    {
-                        events.map((event, index) => {
-                            // console.log(event.thumbnail_image,'p')
-                            return (
-                            <View 
-                                key={index}
-                                style={{
-                                    width: '100%', height: '100%', backgroundColor: 'gray'
-                                }}
-                            >                                    
-                                <Video source = {{uri: event.thumbnail_image}}    
-                                    style={{
-                                        position: 'absolute',
-                                        top: 0,
-                                        left: 0,
-                                        bottom: 0,
-                                        right: 0,
-                                        width: '100%', height: '100%'
-                                     }}
-                                />
-
-                            </View>
-                            )
-                        })
-                    }
-                </Swiper> */}
-            {/* </View> */}
+            <Carousel
+                layout="default"
+                ref={isCarousel}
+                data={events.slice(0,renderedEvents)}
+                renderItem={CarouselCardItem}        
+                sliderWidth={SLIDER_WIDTH}
+                itemWidth={ITEM_WIDTH}
+                inactiveSlideShift={-15}
+                firstItem={1}
+                useScrollView={true}
+                onSnapToItem={handleSnapToItem}
+            />
         </SafeAreaView>
     )
-
-}
-
+}

package/src/icons/icon-components/CloseIcon.jsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Svg, {Line} from 'react-native-svg';
+
+function CrossIcon({size = 24, color = 'white' }) {
+    return (
+        <Svg height={size} width={size} viewBox="0 0 24 24">
+            <Line x1="1" y1="1" x2="23" y2="23" stroke={color} strokeWidth="2" />
+            <Line x1="23" y1="1" x2="1" y2="23" stroke={color} strokeWidth="2" />
+        </Svg>
+    );
+}
+
+export default CrossIcon;