@whatmore-repo/whatmore-reactnative-sdk 1.0.8

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

@@ -0,0 +1,346 @@
+
+import { useState } from "react";
+import { getGlobalState } from "../../globals/useAppState_APP";
+import { Text, TouchableOpacity, View } from "react-native";
+import { shadeColorHex } from "../../utils/ColorUtils";
+import * as Animatable from 'react-native-animatable';
+import LoadingIcon from "../../icons/icon-components/LoadingIcon";
+import CartIcon from "../../icons/icon-components/CartIcon";
+import PlusIcon from "../../icons/icon-components/PlusIcon";
+
+function LabelledButton(props){
+    const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
+    const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
+    const whatmoreShopId = getGlobalState('whatmoreShopId');
+
+    const event = props.event;
+    const product = props.product;
+    const BASE_FONT_SIZE = props.baseFontSize ?? 10;
+    const onClick = props.onClick;
+    const width = props.width;
+    const height = props.height;
+    const title = props.title;
+    const showInProgressIcon = props.showInProgressIcon;
+
+    const BOX_PADDING = 2;
+
+    return (            
+        <TouchableOpacity 
+            style={{
+                width: width, height: height,
+                padding: BOX_PADDING,
+                backgroundColor: (showInProgressIcon ? shadeColorHex(whatmorePrimaryColor, 8) : whatmorePrimaryColor)
+            }}
+            onPress={(e)=>{
+                e.stopPropagation();
+                onClick();
+            }}
+        >
+            <View 
+                style={{
+                    width: '100%', height: height,
+                    flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
+                    paddingVertical: 4
+                }}
+            >   
+                    {
+                        title
+                        ?
+                            <Text
+                                style={{
+                                    fontSize: BASE_FONT_SIZE * 4,
+                                    fontFamily: whatmorePrimaryFont,
+                                    fontWeight: 'bold',
+                                    color: 'white'
+                                }}
+                            >
+                                &nbsp;{title}&nbsp;
+                            </Text>
+                        :
+                            <></>
+                    }
+                    {
+                        showInProgressIcon
+                        ?
+                            <Animatable.View
+                                animation="rotate" 
+                                duration={400} iterationCount={'infinite'}
+                                easing="linear"
+                                style={{
+                                    height: 'auto', width: 'auto'
+                                }}
+                            >
+                                <LoadingIcon 
+                                    color={"#F5F5F5"} 
+                                    size={BASE_FONT_SIZE * 8} 
+                                />
+                            </Animatable.View>
+                        :
+                            <></>
+                    }                    
+            </View>
+        </TouchableOpacity>  
+    );
+}
+
+
+
+function AddToCartInitialButton(props){
+    const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
+    const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
+    const whatmoreShopId = getGlobalState('whatmoreShopId');
+
+    const event = props.event;
+    const product = props.product;
+    const BASE_FONT_SIZE = props.baseFontSize ?? 10;
+    const onClick = props.onClick;
+    const width = props.width;
+    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: 'auto',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    paddingVertical: 5
+                }}
+            >
+                <Text
+                    style={{
+                        fontSize: 26,
+                        fontWeight: 'bold',
+                        fontFamily: whatmorePrimaryFont,
+                        color: 'white'
+                    }}
+                >
+                    &nbsp;{"ADD TO CART"}&nbsp;
+                </Text>
+            </View>
+        </TouchableOpacity>
+    );
+}
+
+function SoldOutButton(props){
+    const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
+    const whatmoreShopId = getGlobalState('whatmoreShopId');
+
+    const event = props.event;
+    const product = props.product;
+    const BASE_FONT_SIZE = props.baseFontSize ?? 10;
+    const width = props.width;
+    const height = props.height;
+
+    const BOX_PADDING = 2;
+
+    return (            
+        <TouchableOpacity 
+            style={{
+                width: width, height: height,
+                padding: BOX_PADDING, backgroundColor: 'white',
+                borderColor: 'gray', borderWidth: 1
+            }}
+            onPress={(e)=>{
+                e.stopPropagation();
+            }}
+        >
+            <View 
+                style={{
+                    width: '100%', height: height,
+                    flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
+                    paddingVertical: 4, paddingHorizontal: 5
+                }}
+            >
+                <Text
+                    style={{
+                        fontSize: BASE_FONT_SIZE * 4,
+                        fontWeight: 'bold',
+                        fontFamily: whatmorePrimaryFont,
+                        color: 'gray'
+                    }} 
+                >
+                    &nbsp;{' Sold Out '}&nbsp;
+                </Text>
+            </View>
+        </TouchableOpacity>  
+    );
+}
+
+function AddedToCartButton(props){
+    const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
+    const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
+    const whatmoreShopId = getGlobalState('whatmoreShopId');
+
+    const event = props.event;
+    const product = props.product;
+    const BASE_FONT_SIZE = props.baseFontSize ?? 10;
+    const onClick = props.onClick;
+    const cartCount = props.cartCount;
+    const width = props.width;
+    const height = props.height;
+    const onCartIconClick = props.onCartIconClick;
+
+    const BOX_PADDING = 2;
+
+    return (
+        <TouchableOpacity 
+            style={{
+                width: width, height: height,
+                padding: BOX_PADDING, 
+                backgroundColor: 'white', borderColor: whatmorePrimaryColor, borderWidth: 1
+            }}
+            onPress={(e)=>{
+                e.stopPropagation();
+            }}
+        >
+            <View 
+                style={{
+                    width: '100%', height: height,
+                    flexDirection: 'row', justifyContent: 'center', alignItems: 'center',
+                    paddingLeft: 4, paddingRight: 4,
+                }}
+            >
+                <TouchableOpacity
+                    onPress={()=>{onCartIconClick();}}
+                >
+                    <CartIcon 
+                        color={whatmorePrimaryColor} 
+                        size={BASE_FONT_SIZE * 6} 
+                    />
+                </TouchableOpacity>
+
+                <Animatable.Text 
+                    animation="bounceInUp"
+                    duration={500} iterationCount={1}
+                    style={{
+                        fontSize: BASE_FONT_SIZE * 4,
+                        fontWeight: 'bold',
+                        fontFamily: whatmorePrimaryFont,
+                        color: whatmorePrimaryColor,
+                        marginHorizontal: 20
+                    }}
+                >
+                    {cartCount}
+                </Animatable.Text >
+
+                <TouchableOpacity
+                    onPress={(e)=>{
+                        e.stopPropagation();
+                        onClick();
+                    }}
+                >
+                    <PlusIcon 
+                        color={whatmorePrimaryColor} 
+                        size={BASE_FONT_SIZE * 6} 
+                    />
+                </TouchableOpacity>
+            </View>
+        </TouchableOpacity>  
+    );
+}
+
+function AddToCartButton(props){
+    const whatmoreShopId = getGlobalState('whatmoreShopId');
+
+    const event = props.event;
+    const product = props.product;
+    const BASE_FONT_SIZE = props.baseFontSize ?? 10;
+    const showAddedToCart = props.showAddedToCart ?? true;
+    const cartState = props.cartState;
+    const cartCount = props.cartCount;
+    const onClickAtc = props.onClickAtc;
+    const onCartIconClick = props.onCartIconClick;
+
+    function _handleAddToCartClick() {
+        onClickAtc();
+    }
+
+    const width = props.width ?? '100%';
+    const height = props.height ?? 'auto';
+
+    if(cartState == "errored"){
+        return (
+            <Animatable.View
+                animation="fadeIn" 
+                duration={500} iterationCount={1}
+                easing="ease-in-out"
+                style={{
+                    height: height, width: width
+                }}
+            >
+                <SoldOutButton 
+                    event={event} product={product} baseFontSize={BASE_FONT_SIZE}  
+                    width={width} height={height}
+                />
+            </Animatable.View>
+        );    
+    }
+
+    if(cartState == 'init'){
+        if(cartCount == 0){
+            return(
+                <AddToCartInitialButton 
+                    onClick={_handleAddToCartClick} 
+                    event={event} product={product} baseFontSize={BASE_FONT_SIZE}  
+                    width={width} height={height}
+                />
+            );
+        }else{
+            if(showAddedToCart){
+                return (
+                    <Animatable.View
+                        animation="fadeIn" 
+                        duration={500} iterationCount={1}
+                        easing="ease-in-out"
+                        style={{
+                            height: height, width: width
+                        }}
+                    >
+                        <AddedToCartButton 
+                            onClick={_handleAddToCartClick} 
+                            event={event} product={product} baseFontSize={BASE_FONT_SIZE} 
+                            cartCount={cartCount} 
+                            width={width} height={height}
+                            onCartIconClick={onCartIconClick}
+                        />
+                    </Animatable.View>
+                );
+            }else{
+                return(
+                    <AddToCartInitialButton 
+                        onClick={_handleAddToCartClick} 
+                        event={event} product={product} baseFontSize={BASE_FONT_SIZE}  
+                        width={width} height={height}
+                    />
+                );
+            }
+        }
+    }
+
+        return(
+            <LabelledButton 
+                onClick={_handleAddToCartClick}  
+                event={event} product={product} baseFontSize={BASE_FONT_SIZE}  
+                width={width} height={height}
+                title={cartState == "awaitingVariantSelection" ? "Done" : ""}
+                showInProgressIcon={cartState == "atcApiCallInProgress" || cartState == "productVariantDetailsApiCallInProgress"}
+            />
+        );
+}
+
+export default AddToCartButton;

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

@@ -0,0 +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>
+    );
+                                    
+}

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

@@ -0,0 +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>
+    );
+                                    
+}