ordering-ui-react-native 0.15.56 → 0.15.59

package/package.json

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

package/src/components/BusinessTypeFilter/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { StyleSheet, View, ScrollView, TouchableOpacity, Dimensions, Platform, PlatformIOSStatic } from 'react-native'
+import { StyleSheet, View, ScrollView, Dimensions, Platform, PlatformIOSStatic, Pressable } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessTypeFilter as BusinessTypeFilterController, useLanguage } from 'ordering-components/native'
 
@@ -9,6 +9,7 @@ import { BusinessTypeFilterParams } from '../../types'
 import { useTheme } from 'styled-components/native'
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import DeviceInfo from 'react-native-device-info';
+import { TouchableOpacity } from 'react-native-gesture-handler'
 
 const windowWidth = Dimensions.get('window').width;
 
@@ -71,11 +72,13 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
           <OIcon
             url={item.image}
             style={styles.logo}
+            cover
           />
         ) : (
           <OIcon
             src={theme.images.categories.all}
             style={styles.logo}
+            cover
           />
         )}
         <OText

package/src/pages/BusinessesListing.tsx

@@ -21,7 +21,7 @@ const BusinessesListing = (props: any) => {
     ...props,
     isSearchByName: true,
     isSearchByDescription: true,
-    propsToFetch: ['id', 'name', 'header', 'logo', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],
+    propsToFetch: ['id', 'name', 'header', 'logo', 'ribbon', 'location', 'schedule', 'open', 'delivery_price', 'distance', 'delivery_time', 'pickup_time', 'reviews', 'featured', 'offers', 'food', 'laundry', 'alcohol', 'groceries', 'slug'],
     onBusinessClick: (business: any) => {
       props.navigation.navigate('Business', { store: store || business.slug, header: business.header, logo: business.logo })
     }

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

@@ -1,50 +1,55 @@
-import React, { useState, useEffect, useCallback } from 'react'
-import { useEvent, useLanguage, useUtils, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
+import React, { useState, useEffect } from 'react'
+import moment from 'moment'
 import { View, Modal, StyleSheet, TouchableOpacity, Dimensions } from 'react-native'
-import { OText, OIcon } from '../shared'
-import { useTheme } from 'styled-components/native'
+import Sound from 'react-native-sound'
 import Icon from 'react-native-vector-icons/Feather'
+import { useTheme } from 'styled-components/native'
+import { useEvent, useLanguage, useSession, useApi, NewOrderNotification as NewOrderNotificationController } from 'ordering-components/native'
+
+import { OText, OIcon } from '../shared'
 import { NotificationContainer } from './styles'
-import Sound from 'react-native-sound'
-import moment from 'moment'
 import { useLocation } from '../../hooks/useLocation'
-import { useFocusEffect } from '@react-navigation/core'
+
 Sound.setCategory('Playback')
 
 const windowWidth = Dimensions.get('screen').width
 
-const NewOrderNotificationUI = (props: any) => {
+const NewOrderNotificationUI = () => {
   const [events] = useEvent()
   const theme = useTheme()
   const [, t] = useLanguage()
   const [{ user, token }] = useSession()
   const [ordering] = useApi()
-  const [{ getTimeAgo }] = useUtils()
   const { getCurrentLocation } = useLocation();
-  const [modalOpen, setModalOpen] = useState(false)
-  const [newOrderId, setNewOrderId] = useState(null)
-  const [messageOrderId, setMessageOrderId] = useState(null)
   const [soundTimeout, setSoundTimeout] = useState<any>(null)
-  const [isFocused, setIsFocused] = useState(false)
-  const [currentChange, setCurrentChange] = useState(1)
+  const [currentEvent, setCurrentEvent] = useState<any>(null)
+
+  const evtList: any = {
+    1: {
+      event: 'messages',
+      message: t('NEW_MESSAGES_RECEIVED', 'New messages have been received!'),
+      message2: t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', currentEvent?.orderId),
+    },
+    2: {
+      event: 'order_added',
+      message: t('NEW_ORDERS_RECEIVED', 'New orders have been received!'),
+      message2: t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', currentEvent?.orderId),
+    },
+    3: {
+      event: 'order_updated',
+      message: t('NEW_ORDERS_UPDATED', 'New orders have been updated!'),
+      message2: t('ORDER_N_UPDATED', 'Order #_order_id_ has been updated.').replace('_order_id_', currentEvent?.orderId),
+    },
+  }
 
-  const notificationSound = new Sound(theme.sounds.notification, error => {
-    if (error) {
-      console.log('failed to load the sound', error);
-      return
-    }
-    console.log('loaded successfully');
-  });
+  const notificationSound = new Sound(theme.sounds.notification, (e) => { console.log(e) });
 
   const handlePlayNotificationSound = () => {
     let times = 0
     const _timeout = setInterval(function () {
       notificationSound.play(success => {
         if (success) {
-          console.log('successfully finished playing');
           times = times + 1
-        } else {
-          console.log('playback failed due to audio decoding errors');
         }
       })
       setSoundTimeout(_timeout)
@@ -57,39 +62,11 @@ const NewOrderNotificationUI = (props: any) => {
 
   const handleCloseModal = () => {
     clearInterval(soundTimeout)
-    setModalOpen(false)
-    setNewOrderId(null)
-    setMessageOrderId(null)
-  }
-
-  const handleNotification = (order: any) => {
-    setModalOpen(true)
-    clearInterval(soundTimeout)
-    setCurrentChange(1)
-    handlePlayNotificationSound()
-    setNewOrderId(order.id)
-  }
-
-  const handleMessageNotification = (message: any) => {
-    const { order_id: orderId } = message;
-    if (!modalOpen) setModalOpen(true)
-    clearInterval(soundTimeout)
-    setCurrentChange(2)
-    handlePlayNotificationSound()
-    setMessageOrderId(orderId)
+    setCurrentEvent({ evt: null })
   }
 
-  useEffect(() => {
-    events.on('order_added_noification', handleNotification)
-    events.on('message_added_noification', handleMessageNotification)
-    return () => {
-      events.off('order_added_noification', handleNotification)
-      events.off('message_added_noification', handleMessageNotification)
-    }
-  }, [])
-
-  const handleUpdateOrder = useCallback(async (order: any) => {
-    if (order?.driver) {
+  const handleEventNotification = async (evtType: number, value: any) => {
+    if (value?.driver) {
       const location = await getCurrentLocation()
       await fetch(`${ordering.root}/users/${user.id}/locations`, {
         method: 'POST',
@@ -98,25 +75,32 @@ const NewOrderNotificationUI = (props: any) => {
         }),
         headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }
       })
-      const assignedTimeDiff = moment.utc(order?.driver?.last_order_assigned_at).local().fromNow()
+      const assignedTimeDiff = moment.utc(value?.driver?.last_order_assigned_at).local().fromNow()
       if (assignedTimeDiff === 'a few seconds ago') {
-        clearInterval(soundTimeout)
         handlePlayNotificationSound()
-        setNewOrderId(order.id)
-        if(isFocused){
-          setModalOpen(true)
-        }
+        clearInterval(soundTimeout)
+        setCurrentEvent({ evt: 2, orderId: value?.id })
       }
+      return
     }
-  }, [newOrderId, notificationSound, soundTimeout])
+    handlePlayNotificationSound()
+    clearInterval(soundTimeout)
+    setCurrentEvent({
+      evt: evtType,
+      orderId: evtList[evtType].event === 'messages' ? value?.order_id : value?.id
+    })
+  }
 
   useEffect(() => {
-    if (user?.level !== 4) return
-    events.on('order_updated_noification', handleUpdateOrder)
+    events.on('message_added_notification', (o: any) => handleEventNotification(1, o))
+    events.on('order_added_notification', (o: any) => handleEventNotification(2, o))
+    events.on('order_updated_notification', (o: any) => handleEventNotification(3, o))
     return () => {
-      events.off('order_updated_noification', handleUpdateOrder)
+      events.off('message_added_notification', (o: any) => handleEventNotification(1, o))
+      events.off('order_added_notification', (o: any) => handleEventNotification(2, o))
+      events.off('order_updated_notification', (o: any) => handleEventNotification(3, o))
     }
-  }, [handleUpdateOrder, user])
+  }, [])
 
   useEffect(() => {
     notificationSound.setVolume(1);
@@ -125,21 +109,12 @@ const NewOrderNotificationUI = (props: any) => {
     }
   }, [])
 
-  useFocusEffect(
-    useCallback(() => {
-      setIsFocused(true)
-      return () => {
-        setIsFocused(false)
-      }
-    }, [])
-  )
-
   return (
     <>
       <Modal
         animationType='slide'
         transparent={true}
-        visible={modalOpen}
+        visible={!!currentEvent?.orderId}
       >
         <NotificationContainer>
           <View style={styles.modalView}>
@@ -147,40 +122,26 @@ const NewOrderNotificationUI = (props: any) => {
               style={styles.wrapperIcon}
               onPress={() => handleCloseModal()}
             >
-              <Icon
-                name="x"
-                size={30}
-              />
+              <Icon name="x" size={30} />
             </TouchableOpacity>
             <OText
               size={18}
               color={theme.colors.textGray}
               weight={600}
             >
-              {currentChange === 1 ? t('NEW_ORDRES_RECEIVED', 'New orders have been received!') : t('NEW_MESSAGES_RECEIVED', 'New messages have been received!')}
+              {evtList[currentEvent?.evt]?.message}
             </OText>
             <OIcon
               src={theme.images.general.newOrder}
               width={250}
               height={200}
             />
-            {newOrderId !== null && (
-              <OText
-                color={theme.colors.textGray}
-                mBottom={15}
-              >
-                {t('ORDER_N_ORDERED', 'Order #_order_id_ has been ordered.').replace('_order_id_', newOrderId)}
-              </OText>
-            )}
-
-            {messageOrderId  !== null && (
-              <OText
-                color={theme.colors.textGray}
-                mBottom={15}
-              >
-                {t('ORDER_N_UNREAD_MESSAGES', 'Order #_order_id_ has unread messages.').replace('_order_id_', messageOrderId)}
-              </OText>
-            )}
+            <OText
+              color={theme.colors.textGray}
+              mBottom={15}
+            >
+              {evtList[currentEvent?.evt]?.message2}
+            </OText>
           </View>
         </NotificationContainer>
       </Modal>

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

@@ -95,6 +95,33 @@ export const OrderContentComponent = (props: OrderContent) => {
       {isOrderGroup && (
         <OText size={18}>{t('ORDER', 'Order')} #{isOrderGroup ? order?.order_group_id : order?.id}</OText>
       )}
+
+      {order?.metafields?.length > 0 && (
+        <OrderBusiness>
+          <OText style={{ marginBottom: 5 }} size={16} weight="600">
+            {t('CUSTOM_FIELDS', 'Custom fields')}
+          </OText>
+
+          {order.metafields.map((field: any) => (
+            <View
+              key={field.id}
+              style={{
+                width: '100%',
+                flexDirection: 'row',
+                marginBottom: 5
+              }}
+            >
+              <OText style={{ width: '50%' }}>
+                {field.key}
+              </OText>
+              <OText style={{ width: '45%', textAlign: 'right' }}>
+                {field.value}
+              </OText>
+            </View>
+          ))}
+        </OrderBusiness>
+      )}
+
       <OrderBusiness>
         <OText style={{ marginBottom: 5 }} size={16} weight="600">
           {t('BUSINESS_DETAILS', 'Business details')}

package/themes/original/index.tsx

@@ -50,6 +50,74 @@ import { BusinessTypeFilter } from './src/components/BusinessTypeFilter';
 import { BusinessController } from './src/components/BusinessController';
 import { BusinessFeaturedController } from './src/components/BusinessFeaturedController';
 import { HighestRatedBusinesses } from './src/components/HighestRatedBusinesses';
+import { PaymentOptions } from './src/components/PaymentOptions';
+import { DriverTips } from './src/components/DriverTips';
+import { UserDetails } from './src/components/UserDetails';
+import { OrderSummary } from './src/components/OrderSummary';
+import { CartStoresListing } from './src/components/CartStoresListing';
+import { PaymentOptionsWebView } from '../../src/components/PaymentOptionsWebView';
+import { GoogleMap } from './src/components/GoogleMap';
+import { SingleProductCard } from './src/components/SingleProductCard';
+import { UpsellingRedirect } from './src/components/BusinessProductsListing/UpsellingRedirect';
+import { ProductItemAccordion } from './src/components/ProductItemAccordion';
+import { BusinessItemAccordion } from './src/components/BusinessItemAccordion';
+import { CouponControl } from './src/components/CouponControl';
+import { TaxInformation } from './src/components/TaxInformation';
+import { PlaceSpot } from './src/components/PlaceSpot';
+import { Cart } from './src/components/Cart';
+import { LanguageSelector } from './src/components/LanguageSelector';
+import { PhoneInputNumber } from './src/components/PhoneInputNumber'
+import { FacebookLogin } from './src/components/FacebookLogin';
+import { VerifyPhone } from './src/components/VerifyPhone';
+import { GoogleLogin } from './src/components/GoogleLogin';
+import { PreviousOrders } from './src/components/PreviousOrders';
+import { PaymentOptionCash } from './src/components/PaymentOptionCash';
+import { StripeElementsForm } from './src/components/StripeElementsForm';
+import { StripeCardsList } from './src/components/StripeCardsList';
+import { ProductIngredient } from './src/components/ProductIngredient';
+import { ProductOption } from './src/components/ProductOption';
+import { ProductOptionSubOption } from './src/components/ProductOptionSubOption';
+import { SingleProductReview } from './src/components/SingleProductReview';
+import { LogoutButton } from './src/components/LogoutButton';
+import { UserFormDetailsUI } from './src/components/UserFormDetails';
+import { WalletTransactionItem } from './src/components/WalletTransactionItem';
+
+import { USER_TYPE, ORDER_TYPES } from './src/config/constants'
+
+import { OSBill, OSTable, OSCoupon, OSTotal, OSRow } from './src/components/OrderSummary/styles';
+
+import { FormInput, FormSide, ButtonsWrapper, LoginWith, OTab, OTabs } from './src/components/LoginForm/styles';
+import { OSItem, OSItemContent, OSItemActions} from './src/components/PaymentOptionStripe/styles';
+
+import Alert from './src/providers/AlertProvider'
+
+import { 
+	LoginParams,
+	ProfileParams,
+	AddressListParams,
+	AddressFormParams,
+	SignupParams,
+	PhoneInputParams,
+	LanguageSelectorParams,
+	BusinessesListingParams,
+	HighestRatedBusinessesParams,
+	BusinessTypeFilterParams,
+	BusinessControllerParams,
+	BusinessProductsListingParams,
+	BusinessBasicInformationParams,
+	BusinessProductsCategoriesParams,
+	BusinessProductsListParams,
+	SingleProductCardParams,
+	BusinessInformationParams,
+	BusinessReviewsParams,
+	SearchBarParams,
+	NotFoundSourceParams,
+	OrdersOptionParams,
+	ActiveOrdersParams,
+	PreviousOrdersParams,
+	OrderDetailsParams,
+	ReviewDriverParams
+} from './src/types';
 
 import { Toast } from './src/components/shared/OToast';
 import {
@@ -71,6 +139,8 @@ import {
 
 import { Container } from './src/layouts/Container';
 import { SafeAreaContainer } from './src/layouts/SafeAreaContainer';
+import { FloatingBottomContainer } from './src/layouts/FloatingBottomContainer';
+
 import {
 	_retrieveStoreData,
 	_setStoreData,
@@ -130,6 +200,86 @@ export {
 	BusinessController,
 	BusinessFeaturedController,
 	HighestRatedBusinesses,
+	PaymentOptions,
+	DriverTips,
+	UserDetails,
+	OrderSummary,
+	CartStoresListing,
+	PaymentOptionsWebView,
+	GoogleMap,
+	SingleProductCard,
+	UpsellingRedirect,
+	ProductItemAccordion,
+	BusinessItemAccordion,
+	CouponControl,
+	TaxInformation,
+	PlaceSpot,
+	Cart,
+	LanguageSelector,
+	PhoneInputNumber,
+	FacebookLogin,
+	VerifyPhone,
+	GoogleLogin,
+	PreviousOrders,
+	PaymentOptionCash,
+	StripeElementsForm,
+	StripeCardsList,
+	ProductIngredient,
+	ProductOption,
+	ProductOptionSubOption,
+	SingleProductReview,
+	LogoutButton,
+	UserFormDetailsUI,
+	WalletTransactionItem,
+
+	ORDER_TYPES,
+	USER_TYPE,
+
+	OSBill,
+	OSTable,
+	OSCoupon,
+	OSTotal,
+	OSRow,
+
+	FormInput,
+	FormSide,
+	ButtonsWrapper,
+	LoginWith,
+	OTab,
+	OTabs,
+
+	OSItem,
+	OSItemContent,
+	OSItemActions,
+
+	Alert,
+
+	//Types
+	LoginParams,
+	ProfileParams,
+	AddressListParams,
+	AddressFormParams,
+	SignupParams,
+	PhoneInputParams,
+	LanguageSelectorParams,
+	BusinessesListingParams,
+	HighestRatedBusinessesParams,
+	BusinessTypeFilterParams,
+	BusinessControllerParams,
+	BusinessProductsListingParams,
+	BusinessBasicInformationParams,
+	BusinessProductsCategoriesParams,
+	BusinessProductsListParams,
+	SingleProductCardParams,
+	BusinessInformationParams,
+	BusinessReviewsParams,
+	SearchBarParams,
+	NotFoundSourceParams,
+	OrdersOptionParams,
+	ActiveOrdersParams,
+	PreviousOrdersParams,
+	OrderDetailsParams,
+	ReviewDriverParams,
 
 	// OComponents
 	Toast,
@@ -151,6 +301,7 @@ export {
 	// layout
 	Container,
 	SafeAreaContainer,
+	FloatingBottomContainer,
 	NavBar,
 
 	// utils

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

@@ -140,7 +140,7 @@ const AddressListUI = (props: AddressListParams) => {
 				<AddressListContainer>
 					{isProfile && (
 						<NavBar
-							title={t('MY_SAVED_PLACES', 'My saved places')}
+							title={t('SAVED_PLACES', 'My saved places')}
 							titleAlign={'center'}
 							onActionLeft={() => goToBack()}
 							showCall={false}

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

@@ -9,7 +9,7 @@ import {
 import { OIcon, OText } from '../shared';
 import { StyleSheet, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -20,6 +20,7 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
+	RibbonBox
 } from './styles';
 import { useTheme } from 'styled-components/native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
@@ -121,6 +122,24 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 
 	return (
 		<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
+			{business?.ribbon?.enabled && (
+				<RibbonBox
+					bgColor={business?.ribbon?.color}
+					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+				>
+					<OText
+						size={10}
+						weight={'400'}
+						color={theme.colors.white}
+						numberOfLines={2}
+						ellipsizeMode='tail'
+						lineHeight={13}
+					>
+						{business?.ribbon?.text}
+					</OText>
+				</RibbonBox>
+			)}
 			<BusinessHero>
 				<FastImage
 					style={{ height: 120 }}

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

@@ -53,3 +53,25 @@ export const Reviews = styled.View`
   flex-direction: row;
   align-items: center;
 `
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  right: -4px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 180px;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`

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

@@ -9,7 +9,7 @@ import { useTheme } from 'styled-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { BusinessControllerParams } from '../../types';
-import { convertHoursToMinutes } from '../../utils';
+import { convertHoursToMinutes, shape } from '../../utils';
 import {
 	Card,
 	BusinessHero,
@@ -20,6 +20,7 @@ import {
 	BusinessState,
 	BusinessLogo,
 	Reviews,
+	RibbonBox
 } from './styles';
 
 export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
@@ -97,6 +98,24 @@ export const BusinessFeaturedCtrlUI = (props: BusinessControllerParams) => {
 
 	return (
 		<Card activeOpacity={1} onPress={() => handleClick(business)}>
+			{business?.ribbon?.enabled && (
+				<RibbonBox
+					bgColor={business?.ribbon?.color}
+					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+				>
+					<OText
+						size={10}
+						weight={'400'}
+						color={theme.colors.white}
+						numberOfLines={2}
+						ellipsizeMode='tail'
+						lineHeight={13}
+					>
+						{business?.ribbon?.text}
+					</OText>
+				</RibbonBox>
+			)}
 			<BusinessHero>
 				<BusinessLogo>
 					<OIcon

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

@@ -4,6 +4,7 @@ export const Card = styled.TouchableOpacity`
   margin-vertical: 4px;
   height: 60px;
   overflow: hidden;
+  position: relative;
 `;
 
 export const BusinessHero = styled.View`
@@ -48,3 +49,25 @@ export const BusinessLogo = styled.View`
 export const Reviews = styled.View`
   flex-direction: row;
 `
+
+export const RibbonBox = styled.View`
+  position: absolute;
+  z-index: 1;
+  top: 0px;
+  right: 5px;
+  background-color: ${(props: any) => props.theme.colors.primary};
+  padding: 1px 8px;
+  max-width: 160px;
+
+  ${(props: any) => props.bgColor && css`
+    background-color: ${props.bgColor};
+  `}
+
+  ${(props: any) => props.isRoundRect && css`
+    border-radius: 7.6px;
+  `}
+
+  ${(props: any) => props.isCapsule && css`
+    border-radius: 50px;
+  `}
+`

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

@@ -4,7 +4,7 @@ import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
 import { OButton, OIcon, OModal, OText } from '../shared';
-import { ProductsContainer, ErrorMessage, WrapperNotFound, RibbonBox } from './styles';
+import { ProductsContainer, ErrorMessage, WrapperNotFound, RibbonBox, SubCategoriesContainer, ContainerButton, HeaderWrapper } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View, ScrollView } from 'react-native';
 import { StyleSheet } from 'react-native';
@@ -28,7 +28,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     handleCancelSearch,
     categoriesLayout,
     setCategoriesLayout,
-    currentCart
+    currentCart,
+    setSubcategoriesSelected,
+    subcategoriesSelected,
+    onClickCategory,
+    lazyLoadProductsRecommended
   } = props;
 
   const [, t] = useLanguage();
@@ -44,20 +48,85 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     setCategoriesLayout(_categoriesLayout)
   }
 
+  const onClickSubcategory = (subCategory : any, parentCategory : any) => {
+    if (parentCategory && lazyLoadProductsRecommended) {
+      onClickCategory(parentCategory)
+    }
+    if (!subCategory) {
+      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory : any) => _subcategory?.parent_category_id !== parentCategory?.id))
+      return
+    }
+    const categoryFounded = subcategoriesSelected.find((_subcategory : any) => subCategory?.id === _subcategory?.id)
+    if (categoryFounded) {
+      setSubcategoriesSelected?.(subcategoriesSelected.filter((_subcategory : any) => subCategory?.id !== _subcategory?.id))
+    } else {
+      setSubcategoriesSelected?.([...subcategoriesSelected, subCategory])
+    }
+  }
+
+  const SubcategoriesComponent = ({ category } : any) => {
+    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory : any) => category?.id === subcategory?.parent_category_id)
+
+    return (
+      <SubCategoriesContainer>
+        <ContainerButton
+          isSelected={allsubcategorySelected}
+        >
+          <OButton
+            onClick={() => onClickSubcategory(null, category)}
+            bgColor={allsubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
+            text={`${t('ALL', 'All')} ${allsubcategorySelected ? 'X' : ''}`}
+            style={bpStyles.categoryButtonStyle}
+            textStyle={{ color: allsubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
+          />
+        </ContainerButton>
+        {category?.subcategories?.map((subcategory : any) => {
+          const isSubcategorySelected = subcategoriesSelected?.find((_subcategory : any) => _subcategory?.id === subcategory?.id)
+          return (
+            <ContainerButton
+              key={subcategory?.id}
+              isSelected={isSubcategorySelected}
+            >
+              <OButton
+                onClick={() => onClickSubcategory(subcategory, category)}
+                bgColor={isSubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
+                text={`${subcategory?.name} ${isSubcategorySelected ? 'X' : ''}`}
+                style={bpStyles.categoryButtonStyle}
+                textStyle={{ color: isSubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
+              />
+            </ContainerButton>
+          )
+        }
+        )}
+      </SubCategoriesContainer>
+    )
+  }
+
+
   return (
     <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
+      <HeaderWrapper>
+        {category?.subcategories?.length > 0 && (
+          <SubcategoriesComponent category={category} />
+        )}
+      </HeaderWrapper>
       {category.id &&
-        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
-          <SingleProductCard
-            key={'prod_' + product.id}
-            isSoldOut={product.inventoried && !product.quantity}
-            product={product}
-            businessId={businessId}
-            onProductClick={() => onProductClick(product)}
-            productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
-          />
-        ))}
-
+        categoryState.products
+          ?.filter((product : any) =>
+            !subcategoriesSelected.find((subcategory : any) => subcategory?.parent_category_id === category?.id) ||
+            subcategoriesSelected?.some((subcategory : any) => subcategory.id === product?.category_id)
+              ?.sort((a: any, b: any) => a.rank - b.rank)
+              ?.map((product: any) => (
+                <SingleProductCard
+                  key={'prod_' + product.id}
+                  isSoldOut={product.inventoried && !product.quantity}
+                  product={product}
+                  businessId={businessId}
+                  onProductClick={() => onProductClick(product)}
+                  productAddedToCartLength={currentCart?.products?.reduce((productsLength: number, Cproduct: any) => { return productsLength + (Cproduct?.id === product?.id ? Cproduct?.quantity : 0) }, 0)}
+                />
+              ))
+          )}
       {!category.id &&
         featured &&
         categoryState?.products?.find((product: any) => product.featured) && (
@@ -72,7 +141,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 (product: any, i: any) =>
                   product.featured && (
                     <SingleProductCard
-                      key={i}
+                      key={'feat_' + product.id}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
                       businessId={businessId}
@@ -86,9 +155,14 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         )}
 
       {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
-        const products = !isUseParentCategory
-          ? categoryState?.products?.filter((product: any) => product?.category_id === category?.id) ?? []
-          : categoryState?.products?.filter((product: any) => category?.children?.some((cat: any) => cat.category_id === product?.category_id)) ?? []
+        const _products = !isUseParentCategory
+          ? categoryState?.products?.filter((product : any) => product?.category_id === category?.id) ?? []
+          : categoryState?.products?.filter((product : any) => category?.children?.some((cat : any) => cat.category_id === product?.category_id)) ?? []
+        const products = subcategoriesSelected?.length > 0
+          ? _products?.filter((product : any) =>
+            !subcategoriesSelected.find((subcategory : any) => subcategory?.parent_category_id === category?.id) ||
+            subcategoriesSelected?.some((subcategory : any) => subcategory.id === product?.category_id))
+          : _products
 
         const shortCategoryDescription = category?.description?.length > 80 ? `${category?.description?.substring(0, 80)}...` : category?.description
 
@@ -132,7 +206,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 </View>
                 {!!category?.description && (
                   <View style={{ position: 'relative' }}>
-                    <OText size={12} weight={'500'} mBottom={5}>
+                    <OText size={12} weight={'500'} mBottom={10} color='#909BA9'>
                       {shortCategoryDescription}
                       {category?.description?.length > 80 && (
                         <OButton
@@ -150,6 +224,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                         />
                       )}
                     </OText>
+                    {category?.subcategories?.length > 0 && (
+                      <SubcategoriesComponent category={category} />
+                    )}
                   </View>
                 )}
                 <>
@@ -265,6 +342,15 @@ const bpStyles = StyleSheet.create({
     shadowRadius: 1,
     marginEnd: 13,
   },
+  categoryButtonStyle: {
+    borderWidth: 0,
+    marginLeft: 5,
+    marginRight: 5,
+    marginBottom: 10,
+    height: 35,
+    paddingLeft: 3,
+    paddingRight: 3,
+  }
 });
 
 export const BusinessProductsList = (props: BusinessProductsListParams) => {

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

@@ -30,4 +30,15 @@ export const RibbonBox = styled.View`
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}
-`
+`
+
+export const SubCategoriesContainer = styled.View`
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+`
+
+export const ContainerButton = styled.View`
+`
+
+export const HeaderWrapper = styled.View``

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

@@ -92,6 +92,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [categoriesLayout, setCategoriesLayout] = useState<any>({})
 	const [productListLayout, setProductListLayout] = useState<any>(null)
 	const [isCategoryClicked, setCategoryClicked] = useState(false)
+	const [subcategoriesSelected, setSubcategoriesSelected] = useState([])
 
 	const currentCart: any = Object.values(orderState.carts).find((cart: any) => cart?.business?.slug === business?.slug) ?? {}
 
@@ -254,6 +255,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setSelectedCategoryId={setSelectedCategoryId}
 								setCategoryClicked={setCategoryClicked}
+								
 							/>
 						)}
 					</>
@@ -281,8 +283,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								errorQuantityProducts={errorQuantityProducts}
 								handleCancelSearch={handleCancel}
 								categoriesLayout={categoriesLayout}
+								subcategoriesSelected={subcategoriesSelected}
+								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setCategoriesLayout={setCategoriesLayout}
 								currentCart={currentCart}
+								setSubcategoriesSelected={setSubcategoriesSelected}
 							/>
 						</WrapContent>
 					</>

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

@@ -317,7 +317,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
-						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
+						<OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('BUSINESS_FEATURE', 'Featured business')}</OText>
 						<ScrollView
 							showsHorizontalScrollIndicator={false}
 							nestedScrollEnabled

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

@@ -36,7 +36,7 @@ export const Home = (props: any) => {
 					{t('WELCOME', 'Welcome!')}
 				</OText>
 				<OText color={theme.colors.white} size={14} style={{ marginBottom: 46 }}>
-					{t('LETS_START_ORDER', "Let's start to order now")}
+					{t('SUBTITLE_HOME', "Let's start to order now")}
 				</OText>
 				<OButton
 					text={t('LOGIN_NOW', 'Login now')}

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

@@ -22,8 +22,9 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 		textStyle,
 		flagStyle,
 		noDropIcon,
-    isDisabled,
-		isStartValidation
+		isDisabled,
+		isStartValidation,
+		changeCountry
 	} = props
 
 	const theme = useTheme();
@@ -106,11 +107,16 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
 			)}
 			<PhoneInput
 				ref={phoneInput}
-        disabled={isDisabled}
+				disabled={isDisabled}
 				defaultValue={userphoneNumber || defaultValue}
-				defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
+				defaultCode={defaultCode ?
+					!isNaN(defaultCode)
+						? transformCountryCode(defaultCode)
+						: defaultCode
+					: configs?.default_country_code?.value}
 				onChangeFormattedText={(text: string) => handleChangeNumber(text)}
 				withDarkTheme
+				onChangeCountry={(country) => changeCountry?.(country)}
 				countryPickerProps={{ withAlphaFilter: true }}
 				textContainerStyle={{ ...style.input, ...inputStyle ? inputStyle : {} }}
 				textInputStyle={textStyle}

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

@@ -119,6 +119,7 @@ const SignupFormUI = (props: SignupParams) => {
 		phone: {
 			country_phone_code: null,
 			cellphone: null,
+			country_code: null
 		},
 	});
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
@@ -133,7 +134,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const passwordRef = useRef<any>(null);
 	const recaptchaRef = useRef<any>({});
 
-  const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
+	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 
 	const handleRefs = (ref: any, code: string) => {
 		switch (code) {
@@ -216,8 +217,8 @@ const SignupFormUI = (props: SignupParams) => {
 			!phoneInputData.phone.country_phone_code &&
 			!phoneInputData.phone.cellphone &&
 			((validationFields?.fields?.checkout?.cellphone?.enabled &&
-        validationFields?.fields?.checkout?.cellphone?.required) ||
-        configs?.verification_phone_required?.value === '1')
+				validationFields?.fields?.checkout?.cellphone?.required) ||
+				configs?.verification_phone_required?.value === '1')
 		) {
 			showToast(
 				ToastType.Error,
@@ -232,7 +233,8 @@ const SignupFormUI = (props: SignupParams) => {
 			handleButtonSignupClick &&
 				handleButtonSignupClick({
 					...values,
-					...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && {...phoneInputData.phone}),
+					...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
+					country_code: phoneInputData.phone.country_code
 				});
 			if (
 				!formState.loading &&
@@ -295,7 +297,7 @@ const SignupFormUI = (props: SignupParams) => {
 
 	const handleOpenRecaptcha = () => {
 		setRecaptchaVerified(false)
-	  	if (!recaptchaConfig?.siteKey) {
+		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
 			return
 		}
@@ -304,7 +306,7 @@ const SignupFormUI = (props: SignupParams) => {
 			return
 		}
 		recaptchaRef.current.open()
-  	}
+	}
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
@@ -335,12 +337,12 @@ const SignupFormUI = (props: SignupParams) => {
 	}, [errors]);
 
 	useEffect(() => {
-    register('cellphone', {
-      required: isRequiredField('cellphone')
-        ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
-        : null
-    })
-  }, [register])
+		register('cellphone', {
+			required: isRequiredField('cellphone')
+				? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+				: null
+		})
+	}, [register])
 
 	useEffect(() => {
 		if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
@@ -367,6 +369,16 @@ const SignupFormUI = (props: SignupParams) => {
 		}
 	}, [verifyPhoneState]);
 
+	useEffect(() => {
+		setPhoneInputData({
+			...phoneInputData,
+			phone: {
+				...phoneInputData.phone,
+				country_code: configs?.default_country_code?.value
+			}
+		})
+	}, [configs])
+
 	return (
 		<View>
 			<NavBar
@@ -490,8 +502,24 @@ const SignupFormUI = (props: SignupParams) => {
 								<View style={{ marginBottom: 25 }}>
 									<PhoneInputNumber
 										data={phoneInputData}
-										handleData={(val: any) => setPhoneInputData(val)}
+										handleData={(val: any) => setPhoneInputData({
+											...phoneInputData,
+											...val,
+											phone: {
+												...phoneInputData.phone,
+												...val.phone,
+												country_code: phoneInputData.phone.country_code
+											}
+										})}
 										forwardRef={phoneRef}
+										defaultCode={formState?.country_code ?? formState?.country_phone_code ?? null}
+										changeCountry={(val: any) => setPhoneInputData({
+											...phoneInputData,
+											phone: {
+												...phoneInputData.phone,
+												country_code: val.cca2
+											}
+										})}
 										textInputProps={{
 											returnKeyType: 'next',
 											onSubmitEditing: () => passwordRef?.current?.focus?.(),

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

@@ -27,7 +27,7 @@ export const UserFormDetailsUI = (props: any) => {
 		hideUpdateButton,
 		setWillVerifyOtpState,
 		isVerifiedPhone,
-		handleChangePromotions
+		handleChangePromotions,
 	} = props;
 
 	const theme = useTheme();
@@ -182,6 +182,16 @@ export const UserFormDetailsUI = (props: any) => {
 		handleChangeInput(phoneNumber, true);
 	};
 
+	const changeCountry = (country : any) => {
+		let countryCode = {
+			country_code: {
+				name: 'country_code',
+				value: country.cca2
+			}
+		}
+		handleChangeInput(countryCode, true);
+	}
+
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			const list = Object.values(errors);
@@ -315,8 +325,9 @@ export const UserFormDetailsUI = (props: any) => {
 									<PhoneInputNumber
 										data={phoneInputData}
 										handleData={(val: any) => handleChangePhoneNumber(val)}
+										changeCountry={(val : any) => changeCountry(val)}
 										defaultValue={phoneUpdate ? '' : user?.cellphone}
-										defaultCode={user?.country_phone_code || null}
+										defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
 										boxStyle={styles.phoneSelect}
 										inputStyle={styles.phoneInputStyle}
 										textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}

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

@@ -167,7 +167,7 @@ const ProfileListUI = (props: ProfileParams) => {
 				<Actions>
 					<ListItem onPress={() => onRedirect('AddressList', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.pin} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
-						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MY_SAVED_PLACES', 'My saved places')}</OText>
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('SAVED_PLACES', 'My saved places')}</OText>
 					</ListItem>
 					<ListItem onPress={() => onRedirect('Messages', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
 						<MessageCircle name='message1' style={styles.messageIconStyle} color={theme.colors.textNormal} />

package/themes/original/src/config/constants.tsx

@@ -8,26 +8,26 @@ export const ORDER_TYPES = [
 	{
 		value: 1,
 		content: 'DELIVERY',
-		description: 'DELIVERY_DESCRIPTION'
+		description: 'ORDERTYPE_DESCRIPTION_DELIVERY'
 	},
 	{
 		value: 2,
 		content: 'PICKUP',
-		description: 'PICKUP_DESCRIPTION',
+		description: 'ORDERTYPE_DESCRIPTION_PICKUP',
 	},
 	{
 		value: 3,
 		content: 'EAT_IN',
-		description: 'EAT_IN_DESCRIPTION',
+		description: 'ORDERTYPE_DESCRIPTION_EATIN',
 	},
 	{
 		value: 4,
 		content: 'CURBSIDE',
-		description: 'CURBSIDE_DESCRIPTION',
+		description: 'ORDERTYPE_DESCRIPTION_CURBSIDE',
 	},
 	{
 		value: 5,
 		content: 'DRIVE_THRU',
-		description: 'DRIVE_THRU_DESCRIPTION',
+		description: 'ORDERTYPE_DESCRIPTION_DRIVETHRU',
 	}
-]
+]

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

@@ -120,6 +120,7 @@ export interface PhoneInputParams {
 	flagStyle?: any;
 	isDisabled?: any;
 	isStartValidation?: any;
+	changeCountry?: any;
 }
 
 export interface LanguageSelectorParams {
@@ -240,7 +241,11 @@ export interface BusinessProductsListParams {
 	handleCancelSearch?: () => void,
 	categoriesLayout?: any,
 	setCategoriesLayout?: any,
-	currentCart?: any
+	currentCart?: any,
+	setSubcategoriesSelected?: any,
+    subcategoriesSelected?: any,
+    onClickCategory?: any,
+    lazyLoadProductsRecommended?: boolean
 }
 export interface SingleProductCardParams {
 	businessId: any,

package/themes/single-business/src/components/AddressList/index.tsx

@@ -140,7 +140,7 @@ const AddressListUI = (props: AddressListParams) => {
 				<AddressListContainer>
 					{isProfile && (
 						<NavBar
-							title={t('MY_SAVED_PLACES', 'My saved places')}
+							title={t('SAVED_PLACES', 'My saved places')}
 							titleAlign={'center'}
 							onActionLeft={() => goToBack()}
 							showCall={false}

package/themes/single-business/src/components/UserProfile/index.tsx

@@ -154,7 +154,7 @@ const ProfileListUI = (props: ProfileParams) => {
 				<Actions>
 					<ListItem onPress={() => onRedirect('AddressList', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.pin} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
-						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MY_SAVED_PLACES', 'My saved places')}</OText>
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('SAVED_PLACES', 'My saved places')}</OText>
 					</ListItem>
 					<ListItem onPress={() => navigation.navigate('Help', {})} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />