ordering-ui-react-native 0.15.91 → 0.15.92

package/package.json

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

package/src/components/Checkout/index.tsx

@@ -592,6 +592,19 @@ const CheckoutUI = (props: any) => {
                     {t('WARNING_INVALID_PRODUCTS', 'Some products are invalid, please check them.')}
                   </OText>
                 )}
+
+                {options.type === 1 &&
+                  validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                  validationFields?.fields?.checkout?.driver_tip?.required &&
+                  (Number(cart?.driver_tip) <= 0) && (
+                  <OText
+                    style={{ textAlign: 'center' }}
+                    color={theme.colors.error}
+                    size={14}
+                  >
+                    {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+                  </OText>
+								)}
               </ChErrors>
             </ChSection>
           )}
@@ -602,8 +615,16 @@ const CheckoutUI = (props: any) => {
           <>
             <FloatingButton
               handleClick={() => handlePlaceOrder()}
-              isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
-              disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal'}
+              isSecondaryBtn={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal' ||
+                              (options.type === 1 &&
+                                validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                                validationFields?.fields?.checkout?.driver_tip?.required &&
+                                (Number(cart?.driver_tip) <= 0))}
+              disabled={loading || !cart?.valid || !paymethodSelected || placing || errorCash || cart?.subtotal_to_calculate < cart?.minimum || paymethodSelected?.gateway === 'paypal' ||
+                        (options.type === 1 &&
+                          validationFields?.fields?.checkout?.driver_tip?.enabled &&
+                          validationFields?.fields?.checkout?.driver_tip?.required &&
+                          (Number(cart?.driver_tip) <= 0))}
               btnText={cart?.subtotal_to_calculate >= cart?.minimum
                 ? (
                   placing

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

@@ -67,7 +67,7 @@ const LoginFormUI = (props: LoginParams) => {
   const inputRef = useRef<any>(null);
   const inputMailRef = useRef<any>(null);
 
-  const [projectName, setProjectName] = useState('');
+  const [projectName, setProjectName] = useState({name: '', isFocued: false});
   const [passwordSee, setPasswordSee] = useState(false);
   const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -125,15 +125,16 @@ const LoginFormUI = (props: LoginParams) => {
 
   useEffect(() => {
     const projectInputInterval = setInterval(() => {
-      if (projectName && useRootPoint) {
+      if (projectName.name && useRootPoint && projectName.isFocued) {
         setOrdering({
           ...ordering,
-          project: projectName
+          project: projectName.name
         })
       }
     }, 1500)
     return () => clearInterval(projectInputInterval);
   }, [projectName])
+
   const getTraduction = (key: string) => {
     const keyList: any = {
       // Add the key and traduction that you need below
@@ -515,7 +516,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.general.project}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
-                    setProjectName(e?.target?.value)
+                    setProjectName({name: e?.target?.value, isFocued: true})
                     onChange(e?.target?.value);
                     setSubmitted(false);
                   }}
@@ -544,6 +545,7 @@ const LoginFormUI = (props: LoginParams) => {
                   icon={theme.images.logos.emailInputIcon}
                   iconColor={theme.colors.arrowColor}
                   onChange={(e: any) => {
+                    setProjectName({...projectName, isFocued: false})
                     handleChangeInputEmail(e, onChange);
                   }}
                   selectionColor={theme.colors.primary}

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

@@ -23,7 +23,7 @@ const NewOrderNotificationUI = (props: any) => {
   const [ordering] = useApi()
   const { getCurrentLocation } = useLocation();
   const [soundTimeout, setSoundTimeout] = useState<any>(null)
-  const [currentEvent, setCurrentEvent] = useState<any>(null)
+  let [currentEvent, setCurrentEvent] = useState<any>(null)
 
   const evtList: any = {
     1: {
@@ -46,6 +46,7 @@ const NewOrderNotificationUI = (props: any) => {
   const notificationSound = new Sound(theme.sounds.notification, (e) => { console.log(e) });
 
   const handlePlayNotificationSound = () => {
+    if (currentEvent) return
     let times = 0
     const _timeout = setInterval(function () {
       notificationSound.play(success => {
@@ -63,30 +64,40 @@ const NewOrderNotificationUI = (props: any) => {
 
   const handleCloseModal = () => {
     clearInterval(soundTimeout)
+    currentEvent = null
     setCurrentEvent({ evt: null })
   }
 
   const handleEventNotification = async (evtType: number, value: any) => {
     if (value?.driver) {
-      const location = await getCurrentLocation()
-      await fetch(`${ordering.root}/users/${user.id}/locations`, {
-        method: 'POST',
-        body: JSON.stringify({
-          location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
-        }),
-        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' && !isBusinessApp) {
+      try {
+        const location = await getCurrentLocation()
+        await fetch(`${ordering.root}/users/${user.id}/locations`, {
+          method: 'POST',
+          body: JSON.stringify({
+            location: JSON.stringify({location: `{lat: ${location.latitude}, lng: ${location.longitude}}`})
+          }),
+          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
+        })
+      } catch (error) {
+          console.log(error)
+      }
+      const duration = moment.duration(moment().diff(moment.utc(value?.last_driver_assigned_at)))
+      const assignedSecondsDiff = duration.asSeconds()
+      if (assignedSecondsDiff < 5 && !isBusinessApp) {
         handlePlayNotificationSound()
         clearInterval(soundTimeout)
+        currentEvent = { evt: 2, orderId: value?.id }
         setCurrentEvent({ evt: 2, orderId: value?.id })
       }
-      return
     }
-    if (evtType === 3) return
+    if (evtType === 3 || value.author_id === user.id) return
     handlePlayNotificationSound()
     clearInterval(soundTimeout)
+    currentEvent = {
+      evt: evtType,
+      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
+    }
     setCurrentEvent({
       evt: evtType,
       orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id

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

@@ -77,6 +77,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   })
 
   const getIncludedTaxes = () => {
+    if (!order?.taxes) return 0
     if (order?.taxes?.length === 0) {
       return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
     } else {

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

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

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

@@ -24,7 +24,8 @@ import {
   TagsContainer,
   SortContainer,
   BrandContainer,
-  BrandItem
+  BrandItem,
+  PriceFilterWrapper
 } from './styles'
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
@@ -67,6 +68,14 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_time' }
   ]
 
+  const priceList = [
+    { level: '1', content: '$' },
+    { level: '2', content: '$$' },
+    { level: '3', content: '$$$' },
+    { level: '4', content: '$$$$' },
+    { level: '5', content: '$$$$$' }
+  ]
+
   const styles = StyleSheet.create({
     container: {
       paddingHorizontal: 40,
@@ -93,6 +102,12 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
       flexWrap: 'wrap',
       justifyContent: 'center'
     },
+    priceContainer: {
+      width: '100%',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'space-between'
+    },
     categoryStyle: {
       marginRight: 10,
       marginTop: 10,
@@ -104,6 +119,16 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
       height: 28,
       borderWidth: 0
     },
+    priceItem: {
+      marginRight: 10,
+      marginTop: 10,
+      borderRadius: 50,
+      paddingVertical: 4,
+      paddingLeft: 5,
+      paddingRight: 5,
+      height: 27,
+      borderWidth: 0
+    },
     applyButton: {
       paddingHorizontal: 40,
       width: '100%',
@@ -116,7 +141,7 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
   }
 
   const handleCloseFilters = () => {
-    setFilters({ business_types: [], orderBy: 'default', franchise_ids: [] })
+    setFilters({ business_types: [], orderBy: 'default', franchise_ids: [], price_level: null })
     setOpenFilters(false)
   }
 
@@ -142,6 +167,11 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
     handleChangeFilters && handleChangeFilters('franchise_ids', franchiseIds)
   }
 
+  const handleChangePriceRange = (value: string) => {
+    if (value === filters?.price_level) handleChangeFilters('price_level', null)
+    else handleChangeFilters('price_level', value)
+  }
+
   const handleApplyFilters = () => {
     handleSearchbusinessAndProducts(true)
     setOpenFilters(false)
@@ -473,6 +503,28 @@ export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
               <OText size={14} weight='400'>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
             )}
           </BrandContainer>
+          <PriceFilterWrapper>
+            <OText
+              size={16}
+              weight='bold'
+              lineHeight={24}
+              style={{ marginBottom: 5 }}
+            >
+              {t('PRICE_RANGE', 'Price range')}
+            </OText>
+            <View style={styles.priceContainer}>
+              {priceList.map((price: any, i: number) => (
+                <OButton
+                  key={i}
+                  bgColor={(filters?.price_level === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
+                  onClick={() => handleChangePriceRange(price?.level)}
+                  text={`${price.content} ${(filters?.price_level === price?.level) ? ' X' : ''}`}
+                  style={styles.priceItem}
+                  textStyle={{ fontSize: 10, color: (filters?.price_level === price?.level) ? theme.colors.backgroundLight : theme.colors.textNormal }}
+                />
+              ))}
+            </View>
+          </PriceFilterWrapper>
           {orderState?.options?.type === 1 && (
             <MaxSectionItem
               title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}

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

@@ -83,3 +83,7 @@ export const BrandItem = styled.TouchableOpacity`
   margin-bottom: 4px;
   align-items: center;
 `
+
+export const PriceFilterWrapper = styled.View`
+  margin-bottom: 20px;
+`

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

@@ -59,7 +59,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		handleBusinessClick,
 		paginationProps,
 		handleChangeSearch,
-		businessId
+		businessId,
+		isGuestUser
 	} = props;
 	const theme = useTheme();
 	const isFocused = useIsFocused();
@@ -242,6 +243,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								: navigation.navigate('AddressForm', {
 									address: orderState.options?.address,
 									isFromBusinesses: true,
+									isGuestUser: isGuestUser
 								})
 						}>
 						<OIcon

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

@@ -113,7 +113,10 @@ const CheckoutUI = (props: any) => {
 			right: Platform.OS === 'ios' ? 5 : (I18nManager.isRTL ? 30 : 0),
 			position: 'absolute',
 			fontSize: 20
-		}
+		},
+		wrapperNavbar: Platform.OS === 'ios'
+			? { paddingVertical: 0, paddingHorizontal: 40 }
+			: { paddingVertical: 20, paddingHorizontal: 40 }
 	})
 
 	const [, { showToast }] = useToast();
@@ -133,20 +136,20 @@ const CheckoutUI = (props: any) => {
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 	const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
 	const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
-	
+
 	const placeSpotTypes = [3, 4]
-  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 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) ||
-								(options.type === 1 &&
-									validationFields?.fields?.checkout?.driver_tip?.enabled &&
-									validationFields?.fields?.checkout?.driver_tip?.required &&
-									(Number(cart?.driver_tip) <= 0))
+		cart?.subtotal < cart?.minimum || (placeSpotTypes.includes(options?.type) && !cart?.place) ||
+		(options.type === 1 &&
+			validationFields?.fields?.checkout?.driver_tip?.enabled &&
+			validationFields?.fields?.checkout?.driver_tip?.required &&
+			(Number(cart?.driver_tip) <= 0))
 
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
@@ -259,13 +262,18 @@ const CheckoutUI = (props: any) => {
 	return (
 		<>
 			<Container noPadding>
-				<NavBar
-					isVertical
-					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-					title={t('CHECKOUT', 'Checkout')}
-					titleStyle={{ marginLeft: 0, marginRight: 0, paddingLeft: 40 }}
-					btnStyle={{ marginLeft: 40, padding: 40 }}
-				/>
+				<View style={styles.wrapperNavbar}>
+					<NavBar
+						title={t('CHECKOUT', 'Checkout')}
+						titleAlign={'center'}
+						onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+						showCall={false}
+						btnStyle={{ paddingLeft: 0 }}
+						style={{ flexDirection: 'column', alignItems: 'flex-start', marginTop: Platform.OS === 'ios' ? 0 : 20 }}
+						titleWrapStyle={{ paddingHorizontal: 0 }}
+						titleStyle={{ marginRight: 0, marginLeft: 0 }}
+					/>
+				</View>
 				<ChContainer style={styles.pagePadding}>
 					<ChSection style={{ paddingTop: 0 }}>
 						<ChHeader>
@@ -668,16 +676,16 @@ const CheckoutUI = (props: any) => {
 									</OText>
 								)}
 								{options.type === 1 &&
-								validationFields?.fields?.checkout?.driver_tip?.enabled &&
-								validationFields?.fields?.checkout?.driver_tip?.required &&
-								(Number(cart?.driver_tip) <= 0) && (
-								<OText
-									color={theme.colors.error}
-									size={12}
-								>
-									{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
-								</OText>
-								)}
+									validationFields?.fields?.checkout?.driver_tip?.enabled &&
+									validationFields?.fields?.checkout?.driver_tip?.required &&
+									(Number(cart?.driver_tip) <= 0) && (
+										<OText
+											color={theme.colors.error}
+											size={12}
+										>
+											{t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}
+										</OText>
+									)}
 							</ChErrors>
 						</View>
 					)}

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

@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { RefreshControl } from 'react-native'
 import { HelpParams } from '../../types'
 import { useLanguage } from 'ordering-components/native'
 import NavBar from '../NavBar'
 import { OText } from '../shared'
 import { LastOrders } from '../LastOrders'
+import { Container } from '../../layouts/Container'
 
 import {
   HelpSubItem,
@@ -15,13 +17,28 @@ export const Help = (props: HelpParams) => {
     navigation
   } = props
   const [, t] = useLanguage()
+  const [refreshing] = useState(false);
+  const [refresh, setRefresh] = useState(false)
 
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
   const onRedirect = (route: string, params?: any) => {
     navigation.navigate(route, params)
   }
+
+  const handleOnRefresh = () => {
+    setRefresh(true)
+  }
+
   return (
-    <>
+    <Container
+      noPadding
+      refreshControl={
+				<RefreshControl
+					refreshing={refreshing}
+					onRefresh={() => handleOnRefresh()}
+				/>
+			}
+    >
       <NavBar
         title={t('HELP', 'Help')}
         titleAlign={'center'}
@@ -48,8 +65,8 @@ export const Help = (props: HelpParams) => {
 
       <LastOrdersContainer>
         <OText size={18} weight={600}>{t('LAST_ORDERS', 'Last Orders')}</OText>
-        <LastOrders {...props} onRedirect={onRedirect} />
+        <LastOrders {...props} onRedirect={onRedirect} refresh={refresh} setRefresh={setRefresh} />
       </LastOrdersContainer>
-    </>
+    </Container>
   )
 }

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

@@ -18,11 +18,15 @@ import {
   OrderContainer,
   OrderInfo
 } from './styles'
+import { useEffect } from 'react'
 
 const LastOrdersUI = (props: LastOrdersParams) => {
   const {
     orderList,
-    onRedirect
+    onRedirect,
+    loadOrders,
+    refresh,
+    setRefresh
   } = props
   const { loading, error, orders } = orderList
 
@@ -46,6 +50,13 @@ const LastOrdersUI = (props: LastOrdersParams) => {
     onRedirect && onRedirect('OrderDetails', { orderId: uuid })
   }
 
+  useEffect(() => {
+		if(refresh){
+			loadOrders(false, false, false, true)
+			setRefresh && setRefresh(false)
+		}
+	}, [refresh])
+
   return (
     <>
       {loading ? (

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

@@ -93,6 +93,8 @@ const LoginFormUI = (props: LoginParams) => {
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
+	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const tabsRef = useRef<any>(null)
 
 	const theme = useTheme();
 	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
@@ -146,9 +148,10 @@ const LoginFormUI = (props: LoginParams) => {
 	const passwordRef = useRef<any>({});
 	const recaptchaRef = useRef<any>({});
 
-	const handleChangeTab = (val: string) => {
+	const handleChangeTab = (val: string, otpType?: string) => {
 		props.handleChangeTab(val);
 		setPasswordSee(false);
+		handleCategoryScroll(otpType ? `${val}_${otpType}` : val)
 	};
 
 	const onSubmit = (values?: any) => {
@@ -231,7 +234,7 @@ const LoginFormUI = (props: LoginParams) => {
 	}
 
 	const handleChangeOtpType = (type: string) => {
-		handleChangeTab('otp')
+		handleChangeTab('otp', type)
 		setOtpType(type)
 	}
 
@@ -248,6 +251,20 @@ const LoginFormUI = (props: LoginParams) => {
 		})
 	}
 
+	const handleCategoryScroll = (opc : string) => {
+		tabsRef.current.scrollTo({
+			x: tabLayouts?.[opc]?.x - 40,
+			animated: true
+		})
+	}
+
+	const handleOnLayout = (event: any, opc: string) => {
+		const _tabLayouts = { ...tabLayouts }
+		const categoryKey = opc
+		_tabLayouts[categoryKey] = event.nativeEvent.layout
+		setTabLayouts(_tabLayouts)
+	}
+
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
 			setRecaptchaConfig({
@@ -331,9 +348,16 @@ const LoginFormUI = (props: LoginParams) => {
 			<FormSide>
 				{((useLoginByEmail && useLoginByCellphone) || useLoginOtp) && (
 					<LoginWith>
-						<OTabs horizontal>
+						<OTabs
+							horizontal 
+							showsHorizontalScrollIndicator={false}
+							ref={tabsRef}
+						>
 							{useLoginByEmail && (
-								<TabBtn onPress={() => handleChangeTab('email')}>
+								<TabBtn 
+									onPress={() => handleChangeTab('email')}
+									onLayout={(event: any) => handleOnLayout(event, 'email')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -355,7 +379,10 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginByCellphone && (
-								<TabBtn onPress={() => handleChangeTab('cellphone')}>
+								<TabBtn 
+									onPress={() => handleChangeTab('cellphone')}
+									onLayout={(event: any) => handleOnLayout(event, 'cellphone')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -377,7 +404,10 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpEmail && (
-								<TabBtn onPress={() => handleChangeOtpType('email')}>
+								<TabBtn 
+									onPress={() => handleChangeOtpType('email')}
+									onLayout={(event: any) => handleOnLayout(event, 'otp_email')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -399,7 +429,10 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpCellphone && (
-								<TabBtn onPress={() => handleChangeOtpType('cellphone')}>
+								<TabBtn 
+									onPress={() => handleChangeOtpType('cellphone')}
+									onLayout={(event: any) => handleOnLayout(event, 'otp_cellphone')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:

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

@@ -42,7 +42,7 @@ import { OSRow } from '../OrderSummary/styles';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { Placeholder, PlaceholderLine } from 'rn-placeholder';
-
+import NavBar from '../NavBar'
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
     navigation,
@@ -82,7 +82,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       justifyContent: 'flex-start',
       paddingLeft: 0,
       height: 30,
-      width: 40,
+      width: 30,
+      marginTop: Platform.OS === 'ios' ? 0 : 30
     },
   });
 
@@ -364,7 +365,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }
 
   const RenderGoogleMap = () => {
-    const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l : string) => l.replace(/[^-.0-9]/g, ''))
+    const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l: string) => l.replace(/[^-.0-9]/g, ''))
     const parsedLocations = locations.map(location => typeof location?.location === 'string' ? {
       ...location,
       lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
@@ -498,27 +499,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       {order && Object.keys(order).length > 0 && (
         <>
           <Header>
-            <OButton
-              imgLeftSrc={theme.images.general.arrow_left}
-              imgRightSrc={null}
-              style={styles.btnBackArrow}
-              onClick={() => handleArrowBack()}
-              imgLeftStyle={{ tintColor: theme.colors.disabled }}
+            <NavBar
+              title={`${t('ORDER', 'Order')} #${order?.id}`}
+              titleAlign={'center'}
+              onActionLeft={handleArrowBack}
+              showCall={false}
+              btnStyle={{ paddingLeft: 0 }}
+              style={{ flexDirection: 'column', alignItems: 'flex-start', marginTop: Platform.OS === 'ios' ? 0 : 20 }}
+              titleWrapStyle={{ paddingHorizontal: 0 }}
+              titleStyle={{ marginRight: 0, marginLeft: 0 }}
+              subTitle={<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
+                {order?.delivery_datetime_utc
+                  ? parseDate(order?.delivery_datetime_utc)
+                  : parseDate(order?.delivery_datetime, { utc: false })}
+              </OText>}
             />
             <OrderInfo>
               <OrderData>
-                <OText
-                  size={20}
-                  lineHeight={30}
-                  weight={'600'}
-                  color={theme.colors.textNormal}>
-                  {t('ORDER', 'Order')} #{order?.id}
-                </OText>
-                <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-                  {order?.delivery_datetime_utc
-                    ? parseDate(order?.delivery_datetime_utc)
-                    : parseDate(order?.delivery_datetime, { utc: false })}
-                </OText>
                 {
                   (
                     parseInt(order?.status) === 1 ||

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

@@ -112,6 +112,7 @@ const PaymentOptionWalletUI = (props: any) => {
                     true: theme.colors.primary,
                     false: theme.colors.disabled
                   }}
+                  onChange={() => handleOnChange(idx, wallet)}
                   tintColor={theme.colors.disabled}
                   onCheckColor={theme.colors.primary}
                   onTintColor={theme.colors.primary}

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

@@ -17,7 +17,7 @@ import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, ScrollView, Platform } from 'react-native'
+import { View, StyleSheet, ScrollView, Platform, RefreshControl } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import { PromotionParams } from '../../types'
 import { Container } from '../../layouts/Container'
@@ -28,6 +28,7 @@ const PromotionsUI = (props: PromotionParams) => {
         offersState,
         handleSearchValue,
         searchValue,
+        loadOffers,
         offerSelected,
         setOfferSelected
     } = props
@@ -68,6 +69,7 @@ const PromotionsUI = (props: PromotionParams) => {
     const [, t] = useLanguage()
     const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
     const [openModal, setOpenModal] = useState(false)
+    const [refreshing] = useState(false);
 
     const handleClickOffer = (offer: any) => {
         setOpenModal(true)
@@ -79,6 +81,12 @@ const PromotionsUI = (props: PromotionParams) => {
         navigation.navigate('Business', { store: store.slug })
     }
 
+    const handleOnRefresh = () => {
+        if (!offersState.loading) {
+            loadOffers();
+        }
+    }
+
     const filteredOffers = offersState?.offers?.filter((offer: any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
     const targetString = offerSelected?.target === 1
         ? t('SUBTOTAL', 'Subtotal')
@@ -87,7 +95,15 @@ const PromotionsUI = (props: PromotionParams) => {
             : t('SERVICE_FEE', 'Service fee')
 
     return (
-        <Container noPadding>
+        <Container
+            noPadding
+            refreshControl={
+                <RefreshControl
+                    refreshing={refreshing}
+                    onRefresh={() => handleOnRefresh()}
+                />
+            }
+        >
             <NavBar
                 title={t('PROMOTIONS', 'Promotions')}
                 titleAlign={'center'}

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

@@ -153,6 +153,7 @@ export interface BusinessesListingParams {
 	defaultBusinessType?: any;
 	franchiseId?: any;
 	businessId?: any;
+	isGuestUser?: any;
 }
 export interface HighestRatedBusinessesParams {
 	businessesList: { businesses: Array<any>, loading: boolean, error: null | string };