ordering-ui-react-native 0.15.88 → 0.15.91

package/package.json

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

package/src/utils/index.tsx

@@ -408,49 +408,49 @@ export const orderCommentList = (value: string) => {
 
   const messages: any = {
     6: [// on reject order
-      'Very far away',
-      'Driver/ vehicle incident',
-      'Destination unreachable',
-      'Unavailable driver',
-      'Other'
+      'very_far_away',
+      'driver_vehicle_incident',
+      'destination_unreacheable',
+      'unavailable_driver',
+      'other'
     ],
     9: [// on force pickup status
-      'I forgot to complete it in the location',
-      'I didn\'t have internet connection',
-      'Other'
+      'forgot_complete_location',
+      'not_internet_conection',
+      'other'
     ],
     10: [// on pickup failed by driver
-      'Very far away',
-      'Driver/ vehicle incident',
-      'Destination unreachable',
-      'Store closed',
-      'Unavailable driver',
-      'Other'
+      'very_far_away',
+      'driver_vehicle_incident',
+      'destination_unreacheable',
+      'store_closed',
+      'unavailable_driver',
+      'other'
     ],
     11: [// on force delivery status
-      'I forgot to complete it in the location',
-      'I didn\'t have internet connection',
-      'Other'
+      'forgot_complete_location',
+      'not_internet_conection',
+      'other'
     ],
     12: [// on delivery failed by driver
-      'Very far away',
-      'Driver/ vehicle incident',
-      'Destination unreachable',
-      'Recipient unavailable',
-      'Refused- incorrect/ missing items',
-      'Refused- damage',
-      'Other'
+      'very_far_away',
+      'driver_vehicle_incident',
+      'destination_unreacheable',
+      'recipient_unavailable',
+      'incorrect_missing_items',
+      'refused_damage',
+      'other'
     ],
     14: [// on order not ready
-      'Store didn\'t receive the order on time',
-      'Store very busy',
-      'Other'
+      'store_recieve_order_late',
+      'store_busy',
+      'other'
     ]
   }
 
   if (!messages[status]) return null
 
-  const list = messages[status].map((val: any, i: number) => ({ key: i, content: t(`ORDER_STATUS_${status}_QUICK_COMMENT_${i}`, val) }))
+  const list = messages[status].map((val: any, i: number) => ({ key: i, value: val, content: t(`REJECT_REASON_${val.toUpperCase()}`, val.replaceAll('_', ' ')) }))
 
   return { list }
 }

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

@@ -1,14 +1,17 @@
 import React, { useState, useEffect, useRef } from 'react';
+import FeatherIcon from 'react-native-vector-icons/Feather';
 import {
   Linking,
   Keyboard,
   Platform,
   View,
   KeyboardAvoidingView,
-  TextInput
+  TextInput,
+  StyleSheet
 } from 'react-native';
 import { useTheme } from 'styled-components/native';
-import { useLanguage } from 'ordering-components/native';
+import SelectDropdown from 'react-native-select-dropdown'
+import { useLanguage, useSession } from 'ordering-components/native';
 import { Content, Timer, TimeField, Header, Action, Comments, CommentsButtonGroup } from './styles';
 import { FloatingButton } from '../FloatingButton';
 import { OText, OButton, OTextarea, OIconButton } from '../shared';
@@ -32,6 +35,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   } = props;
 
   const [, t] = useLanguage();
+  const [{ user }] = useSession();
   const theme = useTheme();
   const scrollViewRef = useRef<any>(null);
   const viewRef = useRef<any>(null);
@@ -41,10 +45,12 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const [min, setMin] = useState('00');
   const [time, setTime] = useState('');
   const [comments, setComments] = useState('');
-  const [commentList, setCommentList] = useState<any>([]);
+  const [rejectReason, setRejectReason] = useState(null);
   const [isKeyboardShow, setIsKeyboardShow] = useState(false);
   const { top, bottom } = useSafeAreaInsets()
 
+  const isDriverApp = appTitle?.key === 'DELIVERY_APP'
+
   const orderCommentsList = orderCommentList(action)
 
   let codeNumberPhone, numberPhone, numberToShow;
@@ -53,20 +59,41 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   const buttonText = t(orderTitle[action]?.btnKey, orderTitle[action]?.btnText)
   const showTextArea = ['reject', 'deliveryFailed', 'pickupFailed', 'notReady', 'forcePickUp', 'forceDelivery'].includes(action)
 
-  const isSelectedComment = (commentKey: number) => {
-    const found = commentList.find((comment: any) => comment?.key === commentKey)
-    return found
-  }
-
-  const handleChangeComments = (commentItem: any) => {
-    const found = commentList.find((comment: any) => comment?.key === commentItem.key)
-    if (found) {
-      const _comments = commentList.filter((comment: any) => comment?.key !== commentItem.key)
-      setCommentList(_comments)
-    } else {
-      setCommentList([...commentList, commentItem])
-    }
-  }
+  const styles = StyleSheet.create({
+    selectOption: {
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minHeight: 40,
+      width: '100%',
+      paddingHorizontal: 15,
+      backgroundColor: theme.colors.inputChat,
+      borderRadius: 7.6,
+    },
+    buttonTextStyle: {
+      textAlign: 'left',
+      marginHorizontal: 0,
+      fontSize: 16,
+      lineHeight: 24,
+      color: '#748194',
+      textTransform: 'capitalize'
+    },
+    dropdownStyle: {
+      borderWidth: 1,
+      borderRadius: 8,
+      paddingTop: 5,
+      backgroundColor: '#fff',
+      borderColor: theme.colors.lightGray,
+      overflow: 'hidden',
+      minHeight: 155
+    },
+    rowStyle: {
+      display: 'flex',
+      borderBottomWidth: 0,
+      height: 36,
+      alignItems: 'center',
+      paddingHorizontal: 10
+    },
+  })
 
   const handleFocus = () => {
     viewRef?.current?.measure((x: any, y: any) => {
@@ -74,12 +101,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     });
   };
 
-  const handleFocusTimer = () => {
-    timerRef?.current?.measure((x: any, y: any) => {
-      scrollViewRef?.current?.scrollTo({ x: 0, y });
-    });
-  };
-
   useEffect(() => {
     const keyboardDidShowListener = Keyboard.addListener(
       'keyboardDidShow',
@@ -171,13 +192,6 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
 
   const handleAcceptOrReject = () => {
     handleFixTime();
-
-    let _comments = ''
-    if (commentList.length > 0) {
-      commentList.map((comment: any) => (_comments += comment.content + '. '))
-    }
-    const _comment = _comments + comments
-
     let minsToSend = min;
 
     if (min > '60') minsToSend = '59';
@@ -191,7 +205,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 7,
       },
       rejectByBusiness: {
-        comment: _comment,
+        comment: comments,
         status: 5,
       },
       acceptByDriver: {
@@ -199,28 +213,34 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 8,
       },
       rejectByDriver: {
-        comment: _comment,
+        comment: comments,
         status: 6,
+        reject_reason: rejectReason
       },
       pickupFailedByDriver: {
-        comment: _comment,
-        status: 10
+        comment: comments,
+        status: 10,
+        reject_reason: rejectReason
       },
       deliveryFailedByDriver: {
-        comment: _comment,
-        status: 12
+        comment: comments,
+        status: 12,
+        reject_reason: rejectReason
       },
       orderNotReady: {
-        comment: _comment,
-        status: 14
+        comment: comments,
+        status: 14,
+        reject_reason: rejectReason
       },
       forcePickUp: {
-        reasons: _comment,
-        status: 9
+        reasons: comments,
+        status: 9,
+        reject_reason: rejectReason
       },
       forceDelivery: {
-        reasons: _comment,
-        status: 11
+        reasons: comments,
+        status: 11,
+        reject_reason: rejectReason
       }
     };
 
@@ -413,25 +433,45 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
           onBlur={() => actions && action === 'accept' && timerRef?.current?.focus?.()}
         />
 
-        {orderCommentsList && (
+        {orderCommentsList && isDriverApp && (
           <CommentsButtonGroup>
-            {orderCommentsList?.list?.map((comment: any) => (
-              <OButton
-                key={comment.key}
-                text={comment.content}
-                bgColor={isSelectedComment(comment.key) ? theme.colors.primary : theme.colors.tabBar}
-                borderColor={isSelectedComment(comment.key) ? theme.colors.primary : theme.colors.tabBar}
-                textStyle={{
-                  color: isSelectedComment(comment.key) ? theme.colors.white : theme.colors.darkText,
-                  fontSize: 12,
-                  paddingRight: isSelectedComment(comment.key) ? 15 : 0
-                }}
-                style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
-                imgRightSrc={isSelectedComment(comment.key) ? theme.images.general.close : null}
-                imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-                onClick={() => handleChangeComments(comment) }
-              />
-            ))}
+            <SelectDropdown
+              defaultButtonText={t('REJECT_REASONS_OPTIONS', 'Reject reasons')}
+              data={orderCommentsList?.list}
+              onSelect={(selectedItem) => {
+                setRejectReason(selectedItem?.value)
+              }}
+              buttonTextAfterSelection={(selectedItem) => selectedItem.content}
+              rowTextForSelection={(item) => item.key}
+              buttonStyle={styles.selectOption}
+              buttonTextStyle={styles.buttonTextStyle}
+              renderDropdownIcon={isOpened => {
+                return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
+              }}
+              dropdownStyle={styles.dropdownStyle}
+              dropdownOverlayColor='transparent'
+              rowStyle={styles.rowStyle}
+              renderCustomizedRowChild={(item) => {
+                return (
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      alignItems: 'center'
+                    }}
+                  >
+                    <View>
+                      <OText
+                        size={14}
+                        color={'#748194'}
+                        style={{ textTransform: 'capitalize' }}
+                      >
+                        {item?.content}
+                      </OText>
+                    </View>
+                  </View>
+                );
+              }}
+            />
           </CommentsButtonGroup>
         )}
 

package/themes/business/src/components/AcceptOrRejectOrder/styles.tsx

@@ -39,4 +39,5 @@ export const Comments = styled.View`
 export const CommentsButtonGroup = styled.View`
   flex-direction: row;
   flex-wrap: wrap;
+  margin-top: 15px;
 `

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

@@ -44,6 +44,35 @@ import { USER_TYPE } from '../../config/constants';
 
 import SignatureScreen from 'react-native-signature-canvas';
 
+const ORDER_STATUS: any = {
+  0: 'ORDER_STATUS_PENDING',
+  1: 'ORDERS_COMPLETED',
+  2: 'ORDER_REJECTED',
+  3: 'ORDER_STATUS_IN_BUSINESS',
+  4: 'ORDER_READY',
+  5: 'ORDER_REJECTED_RESTAURANT',
+  6: 'ORDER_STATUS_CANCELLEDBYDRIVER',
+  7: 'ORDER_STATUS_ACCEPTEDBYRESTAURANT',
+  8: 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER',
+  9: 'ORDER_PICKUP_COMPLETED_BY_DRIVER',
+  10: 'ORDER_PICKUP_FAILED_BY_DRIVER',
+  11: 'ORDER_DELIVERY_COMPLETED_BY_DRIVER',
+  12: 'ORDER_DELIVERY_FAILED_BY_DRIVER',
+  13: 'PREORDER',
+  14: 'ORDER_NOT_READY',
+  15: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
+  16: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER',
+  17: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
+  18: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS',
+  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', 'delivery_datetime']
+
 const ChatUI = (props: MessagesParams) => {
   const {
     type,
@@ -317,71 +346,6 @@ const ChatUI = (props: MessagesParams) => {
     }
   };
 
-  const getStatus = (status: number, attribute: any) => {
-    const hour = Math.trunc(status / 60);
-    const min = Math.round((status / 60 - hour) * 60);
-
-    if (attribute === 'status') {
-      switch (status) {
-        case 0:
-          return 'ORDER_STATUS_PENDING';
-        case 1:
-          return 'ORDERS_COMPLETED';
-        case 2:
-          return 'ORDER_REJECTED';
-        case 3:
-          return 'ORDER_STATUS_IN_BUSINESS';
-        case 4:
-          return 'ORDER_READY';
-        case 5:
-          return 'ORDER_REJECTED_RESTAURANT';
-        case 6:
-          return 'ORDER_STATUS_CANCELLEDBYDRIVER';
-        case 7:
-          return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT';
-        case 8:
-          return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER';
-        case 9:
-          return 'ORDER_PICKUP_COMPLETED_BY_DRIVER';
-        case 10:
-          return 'ORDER_PICKUP_FAILED_BY_DRIVER';
-        case 11:
-          return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER';
-        case 12:
-          return 'ORDER_DELIVERY_FAILED_BY_DRIVER';
-        case 13:
-          return 'PREORDER';
-        case 14:
-          return 'ORDER_NOT_READY';
-        case 15:
-          return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER';
-        case 16:
-          return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER';
-        case 17:
-          return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER';
-        case 18:
-          return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS';
-        case 19:
-          return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER';
-        case 20:
-          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'
-        }`;
-    }
-  };
-
   const onSubmit = (values: any) => {
     handleSend && handleSend();
     setImage && setImage(null);
@@ -403,28 +367,16 @@ const ChatUI = (props: MessagesParams) => {
           numberOfLines={3}
           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(
-              getStatus(
-                parseInt(message.change.new, 10),
-                message.change?.attribute,
-              ),
-            )}`
+            ?
+            `${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)])}`
+            }`
             : 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 : ''
-              }`
-              : `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`}
+              ?
+              `${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')}`}
         </OText>
         <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>
           {parseTime(message?.created_at, { outputFormat: 'hh:mma' })}

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

@@ -8,6 +8,8 @@ import {
   ScrollView,
 } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
+import Recaptcha from 'react-native-recaptcha-that-works'
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
   ToastType,
@@ -25,6 +27,7 @@ import {
   TabsContainer,
   OrSeparator,
   LineSeparator,
+  RecaptchaButton
 } from './styles';
 import { _setStoreData } from '../../providers/StoreUtil'
 import { OText, OButton, OInput, OIconButton, OModal } from '../shared';
@@ -47,7 +50,10 @@ const LoginFormUI = (props: LoginParams) => {
     handleCheckPhoneCode,
     setCheckPhoneCodeState,
     allowedLevels,
-    useRootPoint
+    useRootPoint,
+    notificationState,
+		handleReCaptcha,
+		enableReCaptcha
   } = props;
 
   const [ordering, { setOrdering }] = useApi();
@@ -61,6 +67,7 @@ const LoginFormUI = (props: LoginParams) => {
   const inputRef = useRef<any>(null);
   const inputMailRef = useRef<any>(null);
 
+  const [projectName, setProjectName] = useState('');
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -84,6 +91,49 @@ const LoginFormUI = (props: LoginParams) => {
   const [submitted, setSubmitted] = useState(false);
   const [formValues, setFormValues] = useState(null);
 
+  const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
+	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
+
+  const recaptchaRef = useRef<any>({});
+
+  const handleOpenRecaptcha = () => {
+		setRecaptchaVerified(false)
+	  	if (!recaptchaConfig?.siteKey) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
+			return
+		}
+		if (!recaptchaConfig?.baseUrl) {
+			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			return
+		}
+		recaptchaRef.current.open()
+  	}
+
+	const onRecaptchaVerify = (token: any) => {
+		setRecaptchaVerified(true)
+		handleReCaptcha(token)
+	}
+
+	useEffect(() => {
+		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
+			setRecaptchaConfig({
+				siteKey: configs?.security_recaptcha_site_key?.value || null,
+				baseUrl: configs?.security_recaptcha_base_url?.value || null
+			})
+		}
+	}, [configs, enableReCaptcha])
+
+  useEffect(() => {
+    const projectInputInterval = setInterval(() => {
+      if (projectName && useRootPoint) {
+        setOrdering({
+          ...ordering,
+          project: projectName
+        })
+      }
+    }, 1500)
+    return () => clearInterval(projectInputInterval);
+  }, [projectName])
   const getTraduction = (key: string) => {
     const keyList: any = {
       // Add the key and traduction that you need below
@@ -465,6 +515,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.general.project}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
+                    setProjectName(e?.target?.value)
                     onChange(e?.target?.value);
                     setSubmitted(false);
                   }}
@@ -590,7 +641,7 @@ const LoginFormUI = (props: LoginParams) => {
 
           {onNavigationRedirect && (
             <Pressable
-              style={{ marginRight: 'auto', marginBottom: 35 }}
+              style={{ marginRight: 'auto', marginBottom: 20 }}
               onPress={() => onNavigationRedirect('Forgot')}>
               <OText style={styles.textForgot}>
                 {t('FORGOT_YOUR_PASSWORD', 'Forgot your password?')}
@@ -598,6 +649,39 @@ const LoginFormUI = (props: LoginParams) => {
             </Pressable>
           )}
 
+          {enableReCaptcha && (
+            <>
+              <TouchableOpacity
+                style={{ marginBottom: 15 }}
+                onPress={handleOpenRecaptcha}
+              >
+                <RecaptchaButton>
+                  {recaptchaVerified ? (
+                    <MaterialCommunityIcons
+                      name="checkbox-marked"
+                      size={26}
+                      color={theme.colors.primary}
+                    />
+                  ) : (
+                    <MaterialCommunityIcons
+                      name="checkbox-blank-outline"
+                      size={26}
+                      color={theme.colors.mediumGray}
+                    />
+                  )}
+                  <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+                </RecaptchaButton>
+              </TouchableOpacity>
+              <Recaptcha
+                ref={recaptchaRef}
+                siteKey={recaptchaConfig?.siteKey}
+                baseUrl={recaptchaConfig?.baseUrl}
+                onVerify={onRecaptchaVerify}
+                onExpire={() => setRecaptchaVerified(false)}
+              />
+            </>
+					)}
+
           <OButton
             onClick={handleLogin}
             text={t('LOGIN', 'Login')}
@@ -657,6 +741,7 @@ const LoginFormUI = (props: LoginParams) => {
 export const LoginForm = (props: any) => {
   const loginProps = {
     ...props,
+    isRecaptchaEnable: true,
     UIComponent: LoginFormUI,
   };
 

package/themes/business/src/components/LoginForm/styles.tsx

@@ -46,3 +46,9 @@ export const LineSeparator = styled.View`
   height: 1px;
   background-color: ${(props: any) => props.theme.colors.disabled};
 `;
+
+export const RecaptchaButton = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+`

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

@@ -14,7 +14,8 @@ Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
 
-const NewOrderNotificationUI = () => {
+const NewOrderNotificationUI = (props: any) => {
+  const { isBusinessApp } = props
   const [events] = useEvent()
   const theme = useTheme()
   const [, t] = useLanguage()
@@ -76,13 +77,14 @@ const NewOrderNotificationUI = () => {
         headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
       })
       const assignedTimeDiff = moment.utc(value?.driver?.last_order_assigned_at).local().fromNow()
-      if (assignedTimeDiff === 'a few seconds ago') {
+      if (assignedTimeDiff === 'a few seconds ago' && !isBusinessApp) {
         handlePlayNotificationSound()
         clearInterval(soundTimeout)
         setCurrentEvent({ evt: 2, orderId: value?.id })
       }
       return
     }
+    if (evtType === 3) return
     handlePlayNotificationSound()
     clearInterval(soundTimeout)
     setCurrentEvent({

package/themes/business/src/components/OrderDetails/Delivery.tsx

@@ -1,6 +1,6 @@
 //React & React Native
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, Platform, ScrollView } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 // Thirds
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -29,7 +29,6 @@ import { NotFoundSource } from '../NotFoundSource';
 import { getOrderStatus } from '../../utils';
 import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
-
 //Styles
 import { OrderDetailsContainer, Pickup } from './styles';
 
@@ -52,7 +51,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     appTitle,
     handleClickLogisticOrder,
     forceUpdate,
-    getPermissions
+    getPermissions,
+    isGrantedPermissions
   } = props;
   const [, { showToast }] = useToast();
   const { order } = props.order
@@ -102,6 +102,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleOpenMapView = async () => {
+    if (!isGrantedPermissions) {
+      navigation.navigate('RequestPermissions')
+      return
+    }
     const _permissions = await getPermissions()
 
     const isBlocked = _permissions.some((_permission: string) => permissions?.locationStatus?.[_permission] === 'blocked')
@@ -128,6 +132,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleViewActionOrder = (action: string) => {
+    if (!isGrantedPermissions) {
+      navigation.navigate('RequestPermissions')
+      return
+    }
     if (openModalForMapView) {
       setOpenModalForMapView(false);
     }

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

@@ -617,7 +617,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
         </RightSide>
       </Sides>
 
-      <NewOrderNotification />
+      <NewOrderNotification isBusinessApp={isBusinessApp} />
       {(openSearchModal || openSLASettingModal) && (
         <OModal open={openSearchModal || openSLASettingModal} entireModal customClose>
           <ModalContainer

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

@@ -726,7 +726,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       </View>
       {/* </GestureRecognizer> */}
 
-      <NewOrderNotification />
+      <NewOrderNotification isBusinessApp={isBusinessApp} />
       {(openSearchModal || openSLASettingModal) && (
         <OModal open={openSearchModal || openSLASettingModal} entireModal customClose>
           <ModalContainer

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

@@ -20,6 +20,9 @@ export interface LoginParams {
   passwordInputIcon?: any;
   allowedLevels?: any;
   useRootPoint?: any;
+  notificationState?: any;
+	handleReCaptcha?: any;
+	enableReCaptcha?: any;
 }
 export interface ProfileParams {
   navigation?: any;

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, Text, StyleSheet } from 'react-native';
-import { useApi, useSession, useLanguage, useConfig, useToast, ToastType } from 'ordering-components/native';
+import { useApi, useSession, useLanguage, useConfig } from 'ordering-components/native';
 import { appleAuthAndroid, appleAuth } from '@invertase/react-native-apple-authentication';
 import uuid from 'react-native-uuid';
 import Icon from 'react-native-vector-icons/FontAwesome5';
@@ -19,14 +19,13 @@ export const AppleLogin = (props: any) => {
   const [{ auth }] = useSession();
   const [, t] = useLanguage();
   const [{ configs }] = useConfig();
-  const [, {showToast}] = useToast()
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
   let user : any= null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
-    : t('CONTINUE_WITH_FACEBOOK', 'Continue with Apple');
+    : t('CONTINUE_WITH_APPLE', 'Continue with Apple');
 
   const performAppleLogin = async (code: string) => {
     try {
@@ -88,7 +87,6 @@ export const AppleLogin = (props: any) => {
       );
 
       if (identityToken && authorizationCode) {
-        showToast(ToastType.Success, `Apple Authentication Completed, ${email}`)
         performAppleLogin(authorizationCode)
       } else {
         handleErrors && handleErrors('UNABLE_LOGIN_TOKEN', 'Unable to login, no token found')

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useLanguage, BusinessSearchList, useOrder, useUtils } from 'ordering-components/native'
-import { ScrollView, StyleSheet, TouchableOpacity, Platform, View } from 'react-native'
+import { ScrollView, StyleSheet, TouchableOpacity, Platform, View, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
@@ -22,15 +22,17 @@ import {
   ProgressContentWrapper,
   ProgressBar,
   TagsContainer,
-  SortContainer
+  SortContainer,
+  BrandContainer,
+  BrandItem
 } from './styles'
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessSearchParams } from '../../types'
 
-export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
 
+export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
   const {
     navigation,
     businessesSearchList,
@@ -42,9 +44,11 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     handleChangeFilters,
     filters,
     businessTypes,
-    setFilters
+    setFilters,
+    brandList
   } = props
-
+  
+  const screenHeight = Dimensions.get('window').height;
   const theme = useTheme()
   const [orderState] = useOrder()
   const { top } = useSafeAreaInsets();
@@ -68,6 +72,11 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
       paddingHorizontal: 40,
       width: '100%'
     },
+    filterContainer: {
+      maxHeight: screenHeight - 150,
+      paddingHorizontal: 40,
+      width: '100%'
+    },
     searchInput: {
       fontSize: 10,
     },
@@ -107,7 +116,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
   }
 
   const handleCloseFilters = () => {
-    setFilters({ business_types: [], orderBy: 'default' })
+    setFilters({ business_types: [], orderBy: 'default', franchise_ids: [] })
     setOpenFilters(false)
   }
 
@@ -126,6 +135,13 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     }
   }
 
+  const handleChangeBrandFilter = (brandId: number) => {
+    let franchiseIds = [...filters?.franchise_ids]
+    if (filters?.franchise_ids?.includes(brandId)) franchiseIds = filters?.franchise_ids?.filter((item: any) => item !== brandId)
+    else franchiseIds.push(brandId)
+    handleChangeFilters && handleChangeFilters('franchise_ids', franchiseIds)
+  }
+
   const handleApplyFilters = () => {
     handleSearchbusinessAndProducts(true)
     setOpenFilters(false)
@@ -388,7 +404,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
         onCancel={() => handleCloseFilters()}
         onClose={() => handleCloseFilters()}
       >
-        <ScrollView style={styles.container}>
+        <ScrollView style={styles.filterContainer}>
           <OText
             size={20}
             mBottom={15}
@@ -415,6 +431,48 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
               </TouchableOpacity>
             ))}
           </SortContainer>
+          <BrandContainer>
+            <OText
+              size={16}
+              weight='bold'
+              lineHeight={24}
+              style={{ marginBottom: 10 }}
+            >
+              {t('BRANDS', 'Brands')}
+            </OText>
+            {!brandList?.loading && !brandList?.error && brandList?.brands?.length > 0 && (
+              <ScrollView
+                style={{ maxHeight: 300, marginBottom: 10 }}
+                showsVerticalScrollIndicator={true}
+                nestedScrollEnabled={true}
+              >
+                {brandList?.brands.map((brand: any, i: number) => brand?.enabled && (
+                  <BrandItem
+                    key={i}
+                    onPress={() => handleChangeBrandFilter(brand?.id)}
+                  >
+                    <OText
+                      size={14}
+                      weight={'400'}
+                      lineHeight={24}
+                    >
+                      {brand?.name}
+                    </OText>
+                    {filters?.franchise_ids?.includes(brand?.id) && (
+                      <AntDesignIcon
+                        name='check'
+                        color={theme.colors.success500}
+                        size={16}
+                      />
+                    )}
+                  </BrandItem>
+                ))}
+              </ScrollView>
+            )}
+            {!brandList?.loading && ((brandList?.brands?.filter((brand: any) => brand?.enabled))?.length === 0) && (
+              <OText size={14} weight='400'>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
+            )}
+          </BrandContainer>
           {orderState?.options?.type === 1 && (
             <MaxSectionItem
               title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}

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

@@ -68,9 +68,18 @@ export const ProgressContentWrapper = styled.View`
 `
 
 export const TagsContainer = styled.View`
-
+  padding-bottom: 10px;
 `
 
 export const SortContainer = styled.View`
   margin-bottom: 10px;
 `
+
+export const BrandContainer = styled.View``
+
+export const BrandItem = styled.TouchableOpacity`
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  align-items: center;
+`

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

@@ -438,7 +438,7 @@ const CartUI = (props: any) => {
       </BusinessItemAccordion>
 
       <OModal
-        open={openChangeStore && props.isFranchiseApp}
+        open={openChangeStore}
         entireModal
         customClose
         onClose={() => setOpenChangeStore(false)}

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

@@ -135,7 +135,11 @@ const CheckoutUI = (props: any) => {
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
 	
 	const placeSpotTypes = [3, 4]
-	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+  const businessConfigs = businessDetails?.business?.configs ?? []
+  const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
+  const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
+  const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletCreditPointsEnabled)
+
 	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const isDisabledButtonPlace = loading || !cart?.valid || (!paymethodSelected && cart?.balance > 0) || placing || errorCash ||
 								cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place) ||
@@ -244,7 +248,7 @@ const CheckoutUI = (props: any) => {
 
 	useEffect(() => {
 		if (cart?.products?.length === 0) {
-			onNavigationRedirect('Business', { store: cart?.business?.slug })
+			onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
 		}
 	}, [cart?.products])
 

package/themes/original/src/components/LoginForm/Otp/index.tsx

@@ -66,7 +66,6 @@ export const Otp = (props: otpParams) => {
                 <OTPInputView
                     style={{ width: '100%', height: 150 }}
                     pinCount={6}
-                    autoFocusOnLoad
                     codeInputFieldStyle={loginStyle.underlineStyleBase}
                     codeInputHighlightStyle={loginStyle.underlineStyleHighLighted}
                     onCodeFilled={(code: string) => handleLoginOtp(code)}

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

@@ -393,7 +393,7 @@ const LoginFormUI = (props: LoginParams) => {
 													: theme.colors.disabled
 											}
 											weight={isOtpEmail ? 'bold' : 'normal'}>
-											{t('LOGIN_BY_OTP_EMAIL', 'Login by Otp Email')}
+											{t('BY_OTP_EMAIL', 'By Otp Email')}
 										</OText>
 									</OTab>
 								</TabBtn>
@@ -415,7 +415,7 @@ const LoginFormUI = (props: LoginParams) => {
 													: theme.colors.disabled
 											}
 											weight={isOtpCellphone ? 'bold' : 'normal'}>
-											{t('LOGIN_BY_OTP_PHONE', 'Login by Otp Phone')}
+											{t('BY_OTP_PHONE', 'By Otp Phone')}
 										</OText>
 									</OTab>
 								</TabBtn>

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

@@ -12,11 +12,9 @@ export const FormSide = styled.View`
   margin: auto;
 `;
 
-export const OTabs = styled.View`
+export const OTabs = styled.ScrollView`
   flex-direction: row;
   width: 100%;
-  flex-wrap: wrap;
-  justify-content: flex-start;
   margin-bottom: -1px;
 `;
 

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

@@ -175,6 +175,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [optionLayout, setOptionLayout] = useState<any>({})
 	const [headerRefHeight, setHeaderRefHeight] = useState(0)
 	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
+	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -278,6 +279,52 @@ export const ProductOptionsUI = (props: any) => {
 		setOptionLayout(_optionLayout)
 	}
 
+	const saveErrors =
+		orderState.loading ||
+		maxProductQuantity === 0 ||
+		Object.keys(errors).length > 0;
+
+	const ExtraOptions = ({ eID, options }: any) => (
+		<>
+			{options.map(({ id, name, respect_to, suboptions }: any) => (
+				<React.Fragment key={`cont_key_${id}`}>
+					{respect_to == null && suboptions?.length > 0 && (
+						<TouchableOpacity
+							key={`eopt_key_${id}`}
+							onPress={() => setSelectedOpt(id)}
+							style={[
+								styles.extraItem,
+								{
+									borderBottomColor:
+										selOpt == id ? theme.colors.textNormal : theme.colors.border,
+								},
+							]}>
+							<OText
+								color={
+									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
+								}
+								size={selOpt == id ? 14 : 12}
+								weight={selOpt == id ? '600' : 'normal'}>
+								{name}
+							</OText>
+						</TouchableOpacity>
+					)}
+				</React.Fragment>
+			))}
+		</>
+	);
+
+	const handleGoBack = navigation?.canGoBack()
+		? () => navigation.goBack()
+		: () => navigation.navigate('Business', { store: props.businessSlug })
+
+	useEffect(() => {
+		if (isScrollAvailable) {
+			setIsScrollAvailable(null)
+			scrollDown(isScrollAvailable)
+		}
+	}, [errors])
+
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
@@ -319,45 +366,6 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [product])
 
-	const saveErrors =
-		orderState.loading ||
-		maxProductQuantity === 0 ||
-		Object.keys(errors).length > 0;
-
-	const ExtraOptions = ({ eID, options }: any) => (
-		<>
-			{options.map(({ id, name, respect_to, suboptions }: any) => (
-				<React.Fragment key={`cont_key_${id}`}>
-					{respect_to == null && suboptions?.length > 0 && (
-						<TouchableOpacity
-							key={`eopt_key_${id}`}
-							onPress={() => setSelectedOpt(id)}
-							style={[
-								styles.extraItem,
-								{
-									borderBottomColor:
-										selOpt == id ? theme.colors.textNormal : theme.colors.border,
-								},
-							]}>
-							<OText
-								color={
-									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
-								}
-								size={selOpt == id ? 14 : 12}
-								weight={selOpt == id ? '600' : 'normal'}>
-								{name}
-							</OText>
-						</TouchableOpacity>
-					)}
-				</React.Fragment>
-			))}
-		</>
-	);
-
-	const handleGoBack = navigation?.canGoBack()
-		? () => navigation.goBack()
-		: () => navigation.navigate('Business', { store: props.businessSlug })
-
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
@@ -738,7 +746,7 @@ export const ProductOptionsUI = (props: any) => {
 																								isSoldOut ||
 																								maxProductQuantity <= 0
 																							}
-																							scrollDown={scrollDown}
+																							setIsScrollAvailable={setIsScrollAvailable}
 																							error={errors[`id:${option.id}`]}
 																						/>
 																					);

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

@@ -28,36 +28,40 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		error,
-		scrollDown
+		setIsScrollAvailable
 	} = props
 
+	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
+	
 	const theme = useTheme();
-
 	const [, t] = useLanguage()
 	const [{ parsePrice }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
+	const [isDirty, setIsDirty] = useState(false)
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
-
-		if (balance === option?.max - 1 && !state.selected) {
-			scrollDown(option?.id)
-		}
+		setIsDirty(true)
 
 		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
 			setShowMessage(true)
 		}
 	}
 
+	useEffect(() => {
+		if (balance === option?.max && state?.selected && isDirty) {
+			setIsDirty(false)
+			setIsScrollAvailable(option?.id)
+		}
+	}, [state?.selected])
+
 	useEffect(() => {
 		if (!(balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))) {
 			setShowMessage(false)
 		}
 	}, [balance])
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
-	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 	return (
 		<View>
 			<Container onPress={() => handleSuboptionClick()}>

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

@@ -109,7 +109,7 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
 
-	const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
+  const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (configs?.wallet_cash_enabled?.value === '1' || configs?.wallet_credit_point_enabled?.value === '1')
 	const IsPromotionsEnabled = configs?.advanced_offers_module?.value === '1' || configs?.advanced_offers_module?.value === true
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)

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

@@ -61,7 +61,7 @@ const WalletsUI = (props: any) => {
 
   const [tabSelected, setTabSelected] = useState(isWalletCashEnabled ? 'cash' : 'credit_point')
 
-  const isWalletEnabled = configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
+  const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' && (isWalletCashEnabled || isWalletPointsEnabled)
 
   const currentWalletSelected = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === tabSelected)) ?? null
 

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

@@ -576,7 +576,8 @@ export interface BusinessSearchParams {
 	filters: any,
 	businessTypes: Array<number>,
 	setFilters: (filters: any) => void,
-	lazySearch?: boolean
+	lazySearch?: boolean,
+	brandList?: any;
 }
 
 export interface NoNetworkParams {