ordering-ui-react-native 0.15.38-release → 0.15.39-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.15.38-release",
+  "version": "0.15.39-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -124,7 +124,8 @@
     "@babel/core": "^7.11.6",
     "@babel/runtime": "^7.11.2",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@types/react": "^16.9.51",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
     "@types/react-native": "^0.63.25",
     "babel-jest": "^26.3.0",
     "eslint": "^7.10.0",

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -247,17 +247,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   let isToFollow = false;
   let isBusinessMarker = false;
 
-  if (order?.status === 7 || order?.status === 8) {
+  if (order?.status === 7 || order?.status === 8 || order?.status === 18) {
     const markerBusiness = 'Business';
     isBusinessMarker = true;
     locationMarker = locations.find(
       (location: any) => location.type === markerBusiness,
     );
 
-    if (order?.status === 8) {
+    if (order?.status === 8 || order?.status === 18) {
       isToFollow = true;
     }
-  } else if (order?.status === 3 || order?.status === 9) {
+  } else if (order?.status === 3 || order?.status === 9 || order?.status === 19 || order?.status === 23) {
     const markerCustomer = 'Customer';
     isToFollow = true;
     isBusinessMarker = false;

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { PanResponder, TouchableOpacity, View } from 'react-native';
+import { PanResponder, Platform, TouchableOpacity, View } from 'react-native';
 import {
   useLanguage,
   useOrder,
@@ -40,7 +40,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
   const clearCartWhenTimeOut = () => {
     if (cart?.uuid) clearCart(cart?.uuid)
   }
-  const timerId = useRef(false);
+  const timerId: any = useRef(false);
 
   const clearInactivityTimeout = () =>{ 
     clearTimeout(timerId.current);
@@ -93,6 +93,17 @@ const BusinessMenu = (props:any): React.ReactElement => {
     else showCartBottomSheet();
   }
 
+  const handleRedirect = () => {
+    navigation.navigate('DeliveryType', {
+      callback: () => {
+        navigation.navigate('Business');
+      },
+      goBack: () => {
+        navigation.goBack();
+      },
+    });
+  };
+
   return (
     <View style={{
       flex: 1,
@@ -109,31 +120,31 @@ const BusinessMenu = (props:any): React.ReactElement => {
         }}
       >
         <Container nopadding nestedScrollEnabled>
-          <View style={{ paddingTop: 20 }}>
-            <NavBar
-              title={t('MENU_V21', 'Menu')}
-              onActionLeft={goToBack}
-              includeOrderTypeSelector
-              rightComponent={cart && (
-                <TouchableOpacity
-                  style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
-                  onPress={onToggleCart}
+          {Platform.OS === 'android' && (<View style={{ paddingTop: 20 }} />)}
+          <NavBar
+            title={t('MENU_V21', 'Menu')}
+            onActionLeft={goToBack}
+            includeOrderTypeSelector
+            onClickTypes={handleRedirect}
+            rightComponent={cart && (
+              <TouchableOpacity
+                style={{ flexDirection: 'row', alignItems: 'center' }}
+                onPress={onToggleCart}
+              >
+                <OText
+                  color={theme.colors.mediumGray}
                 >
-                  <OText
-                    color={theme.colors.mediumGray}
-                  >
-                    {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
-                  </OText>
-
-                  <MaterialIcon
-                    name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
-                    color={theme.colors.primary}
-                    size={30}
-                  />
-                </TouchableOpacity>
-              )}
-            />
-          </View>
+                  {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
+                </OText>
+
+                <MaterialIcon
+                  name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
+                  color={theme.colors.primary}
+                  size={30}
+                />
+              </TouchableOpacity>
+            )}
+          />
 
           <BusinessProductsListing
             { ...businessProductsListingProps }
@@ -144,7 +155,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
         </Container>
       </View>
 
-        <View
+        {/* <View
           style={{
             flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
             display: bottomSheetVisibility ? 'flex' : 'none'
@@ -155,7 +166,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
             resetInactivityTimeout={resetInactivityTimeout}
             clearInactivityTimeout={clearInactivityTimeout}
           />
-        </View>
+        </View> */}
     </View>
   );
 };

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import React from 'react';
+import { PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView, Platform } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
@@ -21,7 +21,6 @@ const BusinessesListingUI = (props: any) => {
     navigation,
     businessesList,
     handleBusinessClick,
-    paginationProps,
   } = props;
 
   const theme = useTheme();

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

@@ -110,7 +110,6 @@ const CartUI = (props: any) => {
         <NavBar
           title={t('CONFIRM_YOUR_ORDER', 'Confirm your order')}
           onActionLeft={goToBack}
-          style={{ height: orientationState?.dimensions?.height * 0.08 }}
           btnStyle={{ paddingLeft: 0 }}
           rightComponent={(
             <OButton
@@ -238,8 +237,8 @@ const CartUI = (props: any) => {
                 </OSTable>
               )}
               {
-                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
-                  <OSTable key={offer.id}>
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
+                  <OSTable key={`${offer?.id}_${i}`}>
                     <OSRow>
                       <OText>{offer.name}</OText>
                       {offer.rate_type === 1 && (
@@ -263,8 +262,8 @@ const CartUI = (props: any) => {
                 </OSTable>
               )}
               {
-                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
-                  <OSTable key={tax.id}>
+                cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any, i: number) => (
+                  <OSTable key={`${tax?.id}_${i}`}>
                     <OSRow>
                       <OText>
                         {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -276,8 +275,8 @@ const CartUI = (props: any) => {
                 ))
               }
               {
-                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
-                  <OSTable key={fee?.id}>
+                cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
+                  <OSTable key={`${fee?.id}_${i}`}>
                     <OSRow>
                       <OText>
                         {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -289,8 +288,8 @@ const CartUI = (props: any) => {
                 ))
               }
               {
-                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
-                  <OSTable key={offer.id}>
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any, i: number) => (
+                  <OSTable key={`${offer?.id}_${i}`}>
                     <OSRow>
                       <OText>{offer.name}</OText>
                       {offer.rate_type === 1 && (
@@ -310,8 +309,8 @@ const CartUI = (props: any) => {
                 </OSTable>
               )}
               {
-                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
-                  <OSTable key={offer.id}>
+                cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any, i: number) => (
+                  <OSTable key={`${offer?.id}_${i}`}>
                     <OSRow>
                       <OText>{offer.name}</OText>
                       {offer.rate_type === 1 && (

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

@@ -62,6 +62,10 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
   }
 
   const handleEditProduct = (product: any) => {
+    if (props.onEditProduct) {
+      props.onEditProduct(product)
+      return
+    }
     setCurProduct(product)
     setModalIsOpen(true)
   }
@@ -148,7 +152,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
       <StyledBottomContent
         style={{bottom:10}}
         minHeight={props.height * 0.01}
-      > 
+      >
         <OButton
           text={(cart?.subtotal >= cart?.minimum || !cart?.minimum) && cart?.valid_address ? (
             !openUpselling !== canOpenUpselling ? `${t('CHECKOUT', 'Checkout')} ${parsePrice(cart?.total)}`: t('LOADING', 'Loading')
@@ -198,6 +202,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
           canOpenUpselling={canOpenUpselling}
           setCanOpenUpselling={setCanOpenUpselling}
           onClose={onCloseUpselling}
+          onAddProduct={props.onAddProduct}
           resetInactivityTimeout={resetInactivityTimeout}
         />
       )}
@@ -231,7 +236,7 @@ const TopBar = (props:any) => {
 			<OIconButton
         bgColor="transparent"
         borderColor="transparent"
-        RenderIcon={() => 
+        RenderIcon={() =>
             <EvilIcons
               name={'close'}
               size={40}
@@ -260,6 +265,8 @@ interface CartBottomSheetUIProps {
 	onNavigationRedirect: any,
   clearInactivityTimeout: any,
   resetInactivityTimeout: any,
+  onEditProduct: any,
+  onAddProduct: any,
 }
 
 export const CartBottomSheet = (props: any) => {

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

@@ -1,10 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { useLanguage } from 'ordering-components/native';
 import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
-import { CCNotCarts } from './styles';
 
 import { Cart } from '../Cart';
-import { OText } from '../shared';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { Cart as TypeCart } from '../../types';
 
@@ -20,7 +17,6 @@ export const CartContent = (props: any) => {
     resetInactivityTimeout,
   }: Props = props
 
-  const [, t] = useLanguage()
   const [isCartsLoading, setIsCartsLoading] = useState(false)
   const [, { hideCartBottomSheet }] = useCartBottomSheet();
 
@@ -56,13 +52,6 @@ export const CartContent = (props: any) => {
           }
         </>
       )}
-      {/* {(!cart && showNotFound) && (
-        <CCNotCarts>
-          <OText size={24} style={{ textAlign: 'center' }}>
-            {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
-          </OText>
-        </CCNotCarts>
-      )} */}
       <Spinner visible={isCartsLoading} />
     </>
   )

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

@@ -56,9 +56,10 @@ 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 getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: any }) => {
     const pos = position ? `(${position})` : ''
-    return `${quantity} x ${name} ${pos} +${price}`
+    const str = `${quantity} x ${name} ${pos}`
+    return price ? `${str} ${price}` : str
   }
 
   return (
@@ -184,7 +185,7 @@ const CartItem = (props: CartItemProps) => {
                             quantity: suboption.quantity,
                             name: suboption.name,
                             position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-                            price: parsePrice(suboption.price)
+                            price: suboption.price > 0 && `+${parsePrice(suboption.price)}`
                           })}
                         </OText>
                       </ProductSubOption>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Dimensions, Platform, View } from 'react-native';
 import { useLanguage, useOrder, useUtils } from 'ordering-components/native';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -12,6 +12,7 @@ import {
   OText
 } from '../../components/shared';
 import { CartBottomSheet } from '../../components/CartBottomSheet';
+import { NotFoundSource } from '../NotFoundSource';
 import { Category } from '../../types';
 import { CartContent } from '../../components/CartContent';
 import { TouchableOpacity } from 'react-native-gesture-handler';
@@ -40,20 +41,22 @@ const CategoriesMenu = (props: any): React.ReactElement => {
 
   const theme = useTheme()
   const [, t] = useLanguage();
-  const [curIndexCateg, setIndexCateg] = useState(categories.indexOf(category));
   const [{ parsePrice }] = useUtils();
   const [orientationState] = useDeviceOrientation();
   const [bottomSheetVisibility, { showCartBottomSheet, hideCartBottomSheet }] = useCartBottomSheet();
-  const [productSelected, setProductSelected] = useState({})
+
+  const [productState, setProductState] = useState<any>(null)
+  const [productSelected, setProductSelected] = useState<any>({})
+  const [curIndexCateg, setIndexCateg] = useState(categories.indexOf(category));
   const [drawerState, setDrawerState] = useState({ isOpen: false, data: { order: null } });
 
   const width_dimension = Dimensions.get('window').width;
   const height_dimension = Dimensions.get('window').height;
-  
+
   const KeyboardView = styled.KeyboardAvoidingView`
     flex: 1;
   `;
-  
+
   const onChangeTabs = (idx: number) => {
     resetInactivityTimeout();
     setIndexCateg(idx);
@@ -75,6 +78,16 @@ const CategoriesMenu = (props: any): React.ReactElement => {
     cart = cartsList?.find((item: any) => item.business_id == businessId);
   }
 
+  const onEditProduct = (product: any) => {
+    setProductSelected({ ...product, _isEditProduct: true })
+    setDrawerValues({ isOpen: true, data: null })
+  }
+
+  const onAddProduct = (product: any) => {
+    setProductSelected(product)
+    setDrawerValues({ isOpen: true, data: null })
+  }
+
   const cartProps = {
     ...props,
     cart,
@@ -87,16 +100,32 @@ const CategoriesMenu = (props: any): React.ReactElement => {
       visible: bottomSheetVisibility,
       clearInactivityTimeout,
       resetInactivityTimeout,
+      onEditProduct,
+      onAddProduct
     },
     showNotFound: false,
     showCartBottomSheet,
   }
 
+  const onClickDrawer = () => {
+    setDrawerValues({ isOpen: !drawerState.isOpen, data: null })
+    setProductState(null)
+  }
+
+  const onSaveProductForm = () => {
+    showCartBottomSheet()
+    onClickDrawer()
+  }
+
   const onToggleCart = () => {
     if (bottomSheetVisibility) hideCartBottomSheet();
     else showCartBottomSheet();
   }
 
+  const onProductStateChange = useCallback((val: any) => {
+    setProductState({ ...productState, ...val })
+  }, [setProductState])
+
   return (
     <>
       <View style={{
@@ -112,44 +141,46 @@ const CategoriesMenu = (props: any): React.ReactElement => {
           }}
         >
           <Container nopadding nestedScrollEnabled>
-            <View style={{ paddingTop: 20 }}>
-              <NavBar
-                title={categories[curIndexCateg].name}
-                onActionLeft={goToBack}
-                rightComponent={cart && (
-                  <TouchableOpacity
-                    style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
-                    onPress={onToggleCart}
+            {Platform.OS === 'android' && (<View style={{ paddingTop: 20 }} />)}
+            <NavBar
+              title={categories[curIndexCateg].name}
+              onActionLeft={goToBack}
+              rightComponent={cart && (
+                <TouchableOpacity
+                  style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
+                  onPress={onToggleCart}
+                >
+                  <OText
+                    color={theme.colors.mediumGray}
                   >
-                    <OText
-                      color={theme.colors.mediumGray}
-                    >
-                      {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
-                    </OText>
-
-                    <MaterialIcon
-                      name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
-                      color={theme.colors.primary}
-                      size={30}
-                    />
-                  </TouchableOpacity>
-                )}
-              />
-              <OSegment
-                items={categories.map((category) => ({
-                  text: category.name
-                }))}
-                selectedIdx={curIndexCateg}
-                onSelectItem={onChangeTabs}
-              />
-            </View>
-
-            <GridContainer 
-              style={{ 
-                marginTop: 20, 
+                    {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
+                  </OText>
+
+                  <MaterialIcon
+                    name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
+                    color={theme.colors.primary}
+                    size={30}
+                  />
+                </TouchableOpacity>
+              )}
+            />
+
+            <OSegment
+              items={categories.map((category) => ({
+                text: category.name
+              }))}
+              selectedIdx={curIndexCateg}
+              onSelectItem={onChangeTabs}
+            />
+
+            <GridContainer
+              style={{
+                marginTop: 20,
                 paddingLeft: orientationState?.orientation === LANDSCAPE
-                        ? bottomSheetVisibility ? orientationState?.dimensions?.width * 0.004 :orientationState?.dimensions?.width * 0.008
-                        : 0
+                  ? bottomSheetVisibility
+                    ? orientationState?.dimensions?.width * 0.004
+                    : orientationState?.dimensions?.width * 0.008
+                  : 0
               }}
             >
               {categories[curIndexCateg].products.map((product) => (
@@ -170,8 +201,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                   onPress={() => {
                     resetInactivityTimeout()
                     if (isDrawer) {
-                      setProductSelected(product)
-                      setDrawerValues({ isOpen: true, data: null })
+                      onAddProduct && onAddProduct(product)
                     } else {
                       navigation.navigate('ProductDetails', {
                         businessId,
@@ -182,26 +212,31 @@ const CategoriesMenu = (props: any): React.ReactElement => {
                   }}
                 />
               ))}
+
+              {categories[curIndexCateg].products.length === 0 && (
+                <NotFoundSource
+                  content={t('ERROR_NOT_FOUND_PRODUCTS_TIME', 'No products found at this time')}
+                />
+              )}
             </GridContainer>
           </Container>
         </View>
-
-          <View
-            style={{
-              flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
-              display: bottomSheetVisibility ? 'flex' : 'none'
-            }}
-          >
-            <CartContent
-              {...cartProps}
-            />
-          </View>
+        <View
+          style={{
+            flex: bottomSheetVisibility && orientationState?.orientation === PORTRAIT ? 0 : 0.8,
+            display: bottomSheetVisibility ? 'flex' : 'none'
+          }}
+        >
+          <CartContent
+            {...cartProps}
+          />
+        </View>
       </View>
       <DrawerView
         isOpen={drawerState.isOpen}
         width={width_dimension - (width_dimension * 0.4)}
         height={height_dimension}
-        onClickIcon={() => setDrawerValues({ isOpen: !drawerState.isOpen, data: null })}
+        onClickIcon={onClickDrawer}
       >
         <KeyboardView
           enabled
@@ -209,14 +244,24 @@ const CategoriesMenu = (props: any): React.ReactElement => {
         >
           <ProductForm
             isDrawer
-            product={productSelected}
-            businessId={parseInt(businessId, 10)}
-            businessSlug={businessSlug}
-            onSave={() => {
-              showCartBottomSheet()
-              setDrawerValues({ isOpen: !drawerState.isOpen, data: null })
-            }}
             navigation={navigation}
+            {...(productSelected?._isEditProduct ? {
+              isEdit: true,
+              productCart: productState?.productCart ?? productSelected,
+              product: productState?.product,
+              businessSlug: cart?.business?.slug,
+              businessId: cart?.business_id,
+              categoryId: productSelected?.category_id,
+              productId: productSelected?.id,
+            } : {
+              product: productSelected,
+              businessSlug: businessSlug,
+              businessId: parseInt(businessId, 10),
+              productState: productState,
+              productCart: productState,
+            })}
+            onSave={onSaveProductForm}
+            onProductStateChange={onProductStateChange}
           />
         </KeyboardView>
       </DrawerView>

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

@@ -50,6 +50,12 @@ const CheckoutUI = (props: any) => {
     }
   }, [cart])
 
+  useEffect(() => {
+    if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
+      navigation?.canGoBack() && navigation.goBack()
+    }
+  }, [cart])
+
   return (
     <>
       <PaymentOptions

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

@@ -53,5 +53,6 @@ const styles = StyleSheet.create({
     },
     shadowOpacity: 0.21,
     shadowRadius: 5,
+    elevation: 16
   }
 })

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

@@ -19,12 +19,12 @@ export const WrapperFloatBtn = styled.View`
   top: 10%;
   right: ${(props: any) => props.outside ? 11 : 58}%;
   z-index: 20002;
-  elevation: 11;
+  elevation: 17;
 `;
 
 export const IconControl = styled.TouchableOpacity`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px;
   border-radius: 8px;
-  elevation: 11;
+  elevation: 17;
 `;

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

@@ -1,9 +1,8 @@
 import * as React from 'react'
 import styled from 'styled-components/native'
 import { OIcon, OButton, OText } from '../shared'
-import { ImageStyle, TextStyle, View, Platform } from 'react-native'
-import { OrderTypeSelector } from '../OrderTypeSelector'
-import { useConfig, useLanguage } from 'ordering-components/native'
+import { ImageStyle, TextStyle, View, Platform, TouchableOpacity } from 'react-native'
+import { useConfig, useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
 
 const Wrapper = styled.View`
@@ -55,13 +54,15 @@ interface Props {
   paddingTop?: number,
   includeOrderTypeSelector?: boolean,
   imgLeftStyle?: ImageStyle
+  onClickTypes?: any
 }
 
 const NavBar = (props: Props) => {
   const theme = useTheme();
-  const [{ configs }] = useConfig();
+  const [orderState] = useOrder()
   const [, t] = useLanguage();
-  const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || [];
+
+  const selectedOrderType = orderState?.options?.type;
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
@@ -121,7 +122,15 @@ const NavBar = (props: Props) => {
           }}
         >
           <OText style={{ paddingRight: 5 }}>{t('THIS_ORDER_IS_TO', 'This order is to')}</OText>
-          <OrderTypeSelector configTypes={configTypes} />
+          <TouchableOpacity
+            activeOpacity={1}
+            onPress={props.onClickTypes}
+          >
+            <OText color={theme.colors.primary}>
+              {selectedOrderType === 2 && t('TAKE_OUT', 'Take out')}
+              {selectedOrderType === 3 && t('EAT_IN', 'Eat in')}
+            </OText>
+          </TouchableOpacity>
         </View>
       )}
 

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

@@ -57,8 +57,8 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
       <Container>
         <NavBar
           title={t('ORDER_TYPE_X_ID', 'Order type')}
-          {...(goBack && { onActionLeft: goBack } )}
-          btnStyle={{paddingLeft: 0}}
+          onActionLeft={goBack}
+          btnStyle={{ paddingLeft: 0 }}
         />
 
         <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>

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

@@ -189,67 +189,69 @@ const PaymentOptionsUI = (props: any) => {
 
   return (
     <>
-      <Spinner visible={isLoading || placing} />
+      <Spinner visible={isLoading || placing || paymethodsList?.loading} />
 
       <Container nestedScrollEnabled>
-        <NavBar
-          title={t('PAYMENT_METHODS', 'Payment methods')}
-          onActionLeft={goToBack}
-          btnStyle={{ paddingLeft: 0 }}
-        />
-
-        <View
-          style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
-          <OText size={orientationState?.dimensions?.width * 0.048}>
-            {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
-            <OText
-              size={orientationState?.dimensions?.width * 0.048}
-              weight={'700'}>
-              {`${t('LIKE_TO_PAY', 'like to pay')}?`}
-            </OText>
-          </OText>
-        </View>
-
         {supportedMethods?.length > 0 && (
-          <GridContainer style={{ justifyContent: 'space-between' }}>
-            {propsOfItems.CARD_ON_DELIVERY_ID && (
-              <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
-                <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
-              </View>
-            )}
+          <>
+            <NavBar
+              title={t('PAYMENT_METHODS', 'Payment methods')}
+              onActionLeft={goToBack}
+              btnStyle={{ paddingLeft: 0 }}
+            />
 
             <View
-              style={{
-                width:
-                  orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.0016
-                    : 1,
-                height:
-                  orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions?.height * 0.018
-                    : 1,
-              }}
-            />
+              style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
+              <OText size={orientationState?.dimensions?.width * 0.048}>
+                {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
+                <OText
+                  size={orientationState?.dimensions?.width * 0.048}
+                  weight={'700'}>
+                  {`${t('LIKE_TO_PAY', 'like to pay')}?`}
+                </OText>
+              </OText>
+            </View>
 
-            {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+            <GridContainer style={{ justifyContent: 'space-between' }}>
+              {propsOfItems.CARD_ON_DELIVERY_ID && (
+                <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
+                  <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
+                </View>
+              )}
 
-            <View
-              style={{
-                width:
-                  orientationState?.orientation === LANDSCAPE
-                    ? orientationState?.dimensions?.width * 0.0016
-                    : 1,
-                height:
-                  orientationState?.orientation === PORTRAIT
-                    ? orientationState?.dimensions?.height * 0.018
-                    : 1,
-              }}
-            />
+              <View
+                style={{
+                  width:
+                    orientationState?.orientation === LANDSCAPE
+                      ? orientationState?.dimensions?.width * 0.0016
+                      : 1,
+                  height:
+                    orientationState?.orientation === PORTRAIT
+                      ? orientationState?.dimensions?.height * 0.018
+                      : 1,
+                }}
+              />
+
+              {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
+
+              <View
+                style={{
+                  width:
+                    orientationState?.orientation === LANDSCAPE
+                      ? orientationState?.dimensions?.width * 0.0016
+                      : 1,
+                  height:
+                    orientationState?.orientation === PORTRAIT
+                      ? orientationState?.dimensions?.height * 0.018
+                      : 1,
+                }}
+              />
 
-            {propsOfItems.STRIPE && (
-              <OptionCard {...propsOfItems?.STRIPE} />
-            )}
-          </GridContainer>
+              {propsOfItems.STRIPE && (
+                <OptionCard {...propsOfItems?.STRIPE} />
+              )}
+            </GridContainer>
+          </>
         )}
         <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
         <OModal

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

@@ -6,8 +6,7 @@ import {
   StyleSheet,
   Animated,
   ScrollView,
-  Platform,
-  ImageBackground
+  ImageBackground,
 } from 'react-native'
 import {
   ProductForm as ProductOptions,
@@ -17,7 +16,6 @@ import {
   useUtils
 } from 'ordering-components/native'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import Spinner from 'react-native-loading-spinner-overlay'
 import { useTheme } from 'styled-components/native'
 
 import { ProductIngredient } from '../ProductIngredient'
@@ -32,12 +30,11 @@ import {
   ProductComment,
   ProductActions
 } from './styles'
-import { OButton, OImage, OInput, OText } from '../shared'
+import { OButton, OInput, OText } from '../shared'
 import { ProductOptionSubOption } from '../ProductOptionSubOption'
 import { NotFoundSource } from '../NotFoundSource'
 import NavBar from '../NavBar'
 import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
-import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
 
 export const ProductOptionsUI = (props: any) => {
   const {
@@ -56,7 +53,6 @@ export const ProductOptionsUI = (props: any) => {
     handleChangeCommentState,
     productObject,
     onClose,
-    isFromCheckout,
     isDrawer
   } = props;
 
@@ -66,7 +62,6 @@ export const ProductOptionsUI = (props: any) => {
   const [orderState] = useOrder();
   const [{ auth }] = useSession();
   const [orientationState] = useDeviceOrientation();
-  const [, { showCartBottomSheet }] = useCartBottomSheet();
 
   const { product, loading, error } = productObject;
 
@@ -87,6 +82,8 @@ export const ProductOptionsUI = (props: any) => {
   const handleSaveProduct = () => {
     const isErrors = Object.values(errors).length > 0
     if (!isErrors) {
+      props.onProductStateChange &&
+      props.onProductStateChange(props.isEdit ? { product, productCart }: productCart)
       handleSave && handleSave()
       return
     }
@@ -503,12 +500,14 @@ export const ProductOptionsUI = (props: any) => {
             </WrapContent>
           </View>
         )}
+
         {error && error.length > 0 && (
           <NotFoundSource
             content={error[0]?.message || error[0]}
           />
         )}
       </ScrollView>
+
       {!loading && !error && product && (
         <ProductActions>
           {productCart && !isSoldOut && maxProductQuantity > 0 && (

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

@@ -103,7 +103,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
 
   const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
     const pos = position ? `(${position})` : ''
-    return `${quantity} x ${name} ${pos} +${price}`
+    return `${quantity} x ${name} ${pos} ${price}`
   }
 
   /*useEffect(() => {
@@ -210,7 +210,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
                             quantity: suboption.quantity,
                             name: suboption.name,
                             position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
-                            price: parsePrice(suboption.price)
+                            price: suboption.price > 0 ? `+${parsePrice(suboption.price)}` : parsePrice(suboption.price)
                           })}
                         </OText>
                       </ProductSubOption>

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

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

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

@@ -144,13 +144,15 @@ export const ProductOptionSubOptionUI = (props: any) => {
             </PositionControl>
           )
         }
+        {price > 0 && (
           <OText
             color="#909BA9"
             size={16}
             weight="bold"
           >
-            + {parsePrice(price)}
+          + {parsePrice(price)}
           </OText>
+        )}
       </RightSide>
     </Container>
   )

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

@@ -71,6 +71,11 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   }, [upsellingProducts.loading, upsellingProducts?.products.length])
 
   const handleFormProduct = (product: any) => {
+    if (props.onAddProduct) {
+      onClose && onClose()
+      props.onAddProduct(product)
+      return
+    }
     setActualProduct(product)
     setModalIsOpen(true)
   }
@@ -81,9 +86,18 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
   }
 
   const UpsellingLayout = () => {
-
     const theme = useTheme()
 
+    const onClickProduct = (product: any) => {
+      resetInactivityTimeout()
+      if (props.onAddProduct) {
+        onClose && onClose()
+        props.onAddProduct(product)
+        return
+      }
+      handleFormProduct(product)
+    }
+
     return (
       <Container>
         {
@@ -167,10 +181,7 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
                         style={{ height: 40, width: '100%' }}
                         bgColor="#EAF2FE"
                         borderColor="#EAF2FE"
-                        onClick={() => {
-                          resetInactivityTimeout()
-                          handleFormProduct(product)
-                        }}
+                        onClick={() => onClickProduct(product)}
                       />
                     </Item>
                   )) : (

package/themes/kiosk/src/types/index.d.ts

@@ -55,6 +55,7 @@ export interface UpsellingProductsParams {
   setCanOpenUpselling?: (value: any) => void;
   onClose?: () => void;
   resetInactivityTimeout: any;
+  onAddProduct: any;
 }
 
 export interface LanguageSelectorParams {

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

@@ -417,14 +417,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   ];
   const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l: string) => l.replace(/[^-.0-9]/g, ''))
   const parsedLocations = locations.map(location => typeof location?.location === 'string' ? {
-      ...location,
-      lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
-      lng: parseFloat(location?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
-    } : location)
+    ...location,
+    lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
+    lng: parseFloat(location?.location?.split(',')[1].replace(/[^-.0-9]/g, ''))
+  } : location)
 
   useEffect(() => {
     if (driverLocation) {
-      locations[0] = driverLocation;
+      parsedLocations[0] = {
+        ...locations[0],
+        ...driverLocation
+      }
     }
   }, [driverLocation]);
 
@@ -696,7 +699,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     <Map>
                      <GoogleMap
                         location={typeof order?.driver?.location?.location === 'string'
-                        ? {
+                          ? {
                             lat: parseFloat(driverLocationString[0]),
                             lng: parseFloat(driverLocationString[1]),
                           } : driverLocation ?? order?.driver?.location
@@ -1027,7 +1030,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                           )}
                         </View>
                         <OText>
-                          -{parsePrice(event.amount)}
+                          -{parsePrice(event.amount, { isTruncable: true })}
                         </OText>
                       </View>
                     ))}