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

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

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

@@ -1,26 +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%'
-            }}
-        />
-    )
+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

@@ -1,12 +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"
-
+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

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