@whatmore-repo/whatmore-reactnative-sdk 1.0.16 → 1.0.17

package/package.json

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

package/src/components/EventShoppingView.js

@@ -3,20 +3,25 @@ import { View } from "react-native";
 import AppVideoPlayer from './video-player/AppVideoPlayer.js'
 import { useGlobalState } from '../globals/useAppState_APP.js';
 import EventShoppingOverlay from './EventShoppingOverlay.js';
+import { useState, useEffect } from 'react';
 
 export default function EventShoppingView(props) {
     const [activeSwiperIndex, setActiveSwiperIndex] = useGlobalState('verticalSwiperViewActiveIndex');
-
+    const [isLoading, setIsLoading] = useState(true);
     var event = props.event;
     var eventIndex = props.eventIndex;
-
+    useEffect(()=>{
+        setIsLoading(true);
+    }, [activeSwiperIndex])
     return (
         <View 
             style={{
-                width: '100%', height: '100%'
+                width: '100%', height: '100%', backgroundColor: 'gray'
             }}
         >
-            <AppVideoPlayer videoUrl={event.event_hls_url} isMuted={activeSwiperIndex != eventIndex} />
+            <AppVideoPlayer videoUrl={event.event_hls_url} isMuted={activeSwiperIndex != eventIndex} 
+            isLoading={isLoading} setIsLoading={setIsLoading} 
+            />
             <View
                 style={{
                     width: '100%', height: '100%',

package/src/components/EventsVerticalSwipeView.js

@@ -5,16 +5,10 @@ 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';
-import {handleAction} from '@appmaker-xyz/react-native';
 
 export default function EventsVerticalSwipeView(props) {
     const [modalVisible, setModalVisible] = React.useState(true);
     var events = props.events;
-    function customAction(){
-        handleAction({
-            action: "OPEN_WHATMORE_SHOPPABLE"
-        })
-    }
     return (
             <Modal 
                 style={{
@@ -23,7 +17,7 @@ export default function EventsVerticalSwipeView(props) {
                     width: '100%'
                 }}
                 animationType="slide"
-                transparent={true}
+                transparent={false}
                 visible={modalVisible}
                 onRequestClose={() => {
                     setModalVisible(!modalVisible);
@@ -38,7 +32,6 @@ export default function EventsVerticalSwipeView(props) {
                     loadMinimalSize={1}
                     index={props.initialEventIndex}
                     onIndexChanged={(index) => { 
-                        customAction()
                         setGlobalState('verticalSwiperViewActiveIndex', index);
                     }}
 

package/src/components/cta-buttons/AddToCartButton.jsx

@@ -129,7 +129,7 @@ function AddToCartInitialButton(props){
                         color: 'white'
                     }}
                 >
-                     {"ADD TO CART"} 
+                     {"SHOP NOW"} 
                 </Text>
             </View>
         </TouchableOpacity>

package/src/components/cta-buttons/ShopNowButton.jsx

@@ -0,0 +1,50 @@
+import { getGlobalState } from "../../globals/useAppState_APP";
+import { Text, TouchableOpacity, View } from "react-native";
+
+function ShopNow(props){
+    const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
+    const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
+
+    const onClick = props.onClick;
+    const height = props.height;
+
+    const BOX_PADDING = 2;
+
+    return (
+        <TouchableOpacity
+            style={{
+                width: '100%',
+                height: height,
+                padding: BOX_PADDING,
+                backgroundColor: whatmorePrimaryColor
+            }}
+            onPress={(e) => {
+                e.stopPropagation();
+                onClick();
+            }}
+        >
+            <View 
+                style={{
+                    width: '100%',
+                    height: 'auto',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    paddingVertical: 5
+                }}
+            >
+                <Text
+                    style={{
+                        fontSize: 26,
+                        fontWeight: 'bold',
+                        fontFamily: whatmorePrimaryFont,
+                        color: 'white'
+                    }}
+                >
+                    &nbsp;{"SHOP NOW"}&nbsp;
+                </Text>
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+export default ShopNow

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

@@ -10,6 +10,7 @@ import AddToCartButton from '../cta-buttons/AddToCartButton.jsx';
 import * as Animatable from 'react-native-animatable';
 import { navigateToProductPage } from '../../api/navigation-commands/NavigationCommands.js';
 import {handleAction} from '@appmaker-xyz/react-native';
+import ShopNow from '../cta-buttons/ShopNowButton.jsx';
 
 export default function ProductTileV1(props) {
     const event = props.event;
@@ -191,23 +192,11 @@ export default function ProductTileV1(props) {
                     </ScrollView>
                 }
 
-                <View style={{ flexDirection: 'row', width: '100%', justifyContent: 'center', alignItems: 'center' }}>
-                    <AddToCartButton
-                        baseFontSize={BASE_FONT_SIZE * 0.3} 
-                        event={event} 
-                        product={product} 
-                        cartState={cartState['state']} 
-                        cartCount={cartState['cart_count']}
-                        onClickAtc={(e) => {
-                            if(cartState['state'] == "init"){
-                                initiateVariantSelection();
-                            } else if(cartState['state'] == "awaitingVariantSelection"){
-                                initiateAtcApiCall(selectedOptions);
-                            }
-                        }}
-                        onCartIconClick={initiateAtcCartIconClickAction}
+                <View style={{ flexDirection: 'row', width: '100%', justifyContent: 'center', alignItems: 'center'}}>
+                    <ShopNow
                         height={PRODUCT_TILE_TOTAL_HEIGHT * 0.3}
-                    />                        
+                        onClick={handleClick}
+                    />
                 </View>
             </View>            
             </Animatable.View>

package/src/components/video-player/AppVideoPlayer.js

@@ -1,26 +1,42 @@
 import * as React from 'react';
+import {View} from 'react-native';
+import { ActivityIndicator } from 'react-native';
 import { useGlobalState } from '../../globals/useAppState_APP';
 import Video from 'react-native-video';
 
 export default function AppVideoPlayer(props) {
     const video = React.useRef(null);
     const [isAppMuted] = useGlobalState("isAppMuted");
-    
+
+    const handleLoad = () => {
+        props.setIsLoading(false);
+    }
     return (
-        <Video 
-            source={{uri: props.videoUrl}}
-            ref={video}                    
-            muted={isAppMuted ? true : props.isMuted}
-            controls={false}
-            resizeMode='cover'
-            style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                bottom: 0,
-                right: 0,
-                width: '100%', height: '100%'
-            }}
-        />
+    <>
+        {props.isLoading && (
+            <View style={{ position: 'absolute',
+            top: '42%',
+            width: '100%', height: '100%'}}>
+                <ActivityIndicator size="large" color="#fff" />
+            </View>
+        )}
+            <Video 
+                source={{uri: props.videoUrl}}
+                ref={video}  
+                repeat                  
+                muted={isAppMuted ? true : props.isMuted}
+                controls={false}
+                resizeMode='cover'
+                style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    bottom: 0,
+                    right: 0,
+                    width: '100%', height: '100%'
+                }}
+                onLoad={handleLoad} // Call handleLoad when video is loaded
+            />
+    </>
     )
 }