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

package/index.js

@@ -24,7 +24,7 @@ export function WhatmoreBase(props){
     // );
 
     return (
-      <WhatmoreRootComponent shopId={props.shopId} onAction={props.onAction} />
+      <WhatmoreRootComponent shopId={props.shopId} onAction={props.onAction} customStyles={props.customStyles} />
     );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whatmore-repo/whatmore-reactnative-sdk",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "",
   "private": false,
   "main": "index.js",
@@ -14,8 +14,7 @@
     "currency-symbol-map": "^5.1.0",
     "react-hooks-global-state": "^2.1.0",
     "react-native-animatable": "^1.3.3",
-    "react-native-intersection-observer": "^0.0.9",
-    "react-native-snap-carousel": "^3.9.1"
+    "react-native-intersection-observer": "^0.0.9"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

package/src/components/WhatmoreRootComponent.js

@@ -34,7 +34,8 @@ export default function WhatmoreRootComponent(props) {
     var brandId = props.shopId;
     const [data, setData] = useState();
     const [error, setError] = useState();
-    const [isModalOpen, setIsModalOpen] = useState(brandId !== '27358003275');
+    const isInstaReelView = ["27358003275", "STR60LW4WMA"];
+    const [isModalOpen, setIsModalOpen] = useState(!isInstaReelView.includes(brandId));
     const [initialEventIndex, setInitialEventIndex] = useState(0)
 
     var eventStatuses = "live,upcoming";
@@ -88,8 +89,8 @@ export default function WhatmoreRootComponent(props) {
 
     return (
         <>   
-            {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} /> }
+            {isInstaReelView.includes(brandId) && <EventTileWithProduct customStyles={props.customStyles} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} events={data} setInitialEventIndex={setInitialEventIndex} />}
+            {(isModalOpen) && <EventClickComponent isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} events={data} initialEventIndex={initialEventIndex} onAction={props.onAction} /> }
         </>
       );
 }

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

@@ -4,29 +4,26 @@ import Video from 'react-native-video';
 import { useState, useRef } from 'react';
 import ChevronRightIcon from '../../icons/icon-components/ChevronRight';
 import ChevronLeftIcon from '../../icons/icon-components/ChevronLeft';
+import { getGlobalState } from '../../globals/useAppState_APP';
 
 export default function EventTileWithProduct(props) {
     const [activeIndex, setActiveIndex] = useState(1);
     const [renderedEvents, setRenderedEvents] = useState(5)
     const { width } = Dimensions.get('window');
+    const customStyles = props.customStyles;
     const ITEM_WIDTH = width * 0.33;
-    const CARD_HEIGHT = 200;
+    const CARD_HEIGHT = 40*(customStyles?.videoTileSize ?? 5);
 
     const styles = StyleSheet.create({
         container: {
             position: 'relative',
             width: '100%',
-            height: 250,
-        },
-        cardContainer: {
-            width: ITEM_WIDTH,
-            height: CARD_HEIGHT,
-            marginHorizontal: 8,
-            top: 20,
+            height: CARD_HEIGHT + 50,
         },
         arrowContainerRight: {
             position: 'absolute',
-            top: 90,
+            top: '50%',
+            transform: [{ translateY: -30 }],
             right: 0,
             width: 28,
             height: 28,
@@ -34,7 +31,8 @@ export default function EventTileWithProduct(props) {
         },
         arrowContainerLeft: {
             position: 'absolute',
-            top: 90,
+            top: '50%',
+            transform: [{ translateY: -30 }],
             width: 28,
             height: 28, 
             marginHorizontal: 5,
@@ -45,7 +43,7 @@ export default function EventTileWithProduct(props) {
         setInitialEventIndex(index);
         setIsModalOpen(true);
     };
-
+    
     const { events, isModalOpen, setInitialEventIndex, setIsModalOpen } = props;
     // const [pausedVideos, setPausedVideos] = useState({});
     // const handleVideoLoad = (index) => {
@@ -85,7 +83,6 @@ export default function EventTileWithProduct(props) {
     const renderItem = ({ item, index }) => {
         return (
             <TouchableOpacity onPress={() => handleClick(index)} key={index}>
-                <Animated.View style={[styles.cardContainer]}>
                     <Video
                         ref={videoRef}
                         source={{ uri: item?.thumbnail_image }}
@@ -98,30 +95,29 @@ export default function EventTileWithProduct(props) {
 
                         style={{
                             aspectRatio: 0.5625,
-                            width: "100%",
-                            height: '100%',
                             borderRadius: 10,
                             transform: [{ scale: 1.1 }],
+                            width: ITEM_WIDTH,
+                            height: CARD_HEIGHT,
+                            marginHorizontal: 5*(customStyles?.videoTileSpacing ?? 3),
+                            top: 20,
                             // elevation: 1
-
                         }}                    
                     />
-                </Animated.View>
             </TouchableOpacity>
         );
     };
     const flatListRef = useRef(null);
-
+    const brandDomainContext = getGlobalState('brandDomainContext')
     return (
         <SafeAreaView style={styles.container}>
             <Animated.FlatList
                 horizontal
-                style={{paddingLeft: 10}}
                 data={events.slice(0,renderedEvents)}
                 renderItem={renderItem}
                 contentInsetAdjustmentBehavior="never"
                 decelerationRate="fast"
-                scrollEnabled={false}
+                scrollEnabled={brandDomainContext != "appmaker"}
                 automaticallyAdjustContentInsets={false}
                 showsHorizontalScrollIndicator={false}
                 scrollEventThrottle={16}
@@ -130,7 +126,7 @@ export default function EventTileWithProduct(props) {
             <TouchableOpacity style={styles.arrowContainerLeft} onPress={scrollLeft}>
                 <ChevronLeftIcon />
             </TouchableOpacity>
-                        <TouchableOpacity style={styles.arrowContainerRight} onPress={scrollRight}>
+            <TouchableOpacity style={styles.arrowContainerRight} onPress={scrollRight}>
                 <ChevronRightIcon />
             </TouchableOpacity>
         </SafeAreaView>
@@ -142,4 +138,8 @@ export default function EventTileWithProduct(props) {
     //     const index = Math.round((offsetX + ITEM_WIDTH)/ ITEM_WIDTH);
     //     setRenderedEvents(prev => prev + 1)
     //     setActiveIndex(index);
-    // };
+    // };
+
+
+
+    // "react-native-video": "github:freeboub/react-native-video#chore/fixAppBoot"