ordering-ui-react-native 0.15.8 → 0.15.11

package/package.json

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

package/src/components/Messages/index.tsx

@@ -6,7 +6,7 @@ import { GiftedChat, Actions, InputToolbar, Composer, Send, Bubble, MessageImage
 import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { OIcon, OIconButton, OText, OButton } from '../shared'
-import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard,I18nManager } from 'react-native'
+import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard, I18nManager } from 'react-native'
 import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles'
 import { MessagesParams } from '../../types'
 
@@ -36,6 +36,8 @@ const ORDER_STATUS: any = {
   19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
   20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
   21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+  22: 'ORDER_LOOKING_FOR_DRIVER',
+  23: 'ORDER_DRIVER_ON_WAY'
 }
 
 const imgOptions = {
@@ -93,7 +95,7 @@ const MessagesUI = (props: MessagesParams) => {
   }
 
   const handleImagePicker = () => {
-    launchImageLibrary(imgOptions, (response : any) => {
+    launchImageLibrary(imgOptions, (response: any) => {
       if (response.didCancel) {
         // showToast(ToastType.Error, response.errorMessage);
       } else if (response.errorMessage) {
@@ -119,10 +121,10 @@ const MessagesUI = (props: MessagesParams) => {
   const messageConsole = (message: any) => {
     return message.change?.attribute !== 'driver_id'
       ?
-      `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
-        filterSpecialStatus.includes(message.change.attribute) ? 
-        `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` : 
-        `${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+      `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute) ?
+        `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new || ''} ${t('MINUTES', 'Minutes')}` :
+        message.change.attribute === 'status' ? `${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
+          : `${message.change.old} ${t('TO', 'to')} ${message.change.new || t('EMPTY', 'Empty')}`
       }`
       : message.change.new
         ?
@@ -133,13 +135,17 @@ const MessagesUI = (props: MessagesParams) => {
 
   useEffect(() => {
     let newMessages: Array<any> = []
-    const console = `${t('ORDER_PLACED_FOR', 'Order placed for')} ${parseDate(order?.created_at)} ${t('VIA', 'Via')} ${order?.app_id ? t(order?.app_id.toUpperCase(), order?.app_id) : t('OTHER', 'Other')}`
+    const consoleText = `${t('ORDER_PLACED_FOR', 'Order placed for')} ${parseDate(order?.created_at)} ${t('VIA', 'Via')} ${order?.app_id ? t(order?.app_id.toUpperCase(), order?.app_id) : t('OTHER', 'Other')}`
     const firstMessage = {
       _id: 0,
-      text: console,
+      text: consoleText,
       createdAt: order?.created_at,
-      system: true
+      system: true,
+      user: {
+        _id: 0
+      }
     }
+
     messages.messages.map((message: any) => {
       let newMessage
       if (message.type !== 0 && (messagesToShow?.messages?.length || (message?.can_see?.includes('2')) || (message?.can_see?.includes('4') && type === USER_TYPE.DRIVER))) {
@@ -159,7 +165,9 @@ const MessagesUI = (props: MessagesParams) => {
       if (message.type === 0) {
         newMessage = firstMessage
       }
-      newMessages = [...newMessages, newMessage]
+      if (newMessage) {
+        newMessages = [...newMessages, newMessage]
+      }
     })
     setFormattedMessages([...newMessages.reverse()])
   }, [messages.messages.length])
@@ -177,7 +185,7 @@ const MessagesUI = (props: MessagesParams) => {
     }
   }, [])
 
-  const RenderActions = (props : any) => {
+  const RenderActions = (props: any) => {
     return (
       <Actions
         {...props}
@@ -210,7 +218,7 @@ const MessagesUI = (props: MessagesParams) => {
     )
   }
 
-  const renderInputToolbar = (props : any) => (
+  const renderInputToolbar = (props: any) => (
     <InputToolbar
       {...props}
       containerStyle={{
@@ -271,7 +279,7 @@ const MessagesUI = (props: MessagesParams) => {
         <OText size={14}>{t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended')}</OText>
       </View>
     ) : (
-      <View style={{flexDirection: 'row', width: '80%'}}>
+      <View style={{ flexDirection: 'row', width: '80%' }}>
         <Composer
           {...props}
           textInputStyle={{
@@ -308,20 +316,20 @@ const MessagesUI = (props: MessagesParams) => {
       alwaysShowSend
       containerStyle={styles.containerSend}
     >
-        <OIconButton
-          onClick={onSubmit}
-          style={{
-            height: 32,
-            borderRadius: 25,
-            opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
-            borderColor: theme.colors.primary,
-          }}
-          iconStyle={{ marginTop: 3, marginRight: 2 }}
-          icon={!sendMessage?.loading ? paperIcon : undefined}
-          RenderIcon={sendMessage?.loading ? () => <ActivityIndicator size='small' color={theme.colors.primary} /> : undefined}
-          disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
-          disabledColor={theme.colors.white}
-        />
+      <OIconButton
+        onClick={onSubmit}
+        style={{
+          height: 32,
+          borderRadius: 25,
+          opacity: (sendMessage?.loading || (message === '' && !image) || messages?.loading) ? 0.4 : 1,
+          borderColor: theme.colors.primary,
+        }}
+        iconStyle={{ marginTop: 3, marginRight: 2 }}
+        icon={!sendMessage?.loading ? paperIcon : undefined}
+        RenderIcon={sendMessage?.loading ? () => <ActivityIndicator size='small' color={theme.colors.primary} /> : undefined}
+        disabled={(sendMessage?.loading || (message === '' && !image) || messages?.loading)}
+        disabledColor={theme.colors.white}
+      />
     </Send>
   )
 
@@ -338,7 +346,7 @@ const MessagesUI = (props: MessagesParams) => {
       }}
       wrapperStyle={{
         left: { backgroundColor: '#f7f7f7', padding: 5, borderBottomLeftRadius: 0 },
-        right: { backgroundColor: theme.colors.primary, padding: 5, borderBottomRightRadius: 0}
+        right: { backgroundColor: theme.colors.primary, padding: 5, borderBottomRightRadius: 0 }
       }}
     />
   )
@@ -357,7 +365,7 @@ const MessagesUI = (props: MessagesParams) => {
     <>
       <Wrapper>
         <Header>
-         <OIcon
+          <OIcon
             url={type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo}
             width={60}
             height={60}
@@ -415,7 +423,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: 4
   },
-  editButton : {
+  editButton: {
     borderRadius: 50,
     backgroundColor: '#E9ECEF',
     marginRight: 10,

package/src/components/MomentOption/index.tsx

@@ -47,6 +47,8 @@ const MomentOptionUI = (props: MomentOptionParams) => {
   const [optionSelected, setOptionSelected] = useState({ isAsap: false, isSchedule: false })
   const [momentState, setMomentState] = useState({ isLoading: 0, isEditing: false })
 
+  const is12hours = configs?.dates_moment_format?.value?.includes('hh:mm')
+  
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
   const _handleAsap = () => {
@@ -192,7 +194,7 @@ const MomentOptionUI = (props: MomentOptionParams) => {
                           disabled={orderState.loading}
                         >
                           <OText color={timeSelected === hour.startTime ? theme.colors.primary : theme.colors.textSecondary}>
-                            {configs?.format_time?.value === '12' ? (
+                            {is12hours ? (
                               hour.startTime.includes('12')
                                 ? `${hour.startTime}PM`
                                 : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })

package/src/components/OrderDetails/index.tsx

@@ -387,7 +387,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText style={{ textAlign: 'left' }}>{order?.delivery_option?.name}</OText>
                 </View>
               )}
-              {order?.comment && (
+              {!!order?.comment && (
                 <View>
                   <OText size={18} style={{ textAlign: 'left' }} >{t('COMMENT', 'Comment')}</OText>
                   <OText style={{ textAlign: 'left' }}>{order?.comment}</OText>

package/src/utils/index.tsx

@@ -32,7 +32,8 @@ export const getTraduction = (key: string, t: any) => {
     ERROR_PLACE_PAY_WITH_CARD1: 'An error occurred while trying to pay by card',
     ERROR_PLACE_PAY_WITH_PAYPAL_CAPTURE: 'An error occurred while trying to pay by PayPal',
     ERROR_ADD_PRODUCT_VERY_FAR_FOR_DELIVERY: 'Error adding product, very far for delivery',
-    ERROR_PRODUCT_NOT_FOUND: 'Error with the product'
+    ERROR_PRODUCT_NOT_FOUND: 'Error with the product',
+    ERROR_ADD_BUSINESS_INVALID: 'An error occurred with the business',
   }
 
   return keyList[key] ? t(key, keyList[key]) : t(key)

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

@@ -94,8 +94,8 @@ const ChatUI = (props: MessagesParams) => {
     Dimensions.get('window').width < Dimensions.get('window').height
       ? parseInt(parseFloat(String(Dimensions.get('window').width)).toFixed(0))
       : parseInt(
-          parseFloat(String(Dimensions.get('window').height)).toFixed(0),
-        );
+        parseFloat(String(Dimensions.get('window').height)).toFixed(0),
+      );
 
   const [orientation, setOrientation] = useState<string>(
     Dimensions.get('window').width < Dimensions.get('window').height
@@ -218,7 +218,7 @@ const ChatUI = (props: MessagesParams) => {
       paddingLeft: 12,
       paddingRight: 5,
     },
-    editButton : {
+    editButton: {
       borderRadius: 50,
       backgroundColor: '#E9ECEF',
       marginRight: 10,
@@ -366,15 +366,18 @@ const ChatUI = (props: MessagesParams) => {
           return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS';
         case 21:
           return 'ORDER_CUSTOMER_ARRIVED_BUSINESS';
+        case 22:
+          return 'ORDER_LOOKING_FOR_DRIVER'
+        case 23:
+          return 'ORDER_DRIVER_ON_WAY'
         default:
           return ``;
       }
     }
 
     if (attribute === 'prepared_in' || attribute === 'delivered_in') {
-      return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min} ${
-        status > 60 ? 'hours' : 'minutes'
-      }`;
+      return `${hour < 10 ? '0' + hour : hour}:${min < 10 ? '0' + min : min} ${status > 60 ? 'hours' : 'minutes'
+        }`;
     }
   };
 
@@ -400,30 +403,27 @@ const ChatUI = (props: MessagesParams) => {
           style={{ ...styles.firstMessageText, textAlign: 'center' }}>
           {message.change?.attribute !== 'driver_id'
             ? `${t('ORDER', 'Order')} ${t(
-                message.change.attribute.toUpperCase(),
-                message.change.attribute,
-              )} ${t('CHANGED_FROM', 'Changed from')} ${
-                message.change.old !== null
-                  ? t(
-                      getStatus(
-                        parseInt(message.change.old, 10),
-                        message.change?.attribute,
-                      ),
-                    )
-                  : '0'
-              } ${t('TO', 'to')} ${t(
+              message.change.attribute.toUpperCase(),
+              message.change.attribute,
+            )} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null
+              ? t(
                 getStatus(
-                  parseInt(message.change.new, 10),
+                  parseInt(message.change.old, 10),
                   message.change?.attribute,
                 ),
-              )}`
+              )
+              : '0'
+            } ${t('TO', 'to')} ${t(
+              getStatus(
+                parseInt(message.change.new, 10),
+                message.change?.attribute,
+              ),
+            )}`
             : message.change.new
-            ? `${message.driver?.name} ${
-                message.driver?.lastname !== null ? message.driver.lastname : ''
-              } ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${
-                message.comment ? message.comment.length : ''
+              ? `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''
+              } ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''
               }`
-            : `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
+              : `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
         </OText>
         <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>
           {parseTime(message?.created_at, { outputFormat: 'hh:mma' })}
@@ -928,8 +928,8 @@ const ChatUI = (props: MessagesParams) => {
           borderWidth: 0,
           opacity:
             sendMessage?.loading ||
-            (message === '' && !image) ||
-            messages?.loading
+              (message === '' && !image) ||
+              messages?.loading
               ? 0.6
               : 1,
           borderColor: theme.colors.transparent,
@@ -1034,7 +1034,7 @@ const ChatUI = (props: MessagesParams) => {
               <OIcon
                 url={optimizeImage(
                   order?.customer?.photo ||
-                    theme?.images?.dummies?.customerPhoto,
+                  theme?.images?.dummies?.customerPhoto,
                   'h_300,c_limit',
                 )}
                 style={styles.avatarIcon}
@@ -1141,7 +1141,7 @@ const ChatUI = (props: MessagesParams) => {
           backgroundColor={theme.colors.composerView}
           onEnd={handleEnd}
         />
-         <TouchableOpacity
+        <TouchableOpacity
           style={{
             position: 'absolute',
             right: 35,

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

@@ -38,7 +38,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
     },
   });
 
-  const _categories: any = business?.original?.categories;
+  const _categories: any = business?.categories;
   let _promos: any = [];
   _categories?.forEach((categ: any) => {
     const _featuredProds = categ?.products?.filter(
@@ -183,8 +183,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
               resetInactivityTimeout()
               navigation.navigate('Category', {
                 category,
-                categories: business.original.categories,
-                businessId: business?.api?.businessId,
+                categories: business?.categories,
+                businessId: business?.id,
                 businessSlug: business?.slug,
                 clearInactivityTimeout,
                 resetInactivityTimeout,

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

@@ -212,6 +212,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
             businessId={parseInt(businessId, 10)}
             businessSlug={businessSlug}
             onSave={() => {
+              showCartBottomSheet()
               setDrawerValues({ isOpen: !drawerState.isOpen, data: null })
             }}
             navigation={navigation}

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

@@ -87,7 +87,6 @@ export const ProductOptionsUI = (props: any) => {
     const isErrors = Object.values(errors).length > 0
     if (!isErrors) {
       handleSave && handleSave()
-      showCartBottomSheet()
       return
     }
   }

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

@@ -58,9 +58,9 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
   const maxDistanceOptions = [1000, 2000, 5000, 'default']
   const maxTimeOptions = [5, 15, 30, 'default']
   const sortItems = [
-    { text: t('PICKED_FOR_YOU', 'Picked for you (default)'), value: 'default' },
+    { text: t('PICKED_FOR_YOU', 'Picked for you (default)'), value: 'distance' },
     { text: t('DELIVERY_TIME', 'Delivery time'), value: 'delivery_time' },
-    { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_type' }
+    { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_time' }
   ]
 
   const styles = StyleSheet.create({
@@ -396,7 +396,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
             <OText weight='bold' mBottom={7} size={16}>
               {t('SORT', 'Sort')}
             </OText>
-            {sortItems?.map(item => (
+            {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
               <TouchableOpacity
                 key={item?.value}
                 onPress={() => handleChangeFilters('orderBy', item?.value)}

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

@@ -39,7 +39,8 @@ import {
 	ChCart,
 	DeliveryOptionsContainer,
 	DeliveryOptionItem,
-	WalletPaymentOptionContainer
+	WalletPaymentOptionContainer,
+	CartHeader
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 
@@ -570,9 +571,28 @@ const CheckoutUI = (props: any) => {
 									/>
 								) : (
 									<>
-										<OText size={16} lineHeight={24} color={theme.colors.textNormal}>
-											{t('ORDER_SUMMARY', 'Order Summary')}
-										</OText>
+										<CartHeader>
+											<OText
+												size={16}
+												lineHeight={24}
+												color={theme.colors.textNormal}
+												style={{ fontWeight: '500' }}
+											>
+												{t('MOBILE_FRONT_YOUR_ORDER', 'Your order')}
+											</OText>
+											<TouchableOpacity
+												onPress={() => onNavigationRedirect('Business', { store: cart?.business?.slug })}
+											>
+												<OText
+													size={10}
+													lineHeight={15}
+													color={theme.colors.primary}
+													style={{ textDecorationLine: 'underline' }}
+												>
+													{t('ADD_PRODUCTS', 'Add products')}
+												</OText>
+											</TouchableOpacity>
+										</CartHeader>
 										{props.isFranchiseApp && (
 											<TouchableOpacity
 												onPress={() => setOpenChangeStore(true)}

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

@@ -105,3 +105,10 @@ export const DeliveryOptionItem = styled.View`
   flex-direction: row;
   background-color: ${(props : any) => props?.backgroundColor ?? '#fff'};
 `;
+
+export const CartHeader = styled.View`
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+`

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

@@ -35,6 +35,8 @@ const ORDER_STATUS: any = {
 	19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
 	20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
 	21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
+	22: 'ORDER_LOOKING_FOR_DRIVER',
+  	23: 'ORDER_DRIVER_ON_WAY'
 }
 
 const filterSpecialStatus = ['prepared_in', 'delivered_in']