ordering-ui-react-native 0.14.82 → 0.14.84-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.82",
+  "version": "0.14.84-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -48,6 +48,8 @@
     "@react-navigation/material-bottom-tabs": "^5.3.14",
     "@react-navigation/native": "^5.7.6",
     "@react-navigation/stack": "^5.9.3",
+    "@segment/analytics-react-native": "^2.1.11",
+    "@segment/sovran-react-native": "^0.2.6",
     "@sentry/react-native": "^2.6.0",
     "@stripe/stripe-react-native": "^0.2.0",
     "@types/react-native-loading-spinner-overlay": "^0.5.2",
@@ -55,7 +57,7 @@
     "@types/styled-components": "^5.1.3",
     "axios": "^0.21.0",
     "moment": "^2.29.1",
-    "ordering-components": "github:Ordering-Inc/ordering-components#development",
+    "ordering-components": "github:Ordering-Inc/ordering-components#release",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.7.2",
@@ -69,10 +71,11 @@
     "react-native-background-timer": "^2.4.1",
     "react-native-bootsplash": "^3.2.3",
     "react-native-calendar-picker": "^7.1.2",
-    "react-native-calendar-strip": "^2.2.5",
+    "react-native-calendar-strip": "^2.2.1",
     "react-native-color-matrix-image-filters": "^5.2.10",
     "react-native-country-picker-modal": "^2.0.0",
     "react-native-credit-card-input": "^0.4.1",
+    "react-native-device-info": "^8.7.1",
     "react-native-document-picker": "^5.2.0",
     "react-native-elements": "^3.0.0-alpha.1",
     "react-native-fast-image": "^8.3.3",

package/src/DeliveryApp.tsx

@@ -7,7 +7,8 @@
  */
 
 import * as React from 'react';
-import { LogBox } from 'react-native';
+import { LogBox, Platform } from 'react-native';
+import * as Sentry from "@sentry/react-native";
 import { OrderingProvider } from 'ordering-components/native';
 import RNBootSplash from "react-native-bootsplash";
 
@@ -22,6 +23,36 @@ import theme from './theme.json';
 import AppContainer from './AppContainer';
 import { FacebookPixel } from './components/FacebookPixel';
 
+Sentry.init({
+  environment: Platform.OS === 'ios' ? 'ios' : 'android',
+  dsn: 'https://e5e1115dc93b49109f4ab65f2098bef9@o460529.ingest.sentry.io/5722123',
+  release: process.env.npm_package_version ? 'ordering-ui-native@' + process.env.npm_package_version : 'ordering-ui-native@' + '0.0.4',
+  ignoreErrors: [
+    'is not defined',
+    'is not a function',
+    'can\'t find variable',
+    'objects are not valid',
+    'element type is invalid',
+    'requiring module',
+    'has not been registered',
+    'failed to connect to debugger!',
+    'rendered more hooks than',
+    'rendered fewer hooks than',
+    'should have a queue',
+    'the OS most likely terminated',
+    'Connection timed out',
+    'java.io.EOFException',
+    'Abort',
+    'Segfault',
+    'Failed to allocate a',
+    'Application Not Responding',
+    'connection no longer valid',
+    'IllegalInstruction',
+    'React.Children.only expected to receive a single React element child.',
+    'unrecognized selector sent to instance'
+  ],
+});
+
 LogBox.ignoreLogs([
   'Sending \`onAnimatedValueUpdate` with no listeners registered.',
   'Non-serializable values were found in the navigation state.',
@@ -88,7 +119,8 @@ theme.images = {
     close: require('./assets/icons/close.png'),
     orderCreating: require('./assets/images/order-creating.png'),
     orderSuccess: require('./assets/images/order-success.png'),
-    newOrder: require('./assets/images/new-order.png')
+    newOrder: require('./assets/images/new-order.png'),
+    noNetwork: require('./assets/images/no-network.png')
   },
   order: {
     status0: require('./assets/images/status-0.png'),

package/src/components/BusinessTypeFilter/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { StyleSheet, View, ScrollView, TouchableOpacity, Dimensions } from 'react-native'
+import { StyleSheet, View, ScrollView, TouchableOpacity, Dimensions, Platform, PlatformIOSStatic } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessTypeFilter as BusinessTypeFilterController, useLanguage } from 'ordering-components/native'
 
@@ -8,6 +8,7 @@ import { OIcon, OText, OModal } from '../shared'
 import { BusinessTypeFilterParams } from '../../types'
 import { useTheme } from 'styled-components/native'
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import DeviceInfo from 'react-native-device-info';
 
 const windowWidth = Dimensions.get('window').width;
 
@@ -18,6 +19,10 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
     handleChangeBusinessType,
   } = props;
 
+  const platformIOS = Platform as PlatformIOSStatic
+  const isIpad = platformIOS.isPad
+  const isTablet = DeviceInfo.isTablet();
+
   const theme = useTheme();
   const [, t] = useLanguage();
   const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
@@ -122,7 +127,9 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
                 {t('BUSINESS_CATEGORIES', 'Business Categories')}
               </OText>
             </BusinessCategoriesTitle>
-            <BusinessCategories>
+            <BusinessCategories
+              mt={(isIpad || isTablet) ? 65 : null}
+            >
               {typesState?.types.slice(0, 3).map((type: any) => (
                 <RenderTypes
                   key={type.id}

package/src/components/BusinessTypeFilter/styles.tsx

@@ -18,7 +18,7 @@ export const BusinessCategories = styled.View`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin: 10px 0px;
+  margin: ${(props: any) => props.mt ?? 10}px 0px 10px;
   width: 100%;
 `
 export const Category = styled.View`

package/src/components/BusinessesListing/index.tsx

@@ -167,7 +167,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
           >
             <OText size={14} numberOfLines={1} ellipsizeMode='tail'>
               {orderState.options?.moment
-                ? parseDate(orderState.options?.moment, { outputFormat: configs?.format_time?.value === '12' ? 'MM/DD hh:mma' : 'MM/DD HH:mm' })
+                ? parseDate(orderState?.options?.moment, { outputFormat: configs?.dates_moment_format?.value })
                 : t('ASAP_ABBREVIATION', 'ASAP')}
             </OText>
           </WrapMomentOption>
@@ -191,7 +191,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>
 				)}
       </OrderControlContainer>

package/src/components/Cart/index.tsx

@@ -220,7 +220,7 @@ const CartUI = (props: any) => {
                   <OSRow>
                     <OText numberOfLines={1}>
                       {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
-                      ({parsePrice(fee?.fixed)} + {fee?.percentage}%){' '}
+                      ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
                     </OText>
                     <TouchableOpacity onPress={() => setOpenTaxModal({ open: true, data: fee, type: 'fee' })} >
                       <AntIcon name='exclamationcircleo' size={18} color={theme.colors.primary} />

package/src/components/Checkout/index.tsx

@@ -326,7 +326,7 @@ const CheckoutUI = (props: any) => {
                     <OText size={18} numberOfLines={1} ellipsizeMode='tail'>
                       {options?.moment
                         ? parseDate(options?.moment, {
-                          outputFormat: configs?.format_time?.value === '12' ? 'MM/DD hh:mma' : 'MM/DD HH:mm'
+                          outputFormat: configs?.dates_moment_format?.value
                         })
                         : t('ASAP_ABBREVIATION', 'ASAP')}
                     </OText>
@@ -529,7 +529,6 @@ const CheckoutUI = (props: any) => {
                   paySelected={paymethodSelected}
                   handlePaymentMethodClickCustom={handlePaymentMethodClick}
                   setCardData={setCardData}
-                  handlePlaceOrder={handlePlaceOrder}
                 />
               </ChPaymethods>
             </ChSection>

package/src/components/Home/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useLanguage, useOrder } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
-import { StyleSheet, View, Dimensions } from 'react-native';
+import { StyleSheet, View, Dimensions, Platform, useWindowDimensions } from 'react-native';
 import { OButton, OIcon, OText } from '../shared';
 import { LogoWrapper, Slogan } from './styles';
 import { LanguageSelector } from '../LanguageSelector'
@@ -11,6 +11,7 @@ import { _setStoreData } from '../../providers/StoreUtil';
 const windowHeight = Dimensions.get('window').height
 
 export const Home = (props: any) => {
+  const { width, height } = useWindowDimensions();
   const { onNavigationRedirect } = props;
 
   const theme = useTheme();
@@ -25,7 +26,7 @@ export const Home = (props: any) => {
   return (
     <View style={styles.container}>
       <View style={styles.wrapperContent}>
-        <View style={styles.languageSelector}>
+        <View style={{ paddingTop: (height <= 756 && Platform.OS !== 'ios') ? (height * 0.05) : 0, marginLeft: 10 }}>
           <LanguageSelector />
         </View>
         <LogoWrapper>
@@ -74,9 +75,6 @@ export const Home = (props: any) => {
 };
 
 const styles = StyleSheet.create({
-  languageSelector: {
-    marginRight: 10
-  },
   textLink: {
     flexDirection: 'row',
     textAlign: 'center',

package/src/components/LanguageSelector/index.tsx

@@ -1,140 +1,108 @@
-import React, { useState, useEffect } from 'react'
-import { I18nManager, TouchableOpacity, ActivityIndicator, View, Platform } from 'react-native'
-import { useTheme } from 'styled-components/native'
-import {
-  LanguageSelector as LanguageSelectorController,
-  useLanguage
-} from 'ordering-components/native'
-import { StyleSheet } from 'react-native'
-import RNRestart from 'react-native-restart'
-import Picker from 'react-native-country-picker-modal';
+import React, { useState } from 'react'
+import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
+import { useTheme } from 'styled-components/native';
+import { I18nManager, Platform, StyleSheet, View } from 'react-native'
 
-import { Container, SelectItemBtn, SelectItem } from './styles'
+import RNPickerSelect from 'react-native-picker-select'
+import { Container, DummyContainer } from './styles'
 import { LanguageSelectorParams } from '../../types'
-import { OText } from '../shared'
+import { OIcon } from '../shared'
+import RNRestart from 'react-native-restart'
 
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
+
   const {
     languagesState,
     currentLanguage,
     handleChangeLanguage,
-    isFromProfile
+    pickerStyle
   } = props
 
-  const theme = useTheme()
-  const [languageState] = useLanguage()
-  const [isOpen, setIsOpen] = useState(false);
-  const [optionSelected, setOptionSelected] = useState<any>(null)
-  let current;
+  const [orderState] = useOrder()
+  const theme = useTheme();
 
-  const styles = StyleSheet.create({
-    itemSelected: {
+  const [language, setLanguage] = useState(currentLanguage)
+
+  const _pickerStyle = StyleSheet.create({
+    inputAndroid: {
+      color: '#000',
+      borderWidth: 1,
+      borderColor: theme.colors.clear,
+      padding: 10,
+      height: 40,
       backgroundColor: theme.colors.disabled,
+      borderRadius: 8
     },
-    closeBtn: {
-      width: 40,
+    inputIOS: {
+      color: '#000',
+      padding: 10,
       height: 40,
+      borderWidth: 1,
+      marginStart: 20,
+      borderColor: theme.colors.clear,
+      backgroundColor: theme.colors.clear,
+    },
+    icon: {
+      width: 10,
+      marginTop: 9,
+      marginEnd: 10
+    },
+    placeholder: {
+      color: theme.colors.secundaryContrast
+    },
+    chevronDown: {
+      display: 'none'
+    },
+    chevronUp: {
+      display: 'none'
     }
   })
 
   const _languages = languagesState?.languages?.map((language: any) => {
     return {
-      key: language.code,
-      value: language.code,
-      label: language.name.toUpperCase()
+      value: language?.code,
+      label: language?.name,
+      inputLabel: language?.name
     }
   })
   _languages && _languages.sort((a: any, b: any) =>
-    (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0)
+    (a.content > b.content) ? 1 : ((b.content > a.content) ? -1 : 0)
   )
 
-  const langSelectedObj: any = _languages && _languages.find((item: any) => item.value === currentLanguage) || {}
-
   const changeDirection = async (language: any) => {
-    if(language !== 'ar'){
-      if (I18nManager.isRTL){
+    if (language !== 'ar') {
+      if (I18nManager.isRTL) {
         await I18nManager.forceRTL(false)
         RNRestart.Restart();
       }
     } else {
-      if(!I18nManager.isRTL){
+      if (!I18nManager.isRTL) {
         await I18nManager.forceRTL(true)
         RNRestart.Restart();
       }
     }
   }
 
-  const handlerChangeLanguage = (langCode: any) => {
-    setOptionSelected(langCode)
-    changeDirection(langCode)
-    handleChangeLanguage(langCode)
+  const handlerChangeLanguage = (langCode?: any) => {
+    changeDirection(Platform.OS === 'ios' ? language : langCode)
+    handleChangeLanguage(Platform.OS === 'ios' ? language : langCode)
   }
 
-  useEffect(() => {
-    if (optionSelected === languageState?.language?.code && !languageState.loading) {
-      setIsOpen(false)
-    }
-  }, [languageState])
-
   return (
     <Container>
-      {languagesState?.languages && (
-        <Picker
-          countryCodes={current}
-          visible={isOpen}
-          onClose={() => setIsOpen(false)}
-          withCountryNameButton
-          // @ts-ignore
-          closeButtonStyle={{
-            width: '100%',
-            alignItems: 'flex-end',
-            padding: 10
-          }}
-          closeButtonImageStyle={Platform.OS === 'ios' && styles.closeBtn}
-          renderFlagButton={() => (
-            <>
-              <TouchableOpacity
-                onPress={() => setIsOpen(true)}
-                disabled={_languages.length === 0 || languageState.loading}
-              >
-                <SelectItemBtn isFromProfile={isFromProfile}>
-                  <OText
-                    color={theme.colors.secundaryContrast}
-                    size={14}
-                  >
-                    {langSelectedObj.key.toUpperCase()}
-                  </OText>
-                </SelectItemBtn>
-              </TouchableOpacity>
-            </>
-          )}
-          flatListProps={{
-            keyExtractor: (item: any) => item.value,
-            data: _languages || [],
-            renderItem: ({ item }: any) => (
-              <TouchableOpacity
-                style={langSelectedObj.value === item.value && styles.itemSelected}
-                disabled={langSelectedObj.value === item.value || languageState.loading}
-                onPress={() => handlerChangeLanguage(item.value)}
-              >
-                <SelectItem>
-                  <View style={{ width: 40 }}>
-                    {optionSelected === item.value && languageState.loading && (
-                      <ActivityIndicator size="small" color={theme.colors.primary} />
-                    )}
-                  </View>
-                  <OText
-                    size={14}
-                    style={{ marginRight: 10 }}
-                  >
-                    {item.label}
-                  </OText>
-                </SelectItem>
-              </TouchableOpacity>
-            ),
-          }}
+      {languagesState?.languages ? (
+        <RNPickerSelect
+          onValueChange={(val) => Platform.OS === 'ios' ? setLanguage(val) : handlerChangeLanguage(val)}
+          items={_languages || []}
+          value={Platform.OS === 'ios' ? language : currentLanguage}
+          style={pickerStyle ? pickerStyle : _pickerStyle}
+          useNativeAndroidPickerStyle={false}
+          placeholder={{}}
+          disabled={orderState.loading}
+          onClose={() => Platform.OS === 'ios' ? handlerChangeLanguage() : {}}
+          onDonePress={() => handlerChangeLanguage()}
         />
-      )}
+      ) : <DummyContainer />}
     </Container>
   )
 }

package/src/components/LanguageSelector/styles.tsx

@@ -1,23 +1,10 @@
 import styled from 'styled-components/native'
 
 export const Container = styled.View`
-  align-items: flex-end;
-  justify-content: flex-end;
-  flex-direction: row;
-`
-
-export const SelectItem = styled.View`
-  padding: 8px;
   align-items: center;
+  justify-content: flex-start;
   flex-direction: row;
-`;
-
-export const SelectItemBtn = styled(SelectItem)`
-  border-width: 1px;
-  border-color: transparent;
-  border-radius: 10px;
-  max-width: 140px;
-  margin-vertical: 5px;
-  padding: 15px 20px;
-  background-color: ${(props: any) => props.isFromProfile ? 'transparent' : props.theme.colors.inputDisabled};
+`
+export const DummyContainer = styled.View`
+  height: 40px;
 `

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' })