@whatmore-repo/whatmore-reactnative-sdk 1.0.27 → 1.0.29

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.27",
+  "version": "1.0.29",
   "description": "",
   "private": false,
   "main": "index.js",

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

@@ -13,7 +13,7 @@ function handleClick(product, props){
     })
 }
 
-export async function navigateToProductPage(product, brandDomainContext, whatmoreShopId, props) {
+export async function navigateToProductPage(product, brandDomainContext, whatmoreShopId, props, navigation) {
     const _ACTIVATE_MOCK_ = getGlobalState("activateMock");
     if (_ACTIVATE_MOCK_) {
         return Promise.resolve(true);
@@ -26,6 +26,14 @@ export async function navigateToProductPage(product, brandDomainContext, whatmor
     if(isAppMaker(brandDomainContext)){
         return handleClick(product, props);
     }
-
+    else {
+        const parts = product?.product_link?.split('/');
+        const sku = parts?.[parts?.length - 1];
+        navigation.navigate(
+            'ProductDetail',
+            {url: sku}
+        )
+        props.setIsModalOpen(false);
+    }
     return Promise.resolve(false);
 }

package/src/components/WhatmoreRootComponent.js

@@ -89,7 +89,7 @@ export default function WhatmoreRootComponent(props) {
 
     return (
         <>   
-            {isInstaReelView.includes(brandId) && <EventTileWithProduct isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} events={data} setInitialEventIndex={setInitialEventIndex} />}
+            {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

@@ -10,18 +10,20 @@ 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,
+            height: CARD_HEIGHT + 50,
         },
         arrowContainerRight: {
             position: 'absolute',
-            top: 90,
+            top: '50%',
+            transform: [{ translateY: -30 }],
             right: 0,
             width: 28,
             height: 28,
@@ -29,7 +31,8 @@ export default function EventTileWithProduct(props) {
         },
         arrowContainerLeft: {
             position: 'absolute',
-            top: 90,
+            top: '50%',
+            transform: [{ translateY: -30 }],
             width: 28,
             height: 28, 
             marginHorizontal: 5,
@@ -40,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) => {
@@ -96,7 +99,7 @@ export default function EventTileWithProduct(props) {
                             transform: [{ scale: 1.1 }],
                             width: ITEM_WIDTH,
                             height: CARD_HEIGHT,
-                            marginHorizontal: 8,
+                            marginHorizontal: 5*(customStyles?.videoTileSpacing ?? 3),
                             top: 20,
                             // elevation: 1
                         }}                    
@@ -110,7 +113,6 @@ export default function EventTileWithProduct(props) {
         <SafeAreaView style={styles.container}>
             <Animated.FlatList
                 horizontal
-                style={{paddingLeft: 10}}
                 data={events.slice(0,renderedEvents)}
                 renderItem={renderItem}
                 contentInsetAdjustmentBehavior="never"
@@ -124,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>

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

@@ -8,8 +8,10 @@ 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';
+import { useNavigation } from '@react-navigation/native';
 
 export default function ProductTileV1(props) {
+    const navigation = useNavigation();
     const event = props.event;
     const product = props.product;
     const [tileTapAnimate, setTileTapAnimate] = useState(false);
@@ -31,7 +33,7 @@ export default function ProductTileV1(props) {
         <TouchableWithoutFeedback
             onPress={() => {
                 setTileTapAnimate(true);
-                navigateToProductPage(product, brandDomainContext, whatmoreShopId, props);
+                navigateToProductPage(product, brandDomainContext, whatmoreShopId, props, navigation);
             }}
         >
             <Animatable.View