@whatmore-repo/whatmore-reactnative-sdk 1.0.8

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

@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+import { useEffect } from "react";
+import { getGlobalState, useGlobalState } from "../../globals/useAppState_APP";
+import { View, Text, TouchableOpacity } from 'react-native';
+// import { Divider } from 'react-native-paper';
+
+function SelectVariantComponent(props){
+    const product = props.product;
+    const event = props.event;
+    const productVariantOptions = props.productVariantOptions;
+    const width = props.width ?? '100%';
+    const height = props.height ?? 'auto';
+    const baseFontSize = props.baseFontSize ?? 10;
+    const onOptionSelected = props.onOptionSelected;
+    const optionTitleColor = props.optionTitleColor ?? "black";
+
+    const isInDesignMode = getGlobalState('isInDesignMode');
+    const isDemoBrand = getGlobalState('isDemoBrand');
+    const whatmorePrimaryColor = getGlobalState('whatmorePrimaryColor');
+    const whatmorePrimaryFont = getGlobalState('whatmorePrimaryFont');
+    const whatmoreShopId = getGlobalState('whatmoreShopId');
+
+    function _getFirstAvailableOption(options){
+        if(options.length == 0){return null;}
+
+        const availableOptions = options.filter(option => option['available']);
+        if(availableOptions.length == 0){return null;}
+
+        return availableOptions[0]['option'];
+    }
+
+    const [selectedOptions, setSelectedOptions] = useState(
+        [
+            _getFirstAvailableOption(productVariantOptions[0]),
+            _getFirstAvailableOption(productVariantOptions[1]), 
+            _getFirstAvailableOption(productVariantOptions[2])
+        ]
+    );
+
+    useEffect(()=>{
+        onOptionSelected(selectedOptions);
+    }, [selectedOptions]);
+
+    function _getPaddingForOption(optionName){
+        return optionName.length >= 3 ? 0 : (baseFontSize * 0.5);
+    }
+
+    return (
+        <View style={{flexDirection: 'column', width: '100%', justifyContent: 'flex-start', alignItems: 'center'}}>
+            {productVariantOptions.map((options, index) => {
+                if(options.length === 0) return null;
+
+                return (
+                    <View style={{flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', width: '100%'}} key={index}>
+                        <View 
+                            style={{
+                                width: '30%',  height: 2, alignItems: 'center', 
+                                backgroundColor: 'gray', marginTop: 10, marginBottom: 10
+                        }}></View>
+                        <Text
+                            style={{
+                                fontSize: baseFontSize * 1.2,
+                                color: optionTitleColor,
+                                fontFamily: whatmorePrimaryFont,
+                                textAlign: 'center',
+                                fontWeight: 'bold'
+                            }}
+                        >
+                            &nbsp;{options[0]['type']}&nbsp;
+                        </Text>
+                        <View 
+                            style={{
+                                flexDirection: 'row', justifyContent: 'center', flexWrap: 'wrap',
+                                marginTop: 5
+                            }}
+                        >
+                            {options.map(option => (
+                                <TouchableOpacity key={option['option']}
+                                    style={{
+                                        borderRadius: 2,
+                                        padding: 2,
+                                        backgroundColor: option['option'] === selectedOptions[index] ? whatmorePrimaryColor : 'white',
+                                        marginLeft: 5, marginRight: 5
+                                    }}
+                                    onPress={(e) => {
+                                        e.stopPropagation();
+                                        option['available'] && setSelectedOptions([
+                                            index === 0 ? option['option'] : selectedOptions[0],
+                                            index === 1 ? option['option'] : selectedOptions[1],
+                                            index === 2 ? option['option'] : selectedOptions[2]
+                                        ]);
+                                    }}
+                                >
+                                    <Text
+                                        style={{
+                                            textDecorationLine: option['available'] ? 'none' : 'line-through',
+                                            fontSize: baseFontSize,
+                                            color: option['available'] ? (option['option'] === selectedOptions[index] ? 'white' : 'black') : 'gray',
+                                            fontFamily: whatmorePrimaryFont,
+                                            textAlign: 'center',
+                                            paddingHorizontal: _getPaddingForOption(option['option'])
+                                        }}
+                                    >
+                                        &nbsp;{option['option']}&nbsp;
+                                    </Text>
+                                </TouchableOpacity>
+                            ))}
+                        </View>
+                    </View>
+                );
+            })}
+        </View>
+    );
+
+}
+
+export default SelectVariantComponent;

package/src/components/video-player/AppVideoPlayer.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useGlobalState } from '../../globals/useAppState_APP';
+import Video from 'react-native-video';
+
+export default function AppVideoPlayer(props) {
+    const video = React.useRef(null);
+    const [isAppMuted] = useGlobalState("isAppMuted");
+    
+    return (
+        <Video 
+            source={{uri: props.videoUrl}}
+            ref={video}                    
+            muted={isAppMuted ? true : props.isMuted}
+            controls={false}
+            resizeMode='cover'
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                width: '100%', height: '100%'
+            }}
+        />
+    )
+}

package/src/constants/AppGlobalVars.js

@@ -0,0 +1,12 @@
+export const WHATMORE_BACKEND_BASE_URL = "https://api.whatmore.live";
+export const WHATMORE_BACKEND_CACHE_BASE_URL = "https://whatmore-api-cdn-cache.azureedge.net";
+
+// widget types
+export const carousel = "carousel"
+export const videoPopup = "video_popup"
+export const stories = "stories"
+
+// page types
+export const homepage = "homepage"
+export const productPage = "product_page"
+

package/src/globals/useAppState_APP.js

@@ -0,0 +1,18 @@
+import { createGlobalState } from "react-hooks-global-state";
+
+export const { GlobalStateProvider, useGlobalState, getGlobalState, setGlobalState } = createGlobalState({
+    verticalSwiperViewActiveIndex: 0,
+    isAppMuted: false,
+    brandDomainContext: 'shopify',
+    isInDesignMode: true,
+    isDemoBrand: true,
+    whatmoreShopId: '58669793418',
+    whatmorePrimaryFont: 'sans-serif',
+    whatmorePrimaryColor: '#d97777',
+    whatmoreAllowAutoSlide: true,
+    whatmoreAddedToCart: false,
+    commandsObject: {},
+    template: 'template-swipe-a',
+    modalUsed: true,
+    activateMock: false
+});

package/src/hooks/useAddToCartStates.js

@@ -0,0 +1,195 @@
+import { useRef } from "react";
+import { useState } from "react";
+import { getGlobalState, setGlobalState, useGlobalState } from "../globals/useAppState_APP";
+import { increaseEventProductAddToCartCount } from "../api/whatmore-backend/WhatmoreMetricCommands.js";
+import { productDetailsDetailed } from "../api/product-details-commands/ProductDetailsCommands.js";
+import { addToCartCommand } from "../api/cart-commands/CartCommands";
+
+
+/**
+ * 
+ * @param {*} initialCartCount initial count of product in cart
+ * @returns 
+ */
+function useAddToCartStates(initialCartCount, product, event){
+    const whatmoreShopId = getGlobalState('whatmoreShopId');
+    const isInDesignMode = getGlobalState('isInDesignMode');
+    const isDemoBrand = getGlobalState('isDemoBrand');
+    const brandDomainContext = getGlobalState('brandDomainContext');
+    
+    const [productVariantOptions, setProductVariantOptions] = useState(null);
+    const productVariantDetailsRef = useRef(null);
+
+    /**
+     * 
+     * init -> productVariantDetailsApiCallInProgress -> awaitingVariantSelection -> atcApiCallInProgress -> init(+1)
+     *                                                -> errored
+     */
+    const [cartState, setCartState] = useState(
+        {"state" : "init", "cart_count" : initialCartCount}
+    );
+
+    function updateCartState(newState, newCartCount){
+        setCartState({"state" : newState, "cart_count" : (newCartCount ?? cartState["cart_count"])});
+
+        // disable auto slide according to cart state
+        if(!(newState == "init" || newState == "errored")){
+            setGlobalState("whatmoreAllowAutoSlide", false);            
+        }else{
+            setGlobalState("whatmoreAllowAutoSlide", true);
+        }
+    }
+
+    function _getVariantIdFromSelectedOption(selectedOptions){
+        const matchedVariants = productVariantDetailsRef.current.filter(variant => 
+            variant.option1 == selectedOptions[0] && variant.option2 == selectedOptions[1] && variant.option3 == selectedOptions[2]);
+
+        if(matchedVariants.length == 0){return null;}
+        return matchedVariants[0]['id'];
+    }
+
+    function getPriceDetailsFromSelectedOption(selectedOptions){
+        const matchedVariants = productVariantDetailsRef.current.filter(variant => 
+            variant.option1 == selectedOptions[0] && variant.option2 == selectedOptions[1] && variant.option3 == selectedOptions[2]);
+
+        if(matchedVariants.length == 0){return null;}
+
+        const price = matchedVariants[0]['price'] ?? 0;
+        const comparePrice = matchedVariants[0]['compare_at_price'] ?? 0;
+        return {
+            'price': (price / 100.0),
+            'compare_price': (comparePrice / 100.0)
+        }
+    }
+
+    function _getVariantOptions(result){
+        var options1 = [];
+        var options2 = [];
+        var options3 = [];
+
+        result.variants.forEach(variant => {
+            variant.option1 && options1.push({"option" : variant.option1, "available" : variant.available ?? true, "type": result.options[0].name});
+            variant.option2 && options2.push({"option" : variant.option2, "available" : variant.available ?? true, "type": result.options[1].name});
+            variant.option3 && options3.push({"option" : variant.option3, "available" : variant.available ?? true, "type": result.options[2].name});
+        });
+
+        options1 = options1.reduce((result, option, index) => {
+            var res = result.filter(_option => _option['option'] == option['option']);
+            if(res.length == 0){
+                return [...result, option];
+            }
+            return result;
+        }, []);
+
+        options2 = options2.reduce((result, option, index) => {
+            var res = result.filter(_option => _option['option'] == option['option']);
+            if(res.length == 0){
+                return [...result, option];
+            }
+            return result;
+        }, []);
+
+        options3 = options3.reduce((result, option, index) => {
+            var res = result.filter(_option => _option['option'] == option['option']);
+            if(res.length == 0){
+                return [...result, option];
+            }
+            return result;
+        }, []);
+
+        return [options1, options2, options3];
+    }
+
+    function _getFirstAvailableOption(options){
+        if(options.length == 0){return null;}
+
+        const availableOptions = options.filter(option => option['available']);
+        if(availableOptions.length == 0){return null;}
+
+        return availableOptions[0]['option'];
+    }
+
+    function _isSingleVariantProduct(variantOptions){
+        return variantOptions[0].length <= 1 &&  variantOptions[1].length <= 1 && variantOptions[2].length <= 1;
+    }
+
+    function _atleastOneVariantAvailableInStock(){
+        if(productVariantDetailsRef.current && productVariantDetailsRef.current.length >= 1){
+            const availableVariants = productVariantDetailsRef.current.filter(variant => variant.available);
+            return availableVariants.length >= 1;
+        }
+        return false;
+    }
+
+    function initiateVariantSelection(handleAtcCall){
+        updateCartState("productVariantDetailsApiCallInProgress", null)
+        productDetailsDetailed(product, brandDomainContext, whatmoreShopId)
+            .then(result => {
+                productVariantDetailsRef.current = result.variants;
+                const variantOptions = _getVariantOptions(result);
+                setProductVariantOptions(variantOptions);
+
+                if(_isSingleVariantProduct(variantOptions)){
+                    if(!_atleastOneVariantAvailableInStock()){
+                        updateCartState("errored", null);
+                    }else{
+                        initiateAtcApiCall([
+                            _getFirstAvailableOption(variantOptions[0]), 
+                            _getFirstAvailableOption(variantOptions[1]), 
+                            _getFirstAvailableOption(variantOptions[2])
+                        ], handleAtcCall);
+                    }
+                }else{
+                    updateCartState("awaitingVariantSelection", null);
+                }
+            })
+            .catch(error => {
+                updateCartState("errored", null);
+            });
+    }
+
+    function pushAddToCartMetric(event, product, quantity){
+        if(!isInDesignMode && !isDemoBrand){
+            (async () => {
+                increaseEventProductAddToCartCount(event, product, quantity);
+            })();
+        }
+    }
+
+    function initiateAtcApiCall(selectedOptions){
+        const variantId = _getVariantIdFromSelectedOption(selectedOptions);
+        if(!variantId){
+            updateCartState("init", cartState["cart_count"]);
+            return;
+        }
+
+        const itemQuantity = 1;
+
+        updateCartState("atcApiCallInProgress", null);
+
+        const res = addToCartCommand(variantId, itemQuantity, product, brandDomainContext, whatmoreShopId);
+        res.then((isSuccess) => { 
+            if(isSuccess){
+                pushAddToCartMetric(event, product, itemQuantity);
+                updateCartState("init", cartState["cart_count"] + 1);
+                setGlobalState("whatmoreAddedToCart", true);
+            }else{
+                updateCartState("errored", null);
+                console.error('Error while adding to cart:', error);
+            }
+        })
+        .catch((error) => {
+            updateCartState("errored", null);
+            console.error('Error while adding to cart:', error);
+        });
+    }
+
+    function initiateAtcCartIconClickAction(){
+        return;
+    }
+
+    return [cartState, productVariantOptions, initiateVariantSelection, initiateAtcApiCall, getPriceDetailsFromSelectedOption, initiateAtcCartIconClickAction];
+
+}
+
+export default useAddToCartStates;

package/src/icons/icon-components/CartIcon.jsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Svg, { G, Path } from 'react-native-svg';
+
+function CartIcon(props) {
+    const fillColor = props.color || '#FFFFFF';
+    const width = props.size || 40;
+    const height = props.size || 40;
+
+    return (
+        <Svg 
+            width={width} height={height} 
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <G fill={fillColor}>
+                <Path d="M4.468 10.266l.024.216.126 1.131c.088.794.164 1.483.298 2.033.143.59.38 1.148.873 1.59.494.441 1.074.615 1.677.692C8.026 16 8.72 16 9.519 16h5.353c.548 0 1.032 0 1.435-.041.438-.044.863-.143 1.271-.389.41-.246.695-.576.94-.941.224-.338.45-.765.707-1.25l2.49-4.702C22.596 7.01 21.387 5 19.5 5H9.399c-.983 0-1.824 0-2.49.093a3.974 3.974 0 00-.976.25L5.79 4.05A2.303 2.303 0 003.5 2H3a1 1 0 100 2h.5c.155 0 .285.116.302.27l.666 5.996z" />
+                <Path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M14 19.5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0zM5 19.5a2.5 2.5 0 115 0 2.5 2.5 0 01-5 0z"
+                />
+            </G>
+        </Svg>
+    );
+}
+
+export default CartIcon;

package/src/icons/icon-components/LoadingIcon.jsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Svg, { G, Path } from 'react-native-svg';
+
+function LoadingIcon(props) {
+    const fillColor = props.color || '#FFFFFF';
+    const width = props.size || 40;
+    const height = props.size || 40;
+
+    return (
+        <Svg width={width} height={height} viewBox="-7 0 32 32" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <G fill={fillColor}>
+                <Path d="M2.08 14.04l4-1.04c.44-.12.72-.56.6-1.04a.847.847 0 00-1.04-.6l-2.08.56c.68-.88 1.56-1.6 2.64-2.08 1.64-.72 3.44-.76 5.12-.12A6.75 6.75 0 0115 13.24c.2.44.68.6 1.12.44.44-.2.6-.68.44-1.12-.88-2.04-2.52-3.6-4.6-4.44-2.08-.8-4.36-.76-6.4.12-1.36.6-2.48 1.52-3.36 2.68l-.52-1.96a.847.847 0 00-1.04-.6c-.44.12-.72.56-.6 1.04l1.04 4c.12.56.4.8 1 .64zm15.64 8.48l-1.04-3.96s-.16-.8-.96-.6l-4 1.04c-.44.12-.72.56-.6 1.04.12.44.56.72 1.04.6l2.08-.56a6.62 6.62 0 01-7.72 2.16 6.75 6.75 0 01-3.68-3.52c-.2-.44-.68-.6-1.12-.44-.44.2-.6.68-.44 1.12.88 2.04 2.52 3.6 4.6 4.44 1 .4 2 .56 3.04.56 2.64 0 5.12-1.24 6.72-3.4l.52 1.96c.08.36.44.64.8.64.08 0 .16 0 .2-.04.4-.16.68-.6.56-1.04z" />
+            </G>
+        </Svg>
+    );
+}
+
+export default LoadingIcon;

package/src/icons/icon-components/MuteIcon.jsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Svg, { G, Path } from 'react-native-svg';
+
+function MuteIcon(props) {
+    const fillColor = props.color || '#FFFFFF';
+    const width = props.size || 40;
+    const height = props.size || 40;
+
+    return (
+        <Svg width={width} height={height} viewBox="-1.44 -1.44 26.88 26.88" {...props}>
+            <G fill={fillColor}>
+                <Path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M20.515 6.316a.75.75 0 01.991.376c.468 1.035.994 2.768.994 5.308 0 2.192-.392 3.783-.8 4.844-.204.53-.41.925-.572 1.195a4.73 4.73 0 01-.289.425l-.007.01-.003.003-.002.002L20.25 18l.576.48a.75.75 0 01-1.156-.956l.003-.004.031-.041a3.27 3.27 0 00.137-.212c.12-.199.288-.516.459-.961.342-.889.7-2.298.7-4.306 0-2.326-.48-3.849-.86-4.692a.75.75 0 01.375-.992zM18.414 9.266a.75.75 0 01.887.582c.11.53.199 1.24.199 2.152 0 1.11-.132 1.923-.273 2.474-.071.275-.144.484-.203.631a2.947 2.947 0 01-.102.228l-.01.018-.003.007-.002.003v.002s-.001.001-.657-.363l.656.364a.75.75 0 01-1.317-.719l.005-.01c.007-.015.02-.043.038-.087a3.66 3.66 0 00.141-.447c.11-.424.227-1.111.227-2.101 0-.813-.08-1.421-.168-1.848a.75.75 0 01.582-.886z"
+                />
+                <Path d="M21.78 3.53a.75.75 0 00-1.06-1.06l-4.45 4.449a11.265 11.265 0 00-.193-1.39c-.172-.788-.477-1.473-1.116-1.923a3.066 3.066 0 00-.769-.39c-.818-.28-1.631-.057-2.457.345-.814.395-1.8 1.046-3.032 1.857l-.267.176c-.447.295-.602.394-.76.464-.171.076-.35.13-.535.16-.171.03-.354.032-.89.032h-.162c-1.217 0-2.062-.001-2.814.347A3.962 3.962 0 001.548 8.22c-.392.729-.438 1.491-.504 2.575l-.008.13C1.014 11.294 1 11.658 1 12c0 .342.014.706.036 1.074l.008.13c.066 1.084.112 1.846.504 2.575a3.962 3.962 0 001.727 1.624c.61.283 1.283.336 2.166.345L2.72 20.47a.75.75 0 101.06 1.06l18-18zM16.5 12a.75.75 0 00-1.255-.554l-.071.074-6 6.274A.778.778 0 009.34 19c1.039.68 1.899 1.225 2.631 1.549.743.328 1.48.489 2.222.236.272-.093.534-.226.769-.391.706-.497 1.005-1.28 1.167-2.18.159-.884.213-2.056.281-3.516l.003-.058c.052-1.115.088-2.088.088-2.64z" />
+            </G>
+        </Svg>
+    );
+}
+
+export default MuteIcon;

package/src/icons/icon-components/PlusIcon.jsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Svg, { G, Path } from 'react-native-svg';
+
+function PlusIcon(props) {
+    const fillColor = props.color || '#FFFFFF';
+    const width = props.size || 40;
+    const height = props.size || 40;
+
+    return (
+        <Svg 
+            width={width} height={height} 
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <G fill={fillColor}>
+                <Path fill="#fff" d="M0 0H24V24H0z" />
+                <Path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M13 9a1 1 0 10-2 0v2H9a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V9zM7.25 2.388C8.55 2.099 10.124 2 12 2s3.451.1 4.75.388c1.31.291 2.399.788 3.236 1.626.838.837 1.335 1.926 1.626 3.236C21.901 8.55 22 10.124 22 12s-.1 3.451-.388 4.75c-.291 1.31-.788 2.399-1.626 3.236-.837.838-1.926 1.335-3.236 1.626-1.299.289-2.874.388-4.75.388s-3.451-.1-4.75-.388c-1.31-.291-2.399-.788-3.236-1.626-.838-.837-1.335-1.926-1.626-3.236C2.099 15.45 2 13.876 2 12s.1-3.451.388-4.75c.291-1.31.788-2.399 1.626-3.236.837-.838 1.926-1.335 3.236-1.626z"
+                />
+            </G>
+        </Svg>
+    );
+}
+
+export default PlusIcon;

package/src/icons/icon-components/UnmuteIcon.jsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Svg, { G, Path } from 'react-native-svg';
+
+function UnmuteIcon(props) {
+    const fillColor = props.color || '#FFFFFF';
+    const width = props.size || 40;
+    const height = props.size || 40;
+
+    return (
+        <Svg width={width} height={height} viewBox="0 0 24 24" {...props}>
+            <G fill={fillColor}>
+                <Path d="M2.003 11.716c.037-1.843.056-2.764.668-3.552.112-.144.276-.315.413-.431.752-.636 1.746-.636 3.733-.636.71 0 1.065 0 1.403-.092.07-.02.14-.042.209-.067.33-.121.627-.33 1.22-.746 2.338-1.645 3.508-2.467 4.489-2.11.188.069.37.168.533.29.848.635.913 2.115 1.042 5.073.048 1.096.08 2.034.08 2.555 0 .521-.032 1.46-.08 2.555-.13 2.958-.194 4.438-1.042 5.073-.163.122-.345.221-.533.29-.982.357-2.15-.465-4.49-2.11-.592-.416-.889-.625-1.22-.746a2.61 2.61 0 00-.208-.067c-.338-.092-.693-.092-1.403-.092-1.987 0-2.98 0-3.733-.636a3.145 3.145 0 01-.413-.43c-.612-.79-.63-1.71-.668-3.553a14.06 14.06 0 010-.569z" />
+                <Path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M19.49 5.552a.66.66 0 01.97.094l-.529.471.53-.47.002.002.003.004.007.009a2.572 2.572 0 01.079.112c.047.071.111.173.186.305.149.264.339.652.526 1.171C21.64 8.291 22 9.851 22 12c0 2.15-.36 3.71-.736 4.75-.187.52-.377.907-.526 1.172a4.655 4.655 0 01-.265.417l-.007.009-.003.003-.001.002s-.001.001-.531-.47l.53.471a.66.66 0 01-.971.094.77.77 0 01-.09-1.035l.03-.041c.026-.04.07-.11.125-.207a6.28 6.28 0 00.422-.943c.314-.871.644-2.253.644-4.222 0-1.97-.33-3.35-.644-4.222a6.28 6.28 0 00-.422-.942 3.152 3.152 0 00-.157-.253M17.757 8.416c.333-.197.753-.07.938.286l-.603.357.603-.357.001.002.002.003.003.007.01.018.024.053c.018.042.042.099.07.17.053.145.12.35.185.62.13.54.252 1.337.252 2.425 0 1.089-.122 1.886-.252 2.426-.065.27-.132.475-.186.619a3.04 3.04 0 01-.094.223l-.009.018-.003.007-.002.003v.002s-.001.001-.604-.356l.603.357c-.185.355-.605.483-.938.286-.33-.196-.45-.638-.272-.991l.004-.01.035-.085c.032-.086.08-.23.13-.438.1-.416.208-1.09.208-2.06 0-.971-.108-1.645-.208-2.06a3.757 3.757 0 00-.165-.524l-.004-.01c-.179-.354-.058-.795.272-.991z"
+                />
+          </G>
+        </Svg>
+    );
+}
+
+export default UnmuteIcon;

package/src/icons/svg-utils.txt

@@ -0,0 +1,6 @@
+## SVG repo:
+https://www.svgrepo.com/vectors/volume/
+
+## SVG to react-native
+https://transform.tools/svg-to-react-native
+

package/src/utils/ColorUtils.js

@@ -0,0 +1,40 @@
+// Version 4.1
+
+// https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
+// https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)
+
+// Opacity level 0-15
+export const shadeColorHex = function(hexCode, opacityLevel){
+	return hexCode + opacityLevel.toString(16) + opacityLevel.toString(16);
+}
+
+const shadeColor=(p,c0,c1,l)=>{
+	let r,g,b,P,f,t,h,m=Math.round,a=typeof(c1)=="string";
+	if(typeof(p)!="number"||p<-1||p>1||typeof(c0)!="string"||(c0[0]!='r'&&c0[0]!='#')||(c1&&!a))return null;
+	h=c0.length>9,h=a?c1.length>9?true:c1=="c"?!h:false:h,f=shadeColor.pSBCr(c0),P=p<0,t=c1&&c1!="c"?shadeColor.pSBCr(c1):P?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},p=P?p*-1:p,P=1-p;
+	if(!f||!t)return null;
+	if(l)r=m(P*f.r+p*t.r),g=m(P*f.g+p*t.g),b=m(P*f.b+p*t.b);
+	else r=m((P*f.r**2+p*t.r**2)**0.5),g=m((P*f.g**2+p*t.g**2)**0.5),b=m((P*f.b**2+p*t.b**2)**0.5);
+	a=f.a,t=t.a,f=a>=0||t>=0,a=f?a<0?t:t<0?a:a*P+t*p:0;
+	if(h)return"rgb"+(f?"a(":"(")+r+","+g+","+b+(f?","+m(a*1000)/1000:"")+")";
+	else return"#"+(4294967296+r*16777216+g*65536+b*256+(f?m(a*255):0)).toString(16).slice(1,f?undefined:-2)
+}
+
+shadeColor.pSBCr=(d)=>{
+	const i=parseInt;
+	let n=d.length,x={};
+	if(n>9){
+		const [r, g, b, a] = (d = d.split(','));
+	        n = d.length;
+		if(n<3||n>4)return null;
+		x.r=i(r[3]=="a"?r.slice(5):r.slice(4)),x.g=i(g),x.b=i(b),x.a=a?parseFloat(a):-1
+	}else{
+		if(n==8||n==6||n<4)return null;
+		if(n<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(n>4?d[4]+d[4]:"");
+		d=i(d.slice(1),16);
+		if(n==9||n==5)x.r=d>>24&255,x.g=d>>16&255,x.b=d>>8&255,x.a=Math.round((d&255)/0.255)/1000;
+		else x.r=d>>16,x.g=d>>8&255,x.b=d&255,x.a=-1
+	}return x
+};
+
+export default shadeColor;

package/src/utils/EventSanityUtils.js

@@ -0,0 +1,21 @@
+export const removeInvalidEvents = function(data, brandId){
+    if(data == null){
+        return;
+    }
+
+    return data.filter((event) => {
+        return event.products.length > 0;
+    });
+}
+
+export const extractEvents = function(data, isCollectionsTemplate){
+    if(data == null){
+        return;
+    }
+
+    if(isCollectionsTemplate){
+        return (data[0]['events']);
+    }
+
+    return data;
+}

package/src/utils/PriceUtils.js

@@ -0,0 +1,28 @@
+
+import getSymbolFromCurrency from 'currency-symbol-map'
+
+function priceWithCommas(price){
+    return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+function roundedPrice(price){
+    // is decimal more than 0.1
+    if(price % 1 >= 0.1){
+        // if decimal value is more than 0.1 but not significant in that currency
+        const priceAsString = price.toString();
+        if(priceAsString.split('.')[0].length >= 4){
+            return parseInt(price);
+        }
+        return price.toFixed(2);
+    }
+
+    return parseInt(price);
+}
+
+export function getPriceStringWithCurrency(price, spaceString = "", currencyCode = "INR"){
+    if(!price || typeof price == undefined){
+        return "";
+    }
+
+    return getSymbolFromCurrency(currencyCode) + spaceString + priceWithCommas(roundedPrice(price));
+}

package/src/utils/ProductUtils.js

@@ -0,0 +1,6 @@
+
+
+export function getProductHandle(product){
+    const match = product.product_link.match(/\/products\/([^/?&]+)/);
+    return match ? match[1] : null;
+}