ordering-ui-react-native 0.14.82 → 0.14.83-release

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}>

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

@@ -40,7 +40,7 @@ export const ProductTitle = styled.View`
 `
 
 export const ProductDescription = styled.View`
-  margin-bottom: 30px;
+  margin-top: 10px;
 `
 
 export const ProductEditions = styled.View`

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

@@ -32,6 +32,7 @@ const ProductOptionUI = (props: any) => {
         <OText
           size={26}
           weight="bold"
+          style={{ width: '80%' }}
         >
           {option.name}
         </OText>

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

@@ -12,4 +12,5 @@ export const WrapHeader = styled.View`
   background-color: ${(props: any) => props.theme.colors.paleGray};
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
+  width: 100%;
 `

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

@@ -1,6 +1,6 @@
 import React,{ useState, useEffect } from 'react'
 import Spinner from 'react-native-loading-spinner-overlay';
-import { StyleSheet, View, Platform } from 'react-native'
+import { StyleSheet, View, Platform, ImageBackground } from 'react-native'
 import {
   UpsellingPage as UpsellingPageController,
   useUtils,
@@ -20,6 +20,7 @@ import { Container } from '../../layouts/Container';
 import GridContainer from '../../layouts/GridContainer';
 import { PORTRAIT, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
 import { useTheme } from 'styled-components/native';
+import FastImage from 'react-native-fast-image';
 
 const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   const {
@@ -114,7 +115,24 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                 {
                   !upsellingProducts.error ? upsellingProducts.products.map((product: any) => (
                     <Item key={product.id}>
-                      <OImage source={{ uri: product.images }} style={styles.imageStyle} />
+                      {product?.images ? (
+                        <FastImage
+                          style={styles.imageStyle}
+                          source={{
+                            uri: product?.images,
+                            priority: FastImage.priority.normal,
+                            // cache:FastImage.cacheControl.web
+                          }}
+                          resizeMode={FastImage.resizeMode.cover}
+                        />
+                      ) : (
+                        <ImageBackground
+                          style={styles.imageStyle}
+                          source={theme.images.dummies.product}
+                          imageStyle={{ borderRadius: 10 }}
+                          resizeMode='cover'
+                        />
+                      )}
                       <Details>
                         <OText
                           weight="500"
@@ -125,24 +143,22 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                           {product.name}
                         </OText>
 
-                        {!!product?.price && (
-                          <OText>
-                            <OText
-                              color={theme.colors.primary}
-                              weight="500"
-                            >
-                              {parsePrice(product.price)}
-                            </OText>
+                        <OText>
+                          <OText
+                            color={theme.colors.primary}
+                            weight="500"
+                          >
+                            {parsePrice(product.price)}
+                          </OText>
 
-                            <OText
-                              color={theme.colors.mediumGray}
-                              size={12}
-                              style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
-                            >
-                              {product?.offer_price ? `  ${parsePrice(product?.offer_price)}  ` : ''}
-                            </OText>
+                          <OText
+                            color={theme.colors.mediumGray}
+                            size={12}
+                            style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
+                          >
+                            {product?.offer_price ? `  ${parsePrice(product?.offer_price)}  ` : ''}
                           </OText>
-                        )}
+                        </OText>
                       </Details>
 
                       <OButton
@@ -200,24 +216,22 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                                   {product.name}
                                 </OText>
 
-                                {!!product?.price && (
-                                  <OText>
-                                    <OText
-                                      color={theme.colors.primary}
-                                      weight="500"
-                                      >
-                                      {parsePrice(product.price)}
-                                    </OText>
+                                <OText>
+                                  <OText
+                                    color={theme.colors.primary}
+                                    weight="500"
+                                    >
+                                    {parsePrice(product.price)}
+                                  </OText>
 
-                                    <OText
-                                      color={theme.colors.mediumGray}
-                                      size={12}
-                                      style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
-                                      >
-                                      {product?.offer_price ? parsePrice(product?.offer_price) : ''}
-                                    </OText>
+                                  <OText
+                                    color={theme.colors.mediumGray}
+                                    size={12}
+                                    style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
+                                    >
+                                    {product?.offer_price ? parsePrice(product?.offer_price) : ''}
                                   </OText>
-                                )}
+                                </OText>
                               </Details>
                               <OButton
                                 text={t('ADD_PRODUCT', 'add product')}

package/themes/kiosk/src/components/shared/OButton.tsx

@@ -10,8 +10,6 @@ import {
 
 import * as React from 'react';
 import styled from 'styled-components/native';
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
-import { Icon, IconProps } from 'react-native-vector-icons/Icon';
 
 const StyledButton = styled.View<Props>`
   background-color: ${(props: any) => props.theme.colors.primary};
@@ -79,19 +77,17 @@ interface Props {
   isCircle?: boolean;
   bgColor?: string;
   borderColor?: string;
-  iconProps?: IconProps;
-  IconCustom?: React.FunctionComponent
 }
 
 const OButton = (props: Props): React.ReactElement => {
   if (props.isDisabled) {
     return (
       <View style={props.parentStyle}>
-        <StyledButtonDisabled style={props.style}>
-          <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
-            {props.text}
-          </StyledTextDisabled>
-        </StyledButtonDisabled>
+      <StyledButtonDisabled style={props.style}>
+        <StyledTextDisabled style={props.disabledTextStyle ? props.disabledTextStyle : props.textStyle}>
+          {props.text}
+        </StyledTextDisabled>
+      </StyledButtonDisabled>
       </View>
     );
   }
@@ -115,15 +111,6 @@ const OButton = (props: Props): React.ReactElement => {
         {props.imgLeftSrc ? (
           <StyledImage style={props.imgLeftStyle} source={props.imgLeftSrc} />
         ) : null}
-        {props.iconProps ? (
-          <>
-            {props?.IconCustom ? (
-              <props.IconCustom {...props.iconProps} />
-            ) : (
-              <AntDesignIcon {...props.iconProps} />
-            )}
-          </>
-        ) : null}
         {props.text ? (
           <StyledText style={props.textStyle}>{props.text}</StyledText>
         ) : null}