ordering-ui-react-native 0.11.57 → 0.11.61

package/package.json

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

package/src/components/OrderCreating/index.tsx

@@ -67,13 +67,17 @@ export const OrderCreating = (props: any) => {
     let hour = 0
     let min = 0
     if (orderState?.options?.type === 1 && cart) {
-      hour = (cart?.business?.delivery_time).split(':')[0]
-      min = (cart?.business?.delivery_time).split(':')[1]
+      if (cart?.business?.delivery_time) {
+        hour = (cart?.business?.delivery_time).split(':')[0]
+        min = (cart?.business?.delivery_time).split(':')[1]
+      }
     }
 
     if (orderState?.options?.type === 2 && cart) {
-      hour = (cart?.business?.pickup_time).split(':')[0]
-      min = (cart?.business?.pickup_time).split(':')[1]
+      if (cart?.business?.pickup_time) {
+        hour = (cart?.business?.pickup_time).split(':')[0]
+        min = (cart?.business?.pickup_time).split(':')[1]
+      }
     }
     return getHourMin(hour, min)
   }

package/src/config.json

@@ -2,7 +2,7 @@
   "app_id": "react-native-app",
   "notification_app": "orderingapp",
   "app_name": "Ordering",
-  "project": "reactdemo",
+  "project": "luisv4",
   "api": {
     "url": "https://apiv4.ordering.co",
     "language": "en",

package/themes/business/index.tsx

@@ -34,7 +34,7 @@ import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { VerifyPhone } from './src/components/VerifyPhone';
 import { DriverMap } from './src/components/DriverMap';
-
+import { MapViewUI as MapView } from './src/components/MapView'
 //OComponents
 import {
   OText,
@@ -74,6 +74,7 @@ export {
   LogoutButton,
   MessagesOption,
   NotFoundSource,
+  MapView,
   OrderDetailsBusiness,
   OrderDetailsDelivery,
   OrderMessage,

package/themes/business/src/components/MapView/index.tsx

@@ -0,0 +1,286 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Dimensions, SafeAreaView, StyleSheet, View } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native'
+import MapView, {
+  PROVIDER_GOOGLE,
+  Marker,
+  Callout
+} from 'react-native-maps';
+import { useLanguage, useSession, MapView as MapViewController } from 'ordering-components/native';
+import { MapViewParams } from '../../types';
+import Alert from '../../providers/AlertProvider';
+import { useTheme } from 'styled-components/native';
+import { useLocation } from '../../hooks/useLocation';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import { OIcon, OText } from '../shared'
+
+const MapViewComponent = (props: MapViewParams) => {
+
+  const {
+    onNavigationRedirect,
+    isLoadingBusinessMarkers,
+    getBusinessLocations,
+    markerGroups,
+    customerMarkerGroups
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ user }] = useSession()
+  const { width, height } = Dimensions.get('window');
+  const ASPECT_RATIO = width / height;
+  const mapRef = useRef<MapView>(null);
+  const following = useRef<boolean>(true);
+  const [isFocused, setIsFocused] = useState(false)
+  const [locationSelected, setLocationSelected] = useState<any>(null)
+  const [alertState, setAlertState] = useState<{
+    open: boolean;
+    content: Array<string>;
+    key?: string | null;
+  }>({ open: false, content: [], key: null });
+
+  const {
+    initialPosition,
+    userLocation,
+    stopFollowUserLocation,
+    followUserLocation
+  } = useLocation();
+
+  const location = { lat: userLocation.latitude, lng: userLocation.longitude }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: [],
+    });
+  };
+
+  const fitCoordinates = (location?: any) => {
+    if (mapRef.current) {
+      mapRef.current.fitToCoordinates(
+        [
+          { latitude: location.latitude, longitude: location.longitude },
+          {
+            latitude: userLocation.latitude,
+            longitude: userLocation.longitude,
+          },
+        ],
+        {
+          edgePadding: { top: 120, right: 120, bottom: 120, left: 120 },
+        },
+      );
+    }
+  };
+
+  useEffect(() => {
+    fitCoordinates(locationSelected || userLocation);
+  }, [userLocation, locationSelected]);
+
+
+  useEffect(() => {
+    if (isFocused) {
+      getBusinessLocations()
+    }
+  }, [isFocused])
+
+  useEffect(() => {
+    followUserLocation();
+
+    return () => {
+      stopFollowUserLocation();
+    };
+  }, []);
+
+
+  useFocusEffect(
+    useCallback(() => {
+      setIsFocused(true)
+      return () => {
+        stopFollowUserLocation()
+        setIsFocused(false)
+        setLocationSelected(null)
+      }
+    }, [])
+  )
+
+  const styles = StyleSheet.create({
+    image: {
+      borderRadius: 50,
+    },
+    view: {
+      width: 25,
+      position: 'absolute',
+      top: 6,
+      left: 6,
+      bottom: 0,
+      right: 0,
+    },
+  });
+
+  const RenderMarker = ({ marker, customer, orderIds }: { marker: any, customer?: boolean, orderIds?: Array<number> }) => {
+    const markerRef = useRef<any>()
+    useEffect(() => {
+      if (
+        markerRef?.current?.props?.coordinate?.latitude === locationSelected?.latitude &&
+        markerRef?.current?.props?.coordinate?.longitude === locationSelected?.longitude
+      ) {
+        markerRef?.current?.showCallout()
+      } else {
+        markerRef?.current?.hideCallout()
+      }
+    }, [locationSelected])
+
+    return (
+      <Marker
+        key={customer ? marker?.customer?.id : marker?.business?.id}
+        coordinate={{
+          latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
+          longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+        }}
+        onPress={() =>
+          setLocationSelected({
+            latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
+            longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+          })
+        }
+        ref={(ref) => markerRef.current = ref}
+      >
+        <Icon
+          name="map-marker"
+          size={50}
+          color={theme.colors.primary}
+        />
+        <View style={styles.view}>
+          <OIcon
+            style={styles.image}
+            src={{ uri: customer ? marker?.customer?.photo : marker?.business?.logo }}
+            width={25}
+            height={25}
+          />
+        </View>
+        <Callout
+          onPress={() => !!orderIds && orderIds.toString().includes(',') ? onNavigationRedirect('Orders') : onNavigationRedirect('OrderDetails', { order: marker })}
+        >
+          <View style={{ flex: 1, width: 200, padding: 5 }}>
+            <OText weight='bold'>{customer ? `${marker?.customer?.name} ${marker?.customer?.lastname}` : marker?.business?.name}</OText>
+            <OText>
+              {!!orderIds && orderIds.toString().includes(',') ? (
+                <>
+                  {t('ORDER_NUMBERS', 'Order Numbers')} {orderIds}
+                </>
+              ) : (
+                <>
+                  {t('ORDER_NUMBER', 'Order No.')} {marker?.id}
+                </>
+              )}
+            </OText>
+            <OText>{customer ? marker?.customer?.address : marker?.business?.address}</OText>
+            {((customer && marker?.customer?.city?.address_notes) || !customer) && (
+              <OText>{customer ? marker?.customer?.city?.address_notes : marker?.business?.city?.name}</OText>
+            )}
+            {((customer && marker?.business?.zipcode) || (!customer && marker?.business?.zipcode)) && (
+              <OText>{customer ? marker?.customer?.zipcode : marker?.business?.zipcode}</OText>
+            )}
+            {customer && marker?.customer?.internal_number && (
+              <OText>{marker?.customer?.internal_number}</OText>
+            )}
+            <OText textDecorationLine='underline' color={theme.colors.primary}>
+              {!!orderIds && orderIds.toString().includes(',') ? (
+                <>
+                  {t('SHOW_ORDERS', 'Show orders')}
+                </>
+              ) : (
+                <>
+                  {t('MORE_INFO', 'More info')}
+                </>
+              )}
+            </OText>
+          </View>
+        </Callout>
+      </Marker>
+    )
+  }
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
+        <View style={{ flex: 1 }}>
+          {typeof initialPosition?.latitude === 'number' && !isLoadingBusinessMarkers && isFocused && (
+            <MapView
+              ref={mapRef}
+              provider={PROVIDER_GOOGLE}
+              initialRegion={{
+                latitude: initialPosition.latitude,
+                longitude: initialPosition.longitude,
+                latitudeDelta: 0.01,
+                longitudeDelta: 0.01 * ASPECT_RATIO,
+              }}
+              style={{ flex: 1 }}
+              zoomTapEnabled
+              zoomEnabled
+              zoomControlEnabled
+              cacheEnabled
+              moveOnMarkerPress
+              onTouchStart={() => (following.current = false)}
+            >
+              <>
+                {Object.values(markerGroups).map((marker: any) => (
+                  <RenderMarker
+                    key={marker[0]?.business_id}
+                    marker={marker[0]}
+                    orderIds={marker.map((order: any) => order.id).join(', ')}
+                  />
+                ))}
+                {Object.values(customerMarkerGroups).map((marker: any) => (
+                  <RenderMarker
+                    key={marker[0]?.customer_id}
+                    marker={marker[0]}
+                    orderIds={marker.map((order: any) => order.id).join(', ')}
+                    customer
+                  />
+                ))}
+                <Marker
+                  coordinate={{
+                    latitude: location.lat,
+                    longitude: location.lng,
+                  }}
+                  title={t('YOUR_LOCATION', 'Your Location')}
+                >
+                  <Icon
+                    name="map-marker"
+                    size={50}
+                    color={theme.colors.primary}
+                  />
+                  <View style={styles.view}>
+                    <OIcon
+                      style={styles.image}
+                      src={{ uri: user.photo }}
+                      width={25}
+                      height={25}
+                    />
+                  </View>
+                </Marker>
+              </>
+            </MapView>
+          )}
+        </View>
+      </View>
+      <View>
+        <Alert
+          open={alertState.open}
+          onAccept={closeAlert}
+          onClose={closeAlert}
+          content={alertState.content}
+          title={t('ERROR', 'Error')}
+        />
+      </View>
+    </SafeAreaView >
+  );
+};
+
+export const MapViewUI = (props: any) => {
+  const MapViewProps = {
+    ...props,
+    UIComponent: MapViewComponent
+  }
+  return <MapViewController {...MapViewProps} />
+}

package/themes/business/src/components/shared/OText.tsx

@@ -23,6 +23,7 @@ const SText = styled.Text`
     css`
       flex: ${props.weight ? 1 : 0};
     `};
+  text-decoration: ${(props : any) => props.textDecorationLine};
 `;
 interface Props {
   color?: string;
@@ -39,6 +40,7 @@ interface Props {
   numberOfLines?: number;
   ellipsizeMode?: string;
   adjustsFontSizeToFit?: boolean;
+  textDecorationLine?: string
 }
 
 const OText = (props: Props): React.ReactElement => {

package/themes/business/src/types/index.tsx

@@ -539,3 +539,11 @@ export interface AcceptOrRejectOrderParams {
   titleReject?: textTranslate;
   appTitle?: textTranslate;
 }
+
+export interface MapViewParams {
+  onNavigationRedirect: (page : string, params ?: any) => void,
+  getBusinessLocations: () => void,
+  isLoadingBusinessMarkers?: boolean,
+  markerGroups: Array<any>,
+  customerMarkerGroups: Array<any>
+}

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

@@ -27,7 +27,7 @@ import {
 import { OrderDetailsParams, Product } from '../../types'
 import { Container } from '../../layouts/Container';
 import NavBar from '../../components/NavBar';
-import { OButton, OImage, OInput, OText } from '../../components/shared';
+import { OButton, OIconButton, OImage, OInput, OText } from '../../components/shared';
 import GridContainer from '../../layouts/GridContainer';
 import OptionSwitch, { Opt } from '../../components/shared/OOptionToggle';
 import { verifyDecimals } from '../../../../../src/utils'
@@ -35,6 +35,7 @@ import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/ho
 import { useTheme } from 'styled-components/native'
 import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import EvilIcons from 'react-native-vector-icons/EvilIcons'
 const _EMAIL = 'email';
 const _SMS = 'sms';
 
@@ -210,6 +211,14 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       setCustomerName(name)
     }
     getCustomerName()
+    const redirectHome = setTimeout(() =>{
+      navigation.reset({
+        routes: [{ name: 'Intro' }],
+      });
+    }, 60000);
+    return () => {
+      clearTimeout(redirectHome);
+    }
   }, [])
 
   useEffect(() => {
@@ -327,7 +336,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       </OSInputWrapper>
 
       <OButton
-        text={`${t('YOU_ARE_DONE', 'You are done')}!`}
+        text={`${t('YOU_ARE_DONE', 'You are done! Click to close')}!`}
         onClick={() => {
           navigation.reset({
             routes: [{ name: 'Intro' }],
@@ -485,18 +494,46 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         <>
           <Container>
             <NavBar
-              title={t('TAKE_YOUR_RECEIPT', 'Take your receipt')}
+              title={t('BACK_BUTTON_CONFIRMATION', 'Confirmation')}
               style={{ right: 10 }}
+              rightComponent={
+                <OIconButton
+                  bgColor="transparent"
+                  borderColor="transparent"
+                  RenderIcon={() => 
+                      <EvilIcons
+                        name={'close'}
+                        size={40}
+                        color={theme.colors.primary}
+                      />
+                  }
+                  style={{ flex:1, justifyContent: 'flex-end', left: 30 }}
+                  onClick={() => {
+                    navigation.reset({
+                      routes: [{ name: 'Intro' }],
+                    });
+                  }}
+                />
+              }
             />
 
             <View style={{
               marginVertical: orientationState?.dimensions?.height * 0.03,
               flexDirection: orientationState?.orientation === PORTRAIT ? 'column' : 'row',
             }}>
+              <View
+                style={{
+                  flex: 1,
+                  marginVertical: orientationState?.orientation === PORTRAIT ? 40 : 0,
+                }}
+              >
+                {orderDetailsContent}
+              </View>
               <View style={{
-                flex: 1,
+                flex: 1.1,
                 marginRight: orientationState?.orientation === PORTRAIT ? 0 : 20,
-                justifyContent: 'space-between'
+                justifyContent: 'space-between',
+                marginLeft: 20
               }}>
                 <View>
                   <OText
@@ -515,22 +552,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText
                     size={orientationState?.dimensions?.width * (orientationState?.orientation === PORTRAIT ? 0.04 : 0.025)}
                   >
-                    {t('TO_FINISH_TAKE_YOUR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER', 'To finish take your receipt and go to the front counter.')}
+                    {t('TO_FINISH_TAKE_YOUR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER', "We`ve received your order and we will call you by your name or your order number.")}
                   </OText>
 
                 </View>
 
                 {orientationState?.orientation === LANDSCAPE && actionsContent}
               </View>
-
-              <View
-                style={{
-                  flex: 1.4,
-                  marginVertical: orientationState?.orientation === PORTRAIT ? 40 : 0,
-                }}
-              >
-                {orderDetailsContent}
-              </View>
             </View>
           </Container>
 

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,

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

@@ -90,6 +90,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 			height: 50,
 			maxHeight: 50,
 			minHeight: 50,
+			flex: 1,
 		},
 		textAreaStyles: {
 			borderColor: theme.colors.border,
@@ -495,7 +496,10 @@ const AddressFormUI = (props: AddressFormParams) => {
 	}, [orderState.loading]);
 
 	return (
-		<ScrollView>
+		<ScrollView
+			keyboardShouldPersistTaps='always'
+			listViewDisplayed={false}
+		>
 			<NavBar
 				title={t('WHERE_DO_WE_DELIVERY', 'Where do we delivery?')}
 				titleAlign={'center'}
@@ -504,7 +508,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 				paddingTop={20}
 				btnStyle={{ paddingLeft: 40 }}
 				titleStyle={{ fontSize: 14 }}
-				titleWrapStyle={{ flexBasis: '75%' }}
+				titleWrapStyle={{ paddingHorizontal: 0 }}
 			/>
 			<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
 				<AddressFormContainer style={{ height: 600, overflow: 'scroll' }}>

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

@@ -60,8 +60,9 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 
 	return (
 		<Container
-			isIos={Platform.OS === 'ios'}
-			style={{ paddingBottom: bottom + 16 }}>
+			style={{
+				paddingBottom: Platform.OS === 'ios' ? 0 : bottom + 16
+			}}>
 
 			<View style={styles.infoCont}>
 				<OText color={theme.colors.textNormal} size={16} lineHeight={24} weight={'600'} mRight={20}>

package/themes/original/src/components/FloatingButton/styles.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/native'
+import styled from 'styled-components/native'
 
 export const Container = styled.View`
   position: absolute;
@@ -21,6 +21,6 @@ export const Button = styled.TouchableOpacity`
   align-items: center;
   border-radius: 7.6px;
   height: 44px;
-  max-height; 44px;
+  max-height: 44px;
   padding-horizontal: 20px;
 `

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

@@ -25,7 +25,8 @@ const UserDetailsUI = (props: any) => {
 		validationFields,
 		isUserDetailsEdit,
 		phoneUpdate,
-		togglePhoneUpdate
+		togglePhoneUpdate,
+		isCheckout
 	} = props
 
 	const theme = useTheme();
@@ -116,7 +117,7 @@ const UserDetailsUI = (props: any) => {
 							)}
 						</UDInfo>
 					) : (
-						<UserFormDetailsUI {...props} phoneUpdate={phoneUpdate} togglePhoneUpdate={togglePhoneUpdate} />
+						<UserFormDetailsUI {...props} phoneUpdate={phoneUpdate} togglePhoneUpdate={togglePhoneUpdate} isCheckout={isCheckout} />
 					)}
 				</UDContainer>
 			)}

package/themes/original/src/components/UserFormDetails/styles.tsx

@@ -14,7 +14,6 @@ export const UDWrapper = styled.View`
   flex-direction: column;
   width: 100%;
   margin-top: 20px;
-  padding-bottom: 50px;
 `
 
 export const UDLoader = styled.View`

package/themes/original/src/layouts/Container.tsx

@@ -4,7 +4,7 @@ import { Platform } from 'react-native';
 
 const ContainerStyled = styled.ScrollView`
   flex: 1;
-  ${(props: any) => !props.nopadding && css`
+  ${(props: any) => !props.noPadding && css`
     padding: ${Platform.OS === 'ios' ? '0px 40px' : '20px 40px'};
   `}
   background-color: ${(props: any) => props.theme.colors.backgroundPage};