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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whatmore-repo/whatmore-reactnative-sdk",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "",
   "private": false,
   "main": "index.js",
@@ -15,7 +15,7 @@
     "react-hooks-global-state": "^2.1.0",
     "react-native-animatable": "^1.3.3",
     "react-native-intersection-observer": "^0.0.9",
-    "react-native-swiper": "^1.6.0"
+    "react-native-snap-carousel": "^3.9.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"
@@ -23,8 +23,8 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-native": "^0.72.1",
-    "react-native-video": "^5.2.1",
-    "react-native-svg": "13.9.0"
+    "react-native-svg": "13.9.0",
+    "react-native-video": "^5.2.1"
   },
   "author": "Shyam",
   "license": "ISC"

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

@@ -3,7 +3,17 @@ import { getGlobalState } from "../../globals/useAppState_APP.js";
 import { isAppBrew, isAppMaker, isPlobalApps } from "../partners/PartnerUtils.js";
 import { appbrewNavigateToProductPageCommand } from "../partners/appbrew/AppbrewCommands.js";
 
-export async function navigateToProductPage(product, brandDomainContext, whatmoreShopId) {
+function handleClick(product, props){
+    props.setIsModalOpen(false);
+    props.onAction({
+        action: "OPEN_PRODUCT",
+        params:{
+            productId: 'gid://shopify/Product/' + product.client_product_id
+        }
+    })
+}
+
+export async function navigateToProductPage(product, brandDomainContext, whatmoreShopId, props) {
     const _ACTIVATE_MOCK_ = getGlobalState("activateMock");
     if (_ACTIVATE_MOCK_) {
         return Promise.resolve(true);
@@ -13,5 +23,9 @@ export async function navigateToProductPage(product, brandDomainContext, whatmor
         return await appbrewNavigateToProductPageCommand(product, whatmoreShopId);
     }
 
+    if(isAppMaker(brandDomainContext)){
+        return handleClick(product, props);
+    }
+
     return Promise.resolve(false);
 }

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { Text, TouchableOpacity, View, StyleSheet, SafeAreaView, Dimensions } from "react-native";
+import { getGlobalState } from '../../globals/useAppState_APP';
+import Video from 'react-native-video';
+import { useState, useEffect } from 'react';
+import Carousel from 'react-native-snap-carousel'
+
+
+export default function EventTileWithProduct(props) {
+
+    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({
+        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%',
+        }}>
+            <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/components/cta-buttons/ShopNowButton.jsx

@@ -5,23 +5,23 @@ function ShopNow(props){
     const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
     const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
 
-    const onClick = props.onClick;
+    // const onClick = props.onClick;
     const height = props.height;
 
     const BOX_PADDING = 2;
 
     return (
-        <TouchableOpacity
+        <View
             style={{
                 width: '100%',
                 height: height,
                 padding: BOX_PADDING,
                 backgroundColor: whatmorePrimaryColor
             }}
-            onPress={(e) => {
-                e.stopPropagation();
-                onClick();
-            }}
+            // onPress={(e) => {
+            //     e.stopPropagation();
+            //     // onClick();
+            // }}
         >
             <View 
                 style={{
@@ -43,7 +43,7 @@ function ShopNow(props){
                     &nbsp;{"SHOP NOW"}&nbsp;
                 </Text>
             </View>
-        </TouchableOpacity>
+        </View>
     );
 }
 

package/src/components/product-tiles/ProductTileV1.js

@@ -7,12 +7,15 @@ import { View, Dimensions, TouchableWithoutFeedback } from 'react-native';
 import useAddToCartStates from '../../hooks/useAddToCartStates.js';
 import * as Animatable from 'react-native-animatable';
 import ShopNow from '../cta-buttons/ShopNowButton.jsx';
+import { navigateToProductPage } from '../../api/navigation-commands/NavigationCommands.js';
 
 export default function ProductTileV1(props) {
     const event = props.event;
     const product = props.product;
     const [tileTapAnimate, setTileTapAnimate] = useState(false);
     const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
+    const brandDomainContext = getGlobalState('brandDomainContext');
+    const whatmoreShopId = getGlobalState('whatmoreShopId');
     const PRODUCT_TILE_TOTAL_HEIGHT = Dimensions.get('window').height * 0.2;
     const BASE_FONT_SIZE = 20;
 
@@ -24,23 +27,11 @@ export default function ProductTileV1(props) {
         }
     }, [tileTapAnimate]);
 
-
-    function handleClick(){
-       console.log('click')
-       props.setModalVisible(false);
-       props.onAction({
-            action: "OPEN_PRODUCT",
-            params:{
-                productId: 'gid://shopify/Product/' + product.client_product_id
-            }
-        })
-    }
     return (
         <TouchableWithoutFeedback
             onPress={() => {
                 setTileTapAnimate(true);
-                // navigateToProductPage(product, brandDomainContext, whatmoreShopId);
-                handleClick();
+                navigateToProductPage(product, brandDomainContext, whatmoreShopId, props);
             }}
         >
             <Animatable.View
@@ -139,7 +130,6 @@ export default function ProductTileV1(props) {
                 <View style={{ flexDirection: 'row', width: '100%', justifyContent: 'center', alignItems: 'center'}}>
                     <ShopNow
                         height={PRODUCT_TILE_TOTAL_HEIGHT * 0.3}
-                        onClick={handleClick}
                         fontSize={BASE_FONT_SIZE*1.1}
                     />
                 </View>

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;