ordering-ui-react-native 0.11.58 → 0.11.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.11.58",
+  "version": "0.11.59",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

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

@@ -82,6 +82,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
         inactiveSlideOpacity={1}
         initialScrollIndex={0}
         onScrollToIndexFailed={(_: any) => {}}
+        enableMomentum={true}
       />
     </>
   );

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

@@ -13,7 +13,8 @@ import {
 	StyledContent,
 	StyledTopBar,
 } from './styles';
-import { OButton, OModal, OText } from '../shared';
+import { OButton, OModal, OText, OIconButton } from '../shared';
+import EvilIcons from 'react-native-vector-icons/EvilIcons';
 import CartItem from '../CartItem';
 import { Cart as TypeCart } from '../../types';
 import { ProductForm } from '../ProductForm';
@@ -109,6 +110,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
           {...props}
           handleClearProducts={handleClearProducts}
           selectedOrderType={selectedOrderType}
+          hideCartBottomSheet={hideCartBottomSheet}
         />
 
         {cart?.products?.length > 0 && cart?.products.map((product: any) => (
@@ -126,13 +128,27 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
         ))}
 
       </StyledContent>
-
-      <StyledBottomContent
-        minHeight={props.height * 0.1}
+      <TouchableOpacity
+          onPress={handleClearProducts}
+          style={{flex:1, justifyContent:'center', alignItems:'center', bottom: 20, paddingTop: 5}}
       >
+        <View>
+          <OText
+            size={20}
+            weight="700"
+            color={theme.colors.red}
+          >
+            {t('CANCEL_ORDER', 'Cancel order')}
+          </OText>
+        </View>
+      </TouchableOpacity>
+      <StyledBottomContent
+        style={{bottom:10}}
+        minHeight={props.height * 0.01}
+      > 
         <OButton
           text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
-            !openUpselling !== canOpenUpselling ? `${t('CONFIRM_THIS', 'Confirm this')} ${parsePrice(cart?.total)} ${t('ORDER', 'order')}`: t('LOADING', 'Loading')
+            !openUpselling !== canOpenUpselling ? `${t('CHECKOUT', 'Checkout')} ${parsePrice(cart?.total)}`: t('LOADING', 'Loading')
           ) : !cart?.valid_address ? (
             `${t('OUT_OF_COVERAGE', 'Out of Coverage')}`
           ) : (
@@ -205,20 +221,19 @@ const TopBar = (props:any) => {
           {props?.selectedOrderType === 3 && t('EAT_IN', 'Eat in')}
 				</OText>
 			</View>
-
-			<TouchableOpacity
-				onPress={props?.handleClearProducts}
-			>
-				<View>
-					<OText
-						size={20}
-						weight="500"
-						color={theme.colors.primary}
-					>
-						{t('CANCEL_ORDER', 'Cancel order')}
-					</OText>
-				</View>
-			</TouchableOpacity>
+			<OIconButton
+        bgColor="transparent"
+        borderColor="transparent"
+        RenderIcon={() => 
+            <EvilIcons
+              name={'close'}
+              size={40}
+              color={theme.colors.primary}
+            />
+        }
+        style={{ flex:1, justifyContent: 'flex-end', left: 30 }}
+        onClick={props.hideCartBottomSheet}
+      />
 		</StyledTopBar>
 	);
 }

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

@@ -10,7 +10,8 @@ import {
   ProductSubOption,
   ProductComment
 } from './styles';
-import { OButton, OImage, OText } from '../shared';
+import { OButton, OImage, OText, OIconButton } from '../shared';
+import EvilIcons from 'react-native-vector-icons/EvilIcons';
 import { Product } from '../../types';
 import QuantityControl from '../QuantityControl';
 import { LANDSCAPE, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
@@ -52,7 +53,7 @@ const CartItem = (props: CartItemProps) => {
     }
     return product
   }
-
+  const isProductIngredients = productInfo()?.ingredients.length > 0 || productInfo()?.options.length > 0 || product?.comment
   const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
     const pos = position ? `(${position})` : ''
     return `${quantity} x ${name} ${pos} +${price}`
@@ -64,7 +65,7 @@ const CartItem = (props: CartItemProps) => {
         onPress={() => (!product?.valid_menu && isCartProduct)
           ? {}
           : setActiveState(!isActive)}
-        activeOpacity={1}
+        activeOpacity={0.5}
       >
         <StyledCartItem>
           <View style={{ flexDirection: 'row' }}>
@@ -105,6 +106,21 @@ const CartItem = (props: CartItemProps) => {
                   }}
                   onClick={() => { onEditProduct ? onEditProduct(product) : null }}
                 />
+                <OIconButton
+                  bgColor="transparent"
+                  borderColor="transparent"
+                  RenderIcon={isProductIngredients && (() => 
+                      <EvilIcons
+                        name={isActive ? 'chevron-up': 'chevron-down'}
+                        size={40}
+                        color={theme.colors.primary}
+                      />
+                  )}
+                  style={{ justifyContent: 'flex-start', right: 40 }}
+                  onClick={() => (!product?.valid_menu && isCartProduct)
+                    ? {}
+                    : setActiveState(!isActive)}
+                />
               </View>
             </View>
           </View>

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

@@ -90,7 +90,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
         <Container nopadding nestedScrollEnabled>
           <View style={{ paddingTop: 20 }}>
             <NavBar
-              title={t('CATEGORY_X_ID', 'Category')}
+              title={categories[curIndexCateg].name}
               onActionLeft={goToBack}
               rightComponent={cart && (
                 <TouchableOpacity
@@ -128,7 +128,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                 image={{ uri: product?.images }}
                 style={{
                   width: orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.16
+                    ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.15 :orientationState?.dimensions?.width * 0.16
                     : orientationState?.dimensions?.width * 0.21
                 }}
                 titleStyle={{marginTop: Platform.OS === 'ios' ? 10 : 0}}

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled from 'styled-components/native'
 import { OIcon, OButton, OText } from '../shared'
-import { TextStyle, View } from 'react-native'
+import { ImageStyle, TextStyle, View } from 'react-native'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { useConfig } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
@@ -53,6 +53,7 @@ interface Props {
   style?: TextStyle,
   paddingTop?: number,
   includeOrderTypeSelector?: boolean,
+  imgLeftStyle?: ImageStyle
 }
 
 const NavBar = (props: Props) => {
@@ -68,6 +69,7 @@ const NavBar = (props: Props) => {
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
+          imgLeftStyle= {props.imgLeftStyle}
         />)
       }
       <TitleTopWrapper>

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

@@ -210,6 +210,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       setCustomerName(name)
     }
     getCustomerName()
+    const redirectHome = setTimeout(() =>{
+      navigation.reset({
+        routes: [{ name: 'Intro' }],
+      });
+    }, 60000);
+    return () => {
+      clearTimeout(redirectHome);
+    }
   }, [])
 
   useEffect(() => {

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

@@ -135,14 +135,14 @@ const PaymentOptionsUI = (props: any) => {
       cashIndex !== -1
         ? {
             style: cardStyle,
-            title: t('CASH', supportedMethods[cashIndex]?.name),
+            title: t('CASH', 'Cash'),
             description: t(
               'GO_FOR_YOR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER',
-              'Go for yor receipt and go to the front counter',
+              'Pay with cash in the front counter',
             ),
             bgImage: theme.images.general.cash,
             icon: theme.images.general.shoppingCart,
-            callToActionText: t('TAKE_MY_RECEIPT', 'Take my receipt'),
+            callToActionText: t('LETS_GO', 'LETS_GO'),
             onClick: () =>
               onSelectPaymethod(supportedMethods[cashIndex], false),
             ...supportedMethods[cashIndex],

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

@@ -137,8 +137,6 @@ export const ProductOptionsUI = (props: any) => {
   const navBarProps = {
     style: { backgroundColor: 'transparent', width: orientationState?.dimensions?.width, borderBottomWidth: 0 },
     paddingTop: 20,
-    title: t('YOUR_DISH', 'Your dish'),
-    btnStyle: { backgroundColor: 'transparent' },
     onActionLeft: onClose ? onClose : navigation ? goToBack : undefined,
   };
 
@@ -238,12 +236,29 @@ export const ProductOptionsUI = (props: any) => {
             {...navBarProps}
             titleColor={theme.colors.white}
             {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
+            btnStyle={{
+              width: 55,
+              height: 55,
+              backgroundColor: 'black',
+              borderRadius: 100,
+              opacity: 0.8,
+              left: 20,
+            }}
+            imgLeftStyle={{ width: 27, height: 27 }}
           />
         </Animated.View>
         <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
           <NavBar
             {...navBarProps}
             {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left })}
+            btnStyle={{
+              width: 55,
+              height: 55,
+              backgroundColor: 'transparent',
+              borderRadius: 100,
+              left: 20,
+            }}
+            imgLeftStyle={{ width: 27, height: 27 }}
           />
         </Animated.View>
 

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

@@ -178,30 +178,6 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                     alignItems: 'center'
                   }}
                 >
-
-                  <View style={{ height: '100%', width: '35%' }}>
-                    <OText
-                      size={orientationState?.dimensions?.width * 0.048}
-                    >
-                      {t('DO_YOU_WANT', 'Do you want')} {'\n'}
-                      <OText
-                        size={orientationState?.dimensions?.width * 0.048}
-                        weight={'700'}
-                      >
-                        {t('SOMETHING_ELSE', 'something else')} {'?'}
-                      </OText>
-                    </OText>
-
-                    <CloseUpsellingLand>
-                      <OButton
-                        imgRightSrc=''
-                        text={t('I_AM_FINE_THANK_YOU', 'I’m fine, thank you')}
-                        style={styles.closeUpsellingButton}
-                        onClick={() => handleUpsellingPage()}
-                      />
-                    </CloseUpsellingLand>
-                  </View>
-
                   <View style={{ width: '65%', marginBottom: 30 }}>
                     <GridContainer>
                       {
@@ -258,7 +234,27 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                       }
                     </GridContainer>
                   </View>
-
+                  <View style={{ height: '100%', width: '35%' }}>
+                    <OText
+                      size={orientationState?.dimensions?.width * 0.040}
+                    >
+                      {t('DO_YOU_WANT', 'Do you want')} {'\n'}
+                      <OText
+                        size={orientationState?.dimensions?.width * 0.040}
+                        weight={'700'}
+                      >
+                        {t('SOMETHING_ELSE', 'something else')} {'?'}
+                      </OText>
+                    </OText>
+                    <CloseUpsellingLand>
+                      <OButton
+                        imgRightSrc=''
+                        text={t('I_AM_FINE_THANK_YOU', 'I’m fine, thank you')}
+                        style={styles.closeUpsellingButton}
+                        onClick={() => handleUpsellingPage()}
+                      />
+                    </CloseUpsellingLand>
+                  </View>
                 </View>
               </>
             )

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

@@ -48,9 +48,10 @@ interface Props {
   iconCover?: boolean,
   urlIcon?: any,
   cover?: any,
+  RenderIcon?: React.FunctionComponent
 }
-
 const OIconButton = (props: Props) => {
+  const { RenderIcon } = props
   const theme = useTheme()
 
   return (
@@ -66,7 +67,7 @@ const OIconButton = (props: Props) => {
             ...props.style
           }}
         >
-          {props.icon ? (
+          {props.icon && typeof props.icon !== 'object' ? (
             <Icon
               source={props.icon}
               style={{
@@ -75,6 +76,9 @@ const OIconButton = (props: Props) => {
               }}
             />
           ) : null}
+          {RenderIcon ? (
+            <RenderIcon />
+          ) : null}
           {props.title ? (
             <Title style={{
               color: props.textColor || props.color,
@@ -97,7 +101,7 @@ const OIconButton = (props: Props) => {
         >
           {props.icon ? (
             <Icon
-              source={props.urlIcon ? {uri: props.icon} : props.icon}
+              source={props.urlIcon ? { uri: props.icon } : props.icon}
               resizeMode={props.cover ? 'cover' : 'contain'}
               style={{
                 tintColor: props.iconColor,
@@ -105,6 +109,9 @@ const OIconButton = (props: Props) => {
               }}
             />
           ) : null}
+          {RenderIcon ? (
+            <RenderIcon />
+          ) : null}
           {props.title ? (
             <Title style={{
               color: props.textColor || props.color,