ordering-ui-react-native 0.14.89 → 0.14.90-release

package/themes/kiosk/src/components/LanguageSelector/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { TouchableOpacity, View, StyleSheet } from 'react-native'
-import { LanguageSelector as LanguageSelectorController } from 'ordering-components/native'
+import { TouchableOpacity, View, StyleSheet, ActivityIndicator } from 'react-native'
+import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
 import CountryPicker, { Flag } from 'react-native-country-picker-modal'
 
 import { Container, LanguageItem } from './styles'
@@ -40,6 +40,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     (a.content > b.content) ? 1 : ((b.content > a.content) ? -1 : 0)
 	)
 
+	const [orderState] = useOrder()
 	const [isCountryModalVisible, setCountryModalVisible] = useState(false);
 
 	const countryCodes = _languages?.map((item:any) => item.countryCode);
@@ -48,7 +49,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
 	return (
 		<>
-		{ languagesState.loading ? 
+		{ languagesState.loading ?
 		(<Container>
 			<Placeholder  style={{ width: 130, paddingTop: 10 }} Animation={Fade}>
 				<PlaceholderLine height={15}/>
@@ -66,8 +67,8 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 							closeButtonStyle={styles.closeIcon}
 							renderFlagButton={() => (
 								<TouchableOpacity
-									onPress={() => setCountryModalVisible(true)}
-									disabled={languagesState.loading}
+									onPress={() => orderState.loading ? {} : setCountryModalVisible(true)}
+									// disabled={orderState.loading}
 								>
 									<LanguageItem>
 											<Flag
@@ -76,7 +77,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 												countryCode={currentLanguageData?.countryCode}
 											/>
 										<OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
-										<MatarialIcon name='keyboard-arrow-down' size={24}/>
+										{orderState.loading ? (
+											<ActivityIndicator size="small" color={theme.colors.primary} style={{ marginLeft: 5 }} />
+										) : (
+											<MatarialIcon name='keyboard-arrow-down' size={24}/>
+										)}
 									</LanguageItem>
 								</TouchableOpacity>
 							)}
@@ -87,11 +92,10 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 								renderItem: ({item} : any) => (
 									<TouchableOpacity
 										onPress={() => {
-											/* @ts-ignore */
 											handleChangeLanguage(item.value);
 											setCountryModalVisible(false);
 										}}
-										disabled={languagesState.loading}
+										disabled={orderState.loading}
 									>
 										<LanguageItem>
 											<View style={styles.flagsContainer} />

package/themes/kiosk/src/components/NavBar/index.tsx

@@ -5,6 +5,7 @@ import { ImageStyle, TextStyle, View, Platform } from 'react-native'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { useConfig, useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -64,28 +65,27 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft) && (
+      {(props?.onActionLeft || props?.leftImg) && (
         <OButton
-          imgLeftSrc={props.leftImg}
+          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle={props.imgLeftStyle}
-          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-            <OIcon
-              url={props.icon}
-              style={{
-                borderColor: theme.colors.lightGray,
-                borderRadius: 20,
-              }}
-              width={60}
-              height={60}
-            />
+              <OIcon
+                url={props.icon}
+                style={{
+                  borderColor: theme.colors.lightGray,
+                  borderRadius: 20,
+                }}
+                width={60}
+                height={60}
+              />
           )
           : null
         }
@@ -125,7 +125,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      {props.rightComponent}
+      { props.rightComponent }
     </Wrapper>
   )
 }

package/themes/kiosk/src/components/NetworkError/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { Dimensions } from 'react-native'
+import RNRestart from 'react-native-restart'
+import { OText, OIcon, OButton } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { NoNetworkParams } from '../../types'
+import {
+  Container,
+  ImageContainer
+} from './styles'
+
+export const NetworkError = (props: NoNetworkParams) => {
+  const {
+    image
+  } = props
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const noNetworkImage = image || theme.images.general.noNetwork
+  const deviceHeight = Dimensions.get('screen').height
+
+  return (
+    <Container>
+      <OText
+        size={20}
+        weight='700'
+        style={{ marginBottom: 14 }}
+      >
+        {t('MOBILE_NO_INTERNET', 'No internet connection')}
+      </OText>
+      <OText
+        size={14}
+      >
+        {t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}
+      </OText>
+      <ImageContainer>
+        <OIcon
+          src={noNetworkImage}
+          width={(deviceHeight - 180) * 0.7}
+          height={(deviceHeight - 180) * 0.63}
+        />
+        <OButton
+          text={t('REFRESH', 'Refresh')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          style={{
+            borderRadius: 8,
+            marginTop: 45,
+            height: 44
+          }}
+          textStyle={{
+            color: theme.colors.white
+          }}
+          onClick={() => RNRestart.Restart()}
+        />
+      </ImageContainer>
+    </Container>
+  )
+}

package/themes/kiosk/src/components/NetworkError/styles.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex: 1;
+  padding: 20px 40px;
+`
+export const ImageContainer = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`

package/themes/kiosk/src/components/OptionCard/index.tsx

@@ -95,7 +95,7 @@ interface Props {
   style?: ViewStyle;
   bgImage: ImageSourcePropType;
   innerStyle?: ViewStyle;
-  icon?: ImageSourcePropType;
+  icon: ImageSourcePropType;
   iconStyle?: ImageStyle;
   callToActionText: string;
   callToActionTextStyle?: TextStyle;

package/themes/kiosk/src/components/OrderDetails/index.tsx

@@ -212,7 +212,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
           setCustomerName(name)
       } catch (e) {
         if (e) {
-          setCustomerName('')
+          setCustomerName(null)
         }
       }
     }
@@ -553,7 +553,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                       size={orientationState?.dimensions?.width * 0.048}
                       weight="700"
                     >
-                      {`${t('HUNGRY', 'hungry')}, ${customerName}`}
+                      {t('HUNGRY', 'hungry')}{!!customerName && `, ${customerName}`}
                     </OText>
                   </OText>
 

package/themes/kiosk/src/components/OrderSummary/index.tsx

@@ -169,7 +169,7 @@ const OrderSummaryUI = (props: any) => {
               isCartProduct
               productCart={curProduct}
               businessSlug={cart?.business?.slug}
-              businessId={curProduct?.business_id}
+              businessId={cart?.business_id}
               categoryId={curProduct?.category_id}
               productId={curProduct?.id}
               onSave={handlerProductAction}

package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx

@@ -15,8 +15,6 @@ import { Container } from '../../layouts/Container'
 import NavBar from '../NavBar'
 import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
 import GridContainer from '../../layouts/GridContainer'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 
 const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   const {
@@ -29,7 +27,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
     callback
   } = props
 
-  const theme = useTheme();
+	const theme = useTheme();
   const [, t] = useLanguage();
   const [orientationState] = useDeviceOrientation();
   const [orderState] = useOrder()
@@ -47,7 +45,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
   }
 
   useEffect(() => {
-    if (isCardCliked) {
+    if(isCardCliked){
       callback?.()
       setIsCardClicked(false)
       setIsLoadingCard(null)
@@ -59,8 +57,8 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
       <Container>
         <NavBar
           title={t('ORDER_TYPE_X_ID', 'Order type')}
-          {...(goBack && { onActionLeft: goBack })}
-          btnStyle={{ paddingLeft: 0 }}
+          {...(goBack && { onActionLeft: goBack } )}
+          btnStyle={{paddingLeft: 0}}
         />
 
         <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
@@ -85,13 +83,13 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
             style={cardStyle}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Eat In'}
-            title={t('EAT_IN', 'Eat In')}
+            title={t('EAT_IN','Eat In')}
             description={t('EAT_IN_DESCRIPTION', 'We are very glad to have you here. Bon appetit!')}
             bgImage={theme.images.general.eatIn}
-            VectorIcon={() => <MaterialIcon name='pin-outline' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.pushPin}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_eatIn?.value !== orderState?.options?.type) {
+              if(_eatIn?.value !== orderState?.options?.type){
                 handleChangeOrderType(_eatIn?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Eat In')
@@ -108,15 +106,15 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
 
           <OptionCard
             style={cardStyle}
-            title={t('TAKE_OUT', 'Take out')}
+            title={t('TAKE_OUT','Take out')}
             isDisabled={isCardCliked}
             isLoading={isLoadingCard === 'Take out'}
             description={t('TAKE_OUT_DESCRIPTION', 'You are very welcome anytime you visit us!')}
             bgImage={theme.images.general.takeOut}
-            VectorIcon={() => <AntDesignIcon name='shoppingcart' size={28} color='white' style={{ marginBottom: 10 }} />}
+            icon={theme.images.general.shoppingCart}
             callToActionText={t('START_MY_ORDER', 'Start my order')}
             onClick={() => {
-              if (_takeOut?.value !== orderState?.options?.type) {
+              if(_takeOut?.value !== orderState?.options?.type){
                 handleChangeOrderType(_takeOut?.value);
                 setIsCardClicked(true)
                 setIsLoadingCard('Take out')

package/themes/kiosk/src/components/ProductForm/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import FastImage from 'react-native-fast-image'
 import {
   View,
   TouchableOpacity,
@@ -69,7 +70,7 @@ export const ProductOptionsUI = (props: any) => {
 
   const { product, loading, error } = productObject;
 
-  const HEADER_EXPANDED_HEIGHT = Platform.OS === 'ios' ? orientationState?.dimensions?.height * 0.65 : orientationState?.dimensions?.height * 0.4;
+  const HEADER_EXPANDED_HEIGHT = orientationState?.dimensions?.height * 0.4;
   const HEADER_COLLAPSED_HEIGHT = orientationState?.dimensions?.height * 0.2;
 
   const isError = (id: number) => {
@@ -87,7 +88,6 @@ export const ProductOptionsUI = (props: any) => {
     const isErrors = Object.values(errors).length > 0
     if (!isErrors) {
       handleSave && handleSave()
-      showCartBottomSheet()
       return
     }
   }
@@ -204,7 +204,6 @@ export const ProductOptionsUI = (props: any) => {
     },
     scrollContainer: {
       padding: 16,
-      paddingTop: HEADER_EXPANDED_HEIGHT
     },
     header: {
       backgroundColor: '#fff',
@@ -226,6 +225,10 @@ export const ProductOptionsUI = (props: any) => {
       shadowOpacity: 0.4,
       shadowRadius: 3,
       elevation: 5,
+    },
+    imageStyle: {
+      width: '100%',
+      height: HEADER_EXPANDED_HEIGHT,
     }
   });
 
@@ -233,118 +236,173 @@ export const ProductOptionsUI = (props: any) => {
     <>
       <ScrollView
         style={styles.mainContainer}
-        contentContainerStyle={styles.scrollContainer}
         onScroll={Animated.event(
           [{ nativeEvent: { contentOffset: { y: scrollY } } }],
           { useNativeDriver: false })
         }
         scrollEventThrottle={16}
       >
-        <Animated.View style={[styles.header, { height: headerHeight }]}>
-          {!isDrawer && (<Animated.View style={{ opacity: navBar1ContainerOpacity }}>
-            <NavBar
-              {...navBarProps}
-              titleColor={theme.colors.white}
-              btnStyle={{
-                width: 55,
-                height: 55,
-                overflow: 'scroll',
-                backgroundColor: 'black',
-                borderRadius: 100,
-                color: 'white',
-                opacity: 0.8,
-                left: 20,
-              }}
-            />
-          </Animated.View>
-          )}
-          <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
-            <NavBar
-              {...navBarProps}
-              btnStyle={{
-                width: 55,
-                height: 55,
-                backgroundColor: 'transparent',
-                borderRadius: 100,
-                left: 20,
-              }}
-            />
-          </Animated.View>
+        {!isDrawer ? (
+          <Animated.View style={[styles.header, { height: headerHeight }]}>
+            {!isDrawer && (
+              <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
+                <NavBar
+                  {...navBarProps}
+                  titleColor={theme.colors.white}
+                  btnStyle={{
+                    width: 55,
+                    height: 55,
+                    overflow: 'scroll',
+                    backgroundColor: 'black',
+                    borderRadius: 100,
+                    color: 'white',
+                    opacity: 0.8,
+                    left: 20,
+                  }}
+                />
+              </Animated.View>
+            )}
+            <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
+              <NavBar
+                {...navBarProps}
+                btnStyle={{
+                  width: 55,
+                  height: 55,
+                  backgroundColor: 'transparent',
+                  borderRadius: 100,
+                  left: 20,
+                }}
+              />
+            </Animated.View>
 
-          <Animated.View style={{
-            backgroundColor: 'white',
-            width: orientationState?.dimensions?.width,
-            opacity: collapsedBarContainerOpacity,
-          }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                padding: 20,
-                paddingTop: 0,
-                paddingBottom: 10
-              }}
-            >
-              <OImage
-                source={{ uri: product?.images }}
-                width={70}
-                height={70}
-                resizeMode="cover"
-                borderRadius={6}
+            <Animated.View style={{
+              backgroundColor: 'white',
+              width: orientationState?.dimensions?.width,
+              opacity: collapsedBarContainerOpacity,
+            }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  padding: 20,
+                  paddingTop: 0,
+                  paddingBottom: 10
+                }}
+              >
+                {product?.images ? (
+                  <FastImage
+                    style={{ height: 70, width: 70, borderRadius: 6 }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ height: 70, width: 70, borderRadius: 6 }}
+                    source={theme.images.dummies.product}
+                    imageStyle={{ borderRadius: 6 }}
+                    resizeMode='cover'
+                  />
+                )}
+                <OText
+                  size={orientationState?.dimensions?.width * 0.025}
+                  weight="bold"
+                  mLeft={20}
+                  numberOfLines={2}
+                >
+                  {product?.name}
+                </OText>
+              </View>
+              <View
+                style={{
+                  position: 'absolute',
+                  bottom: -2,
+                  height: 1,
+                  backgroundColor: 'white',
+                  width: orientationState?.dimensions?.width,
+                  ...styles.shadow,
+                }}
               />
-              <OText
-                size={orientationState?.dimensions?.width * 0.025}
-                weight="bold"
-                mLeft={20}
-                numberOfLines={2}
+            </Animated.View>
+
+            <Animated.View style={{
+              opacity: heroContainerOpacity,
+              position: 'absolute',
+              zIndex: -100,
+              transform: [{ translateY: heroTranslateY }],
+            }}>
+              <View
+                style={{
+                  width: orientationState?.dimensions?.width,
+                  height: HEADER_EXPANDED_HEIGHT,
+                  position: 'absolute',
+                  zIndex: 1,
+                  backgroundColor: 'rgba(24, 28, 50, 0.4)',
+                }}
               >
-                {product?.name}
-              </OText>
-            </View>
-            <View
-              style={{
-                position: 'absolute',
-                bottom: -2,
-                height: 1,
-                backgroundColor: 'white',
-                width: orientationState?.dimensions?.width,
-                ...styles.shadow,
-              }}
-            />
+                {product?.images ? (
+                  <FastImage
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={theme.images.dummies.product}
+                    resizeMode='cover'
+                  />
+                )}
+              </View>
+            </Animated.View>
           </Animated.View>
-
-          <Animated.View style={{
-            opacity: heroContainerOpacity,
-            position: 'absolute',
-            zIndex: -100,
-            transform: [{ translateY: heroTranslateY }],
-          }}>
-            <View
+        ) : (
+          <View style={{...styles.imageStyle}}>
+            <Animated.View
               style={{
-                width: orientationState?.dimensions?.width,
-                height: HEADER_EXPANDED_HEIGHT,
+                ...styles.imageStyle,
+                opacity: heroContainerOpacity,
                 position: 'absolute',
-                zIndex: 1,
-                backgroundColor: 'rgba(24, 28, 50, 0.4)',
+                zIndex: -100,
+                transform: [{ translateY: heroTranslateY }],
               }}
             >
-              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex: 1, justifyContent: 'center' }} />
+              <View style={styles.imageStyle}>
+                {product?.images ? (
+                  <FastImage
+                    style={{ flex: 1 }}
+                    source={{
+                      uri: product?.images,
+                      priority: FastImage.priority.normal,
+                      // cache:FastImage.cacheControl.web
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                ) : (
+                  <ImageBackground
+                    style={{ flex: 1, justifyContent: 'center' }}
+                    source={theme.images.dummies.product}
+                    resizeMode='cover'
+                  />
+                )}
+              </View>
+            </Animated.View>
+          </View>
+        )}
 
-            </View>
 
-            <Animated.View
-              style={{
-                transform: [{ translateY: heroTranslateY }],
-                width: orientationState?.dimensions?.width * 0.75,
-                height: HEADER_EXPANDED_HEIGHT / 2,
-                position: 'relative',
-                top: HEADER_EXPANDED_HEIGHT / 3,
-                zIndex: 100,
-                padding: 20,
-              }}
-            >
+        {!loading && !error && product && (
+          <View style={{ paddingTop: isDrawer ? 20 : HEADER_EXPANDED_HEIGHT, paddingBottom: 80, paddingHorizontal: 16 }}>
+            <WrapContent isDrawer={isDrawer}>
               <OText
-                color={theme.colors.white}
+                style={{ marginTop: 20 }}
                 size={orientationState?.dimensions?.width * 0.038}
                 weight="bold"
                 mBottom={10}
@@ -353,33 +411,23 @@ export const ProductOptionsUI = (props: any) => {
                 {product?.name || productCart?.name}
               </OText>
 
-              <OText
-                color={theme.colors.white}
-                numberOfLines={4}
-              >
-                {product?.description || productCart?.description}
-              </OText>
-            </Animated.View>
-          </Animated.View>
-        </Animated.View>
+              {(product?.description || productCart?.description) && (
+                <OText
+                  numberOfLines={4}
+                >
+                  {product?.description || productCart?.description}
+                </OText>
+              )}
+
+              {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
+                (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
+              ) && (
+                <ProductDescription>
+                  <OText size={20}>{t('SKU', 'Sku')}</OText>
+                  <OText>{product?.sku || productCart?.sku}</OText>
+                </ProductDescription>
+              )}
 
-        {/* {!isFromCheckout && (
-          <Spinner visible={loading} />
-        )} */}
-        {!loading && !error && product && (
-          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}>
-            <WrapContent isDrawer={isDrawer}>
-              <ProductDescription>
-                {(
-                  (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
-                  (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-                ) && (
-                    <>
-                      <OText size={20}>{t('SKU', 'Sku')}</OText>
-                      <OText>{product?.sku || productCart?.sku}</OText>
-                    </>
-                  )}
-              </ProductDescription>
               <ProductEditions>
                 {product?.ingredients.length > 0 && (
                   <View style={styles.optionContainer}>