ordering-ui-react-native 0.17.11 → 0.17.12-release

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

@@ -6,7 +6,7 @@ export const ChContainer = styled.View`
 `
 
 export const ChSection = styled.View`
-	padding-top: 30px;
+	padding-top: 20px;
 `
 
 export const ChHeader = styled.View`
@@ -40,7 +40,9 @@ export const ChMoment = styled(ChAddress)`
 `
 
 export const CHMomentWrapper = styled.TouchableOpacity`
-	background-color: ${(props: any) => props.theme.colors.backgroundGray100};
+	background-color: ${(props: any) => props.isCustomColor
+    ? props.theme.colors.primary
+    : props.theme.colors.backgroundGray100};
 	border-radius: 7.6px;
 	font-size: 12px;
 	max-width: 240px;

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

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, useWindowDimensions, Keyboard, View } from 'react-native';
+import { useLanguage, useOrder } from 'ordering-components/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from 'styled-components/native';
+
+import { OButton, OIcon, OText } from '../shared';
+
+import { CityElement, Container } from './styles'
+
+export const CitiesControl = (props: any) => {
+  const {
+    cities,
+    onClose,
+    handleChangeCity
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [orderState] = useOrder();
+  const { height } = useWindowDimensions();
+  const { top, bottom } = useSafeAreaInsets();
+
+  const [isKeyboardShow, setIsKeyboardShow] = useState(false);
+  const [cityState, setCityState] = useState(orderState?.options?.city_id)
+
+  const handleClick = () => {
+    cityState !== orderState?.options?.city_id && handleChangeCity(cityState)
+    onClose && onClose()
+  }
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => setIsKeyboardShow(true)
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => setIsKeyboardShow(false)
+    );
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+
+  return (
+    <Container height={height - top - bottom - 60 - (isKeyboardShow ? 250 : 0)}>
+      <View>
+        {cities?.map((city: any) => (
+          <CityElement
+            key={city?.id}
+            activeOpacity={1}
+            disabled={orderState?.loading}
+            onPress={() => setCityState(city?.id === cityState ? null : city?.id)}
+          >
+            <OIcon
+              src={cityState === city?.id
+                ? theme.images.general.option_checked
+                : theme.images.general.option_normal}
+              width={16}
+              style={{ marginEnd: 24 }}
+            />
+            <OText color={theme.colors.black}>
+              {city?.name}
+            </OText>
+          </CityElement>
+        ))}
+      </View>
+      <OButton
+        text={t('CONTINUE', 'Continue')}
+        bgColor={theme.colors.primary}
+        borderColor={theme.colors.primary}
+        style={styles.btnStyle}
+        textStyle={{ color: 'white' }}
+        onClick={() => handleClick()}
+      />
+    </Container>
+  )
+}
+
+const styles = StyleSheet.create({
+  btnStyle: {
+    marginTop: 20,
+    borderRadius: 8,
+    shadowOpacity: 0,
+    height: 44
+  },
+})

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

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components/native'
+
+export const Container = styled.View`
+  width: 100%;
+  padding: 0 40px;
+  justify-content: space-between;
+  padding-bottom: 12px;
+
+  ${(props: any) => props.height && css`
+    height: ${props.height}px;
+  `}
+`
+
+export const CityElement = styled.TouchableOpacity`
+  padding: 10px;
+  flex-direction: row;
+`

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, Alert, Text } from 'react-native';
-import { CouponControl as CouponController, useLanguage } from 'ordering-components/native';
+import { CouponControl as CouponController, useLanguage, useEvent } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import {
 	CContainer,
@@ -18,11 +18,13 @@ const CouponControlUI = (props: any) => {
 		handleRemoveCouponClick,
 		onChangeInputCoupon,
 		confirm,
-		setConfirm
+		setConfirm,
+		cart
 	} = props
 
 	const [, t] = useLanguage()
 	const theme = useTheme();
+	const [events] = useEvent()
 
 	const styles = StyleSheet.create({
 		inputsStyle: {
@@ -45,6 +47,11 @@ const CouponControlUI = (props: any) => {
 		setConfirm({ ...confirm, open: false, error: false })
 	}
 
+	const onButtonApplyClick = () => {
+		events.emit('coupon_entered', { ...cart, coupon: couponInput })
+		handleButtonApplyClick()
+	}
+
 	useEffect(() => {
 		if (confirm.content) {
 			Alert.alert(
@@ -94,7 +101,7 @@ const CouponControlUI = (props: any) => {
 						inputStyle={{ fontSize: 12 }}
 					/>
 					<OButton
-						onClick={() => handleButtonApplyClick()}
+						onClick={() => onButtonApplyClick()}
 						bgColor={theme.colors.primary}
 						borderColor={theme.colors.primary}
 						textStyle={{ color: 'white', fontSize: 12 }}

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

@@ -22,21 +22,25 @@ const DriverTipsUI = (props: any) => {
 	const {
 		driverTip,
 		driverTipsOptions,
-		optionSelected,
-		isFixedPrice,
+		isMulti,
+		cart,
+		carts,
 		isDriverTipUseCustom,
-		handlerChangeOption
+		handlerChangeOption,
+		isFixedPrice
 	} = props;
 
 	const [{ parsePrice }] = useUtils();
+	const theme = useTheme();
 	const [, t] = useLanguage();
 	const [{ configs }] = useConfig();
-
-	const theme = useTheme();
+	const [customTip, setCustomTip] = useState((!isMulti && isDriverTipUseCustom && !driverTipsOptions.includes(driverTip)) ?? false)
+	const currentTip = customTip ? parseFloat(driverTip || 0) > 0 : (!customTip && !driverTipsOptions.includes(driverTip) && parseFloat(driverTip || 0)) > 0
+	const [value, setvalue] = useState('');
 
 	const style = StyleSheet.create({
-		circle: {
-			borderRadius: 30
+		semicircle: {
+			borderRadius: 8
 		},
 		inputStyle: {
 			flex: 1,
@@ -48,53 +52,63 @@ const DriverTipsUI = (props: any) => {
 		}
 	})
 
-	const [value, setvalue] = useState('');
-
-	const placeholderCurrency = (configs?.currency_position?.value || 'left') === 'left'
+	const placeholderCurrency = !isFixedPrice ? `0%` : (configs?.currency_position?.value || 'left') === 'left'
 		? `${configs?.format_number_currency?.value}0`
 		: `0${configs?.format_number_currency?.value}`
 
 	const handleChangeDriverTip = (val: any) => {
 		const tip = Number(val)
 		if ((isNaN(tip) || tip < 0)) {
-		  setvalue(value)
-		  return
+			setvalue(value)
+			return
 		}
 		setvalue(val)
 	}
-	
+
+	const multiCartTipsAmmout = carts?.reduce((total: any, cart: any) => {
+		return total + parseFloat(cart?.driver_tip || 0)
+	}, 0)
+
 	return (
 		<DTContainer>
 			<DTLabel>
 				{t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
 			</DTLabel>
 			<DTWrapperTips>
-				{!isDriverTipUseCustom && driverTipsOptions.map((option: any, i: number) => (
+				{driverTipsOptions.map((option: any, i: number) => (
 					<TouchableOpacity
 						key={i}
-						onPress={() => handlerChangeOption(option)}
+						onPress={() => {
+							handlerChangeOption(option)
+							setCustomTip(false)
+						}}
 					>
 						<DTCard
-							style={style.circle}
-							isActive={option === optionSelected}
+							style={style.semicircle}
+							isActive={(option === driverTip && !customTip)}
 						>
-							<OText size={12} numberOfLines={1} color={option === optionSelected ? '#FFF' : theme.colors.textSecondary}>
+							<OText size={12} numberOfLines={2} color={(option === driverTip && !customTip) ? '#FFF' : theme.colors.textSecondary}>
 								{`${isFixedPrice ? parsePrice(option) : `${option}%`}`}
 							</OText>
 						</DTCard>
 					</TouchableOpacity>
 				))}
+				{isDriverTipUseCustom && (
+					<TouchableOpacity
+						onPress={() => setCustomTip(true)}
+					>
+						<DTCard
+							style={style.semicircle}
+							isActive={customTip}
+						>
+							<OText size={12} numberOfLines={2} color={customTip ? '#FFF' : theme.colors.textSecondary}>
+								{t('CUSTOM_TIP', 'Custom')}
+							</OText>
+						</DTCard>
+					</TouchableOpacity>
+				)}
 			</DTWrapperTips>
-			{(!isDriverTipUseCustom && !driverTipsOptions.includes(driverTip) && driverTip > 0) && (
-				<OText
-					color={theme.colors.error}
-					size={16}
-					style={{ marginTop: 10, textAlign: 'center' }}
-				>
-					{t('CUSTOM_DRIVER_TIP_AMOUNT', 'The driver\'s current tip comes from a custom option')}
-				</OText>
-			)}
-			{isDriverTipUseCustom && (
+			{customTip && (
 				<DTForm>
 					<DTWrapperInput>
 						<OInput
@@ -120,17 +134,18 @@ const DriverTipsUI = (props: any) => {
 							}}
 						/>
 					</DTWrapperInput>
-					{parseFloat(driverTip || 0) > 0 && (
-						<OText
-							color={theme.colors.error}
-							size={16}
-							style={{ marginTop: 10, textAlign: 'center' }}
-						>
-							{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}: {parsePrice(driverTip)}
-						</OText>
-					)}
 				</DTForm>
 			)}
+			{currentTip && (
+				<OText
+					color={theme.colors.primary}
+					size={16}
+					style={{ marginTop: 10, textAlign: 'center' }}
+				>
+					{t('CURRENT_DRIVER_TIP_AMOUNT', 'Current driver tip amount')}{!isFixedPrice &&
+						` (${driverTip}%)`}: {isFixedPrice ? parsePrice(multiCartTipsAmmout ?? driverTip) : parsePrice(multiCartTipsAmmout ?? cart?.driver_tip)}
+				</OText>
+			)}
 		</DTContainer>
 	)
 }

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

@@ -26,11 +26,12 @@ export const DTCard = styled.View`
   text-transform: capitalize;
   min-height: 55px;
   min-width: 55px;
-  max-width: 55px;
+  max-width: 80px;
   max-height: 55px;
   margin-right: 10px;
   margin-left: 10px;
   margin-top: 10px;
+  padding-horizontal: 10px;
 
   ${(props: any) => props.isActive && css`
     background-color: ${(props: any) => props.theme.colors.primary};

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useLanguage, useOrder } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
+import { Platform } from 'react-native'
 import { FavoriteList } from '../FavoriteList'
 import NavBar from '../NavBar'
 import { OText } from '../shared'
@@ -33,7 +34,9 @@ export const Favorite = (props: any) => {
   }
 
   return (
-    <Container>
+    <Container
+      pdng={Platform.OS === 'ios' ? '10px' : '20px'}
+    >
       <NavBar
         title={t('FAVORITE', 'Favorite')}
         titleAlign={'center'}
@@ -51,9 +54,9 @@ export const Favorite = (props: any) => {
           >
             <OText
               color={menu.key === tabSelected ? theme.colors.textNormal : theme.colors.disabled}
-					    size={14}
-					    weight={menu.key === tabSelected ? '500' : '400'}
-					    style={{ marginBottom: 12 }}
+              size={14}
+              weight={menu.key === tabSelected ? '500' : '400'}
+              style={{ marginBottom: 12 }}
             >
               {menu.name}
             </OText>

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

@@ -18,5 +18,5 @@ export const Tab = styled.TouchableOpacity`
 export const Container = styled.View`
   padding-horizontal: 40px;
   padding-bottom: 20px;
-  padding-top: 30px;
+  padding-top: ${(props: any) => props.pdng};
 `

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

@@ -4,8 +4,8 @@ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { FavoriteParams } from '../../types';
 import { SingleOrderCard } from '../SingleOrderCard';
 import {
-	FavoriteList as FavoriteListController,
-	useOrder,
+  FavoriteList as FavoriteListController,
+  useOrder,
   useLanguage
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -16,10 +16,10 @@ import { BusinessController } from '../BusinessController';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import moment from 'moment';
-
+import { getOrderStatus } from '../../utils'
 
 const FavoriteListUI = (props: FavoriteParams) => {
-	const {
+  const {
     favoriteList,
     handleUpdateFavoriteList,
     pagination,
@@ -31,82 +31,53 @@ const FavoriteListUI = (props: FavoriteParams) => {
     isBusiness,
     isOrder,
     isProduct
-	} = props
+  } = props
 
-	const theme = useTheme();
+  const theme = useTheme();
   const [, t] = useLanguage()
   const [orderState] = useOrder();
   const [{ carts }] = useOrder()
 
   const pastOrders = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
 
-  const getOrderStatus = (s: any) => {
-    const status = parseInt(s)
-    const orderStatus = [
-      { key: 0, value: t('PENDING', theme?.defaultLanguages?.PENDING || 'Pending') },
-      { key: 1, value: t('COMPLETED', theme?.defaultLanguages?.COMPLETED || 'Completed') },
-      { key: 2, value: t('REJECTED', theme?.defaultLanguages?.REJECTED || 'Rejected') },
-      { key: 3, value: t('DRIVER_IN_BUSINESS', theme?.defaultLanguages?.DRIVER_IN_BUSINESS || 'Driver in business') },
-      { key: 4, value: t('PREPARATION_COMPLETED', theme?.defaultLanguages?.PREPARATION_COMPLETED || 'Preparation Completed') },
-      { key: 5, value: t('REJECTED_BY_BUSINESS', theme?.defaultLanguages?.REJECTED_BY_BUSINESS || 'Rejected by business') },
-      { key: 6, value: t('REJECTED_BY_DRIVER', theme?.defaultLanguages?.REJECTED_BY_DRIVER || 'Rejected by Driver') },
-      { key: 7, value: t('ACCEPTED_BY_BUSINESS', theme?.defaultLanguages?.ACCEPTED_BY_BUSINESS || 'Accepted by business') },
-      { key: 8, value: t('ACCEPTED_BY_DRIVER', theme?.defaultLanguages?.ACCEPTED_BY_DRIVER || 'Accepted by driver') },
-      { key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_COMPLETED_BY_DRIVER || 'Pick up completed by driver') },
-      { key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', theme?.defaultLanguages?.PICK_UP_FAILED_BY_DRIVER || 'Pick up Failed by driver') },
-      { key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_COMPLETED_BY_DRIVER || 'Delivery completed by driver') },
-      { key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', theme?.defaultLanguages?.DELIVERY_FAILED_BY_DRIVER || 'Delivery Failed by driver') },
-      { key: 13, value: t('PREORDER', theme?.defaultLanguages?.PREORDER || 'PreOrder') },
-      { key: 14, value: t('ORDER_NOT_READY', theme?.defaultLanguages?.ORDER_NOT_READY || 'Order not ready') },
-      { key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER || 'Order picked up completed by customer') },
-      { key: 16, value: t('ORDER_STATUS_CANCELLED_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_STATUS_CANCELLED_BY_CUSTOMER || 'Order cancelled by customer') },
-      { key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', theme?.defaultLanguages?.ORDER_NOT_PICKEDUP_BY_CUSTOMER || 'Order not picked up by customer') },
-      { key: 18, value: t('ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS || 'Driver almost arrived to business') },
-      { key: 19, value: t('ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER', theme?.defaultLanguages?.ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER || 'Driver almost arrived to customer') },
-      { key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS || 'Customer almost arrived to business') },
-      { key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', theme?.defaultLanguages?.ORDER_CUSTOMER_ARRIVED_BUSINESS || 'Customer arrived to business') },
-      { key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', theme?.defaultLanguages?.ORDER_LOOKING_FOR_DRIVER || 'Looking for driver') },
-      { key: 23, value: t('ORDER_DRIVER_ON_WAY', theme?.defaultLanguages?.ORDER_DRIVER_ON_WAY || 'Driver on way') }
-    ]
-
-    const objectStatus = orderStatus.find((o) => o.key === status)
-
-    return objectStatus && objectStatus
-  }
-
   const onProductClick = (product: any) => {
     const categoryId = product?.category?.id
     const businessId = product?.category?.business?.id
     if (!categoryId || !businessId) return
     onNavigationRedirect && onNavigationRedirect('ProductDetails', {
-			productId: product?.id,
-			categoryId: categoryId,
-			businessId: businessId
-		})
+      isRedirect: 'business',
+      productId: product?.id,
+      businessId: businessId,
+      categoryId: categoryId,
+      business: {
+        store: product?.category?.business.slug,
+        header: product?.category?.header,
+      }
+    })
   }
 
   useEffect(() => {
-		const _businessId = 'businessId:' + reorderState?.result?.business_id
-		if (reorderState?.error) {
-		  if (reorderState?.result?.business_id) {
-			_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
-			onNavigationRedirect && onNavigationRedirect('Business', { store: reorderState?.result?.business?.slug })
-		  }
-		}
-		if (!reorderState?.error && reorderState.loading === false && reorderState?.result?.business_id) {
-		  const cartProducts = carts?.[_businessId]?.products
-		  const available = cartProducts.every((product: any) => product.valid === true)
-		  const orderProducts = favoriteList?.favorites.find((order: any) => order?.id === reorderState?.result?.orderId)?.products
+    const _businessId = 'businessId:' + reorderState?.result?.business_id
+    if (reorderState?.error) {
+      if (reorderState?.result?.business_id) {
+        _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+        onNavigationRedirect && onNavigationRedirect('Business', { store: reorderState?.result?.business?.slug })
+      }
+    }
+    if (!reorderState?.error && reorderState.loading === false && reorderState?.result?.business_id) {
+      const cartProducts = carts?.[_businessId]?.products
+      const available = cartProducts.every((product: any) => product.valid === true)
+      const orderProducts = favoriteList?.favorites.find((order: any) => order?.id === reorderState?.result?.orderId)?.products
 
-		  if (available && reorderState?.result?.uuid && (cartProducts?.length === orderProducts?.length)) {
-			onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
-		  } else {
-			_setStoreData('adjust-cart-products', JSON.stringify(_businessId))
-			cartProducts?.length !== orderProducts?.length && _setStoreData('already-removed', JSON.stringify('removed'))
-			onNavigationRedirect && onNavigationRedirect('Business', { store: reorderState?.result?.business?.slug })
-		  }
-		}
-	  }, [reorderState])
+      if (available && reorderState?.result?.uuid && (cartProducts?.length === orderProducts?.length)) {
+        onNavigationRedirect && onNavigationRedirect('CheckoutNavigator', { cartUuid: reorderState?.result.uuid })
+      } else {
+        _setStoreData('adjust-cart-products', JSON.stringify(_businessId))
+        cartProducts?.length !== orderProducts?.length && _setStoreData('already-removed', JSON.stringify('removed'))
+        onNavigationRedirect && onNavigationRedirect('Business', { store: reorderState?.result?.business?.slug })
+      }
+    }
+  }, [reorderState])
 
   const handleBusinessClick = (business: any) => {
     onNavigationRedirect && onNavigationRedirect('Business', {
@@ -195,12 +166,12 @@ const FavoriteListUI = (props: FavoriteParams) => {
     )
   }
 
-	return (
-		<Container>
+  return (
+    <Container>
       {isBusiness && (
         <>
           {favoriteList?.favorites?.length > 0 && (
-            favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((business: any, i:number) => (
+            favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((business: any, i: number) => (
               <BusinessController
                 key={`${business.id}_` + i}
                 business={business}
@@ -237,7 +208,7 @@ const FavoriteListUI = (props: FavoriteParams) => {
       {isOrder && (
         <>
           {favoriteList?.favorites?.length > 0 && (
-            favoriteList.favorites?.sort((a: any, b:any) => moment(a?.delivery_datetime_utc).valueOf() - moment(b?.delivery_datetime_utc).valueOf())
+            favoriteList.favorites?.sort((a: any, b: any) => moment(a?.delivery_datetime_utc).valueOf() - moment(b?.delivery_datetime_utc).valueOf())
               .map((order: any, i: number) => (
                 <SingleOrderCard
                   key={`${order?.id}_${i}`}
@@ -250,7 +221,7 @@ const FavoriteListUI = (props: FavoriteParams) => {
                   handleReorder={handleReorder}
                   reorderLoading={reorderState?.loading}
                 />
-            ))
+              ))
           )}
           {favoriteList?.loading && (
             [...Array(5).keys()].map(i => (
@@ -294,18 +265,18 @@ const FavoriteListUI = (props: FavoriteParams) => {
       )}
 
       {!favoriteList?.loading && pagination.totalPages && pagination.currentPage < pagination.totalPages && (
-				<WrappButton>
-					<OButton
-						onClick={() => getFavoriteList(pagination?.currentPage + 1)}
-						text={t('LOAD_MORE_ITEMS', 'Load more items')}
-						imgRightSrc={null}
-						textStyle={{ color: theme.colors.white }}
-						style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
-					/>
-				</WrappButton>
-			)}
+        <WrappButton>
+          <OButton
+            onClick={() => getFavoriteList(pagination?.currentPage + 1)}
+            text={t('LOAD_MORE_ITEMS', 'Load more items')}
+            imgRightSrc={null}
+            textStyle={{ color: theme.colors.white }}
+            style={{ borderRadius: 7.6, shadowOpacity: 0, marginTop: 20 }}
+          />
+        </WrappButton>
+      )}
     </Container>
-	)
+  )
 }
 
 export const FavoriteList = (props: any) => {

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

@@ -62,7 +62,7 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 	return (
 		<Container
 			style={{
-				paddingBottom: Platform.OS === 'ios' ? iosBottom ?? 0 : bottom + 16
+				paddingBottom: Platform.OS === 'ios' ? 20 : bottom + 16
 			}}>
 
 			<View style={styles.infoCont}>
@@ -86,7 +86,6 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 					{btnText}
 				</OText>
 			</Button>
-
 		</Container>
 	);
 };

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

@@ -12,7 +12,7 @@ export const Container = styled.View`
   width: 100%;
   justify-content: space-between;
   background-color: #FFF;
-  z-index: 1000;
+  z-index: 20001;
   justify-content: space-between;
 `
 

package/themes/original/src/components/GPSButton/styles.ts

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components/native'
 
 export const GpsButtonStyle = styled.TouchableOpacity`
-  width: 30px;
-	height: 30px;
-`
+  width: 16px;
+	height: 16px;
+`