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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whatmore-repo/whatmore-reactnative-sdk",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "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.setModalVisible(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/carousel-view/EventTileWithProduct.js

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { Text, TouchableOpacity, View, StyleSheet, Image, SafeAreaView, FlatList, Dimensions } from "react-native";
+import { getGlobalState } from '../../globals/useAppState_APP';
+import Swiper from 'react-native-swiper';
+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 { width } = Dimensions.get('window');
+    const isCarousel = React.useRef(null)
+    const SLIDER_WIDTH = Dimensions.get('window').width + 80
+    const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.7)
+
+    function handleClick(props, index){
+        console.log('hello', index)
+        props.setInitialEventIndex(index);
+        props.setIsModalOpen(true);
+    }
+    return (
+        <SafeAreaView style={{
+            width: '100%',
+            height: '100%'
+        }}>
+              <View>
+      <Carousel
+        layout="tinder"
+        layoutCardOffset={9}
+        ref={isCarousel}
+        // data={data}
+        // renderItem={CarouselCardItem}
+        sliderWidth={SLIDER_WIDTH}
+        itemWidth={ITEM_WIDTH}
+        inactiveSlideShift={0}
+        useScrollView={true}
+      />
+    </View>
+            {/* <View
+                style={{
+                    flex: 1,
+                    height: '100%',
+                    width: '100%'
+                }}
+            >
+    <FlatList
+      data={events}
+      horizontal
+      keyExtractor={(item, index) => index.toString()}
+      renderItem={({ item, index }) => (
+        <TouchableOpacity onPress={()=>handleClick(props, index)} style={{ width: width / 2.5, height: width / 2 }}>
+          <Video 
+            source={{ uri: item.thumbnail_image }}    
+            style={{ width: '100%', height: '100%' }}
+            controls={false}
+            muted
+            repeat
+          />
+        </TouchableOpacity>
+      )}
+    /> */}
+                {/* <Swiper horizontal={true}
+                    style={{}}
+
+                    loop={true}
+                    showsPagination={false}
+                    loadMinimal={true}
+                    loadMinimalSize={1}
+                >
+                    {
+                        events.map((event, index) => {
+                            // console.log(event.thumbnail_image,'p')
+                            return (
+                            <View 
+                                key={index}
+                                style={{
+                                    width: '100%', height: '100%', backgroundColor: 'gray'
+                                }}
+                            >                                    
+                                <Video source = {{uri: event.thumbnail_image}}    
+                                    style={{
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        bottom: 0,
+                                        right: 0,
+                                        width: '100%', height: '100%'
+                                     }}
+                                />
+
+                            </View>
+                            )
+                        })
+                    }
+                </Swiper> */}
+            {/* </View> */}
+        </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/ProductPriceBadge.js

@@ -28,7 +28,7 @@ export default function ProductPriceBadge(props) {
                     color: color
                 }}
             >
-                {getPriceStringWithCurrency(product.price)}
+                {getPriceStringWithCurrency(product.price, "",product.currency ?? "INR")}
             </Text>
             <Text
                 numberOfLines={1} 
@@ -43,7 +43,7 @@ export default function ProductPriceBadge(props) {
                     fontSize: fontSize
                 }}
             >
-                {getPriceStringWithCurrency(product.compare_price)}
+                {getPriceStringWithCurrency(product.compare_price, "", product.currency ?? "INR")}
             </Text>
             
         </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/7600010723466'
-            }
-        })
-    }
     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/utils/PriceUtils.js

@@ -13,7 +13,7 @@ function roundedPrice(price){
         if(priceAsString.split('.')[0].length >= 4){
             return parseInt(price);
         }
-        return price.toFixed(2);
+        return parseFloat(price)?.toFixed(2);
     }
 
     return parseInt(price);