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

package/src/hooks/useAddToCartStates.js

@@ -1,195 +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];
-
-}
-
+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

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

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

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

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

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