@whatmore-repo/whatmore-reactnative-sdk 1.0.10 → 1.0.12

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

@@ -1,52 +1,52 @@
-import * as React from 'react';
-import { useGlobalState } from '../../globals/useAppState_APP.js';
-import { Text, View } from 'react-native';
-import { getPriceStringWithCurrency } from '../../utils/PriceUtils.js';
-
-export default function ProductPriceBadge(props) {
-    const event = props.event;
-    const product = props.product;
-    const fontSize = props.fontSize;
-    const color = props.color;
-
-    return (
-        <View
-            style={{
-                width: 'auto', height: 'auto',
-                backgroundColor: '#00000022',
-                flexDirection: 'row', 
-                justifyContent: 'space-between', alignItems: 'center',
-                borderRadius: 20, overflow: 'hidden',
-                paddingLeft: 10, paddingRight: 10, paddingTop: 5, paddingBottom: 5
-            }}
-        >
-            <Text
-                numberOfLines={1} 
-                style={{
-                    fontWeight: 'bold',
-                    fontSize: fontSize,
-                    color: color
-                }}
-            >
-                {getPriceStringWithCurrency(product.price)}
-            </Text>
-            <Text
-                numberOfLines={1} 
-            >
-                {'    '}
-            </Text>
-            <Text
-                numberOfLines={1} 
-                style={{
-                    fontWeight: 'normal',
-                    textDecorationLine: 'line-through',
-                    fontSize: fontSize
-                }}
-            >
-                {getPriceStringWithCurrency(product.compare_price)}
-            </Text>
-            
-        </View>
-    );
-                                    
+import * as React from 'react';
+import { useGlobalState } from '../../globals/useAppState_APP.js';
+import { Text, View } from 'react-native';
+import { getPriceStringWithCurrency } from '../../utils/PriceUtils.js';
+
+export default function ProductPriceBadge(props) {
+    const event = props.event;
+    const product = props.product;
+    const fontSize = props.fontSize;
+    const color = props.color;
+
+    return (
+        <View
+            style={{
+                width: 'auto', height: 'auto',
+                backgroundColor: '#00000022',
+                flexDirection: 'row', 
+                justifyContent: 'space-between', alignItems: 'center',
+                borderRadius: 20, overflow: 'hidden',
+                paddingLeft: 10, paddingRight: 10, paddingTop: 5, paddingBottom: 5
+            }}
+        >
+            <Text
+                numberOfLines={1} 
+                style={{
+                    fontWeight: 'bold',
+                    fontSize: fontSize,
+                    color: color
+                }}
+            >
+                {getPriceStringWithCurrency(product.price)}
+            </Text>
+            <Text
+                numberOfLines={1} 
+            >
+                {'    '}
+            </Text>
+            <Text
+                numberOfLines={1} 
+                style={{
+                    fontWeight: 'normal',
+                    textDecorationLine: 'line-through',
+                    fontSize: fontSize
+                }}
+            >
+                {getPriceStringWithCurrency(product.compare_price)}
+            </Text>
+            
+        </View>
+    );
+                                    
 }

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

@@ -1,205 +1,205 @@
-import { getGlobalState, setGlobalState, useGlobalState } 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 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';
-
-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(() => {
-        if(tileTapAnimate){
-            setTimeout(() => {
-                setTileTapAnimate(false);
-            }, 1000);
-        }
-    }, [tileTapAnimate]);
-
-    function _updateSelectedOptions(_selectedOptions){
-        setSelectedOptions(_selectedOptions);
-
-        // set price to selected option
-        const optionPriceDetails = getPriceDetailsFromSelectedOption(_selectedOptions);
-
-        if(optionPriceDetails){
-            setProductVariantPrice(optionPriceDetails['price']);
-            setProductVariantComparePrice(optionPriceDetails['compare_price']);
-        }
-    }
-
-
-    return (
-        <TouchableWithoutFeedback
-            onPress={() => {
-                setTileTapAnimate(true);
-                navigateToProductPage(product, brandDomainContext, whatmoreShopId);
-            }}
-        >
-            <Animatable.View
-                animation={
-                    tileTapAnimate 
-                    ? 
-                        {
-                            0: {
-                                scale: 1
-                            },
-                            0.5: {
-                                scale: 0.9
-                            },
-                            1: {
-                                scale: 1
-                            }
-                        }
-                    : 
-                        null
-                }
-                duration={100} iterationCount={1}
-                easing="ease-out"
-                style={{
-                    width: '100%', height: 'auto',
-                    flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center',
-                    overflow: 'hidden',
-                    borderRadius: 5, overflow: 'hidden',
-                    shadowColor: 'black', shadowOpacity: 1, shadowOffset: {width: 0, height: 0},
-                    shadowRadius: 20, elevation: 10
-                }}
-            >
-            <View
-                style={{
-                    width: '100%', height: 'auto',
-                    backgroundColor: '#ffffffdd',
-                    flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'
-                }}
-            >
-                <Image
-                    style={{
-                        width: 120, height: 120
-                    }}
-                    source={{
-                        uri: product.thumbnail_image,
-                    }}
-                >
-
-                </Image>
-                <View
-                    style={{
-                        width: 'auto', height: 'auto',
-                        flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start',
-                        paddingLeft: 10, paddingRight: 10
-                    }}
-                >
-                    <Text
-                        numberOfLines={2} 
-                        ellipsizeMode='tail'
-                        style={{
-                            fontWeight: 'normal',
-                            fontFamily: whatmorePrimaryFont,
-                            fontSize: BASE_FONT_SIZE * 1,
-                            color: 'black'  
-                        }}
-                    >
-                    {product.title.toString()}
-                    </Text>
-                    
-                    <View
-                        style={{
-                            height: 10, width: 'auto'
-                        }}
-                    ></View>
-
-                    <ProductPriceBadge product={product} event={event} fontSize={BASE_FONT_SIZE * 1} color={'black'} /> 
-                    {/* <Text>
-                        {product.price.toString()}
-                    </Text> */}
-                </View>
-
-
-            </View>
-
-            <View 
-                style={{
-                    width: '100%', height: 'auto',
-                    backgroundColor: '#ffffffdd',
-                    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}
-                        height={PRODUCT_TILE_TOTAL_HEIGHT * 0.3}
-                    />                        
-                </View>
-            </View>            
-            </Animatable.View>
-        </TouchableWithoutFeedback>
-    );
-                                    
+import { getGlobalState, setGlobalState, useGlobalState } 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 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';
+
+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(() => {
+        if(tileTapAnimate){
+            setTimeout(() => {
+                setTileTapAnimate(false);
+            }, 1000);
+        }
+    }, [tileTapAnimate]);
+
+    function _updateSelectedOptions(_selectedOptions){
+        setSelectedOptions(_selectedOptions);
+
+        // set price to selected option
+        const optionPriceDetails = getPriceDetailsFromSelectedOption(_selectedOptions);
+
+        if(optionPriceDetails){
+            setProductVariantPrice(optionPriceDetails['price']);
+            setProductVariantComparePrice(optionPriceDetails['compare_price']);
+        }
+    }
+
+
+    return (
+        <TouchableWithoutFeedback
+            onPress={() => {
+                setTileTapAnimate(true);
+                navigateToProductPage(product, brandDomainContext, whatmoreShopId);
+            }}
+        >
+            <Animatable.View
+                animation={
+                    tileTapAnimate 
+                    ? 
+                        {
+                            0: {
+                                scale: 1
+                            },
+                            0.5: {
+                                scale: 0.9
+                            },
+                            1: {
+                                scale: 1
+                            }
+                        }
+                    : 
+                        null
+                }
+                duration={100} iterationCount={1}
+                easing="ease-out"
+                style={{
+                    width: '100%', height: 'auto',
+                    flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center',
+                    overflow: 'hidden',
+                    borderRadius: 5, overflow: 'hidden',
+                    shadowColor: 'black', shadowOpacity: 1, shadowOffset: {width: 0, height: 0},
+                    shadowRadius: 20, elevation: 10
+                }}
+            >
+            <View
+                style={{
+                    width: '100%', height: 'auto',
+                    backgroundColor: '#ffffffdd',
+                    flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center'
+                }}
+            >
+                <Image
+                    style={{
+                        width: 120, height: 120
+                    }}
+                    source={{
+                        uri: product.thumbnail_image,
+                    }}
+                >
+
+                </Image>
+                <View
+                    style={{
+                        width: 'auto', height: 'auto',
+                        flexDirection: 'column', justifyContent: 'space-between', alignItems: 'flex-start',
+                        paddingLeft: 10, paddingRight: 10
+                    }}
+                >
+                    <Text
+                        numberOfLines={2} 
+                        ellipsizeMode='tail'
+                        style={{
+                            fontWeight: 'normal',
+                            fontFamily: whatmorePrimaryFont,
+                            fontSize: BASE_FONT_SIZE * 1,
+                            color: 'black'  
+                        }}
+                    >
+                    {product.title.toString()}
+                    </Text>
+                    
+                    <View
+                        style={{
+                            height: 10, width: 'auto'
+                        }}
+                    ></View>
+
+                    <ProductPriceBadge product={product} event={event} fontSize={BASE_FONT_SIZE * 1} color={'black'} /> 
+                    {/* <Text>
+                        {product.price.toString()}
+                    </Text> */}
+                </View>
+
+
+            </View>
+
+            <View 
+                style={{
+                    width: '100%', height: 'auto',
+                    backgroundColor: '#ffffffdd',
+                    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}
+                        height={PRODUCT_TILE_TOTAL_HEIGHT * 0.3}
+                    />                        
+                </View>
+            </View>            
+            </Animatable.View>
+        </TouchableWithoutFeedback>
+    );
+                                    
 }