ordering-ui-react-native 0.21.21 → 0.21.22-release

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

@@ -27,9 +27,9 @@ const StyledButton = styled.View<Props>`
 	padding-left: 20px;
 	padding-right: 20px;
 	position: relative;
-	${(props: any) => props?.theme?.general?.components?.buttons?.borderRadius && css`
-      border-radius: ${props?.theme?.general?.components?.buttons?.borderRadius}px;
-  `}
+	${(props: any) => props?.borderRadius && css`
+      border-radius: ${typeof props?.borderRadius === 'string' ? props?.borderRadius : `${props?.borderRadius}px`};
+  	`}
 `
 const StyledButtonDisabled = styled(StyledButton)`
 	background-color: ${(props: any) => props.theme.colors.disabled};
@@ -119,7 +119,7 @@ const OButton = (props: Props): React.ReactElement => {
 			style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
 			disabled={props.isDisabledWithSameStyles}
 		>
-			<StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius } : { ...props.style, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
+			<StyledButton style={{ ...props.style, backgroundColor: theme?.general?.components?.buttons?.color ?? props.bgColor, borderColor: theme?.general?.components?.buttons?.color ?? props.borderColor, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
 				{props.icon ? (
 					<props.icon {...props.iconProps} />
 				) : null}
@@ -127,7 +127,7 @@ const OButton = (props: Props): React.ReactElement => {
 					<OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
 				) : null}
 				{props.text ? (
-					<StyledText style={props.textStyle}>{props.text}</StyledText>
+					<StyledText style={{ ...props.textStyle, color: theme?.general?.components?.buttons?.buttonTextColor ?? props?.textStyle?.color }}>{props.text}</StyledText>
 				) : null}
 				{props.imgRightSrc ? (
 					<EndImage style={props.imgRightStyle} source={props.imgRightSrc} />

package/themes/original/src/components/shared/OInput.tsx

@@ -3,7 +3,7 @@ import { ImageSourcePropType, ImageStyle, ViewStyle, TextInputProps, TextStyle }
 import styled from 'styled-components/native';
 import OIcon from './OIcon';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import { useTheme, css } from 'styled-components/native';
+import { useTheme } from 'styled-components/native';
 
 const Input = styled.TextInput`
   flex-grow: 1;
@@ -53,9 +53,6 @@ const Wrapper = styled.Pressable`
 	align-items: center;
 	justify-content: center;
 	width: 100%;
-	${(props: any) => props.theme?.general?.components?.inputs?.borderRadius && css`
-      border-radius: ${props?.theme?.general?.components?.inputs?.borderRadius};
-  `}
 `;
 
 const OInput = (props: Props): React.ReactElement => {

package/themes/original/src/components/shared/OModal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Modal, StyleSheet, Text, SafeAreaView, View, TouchableOpacity, Platform } from "react-native";
-import { OIcon } from '.';
-import styled, { useTheme } from 'styled-components/native';
+import styled from 'styled-components/native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 interface Props {
 	open?: boolean;
@@ -50,17 +50,15 @@ const OModal = (props: Props): React.ReactElement => {
 		isAvoidKeyBoardView
 	} = props
 
-	const theme = useTheme();
-
 	const renderSafeAreaView = () => (
 		<SafeAreaView style={styles.container}>
 			{!entireModal ? (
 				<View style={styles.centeredView}>
 					<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
-						<TouchableOpacity style={{...styles.wrapperIcon, ...styleContainerCloseButton}} onPress={onClose}>
-							<OIcon
-								src={theme.images.general.close}
-								width={16}
+						<TouchableOpacity style={{ ...styles.wrapperIcon, ...styleContainerCloseButton }} onPress={onClose}>
+							<AntDesignIcon
+								name='close'
+								size={26}
 								style={isNotDecoration && (styleCloseButton || styles.cancelBtn)}
 							/>
 						</TouchableOpacity>
@@ -73,9 +71,9 @@ const OModal = (props: Props): React.ReactElement => {
 					{!customClose && (
 						<View style={titleSectionStyle ? titleSectionStyle : styles.titleSection}>
 							<TouchableOpacity style={styles.wrapperIcon} onPress={onClose}>
-								<OIcon
-									src={theme.images.general.close}
-									width={16}
+								<AntDesignIcon
+									name='close'
+									size={26}
 									style={styleCloseButton || styles.cancelBtn}
 								/>
 							</TouchableOpacity>
@@ -93,7 +91,7 @@ const OModal = (props: Props): React.ReactElement => {
 			animationType="slide"
 			transparent={isTransparent}
 			visible={open}
-			onRequestClose={() =>  onClose && onClose()}
+			onRequestClose={() => onClose && onClose()}
 			style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
 		>
 			{isAvoidKeyBoardView ? (
@@ -125,8 +123,8 @@ const styles = StyleSheet.create({
 		flex: 1,
 		justifyContent: 'space-between',
 		alignItems: 'flex-start',
-		paddingLeft: 40,
-		paddingRight: 40,
+		paddingLeft: 20,
+		paddingRight: 20,
 		marginBottom: 40
 	},
 	cancelBtn: {

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

@@ -4,9 +4,11 @@ import styled, { css, useTheme } from 'styled-components/native';
 import { Platform, View } from 'react-native';
 
 const ContainerStyled = styled.ScrollView`
-  flex: 1;
+  ${(props: any) => !props.disableFlex && css`
+    flex: 1
+  `}
   ${(props: any) => !props.noPadding && css`
-    padding: ${Platform.OS === 'ios' ? '0px 40px' : '20px 40px'};
+    padding: ${Platform.OS === 'ios' ? '0px 20px' : '20px 20px'};
   `}
   background-color: ${(props: any) => props.theme.colors.backgroundPage};
 `;
@@ -17,7 +19,7 @@ export const Container = (props: any) => {
   return (
     <View
       style={{
-        flex: 1,
+        flex: props.disableFlex ? undefined : 1,
         paddingTop: props.pt ?? insets.top,
         backgroundColor: theme.colors.backgroundPage
       }}

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

@@ -636,6 +636,7 @@ export interface GoogleMapsParams {
 	handleToggleMap?: () => void,
 	isIntGeoCoder: boolean,
 	businessZones?: any
+	delta?: number
 }
 
 export interface HelpParams {

package/themes/original/src/utils/index.tsx

@@ -4,6 +4,7 @@ import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { CODES } from 'ordering-components/native'
 import { ORDER_TYPES } from '../config/constants';
 import { useTheme } from 'styled-components/native';
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 const [languageState, t] = useLanguage();
 const theme = useTheme()
@@ -258,7 +259,7 @@ export const sortInputFields = ({ fields, values }: any) => {
 
   fieldsBase.forEach((f: any) => {
     fieldsArray && fieldsArray.forEach((field: any) => {
-      if (f === field.code) {
+      if (f === (field.validation_field?.code || field?.code)) {
         fieldsSorted.push(field)
       }
     })
@@ -575,6 +576,119 @@ export const getOrderStatus = (s: string) => {
   return objectStatus && objectStatus;
 }
 
+export const getOrderStatuPickUp = (s: any) => {
+  const status = parseInt(s);
+  const orderStatus = [
+    {
+      key: 0,
+      value: t('PENDING', 'Pending'),
+      slug: 'PENDING',
+      percentage: 0.1,
+      image: theme.images.order.status0,
+    },
+    {
+      key: 1,
+      value: t('COMPLETED', 'Completed'),
+      slug: 'COMPLETED',
+      percentage: 1,
+      image: theme.images.order.status1,
+    },
+    {
+      key: 2,
+      value: t('REJECTED', 'Rejected'),
+      slug: 'REJECTED',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 4,
+      value: t('PREPARATION_COMPLETED', 'Preparation Completed'),
+      slug: 'PREPARATION_COMPLETED',
+      percentage: 0.5,
+      image: theme.images.order.status4,
+    },
+    {
+      key: 5,
+      value: t('REJECTED_BY_BUSINESS', 'Rejected by business'),
+      slug: 'REJECTED_BY_BUSINESS',
+      percentage: 0,
+      image: theme.images.order.status5,
+    },
+    {
+      key: 7,
+      value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business'),
+      slug: 'ACCEPTED_BY_BUSINESS',
+      percentage: 0.3,
+      image: theme.images.order.status7,
+    },
+    {
+      key: 13,
+      value: t('PREORDER', 'PreOrder'),
+      slug: 'PREORDER',
+      percentage: 0,
+      image: theme.images.order.status13,
+    },
+    {
+      key: 14,
+      value: t('ORDER_NOT_READY', 'Order not ready'),
+      slug: 'ORDER_NOT_READY',
+      percentage: 0.3,
+      image: theme.images.order.status13,
+    },
+    {
+      key: 15,
+      value: t(
+        'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+        'Order picked up completed by customer',
+      ),
+      slug: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+      percentage: 1,
+      image: theme.images.order.status1,
+    },
+    {
+      key: 16,
+      value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer'),
+      slug: 'CANCELLED_BY_CUSTOMER',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 17,
+      value: t(
+        'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+        'Order not picked up by customer',
+      ),
+      slug: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+      percentage: 0,
+      image: theme.images.order.status2,
+    },
+    {
+      key: 20,
+      value: t(
+        'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+        'Customer almost arrived to business',
+      ),
+      slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
+      percentage: 0.7,
+      image: theme.images.order.status7,
+    },
+    {
+      key: 21,
+      value: t(
+        'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+        'Customer arrived to business',
+      ),
+      slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+      percentage: 0.9,
+      image: theme.images.order.status7,
+    }
+  ];
+
+  const objectStatus = orderStatus.find((o) => o.key === status);
+
+  return objectStatus && objectStatus;
+}
+
 /**
  * Function to get brightness of color.
  */
@@ -612,3 +726,13 @@ export const lightenDarkenColor = (color: any) => {
     return false
   }
 }
+
+export const vibrateApp = (impact ?: string) => {
+  const options = {
+    enableVibrateFallback: true,
+    ignoreAndroidSystemSettings: false
+  };
+
+  ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+
+}

package/themes/uber-eats/src/components/BusinessesListing/index.tsx

@@ -144,7 +144,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
         {isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
         <View style={styles.wrapperOrderOptions}>

package/src/navigators/BottomNavigator.tsx

@@ -1,117 +0,0 @@
-import React from 'react'
-import { View, Platform, PlatformIOSStatic } from 'react-native'
-import { useOrder } from 'ordering-components/native'
-import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
-import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import styled from 'styled-components/native'
-
-import { OText } from '../components/shared'
-import BusinessList from '../pages/BusinessesListing'
-import MyOrders from '../pages/MyOrders'
-import CartList from '../pages/CartList'
-import Profile from '../pages/Profile'
-import { useTheme } from 'styled-components/native'
-
-const CartsLenght = styled.View`
-  width: 25px;
-  height: 25px;
-  background-color: ${(props: any) => props.theme.colors.primary};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  right: 0;
-`
-
-const Tab = createMaterialBottomTabNavigator();
-
-const BottomNavigator = () => {
-  const theme = useTheme()
-  const [{ carts }] = useOrder()
-  const cartsList = (carts && Object.values(carts).filter((cart: any) => cart.products.length > 0)) || []
-  const isIos = Platform.OS === 'ios'
-  const platformIOS = Platform as PlatformIOSStatic
-  const androidStyles = isIos
-    ? platformIOS.isPad
-      ? { paddingBottom: 30 }
-      : {}
-    : {height: 40, position: 'relative', bottom: 15}
-  return (
-    <Tab.Navigator
-      initialRouteName="BusinessList"
-      activeColor={theme.colors.primary}
-      barStyle={{ backgroundColor: theme.colors.white, ...androidStyles }}
-      labeled={false}
-      inactiveColor={theme.colors.disabled}
-    >
-      <Tab.Screen
-        name="BusinessList"
-        component={BusinessList}
-        options={{
-          tabBarIcon:
-            ({ color }: any) => (
-              <View style={{ width: 50, height: 50, justifyContent: !isIos ? 'flex-start' : 'space-evenly', position: 'relative', bottom: !isIos ? 10 : 0  }}>
-                <MaterialCommunityIcon name='home' size={46} color={color} />
-              </View>
-            )
-        }}
-      />
-      <Tab.Screen
-        name="MyOrders"
-        component={MyOrders}
-        options={
-          {
-            tabBarIcon:
-              ({ color }: any) => (
-                <View style={{ width: 50, height: 50, justifyContent: !isIos ? 'flex-start' : 'space-evenly', position: 'relative', bottom: !isIos ? 10 : 0 }}>
-                  <MaterialIcon name='format-list-bulleted' size={46} color={color} />
-                </View>
-              ),
-          }}
-      />
-      <Tab.Screen
-        name="Cart"
-        component={CartList}
-        options={{
-          tabBarIcon:
-            ({ color }: any) => (
-              <View style={{
-                  width: 50,
-                  height: 50,
-                  justifyContent: !isIos ? 'flex-start' : 'space-evenly',
-                  position: 'relative',
-                  bottom: !isIos ? 10 : 0
-                }}
-              >
-                <MaterialIcon name='shopping-basket' size={46} color={color} />
-                {cartsList.length > 0 && (
-                  <CartsLenght style={{ borderRadius: 100 / 2 }}>
-                    <OText
-                      color={theme.colors.white}
-                    >
-                      {cartsList.length}
-                    </OText>
-                  </CartsLenght>
-                )}
-              </View>
-            )
-        }}
-      />
-      <Tab.Screen
-        name="Profile"
-        component={Profile}
-        options={{
-          tabBarIcon:
-            ({ color }: any) => (
-              <View style={{ width: 50, height: 50, justifyContent: !isIos ? 'flex-start' : 'space-evenly', position: 'relative', bottom: !isIos ? 10 : 0  }}>
-                <MaterialIcon name='person' size={46} color={color} />
-              </View>
-            )
-        }}
-      />
-    </Tab.Navigator>
-  );
-}
-
-export default BottomNavigator

package/src/navigators/CheckoutNavigator.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { createStackNavigator } from "@react-navigation/stack";
-
-import AddressList from '../pages/AddressList'
-import AddressForm from '../pages/AddressForm'
-import CartList from '../pages/CartList'
-import CheckoutPage from '../pages/Checkout';
-import BusinessProductsList from '../pages/BusinessProductsList';
-import MultiCheckout from '../pages/MultiCheckout';
-
-const Stack = createStackNavigator();
-
-const CheckoutNavigator = (props: any) => {
-  const {
-    navigation,
-    route
-  } = props;
-
-  const cartUuid = route?.params?.cartUuid
-
-  const checkoutProps = {
-    navigation,
-    route,
-    cartUuid: route?.params?.cartUuid
-  }
-
-  return (
-    <Stack.Navigator>
-      {!cartUuid && (
-        <Stack.Screen
-          name="Cart"
-          component={CartList}
-          options={{ headerShown: false }}
-        />
-      )}
-      <Stack.Screen
-        name="CheckoutPage"
-        children={() => <CheckoutPage {...checkoutProps} />}
-        options={{ headerShown: false }}
-        />
-      <Stack.Screen
-        name="Business"
-        component={BusinessProductsList}
-        options={{ headerShown: false }}
-      />
-      <Stack.Screen
-        name="AddressList"
-        component={AddressList}
-        options={{ headerShown: false }}
-        initialParams={{isFromCheckout: true}}
-      />
-      <Stack.Screen
-        name="AddressForm"
-        component={AddressForm}
-        options={{ headerShown: false }}
-      />
-      <Stack.Screen
-        name="MultiCheckout"
-        children={() => <MultiCheckout {...checkoutProps} />}
-        options={{ headerShown: false }}
-      />
-    </Stack.Navigator>
-  );
-}
-
-export default CheckoutNavigator;