@whatmore-repo/whatmore-reactnative-sdk 1.0.30 → 1.0.31

package/index.js

@@ -12,6 +12,7 @@ export function WhatmoreBase(props){
         setGlobalState('template', props.template);
         setGlobalState('modalUsed', props.modalUsed);
         setGlobalState('activateMock', props.activateMock);
+        setGlobalState('customStyles', props.customStyles);
     }, []);
     
     // return (
@@ -24,7 +25,7 @@ export function WhatmoreBase(props){
     // );
 
     return (
-      <WhatmoreRootComponent shopId={props.shopId} onAction={props.onAction} customStyles={props.customStyles} />
+      <WhatmoreRootComponent shopId={props.shopId} onAction={props.onAction} />
     );
 }
 

package/package.json

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

package/src/components/WhatmoreRootComponent.js

@@ -2,7 +2,7 @@ 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';
-
+// import EventTileWithProduct from './carousel-view/EventTileWithProduct.js';
 const EventTileWithProduct = lazy(() => import('./carousel-view/EventTileWithProduct.js'));
 const EventClickComponent = lazy(() => import('./EventClickComponent'));
 

package/src/components/carousel-view/EventTileWithProduct.js

@@ -5,20 +5,24 @@ import { useState, useRef } from 'react';
 import ChevronRightIcon from '../../icons/icon-components/ChevronRight';
 import ChevronLeftIcon from '../../icons/icon-components/ChevronLeft';
 import { getGlobalState } from '../../globals/useAppState_APP';
+import { getPriceStringWithCurrency } from '../../utils/PriceUtils';
 
 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 customStyles= getGlobalState('customStyles');
     const ITEM_WIDTH = width * 0.33;
-    const CARD_HEIGHT = 40*(customStyles?.videoTileSize ?? 5);
+    const CARD_HEIGHT = 40 * (customStyles?.videoTileSize ?? 5.5);
+    const safeAreaViewHeight = customStyles?.showProductDetails ? 100 : 50;
+    const brandThemeColor = customStyles?.brandThemeColor;
+    // const brandThemeFont =  customStyles?.brandThemeFont;
 
     const styles = StyleSheet.create({
         container: {
             position: 'relative',
             width: '100%',
-            height: CARD_HEIGHT + 50,
+            height: CARD_HEIGHT + safeAreaViewHeight,
         },
         arrowContainerRight: {
             position: 'absolute',
@@ -34,7 +38,7 @@ export default function EventTileWithProduct(props) {
             top: '50%',
             transform: [{ translateY: -30 }],
             width: 28,
-            height: 28, 
+            height: 28,
             marginHorizontal: 5,
         }
     });
@@ -43,7 +47,7 @@ export default function EventTileWithProduct(props) {
         setInitialEventIndex(index);
         setIsModalOpen(true);
     };
-    
+
     const { events, isModalOpen, setInitialEventIndex, setIsModalOpen } = props;
     // const [pausedVideos, setPausedVideos] = useState({});
     // const handleVideoLoad = (index) => {
@@ -64,7 +68,7 @@ export default function EventTileWithProduct(props) {
 
     const scrollRight = () => {
         setRenderedEvents(prev => prev + 2);
-        if (activeIndex < events.length - 1) {
+        if (activeIndex < events.length - 2) {
             const newIndex = activeIndex + 2;
             flatListRef.current.scrollToIndex({ index: newIndex, animated: true });
             setActiveIndex(newIndex);
@@ -81,29 +85,72 @@ export default function EventTileWithProduct(props) {
     //     }
     // },[])
     const renderItem = ({ item, index }) => {
+        const price = Math.round(+item.products?.[0]?.price);
+        const compare_price = Math.round(+item.products?.[0]?.compare_price);
+        const calculatedDiscount = (compare_price && compare_price != 0 && compare_price > price) ? Math.round(((compare_price - price) / compare_price) * 100) : NaN;
         return (
-            <TouchableOpacity onPress={() => handleClick(index)} key={index}>
-                    <Video
-                        ref={videoRef}
-                        source={{ uri: item?.thumbnail_image }}
-                        controls={false}
-                        repeat
-                        muted
-                        resizeMode={"cover"}
-                        // paused={index !== activeIndex}
-                        // onLoad={() => handleVideoLoad(index)}
+            <TouchableOpacity style={{ height: CARD_HEIGHT, top: 20, width: ITEM_WIDTH, marginHorizontal: 3 * (customStyles?.videoTileSpacing ?? 3), }} onPress={() => handleClick(index)} key={index}>
+                <Video
+                    ref={videoRef}
+                    source={{ uri: item?.thumbnail_image }}
+                    controls={false}
+                    repeat
+                    muted
+                    resizeMode={"cover"}
+                    // paused={index !== activeIndex}
+                    // onLoad={() => handleVideoLoad(index)}
+
+                    style={{
+                        aspectRatio: 0.5625,
+                        borderRadius: 10,
+                        width: ITEM_WIDTH,
+                        height: CARD_HEIGHT
+                    }}
+                />
+                {(customStyles?.showProductDetails) && 
+                <View style={{ display: 'flex', paddingTop: 10, gap: 4 }}>
+                    <Text
+                        style={{ fontSize: 9, paddingRight: 4 }}
+                        numberOfLines={1}
+                        ellipsizeMode="tail">
+                            {item?.products?.[0]?.title}
+                    </Text>
+                    <View style={{ display: 'flex', flexDirection: 'row', gap: 6 }}>
+                        <Text
+                            style={{ fontSize: 9, fontWeight: 'bold' }}
+                            numberOfLines={1}
+                            ellipsizeMode="tail">
+                                {getPriceStringWithCurrency(price, " ", item.products?.[0]?.currency)}
+                        </Text>
+                        {!isNaN(compare_price) && compare_price > price &&
+                            <Text
+                                style={{ fontSize: 9, textDecorationLine: 'line-through', color: '#808191' }}
+                                numberOfLines={1}
+                                ellipsizeMode="tail">
+                                    {getPriceStringWithCurrency(compare_price, " ", item.products?.[0]?.currency)}
+                            </Text>
+                        }
+                    </View>
 
-                        style={{
-                            aspectRatio: 0.5625,
-                            borderRadius: 10,
-                            transform: [{ scale: 1.1 }],
-                            width: ITEM_WIDTH,
-                            height: CARD_HEIGHT,
-                            marginHorizontal: 5*(customStyles?.videoTileSpacing ?? 3),
-                            top: 20,
-                            // elevation: 1
-                        }}                    
-                    />
+                    {!isNaN(calculatedDiscount) && calculatedDiscount != 0 &&
+                        <View style={{
+                            alignSelf: 'flex-start',
+                            backgroundColor: brandThemeColor ?? 'green',
+                            alignItems: "center",
+                            borderRadius: 3,
+                            paddingVertical: 2.5,
+                            paddingHorizontal: 4
+                        }}>
+                            <Text style={{
+                                fontSize: 9,
+                                color: 'white',
+                                width: "fit-content",
+
+                            }}>
+                                {`${calculatedDiscount}% Off`}
+                            </Text>
+                        </View>}
+                </View>}
             </TouchableOpacity>
         );
     };
@@ -133,13 +180,13 @@ export default function EventTileWithProduct(props) {
     );
 }
 
-    // const handleScroll = (event) => {
-    //     const offsetX = event.nativeEvent.contentOffset.x;
-    //     const index = Math.round((offsetX + ITEM_WIDTH)/ ITEM_WIDTH);
-    //     setRenderedEvents(prev => prev + 1)
-    //     setActiveIndex(index);
-    // };
+// const handleScroll = (event) => {
+//     const offsetX = event.nativeEvent.contentOffset.x;
+//     const index = Math.round((offsetX + ITEM_WIDTH)/ ITEM_WIDTH);
+//     setRenderedEvents(prev => prev + 1)
+//     setActiveIndex(index);
+// };
 
 
 
-    // "react-native-video": "github:freeboub/react-native-video#chore/fixAppBoot"
+// "react-native-video": "github:freeboub/react-native-video#chore/fixAppBoot"

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

@@ -4,7 +4,7 @@ import { Text, TouchableOpacity, View } from "react-native";
 function ShopNow(props){
     const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
     const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
-
+    const customStyles= getGlobalState('customStyles');
     // const onClick = props.onClick;
     const height = props.height;
 
@@ -16,7 +16,7 @@ function ShopNow(props){
                 width: '100%',
                 height: height,
                 padding: BOX_PADDING,
-                backgroundColor: whatmorePrimaryColor
+                backgroundColor: customStyles?.brandThemeColor ?? whatmorePrimaryColor
             }}
             // onPress={(e) => {
             //     e.stopPropagation();

package/src/globals/useAppState_APP.js

@@ -14,5 +14,6 @@ export const { GlobalStateProvider, useGlobalState, getGlobalState, setGlobalSta
     commandsObject: {},
     template: 'template-swipe-a',
     modalUsed: true,
-    activateMock: false
+    activateMock: false,
+    customStyles: {}
 });

package/src/utils/PriceUtils.js

@@ -24,5 +24,5 @@ export function getPriceStringWithCurrency(price, spaceString = "", currencyCode
         return "";
     }
 
-    return getSymbolFromCurrency(currencyCode) + spaceString + priceWithCommas(roundedPrice(price));
+    return getSymbolFromCurrency(currencyCode ?? "INR") + spaceString + priceWithCommas(roundedPrice(price));
 }