ordering-ui-react-native 0.16.84 → 0.16.86

package/package.json

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

package/src/components/BusinessProductsList/index.tsx

@@ -34,9 +34,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   return (
     <ProductsContainer>
       {category.id && (
-        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
+        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any, index: number) => (
           <SingleProductCard
-            key={product.id}
+            key={`category${category.id}-${product.id}-${index}`}
             isSoldOut={(product.inventoried && !product.quantity)}
             product={product}
             businessId={businessId}
@@ -51,9 +51,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <>
               <OText size={18} weight='bold' mBottom={10}>{t('FEATURED', 'Featured')}</OText>
               <>
-                {categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => product.featured && (
+                {categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any, index: number) => product.featured && (
                   <SingleProductCard
-                    key={product.id}
+                    key={`featured${product.id}-${index}`}
                     isSoldOut={(product.inventoried && !product.quantity)}
                     product={product}
                     businessId={businessId}
@@ -70,16 +70,16 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         !category.id && categories && categories.filter(category => category.id !== null).map((category, i, _categories) => {
           const products = categoryState.products?.filter((product: any) => category?.children?.some((cat: any) => cat?.category_id === product?.category_id)) || []
           return (
-            <View key={category.id} style={{ alignItems: 'flex-start', flex: 1 }}>
+            <View key={`category${category.id}`} style={{ alignItems: 'flex-start', flex: 1 }}>
               {
                 products.length > 0 && (
                   <>
                     <OText size={18} weight='bold' mBottom={10}>{category.name}</OText>
                     <>
                       {
-                        products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
+                        products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any, index: number) => (
                           <SingleProductCard
-                            key={product.id}
+                            key={`all${product.id}-${index}`}
                             isSoldOut={product.inventoried && !product.quantity}
                             businessId={businessId}
                             product={product}

package/src/components/LanguageSelector/index.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
+import { Platform, StyleSheet, NativeModules } from 'react-native'
 import { useTheme } from 'styled-components/native';
-import { I18nManager, Platform, StyleSheet, View } from 'react-native'
+import RNRestart from 'react-native-restart'
+import { LanguageSelector as LanguageSelectorController, useOrder, useLanguage } from 'ordering-components/native'
 
 import RNPickerSelect from 'react-native-picker-select'
 import { Container, DummyContainer } from './styles'
 import { LanguageSelectorParams } from '../../types'
-import { OIcon } from '../shared'
-import RNRestart from 'react-native-restart'
 
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
@@ -19,6 +18,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
   } = props
 
   const [orderState] = useOrder()
+  const [langugageState] = useLanguage()
   const theme = useTheme();
 
   const [language, setLanguage] = useState(currentLanguage)
@@ -70,16 +70,18 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
   )
 
   const changeDirection = async (language: any) => {
-    if (language !== 'ar') {
-      if (I18nManager.isRTL) {
-        await I18nManager.forceRTL(false)
-        RNRestart.Restart();
-      }
-    } else {
-      if (!I18nManager.isRTL) {
-        await I18nManager.forceRTL(true)
-        RNRestart.Restart();
-      }
+    if (language === langugageState?.language?.code) return
+    const isArabicLang = language === 'ar'
+    const isRTLOn = NativeModules.I18nManager.isRTL
+
+    if (isArabicLang && !isRTLOn) {
+      NativeModules.I18nManager.forceRTL(!isRTLOn)
+      RNRestart.Restart();
+    }
+
+    if (!isArabicLang && isRTLOn) {
+      NativeModules.I18nManager.forceRTL(!isRTLOn)
+      RNRestart.Restart();
     }
   }
 
@@ -87,11 +89,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     changeDirection(Platform.OS === 'ios' ? language : langCode)
     handleChangeLanguage(Platform.OS === 'ios' ? language : langCode)
   }
-  
+
   useEffect(() => {
     changeDirection(currentLanguage)
   }, [])
-  
+
   return (
     <Container>
       {languagesState?.languages ? (
@@ -113,8 +115,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 }
 
 export const LanguageSelector = (props: LanguageSelectorParams) => {
+  const [langugageState] = useLanguage()
+
   const LanguageProps = {
     ...props,
+    currentLanguage: langugageState?.language?.code ?? NativeModules.I18nManager.localeIdentifier?.split('_')?.[0] ?? 'en',
     UIComponent: LanguageSelectorUI
   }
 

package/src/components/Messages/index.tsx

@@ -42,8 +42,8 @@ const ORDER_STATUS: any = {
 
 const imgOptions = {
   mediaType: 'photo',
-  maxHeight: 300,
-  maxWidth: 300,
+  maxHeight: 2048,
+  maxWidth: 2048,
   includeBase64: true,
   selectionLimit: 0
 }

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

@@ -223,16 +223,14 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   return (
     <BContainer>
       <SearchWrapper>
-        {isFocused && (
-          <SearchBar
-            lazyLoad
-            inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-            placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
-            onSearch={(val: string) => handleChangeTermValue(val)}
-            value={termValue}
-            iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
-          />
-        )}
+        <SearchBar
+          lazyLoad
+          inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+          placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
+          onSearch={(val: string) => handleChangeTermValue(val)}
+          value={termValue}
+          iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
+        />
       </SearchWrapper>
       {
         noResults && (

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

@@ -33,6 +33,7 @@ const OrderProgressUI = (props: any) => {
   const [{ optimizeImage, parseDate, parseTime }] = useUtils()
   const [lastOrder, setLastOrder] = useState<any>(null)
   const imageFails = theme.images.general.emptyActiveOrders
+  const [initialLoaded, setInitialLoaded] = useState(false)
 
   const styles = StyleSheet.create({
     main: {
@@ -135,16 +136,21 @@ const OrderProgressUI = (props: any) => {
     }
   }, [isFocused])
 
+  useEffect(() => {
+    if (orderList.loading || initialLoaded) return
+    setInitialLoaded(true)
+  }, [orderList.loading, initialLoaded])
+
   return (
     <>
-      {orderList?.loading && (
+      {(orderList?.loading && !initialLoaded) && (
         <Placeholder Animation={Fade} height={Platform.OS === 'ios' ? 147.5 : 158}>
           <PlaceholderLine height={60} style={{ borderRadius: 8, marginBottom: 10 }} />
           <PlaceholderLine height={20} style={{ marginBottom: 10 }} />
           <PlaceholderLine height={40} style={{ borderRadius: 8, marginBottom: 10 }} />
         </Placeholder>
       )}
-      {!orderList?.loading && orderList?.orders?.length > 0 && lastOrder && (
+      {(!orderList?.loading || initialLoaded) && orderList?.orders?.length > 0 && lastOrder && (
         <View style={styles.main}>
           <OrderInfoWrapper style={{ flex: 1 }}>
             <View style={styles.logoWrapper}>

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

@@ -143,7 +143,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useFocusEffect(
 		React.useCallback(() => {
-			loadOrders(false, false, false, true)
+			if (!businessesSearchList) {
+				loadOrders(false, false, false, true)
+			}
 		}, [navigation])
 	)
 

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

@@ -47,7 +47,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			borderWidth: 1,
 			borderRadius: 7.6,
 			borderColor: theme.colors.border,
-			marginBottom: 28,
+			marginBottom: 25,
 			minHeight: hideAddButton ? 100 : 165
 		},
 		titleWrapper: {
@@ -137,7 +137,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: hideAddButton ? 125 : 165 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<InView style={{ minHeight: hideAddButton ? 125 : 190 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
 				<CardContainer
 					showAddButton={!hideAddButton}