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

package/index.js

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

package/package.json

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

package/src/components/EventClickComponent.js

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

package/src/components/EventShoppingOverlay.js

@@ -60,7 +60,7 @@ export default function EventShoppingOverlay(props) {
                     {
                         event.products.map((product, index) => {
                             return (
-                                index == 0 && <ProductTileV1 key={index} event={event} product={product} />
+                               index == 0 && <ProductTileV1 key={index} setModalVisible={props.setModalVisible} onAction={props.onAction} event={event} product={product} />
                             );
                         })
                     }

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

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);
                     }}
 
@@ -55,7 +48,7 @@ export default function EventsVerticalSwipeView(props) {
                                         backgroundColor: 'transparent'
                                     }}
                                 >
-                                    <EventShoppingView event={event} eventIndex={eventIndex}  />
+                                    <EventShoppingView setModalVisible={setModalVisible} onAction={props.onAction} event={event} eventIndex={eventIndex}  />
                                 </View> 
                             )
                         })

package/src/components/WhatmoreRootComponent.js

@@ -84,6 +84,6 @@ export default function WhatmoreRootComponent(props) {
     logEventData && console.log("valid events size : " + data.length);
 
     return (
-        <EventClickComponent events={data} initialEventIndex={0} /> 
+        <EventClickComponent events={data} initialEventIndex={0} onAction={props.onAction} /> 
       );
 }

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: '100%',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    // paddingVertical: 5
+                }}
+            >
+                <Text
+                    style={{
+                        fontSize: props.fontSize,
+                        fontWeight: 'bold',
+                        fontFamily: whatmorePrimaryFont,
+                        color: 'white'
+                    }}
+                >
+                    &nbsp;{"SHOP NOW"}&nbsp;
+                </Text>
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+export default ShopNow

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

@@ -1,35 +1,19 @@
-import { getGlobalState, setGlobalState, useGlobalState } from '../../globals/useAppState_APP.js';
+import { getGlobalState } from '../../globals/useAppState_APP.js';
 import { Image, Text} from 'react-native';
 import ProductPriceBadge from './ProductPriceBadge.js';
 
-import React, { useEffect, useRef, useState } from 'react';
-import { View, TouchableOpacity, ScrollView, Dimensions, TouchableWithoutFeedback } from 'react-native';
-import SelectVariantComponent from './SelectVariantComponent';
+import React, { useEffect, useState } from 'react';
+import { View, Dimensions, TouchableWithoutFeedback } from 'react-native';
 import useAddToCartStates from '../../hooks/useAddToCartStates.js';
-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;
     const product = props.product;
-
-    const [cartState, productVariantOptions, initiateVariantSelection, initiateAtcApiCall, getPriceDetailsFromSelectedOption, initiateAtcCartIconClickAction] = useAddToCartStates(0, product, props.event);
-    const [selectedOptions, setSelectedOptions] = useState(null);
     const [tileTapAnimate, setTileTapAnimate] = useState(false);
-
-    const [productVariantPrice, setProductVariantPrice] = useState(parseFloat(product.price));
-    const [productVariantComparePrice, setProductVariantComparePrice] = useState(parseFloat(product.compare_price));
-
-    const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
     const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
-
-    const brandDomainContext = getGlobalState('brandDomainContext');
-    const whatmoreShopId = getGlobalState('whatmoreShopId');
-
     const PRODUCT_TILE_TOTAL_HEIGHT = Dimensions.get('window').height * 0.2;
-    const SELECT_VARIANT_TILE_HEIGHT_FACTOR = 3.0;
     const BASE_FONT_SIZE = 20;
 
     useEffect(() => {
@@ -40,22 +24,14 @@ export default function ProductTileV1(props) {
         }
     }, [tileTapAnimate]);
 
-    function _updateSelectedOptions(_selectedOptions){
-        setSelectedOptions(_selectedOptions);
-
-        // set price to selected option
-        const optionPriceDetails = getPriceDetailsFromSelectedOption(_selectedOptions);
 
-        if(optionPriceDetails){
-            setProductVariantPrice(optionPriceDetails['price']);
-            setProductVariantComparePrice(optionPriceDetails['compare_price']);
-        }
-    }
     function handleClick(){
-        handleAction({
+       console.log('click')
+       props.setModalVisible(false);
+       props.onAction({
             action: "OPEN_PRODUCT",
             params:{
-                productId: 'gid://shopify/Product/' + product.client_product_id
+                productId: 'gid://shopify/Product/7600010723466'
             }
         })
     }
@@ -63,7 +39,7 @@ export default function ProductTileV1(props) {
         <TouchableWithoutFeedback
             onPress={() => {
                 setTileTapAnimate(true);
-                navigateToProductPage(product, brandDomainContext, whatmoreShopId);
+                // navigateToProductPage(product, brandDomainContext, whatmoreShopId);
                 handleClick();
             }}
         >
@@ -88,7 +64,9 @@ export default function ProductTileV1(props) {
                 duration={100} iterationCount={1}
                 easing="ease-out"
                 style={{
-                    width: '100%', height: 'auto',
+                    width: '90%', // Adjust width as needed, e.g., '80%'
+                    alignSelf: 'center', 
+                     height: 'auto',
                     flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center',
                     borderRadius: 5, overflow: 'hidden',
                     shadowColor: 'black', shadowOpacity: 1, shadowOffset: {width: 0, height: 0},
@@ -128,7 +106,7 @@ export default function ProductTileV1(props) {
                             
                             fontWeight: 'normal',
                             fontFamily: whatmorePrimaryFont,
-                            fontSize: BASE_FONT_SIZE * 1,
+                            fontSize: BASE_FONT_SIZE * 0.9,
                             color: 'black',
                             overflow: 'hidden',
                             
@@ -143,10 +121,7 @@ export default function ProductTileV1(props) {
                         }}
                     ></View>
 
-                    <ProductPriceBadge product={product} event={event} fontSize={BASE_FONT_SIZE * 1} color={'black'} /> 
-                    {/* <Text>
-                        {product.price.toString()}
-                    </Text> */}
+                    <ProductPriceBadge product={product} event={event} fontSize={BASE_FONT_SIZE * 0.9} color={'black'} /> 
                 </View>
 
 
@@ -155,59 +130,18 @@ export default function ProductTileV1(props) {
             <View 
                 style={{
                     width: '100%', height: 'auto',
-                    backgroundColor: '#ffffffdd',
+                    backgroundColor: '#fff',
                     overflow: 'hidden'
                 }}
             
             >
-                {cartState['state'] === "awaitingVariantSelection" && productVariantOptions &&
-                    <ScrollView
-                        style={{
-                            width: '100%',
-                            height: 'auto',
-                            marginTop: 5,
-                            marginBottom: 10,
-                            maxHeight: PRODUCT_TILE_TOTAL_HEIGHT * SELECT_VARIANT_TILE_HEIGHT_FACTOR
-                        }}
-                    >
-                        <Animatable.View
-                            animation="fadeIn" 
-                            duration={500} iterationCount={1}
-                            easing="ease-in-out"
-                            style={{
-                                height: 'auto', width: '100%'
-                            }}
-                        >
-                            <SelectVariantComponent 
-                                width='100%'
-                                height='auto'
-                                event={event}
-                                product={product}
-                                productVariantOptions={productVariantOptions}
-                                baseFontSize={BASE_FONT_SIZE * 0.9}
-                                onOptionSelected={_updateSelectedOptions}
-                            />
-                        </Animatable.View>
-                    </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}
+                        fontSize={BASE_FONT_SIZE*1.1}
+                    />
                 </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}
+            />
+    </>
     )
 }