@whatmore-repo/whatmore-reactnative-sdk 1.0.24 → 1.0.26

package/package.json

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

package/src/components/EventShoppingOverlay.js

@@ -8,46 +8,46 @@ import CrossIcon from '../icons/icon-components/CloseIcon.jsx';
 export default function EventShoppingOverlay(props) {
     var event = props.event;
     return (
-        <View 
+        <View
             style={{
                 width: '100%', height: '100%',
-                flex: 1, flexDirection: 'column', 
+                flex: 1, flexDirection: 'column',
                 justifyContent: 'flex-start', alignItems: 'center'
             }}
         >
             {/* <Text style={{fontSize: 20, fontWeight: 'bold'}}> ABCD </Text> */}
-    <View style={{
-        width: '100%',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: 'transparent',
-        paddingTop: 10,
-    }}>
-        <TouchableOpacity onPress={()=>props.setIsModalOpen(false)} style={{paddingLeft: 20}}>
-                <CrossIcon/>
+            <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
                 style={{
-                    width: '100%', 
+                    width: '100%',
                     height: 'auto',
                     flex: 1,
                     flexDirection: 'column',
                     justifyContent: 'space-between', alignItems: 'center', backgroundColor: 'transparent'
                 }}
-            >   
+            >
                 <TouchableOpacity
                     style={{
-                        width: '100%', 
+                        width: '100%',
                         height: 'auto',
                         flex: 1,
                         flexDirection: 'row',
                         justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent'
                     }}
-                    onPress={()=>{
+                    onPress={() => {
                         setGlobalState("isAppMuted", getGlobalState("isAppMuted") ? false : true);
                     }}
                 >
@@ -63,15 +63,15 @@ export default function EventShoppingOverlay(props) {
                     {
                         event.products.map((product, index) => {
                             return (
-                               index == 0 && <ProductTileV1 setIsModalOpen={props.setIsModalOpen} key={index} onAction={props.onAction} event={event} product={product} />
+                                index == 0 && <ProductTileV1 setIsModalOpen={props.setIsModalOpen} key={index} onAction={props.onAction} event={event} product={product} />
                             );
                         })
                     }
                 </View>
             </View>
-            
+
 
         </View>
     );
-                                    
+
 }

package/src/components/WhatmoreRootComponent.js

@@ -1,5 +1,4 @@
 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';

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

@@ -1,95 +1,145 @@
 import * as React from 'react';
-import { Text, TouchableOpacity, View, StyleSheet, SafeAreaView, Dimensions } from "react-native";
-import { getGlobalState } from '../../globals/useAppState_APP';
+import { Text, TouchableOpacity, View, StyleSheet, SafeAreaView, Dimensions, ScrollView, FlatList, Animated, Image } from "react-native";
 import Video from 'react-native-video';
-import { useState, useEffect } from 'react';
-import Carousel from 'react-native-snap-carousel'
-
+import { useState, useRef } from 'react';
+import ChevronRightIcon from '../../icons/icon-components/ChevronRight';
+import ChevronLeftIcon from '../../icons/icon-components/ChevronLeft';
 
 export default function EventTileWithProduct(props) {
+    const [activeIndex, setActiveIndex] = useState(1);
+    const [renderedEvents, setRenderedEvents] = useState(5)
+    const { width } = Dimensions.get('window');
+    const ITEM_WIDTH = width * 0.33;
+    const CARD_HEIGHT = 200;
 
-    const events = props.events;
-    const [renderedEvents, setRenderedEvents] = useState(6);
-    const isCarousel = React.useRef(null)
-    const videoRef = React.useRef(null);
-
-    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({
+        container: {
+            position: 'relative',
+            width: '100%',
+            height: 250,
+        },
         cardContainer: {
-            borderRadius: 30,
-            width: ITEM_WIDTH*0.7,
+            width: ITEM_WIDTH,
             height: CARD_HEIGHT,
+            marginHorizontal: 8,
+            top: 20,
+        },
+        arrowContainerRight: {
             position: 'absolute',
-            borderRadius: 30,
-            elevation: 3,
-
-            top: 40,
-            transform: [{ scale: 1.3 }],
-
+            top: 90,
+            right: 0,
+            width: 28,
+            height: 28,
+            marginHorizontal: 5,
         },
-        video: {
-            width: '100%',
-            height: '100%',
-            borderRadius: 10,
-            elevation: 8
+        arrowContainerLeft: {
+            position: 'absolute',
+            top: 90,
+            width: 28,
+            height: 28, 
+            marginHorizontal: 5,
         }
     });
 
-    // const [currentIndex, setCurrentIndex] = useState(1);
+    const handleClick = (index) => {
+        setInitialEventIndex(index);
+        setIsModalOpen(true);
+    };
 
+    const { events, isModalOpen, setInitialEventIndex, setIsModalOpen } = props;
+    // const [pausedVideos, setPausedVideos] = useState({});
     // const handleVideoLoad = (index) => {
-    //     if (index !== currentIndex && videoRef.current) {
-    //         videoRef.current.setNativeProps({ paused: false });
-            
-    //     }
+    //     setPausedVideos((prevState) => ({
+    //         ...prevState,
+    //         [index]: true
+    //     }));
     // };
-    const CarouselCardItem = ({ item, index }) => {
+    const videoRef = useRef(null);
+
+    const scrollLeft = () => {
+        if (activeIndex > 0) {
+            const newIndex = Math.max(0, activeIndex - 2);
+            flatListRef.current.scrollToIndex({ index: newIndex, animated: true });
+            setActiveIndex(newIndex);
+        }
+    };
 
+    const scrollRight = () => {
+        setRenderedEvents(prev => prev + 2);
+        if (activeIndex < events.length - 1) {
+            const newIndex = activeIndex + 2;
+            flatListRef.current.scrollToIndex({ index: newIndex, animated: true });
+            setActiveIndex(newIndex);
+        }
+    };
+
+    // useEffect(() => {
+    //     setPausedVideos(pausedVideos[index] && index !== activeIndex);
+    // }, [pausedVideos, index, activeIndex]);
+
+    // React.useEffect(()=>{
+    //     if(videoRef.current){
+    //         // videoRef.current.pauseAsync()
+    //     }
+    // },[])
+    const renderItem = ({ item, index }) => {
         return (
-            <TouchableOpacity onPress={()=>handleClick(props, index)} key={index}>
-                <View style={styles.cardContainer}>
+            <TouchableOpacity onPress={() => handleClick(index)} key={index}>
+                <Animated.View style={[styles.cardContainer]}>
                     <Video
                         ref={videoRef}
-
-                      source={{ uri: item?.thumbnail_image }}
+                        source={{ uri: item?.thumbnail_image }}
                         controls={false}
                         repeat
                         muted
-                        style={styles.video}
-                        paused={props.isModalOpen}
+                        resizeMode={"cover"}
+                        // paused={index !== activeIndex}
                         // onLoad={() => handleVideoLoad(index)}
+
+                        style={{
+                            aspectRatio: 0.5625,
+                            width: "100%",
+                            height: '100%',
+                            borderRadius: 10,
+                            transform: [{ scale: 1.1 }],
+                            // elevation: 1
+
+                        }}                    
                     />
-                </View>
+                </Animated.View>
             </TouchableOpacity>
-        )
-    }
-
-    function handleClick(props, index) {
-        console.log('hello', index)
-        props.setInitialEventIndex(index);
-        props.setIsModalOpen(true);
-    }
-    function handleSnapToItem(index) {
-        setRenderedEvents(prev => prev+1);
-    }
+        );
+    };
+    const flatListRef = useRef(null);
 
     return (
-        <SafeAreaView style={{width: '100%', height: 250}}>
-            <Carousel
-                layout="default"
-                ref={isCarousel}
+        <SafeAreaView style={styles.container}>
+            <Animated.FlatList
+                horizontal
+                style={{paddingLeft: 10}}
                 data={events.slice(0,renderedEvents)}
-                renderItem={CarouselCardItem}        
-                sliderWidth={SLIDER_WIDTH}
-                itemWidth={ITEM_WIDTH}
-                inactiveSlideShift={0}
-                firstItem={1}
-                useScrollView={true}
-                onSnapToItem={handleSnapToItem}
+                renderItem={renderItem}
+                contentInsetAdjustmentBehavior="never"
+                decelerationRate="fast"
+                scrollEnabled={false}
+                automaticallyAdjustContentInsets={false}
+                showsHorizontalScrollIndicator={false}
+                scrollEventThrottle={16}
+                ref={flatListRef}
             />
+            <TouchableOpacity style={styles.arrowContainerLeft} onPress={scrollLeft}>
+                <ChevronLeftIcon />
+            </TouchableOpacity>
+                        <TouchableOpacity style={styles.arrowContainerRight} onPress={scrollRight}>
+                <ChevronRightIcon />
+            </TouchableOpacity>
         </SafeAreaView>
-    )
-}
+    );
+}
+
+    // const handleScroll = (event) => {
+    //     const offsetX = event.nativeEvent.contentOffset.x;
+    //     const index = Math.round((offsetX + ITEM_WIDTH)/ ITEM_WIDTH);
+    //     setRenderedEvents(prev => prev + 1)
+    //     setActiveIndex(index);
+    // };

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Svg, Circle, Path } from 'react-native-svg';
+
+const ChevronLeftIcon = ({ width, height, color }) => (
+    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
+                <Circle cx="12" cy="12" r="12" fill="white" />
+        <Path d="M15.7071 7.70711C16.0976 7.31658 16.0976 6.68342 15.7071 6.29289C15.3166 5.90237 14.6834 5.90237 14.2929 6.29289L9.29289 11.2929C8.90237 11.6834 8.90237 12.3166 9.29289 12.7071L14.2929 17.7071C14.6834 18.0976 15.3166 18.0976 15.7071 17.7071C16.0976 17.3166 16.0976 16.6834 15.7071 16.2929L11.4142 12L15.7071 7.70711Z" fill={'black'} />
+    </Svg>
+);
+
+export default ChevronLeftIcon;

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

@@ -0,0 +1,11 @@
+import { Svg, Circle, Path } from 'react-native-svg'; // Assuming you're using react-native-svg
+import React from 'react';
+
+const ChevronRightIcon = ({ width, height, color }) => (
+    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
+        <Circle cx="12" cy="12" r="12" fill="white" />
+        <Path d="M8.29289 16.2929C7.90237 16.6834 7.90237 17.3166 8.29289 17.7071C8.68342 18.0976 9.31658 18.0976 9.70711 17.7071L14.7071 12.7071C15.0976 12.3166 15.0976 11.6834 14.7071 11.2929L9.70711 6.29289C9.31658 5.90237 8.68342 5.90237 8.29289 6.29289C7.90237 6.68342 7.90237 7.31658 8.29289 7.70711L12.5858 12L8.29289 16.2929Z" fill={'black'} />
+    </Svg>
+);
+
+export default ChevronRightIcon;