ordering-ui-react-native 0.11.58 → 0.12.0

package/package.json

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

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/CustomerName/index.tsx

@@ -34,7 +34,7 @@ const CustomerName = (props: Props): React.ReactElement => {
       marginBottom: 20,
       borderWidth: 1,
       borderColor: theme.colors.disabled,
-      height: 44
+      height: 50
     },
   });
 
@@ -67,72 +67,99 @@ const CustomerName = (props: Props): React.ReactElement => {
     }}
   />);
 
+  const skipButton  = (
+    <View style={{flex:1, left: orientationState?.dimensions.width * 0.2,}}>
+      <OButton
+        text={t('SKIP', 'Skip')}
+        onClick={onProceedToPay}
+        textStyle={{color: theme.colors.primaryContrast, fontSize: 20}}
+        parentStyle={{
+          height: orientationState?.orientation === PORTRAIT
+            ? 50 : 100
+        }}
+        style={{
+          width: orientationState?.orientation === PORTRAIT
+            ? orientationState?.dimensions.width - 40
+            : orientationState?.dimensions.width * 0.1,
+        }}
+      />
+    </View>
+  );
+
   return (
     <>
-      <Container>
-        <NavBar
-          title={t('YOUR_NAME', 'Your name')}
-          onActionLeft={goToBack}
-          btnStyle={{paddingLeft: 0}}
-        />
-
-        <View style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
-          <OText
-            size={orientationState?.dimensions?.width * 0.05}
-          >
-            {t('WHOM_MIGHT_THIS', 'Whom might this')} {'\n'}
-            <OText
-              size={orientationState?.dimensions?.width * 0.05}
-              weight={'700'}
-            >
-              {`${t('ORDER_BE_FOR', 'order be for?')}`}
-            </OText>
-          </OText>
-        </View>
-
-        <Controller
-          control={control}
-          render={({ onChange, value }: any) => (
-            <OInput
-              placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
-              style={{
-                ...styles.inputStyle,
-                width: orientationState?.orientation === PORTRAIT
-                  ? orientationState?.dimensions.width - 40
-                  : orientationState?.dimensions.width * 0.5,
-              }}
-              value={value}
-              autoCapitalize="words"
-              autoCorrect={false}
-              onChange={(val: any) => onChange(val)}
-            />
-          )}
-          name="name"
-          rules={{
-            required: t(
-              'VALIDATION_ERROR_REQUIRED',
-              'The field Customer Name is required',
-            ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
-            pattern: {
-              value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
-              message: t(
-                'INVALID_ERROR',
-                'Invalid name',
-              ).replace('_attribute_', t('NAME', 'Name')),
-            }
-          }}
-          defaultValue=""
-        />
-
-        {orientationState?.orientation === LANDSCAPE && submitButton}
-      </Container>
+        <Container>
+          <NavBar
+                title={t('YOUR_NAME', 'Your name')}
+                onActionLeft={goToBack}
+                btnStyle={{paddingLeft: 0}}
+          />
+          <View style={{ 
+            marginVertical: orientationState?.dimensions?.height * 0.08,
+            paddingLeft: orientationState?.dimensions?.width * 0.25
+          }}>
+              <OText
+                size={orientationState?.dimensions?.width * 0.05}
+                style={{bottom: 20}}
+              >
+                {t('WHATS_YOUR_NAME', "What's your name?")}
+                {/* <OText
+                  size={orientationState?.dimensions?.width * 0.05}
+                  weight={'700'}
+                >
+                  {`${t('ORDER_BE_FOR', 'order be for?')}`}
+                </OText> */}
+              </OText>
+              <Controller
+                control={control}
+                render={({ onChange, value }: any) => (
+                  <OInput
+                    placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+                    style={{
+                      ...styles.inputStyle,
+                      width: orientationState?.orientation === PORTRAIT
+                        ? orientationState?.dimensions.width - 40
+                        : orientationState?.dimensions.width * 0.5,
+                    }}
+                    value={value}
+                    autoCapitalize="words"
+                    autoCorrect={false}
+                    onChange={(val: any) => onChange(val)}
+                    onSubmitEditing={handleSubmit(onSubmit)}
+                  />
+                )}
+                name="name"
+                rules={{
+                  required: t(
+                    'VALIDATION_ERROR_REQUIRED',
+                    'The field Customer Name is required',
+                  ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
+                  pattern: {
+                    value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
+                    message: t(
+                      'INVALID_ERROR',
+                      'Invalid name',
+                    ).replace('_attribute_', t('NAME', 'Name')),
+                  }
+                }}
+                defaultValue=""
+              />
 
-      {(orientationState?.orientation === PORTRAIT) && (
-        <OSActions>
-          {submitButton}
-        </OSActions>
-      )}
-    </>
+              {orientationState?.orientation === LANDSCAPE && submitButton}
+              {orientationState?.orientation === LANDSCAPE && skipButton}
+              {(orientationState?.orientation === PORTRAIT) && (
+                <OSActions>
+                  {submitButton}
+                </OSActions>
+              )}
+              {(orientationState?.orientation === PORTRAIT) && (
+                <OSActions>
+                  {skipButton}
+                </OSActions>
+              )}
+            </View>
+        </Container>
+      </>
   );
 };
 

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/single-business/index.tsx

@@ -1,31 +1,76 @@
-import { AddressForm } from './src/components/AddressForm';
-import { AddressDetails } from './src/components/AddressDetails';
-import { Home } from './src/components/Home';
-import { LoginForm } from './src/components/LoginForm';
-import { SignupForm } from './src/components/SignupForm';
 import { ActiveOrders } from './src/components/ActiveOrders';
+import { AddressDetails } from './src/components/AddressDetails';
+import { AddressForm } from './src/components/AddressForm';
 import { AddressList } from './src/components/AddressList';
 import { AppleLogin } from './src/components/AppleLogin';
+import BottomWrapper from './src/components/BottomWrapper';
+import { BusinessBasicInformation } from './src/components/BusinessBasicInformation';
+import { BusinessController } from './src/components/BusinessController';
 import { BusinessesListing } from './src/components/BusinessesListing';
+import { BusinessFeaturedController } from './src/components/BusinessFeaturedController';
+import { BusinessInformation } from './src/components/BusinessInformation';
+import { BusinessItemAccordion } from './src/components/BusinessItemAccordion';
+import { BusinessProductsCategories } from './src/components/BusinessProductsCategories';
+import { BusinessProductsList } from './src/components/BusinessProductsList';
 import { BusinessProductsListing } from './src/components/BusinessProductsListing';
+import { BusinessReviews } from './src/components/BusinessReviews';
+import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
+import { Cart } from './src/components/Cart';
 import { CartContent } from './src/components/CartContent';
 import { Checkout } from './src/components/Checkout';
+import { CouponControl } from './src/components/CouponControl';
+import { DriverTips } from './src/components/DriverTips';
+import { FacebookLogin } from './src/components/FacebookLogin';
+import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
+import { GoogleLogin } from './src/components/GoogleLogin';
+import { GoogleMap } from './src/components/GoogleMap';
+import { GPSButton } from './src/components/GPSButton';
+import { Help } from './src/components/Help';
+import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
+import { HelpGuide } from './src/components/HelpGuide';
+import { HelpOrder } from './src/components/HelpOrder';
+import { Home } from './src/components/Home';
+import { LanguageSelector } from './src/components/LanguageSelector';
+import { LastOrder } from './src/components/LastOrder';
+import { LastOrders } from './src/components/LastOrders';
+import { LoginForm } from './src/components/LoginForm';
+import { LogoutButton } from './src/components/LogoutButton';
+import { Messages } from './src/components/Messages';
 import { MomentOption } from './src/components/MomentOption';
-import { OrdersOption } from './src/components/OrdersOption';
+import NavBar from './src/components/NavBar';
+import { NotFoundSource } from './src/components/NotFoundSource';
+import Notifications from './src/components/Notifications';
 import { OrderDetails } from './src/components/OrderDetails';
-import { UserProfileForm } from './src/components/UserProfileForm';
+import { OrdersOption } from './src/components/OrdersOption';
+import { OrderSummary } from './src/components/OrderSummary';
+import { OrderTypeSelector } from './src/components/OrderTypeSelector';
+import { PaymentOptionCash } from './src/components/PaymentOptionCash';
+import { PaymentOptions } from './src/components/PaymentOptions';
+import { PaymentOptionStripe } from './src/components/PaymentOptionStripe';
+import { PhoneInputNumber } from './src/components/PhoneInputNumber';
+import { PreviousOrders } from './src/components/PreviousOrders';
+import { ProductForm } from './src/components/ProductForm';
+import { ProductIngredient } from './src/components/ProductIngredient';
+import { ProductItemAccordion } from './src/components/ProductItemAccordion';
+import { ProductOption } from './src/components/ProductOption';
+import { ProductOptionSubOption } from './src/components/ProductOptionSubOption';
 import { ReviewOrder } from './src/components/ReviewOrder';
+import { SearchBar } from './src/components/SearchBar';
+import { SignupForm } from './src/components/SignupForm';
+import { SingleProductCard } from './src/components/SingleProductCard';
+import { StripeCardForm } from './src/components/StripeCardForm';
+import { StripeCardsList } from './src/components/StripeCardsList';
+import { StripeElementsForm } from './src/components/StripeElementsForm';
+import { StripeRedirectForm } from './src/components/StripeRedirectForm';
+import TagSelector from './src/components/TagSelector';
+import { UpsellingProducts } from './src/components/UpsellingProducts';
+import { UserDetails } from './src/components/UserDetails';
+import { UserFormDetailsUI } from './src/components/UserFormDetails';
 import { UserProfile } from './src/components/UserProfile';
-import { NotFoundSource } from './src/components/NotFoundSource';
-import { Help } from './src/components/Help';
-import { HelpOrder } from './src/components/HelpOrder';
-import { HelpGuide } from './src/components/HelpGuide';
-import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
-import { OrderTypeSelector } from './src/components/OrderTypeSelector';
-import Notifications from './src/components/Notifications';
+import { UserProfileForm } from './src/components/UserProfileForm';
+import { VerifyPhone } from './src/components/VerifyPhone';
 
-import { Toast } from './src/components/shared/OToast';
 import {
 	OText,
 	OButton,
@@ -40,6 +85,7 @@ import {
 	OAlert,
 	OModal,
 	OBottomPopup,
+  Toast
 } from './src/components/shared';
 
 import { Container } from './src/layouts/Container';
@@ -78,6 +124,52 @@ export {
 	HelpAccountAndPayment,
 	OrderTypeSelector,
 	Notifications,
+  BottomWrapper,
+  BusinessBasicInformation,
+  BusinessController,
+  BusinessFeaturedController,
+  BusinessInformation,
+  BusinessItemAccordion,
+  BusinessProductsCategories,
+  BusinessProductsList,
+  BusinessReviews,
+  BusinessTypeFilter,
+  Cart,
+  CouponControl,
+  DriverTips,
+  FacebookLogin,
+  FloatingButton,
+  GoogleLogin,
+  GoogleMap,
+  GPSButton,
+  LanguageSelector,
+  LastOrder,
+  LastOrders,
+  LogoutButton,
+  Messages,
+  NavBar,
+  OrderSummary,
+  PaymentOptionCash,
+  PaymentOptions,
+  PaymentOptionStripe,
+  PhoneInputNumber,
+  PreviousOrders,
+  ProductForm,
+  ProductIngredient,
+  ProductItemAccordion,
+  ProductOption,
+  ProductOptionSubOption,
+  SearchBar,
+  SingleProductCard,
+  StripeCardForm,
+  StripeCardsList,
+  StripeElementsForm,
+  StripeRedirectForm,
+  TagSelector,
+  UpsellingProducts,
+  UserDetails,
+  UserFormDetailsUI,
+  VerifyPhone,
 
 	// OComponents
 	Toast,
@@ -104,4 +196,4 @@ export {
 	_setStoreData,
 	_removeStoreData,
 	_clearStoreData
-}
+}

package/themes/single-business/src/components/shared/index.tsx

@@ -1,16 +1,17 @@
-import OText from './OText'
+import OAlert from './OAlert'
+import OBottomPopup from './OBottomPopup'
 import OButton from './OButton'
-import OInput from './OInput'
 import ODropDown from './ODropDown'
 import OIcon from './OIcon'
-import OIconText from './OIconText'
 import OIconButton from './OIconButton'
-import OTextarea from './OTextarea'
-import OToggle from './OToggle'
+import OIconText from './OIconText'
+import OInput from './OInput'
 import OKeyButton from './OKeyButton'
 import OModal from './OModal'
-import OAlert from './OAlert'
-import OBottomPopup from './OBottomPopup'
+import OText from './OText'
+import OTextarea from './OTextarea'
+import { Toast } from './OToast'
+import OToggle from './OToggle'
 
 export {
 	OText,
@@ -24,6 +25,7 @@ export {
 	OToggle,
 	OKeyButton,
 	OAlert,
-  	OModal,
+  OModal,
 	OBottomPopup,
+  Toast
 }