ordering-ui-react-native 0.15.83-release → 0.15.84-release

package/package.json

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

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/BusinessItemAccordion/index.tsx

@@ -41,10 +41,10 @@ export const BusinessItemAccordion = (props: any) => {
 	useEffect(() => {
 		const cartsArray = Object.values(orderState?.carts)
 		const cartsLength = cartsArray.filter((cart: any) => cart.products.length > 0).length ?? 0
-		if ((cartsLength === 1) && !isClosed) {
-			setActiveState(true)
+		if (cartsLength === 1) {
+			setActiveState(!isClosed)
 		}
-	}, [orderState?.carts])
+	}, [orderState?.carts, isClosed])
 
 	return (
 		<BIContainer isClosed={isClosed} isMultiCheckout={isMultiCheckout} checkoutVisible={!isActive && !isClosed && !!isProducts && !checkoutButtonDisabled}>

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

@@ -0,0 +1,57 @@
+import React from 'react'
+import { View } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+
+export const BusinessControllerSkeletons = ({ paginationProps }: any) => {
+  return (
+    <>
+      {[
+        ...Array(
+          paginationProps.nextPageItems
+            ? paginationProps.nextPageItems
+            : 3,
+        ).keys(),
+      ].map((item, i) => (
+        <Placeholder
+          Animation={Fade}
+          key={i}
+          style={{ width: 320, marginRight: 20, marginTop: 20 }}>
+          <View style={{ width: 320 }}>
+            <PlaceholderLine
+              height={155}
+              style={{ marginBottom: 20, borderRadius: 25 }}
+            />
+            <View style={{ paddingHorizontal: 10 }}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                }}>
+                <PlaceholderLine
+                  height={25}
+                  width={40}
+                  style={{ marginBottom: 10 }}
+                />
+                <PlaceholderLine
+                  height={25}
+                  width={20}
+                  style={{ marginBottom: 10 }}
+                />
+              </View>
+              <PlaceholderLine
+                height={20}
+                width={30}
+                style={{ marginBottom: 10 }}
+              />
+              <PlaceholderLine
+                height={20}
+                width={80}
+                style={{ marginBottom: 0 }}
+              />
+            </View>
+          </View>
+        </Placeholder>
+      ))}
+    </>
+  )
+}

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

@@ -0,0 +1,59 @@
+import { useLanguage, useUtils } from 'ordering-components/native'
+import React from 'react'
+import { View, TouchableOpacity, StyleSheet } from 'react-native'
+import { OText } from '../../shared'
+
+import { ProgressContentWrapper, ProgressBar } from './styles'
+
+export const MaxSectionItem = (props: any) => {
+    const {
+        filters,
+        handleChangeFilters,
+        title,
+        options,
+        filter
+    } = props
+
+    const [, t] = useLanguage()
+    const [{ parsePrice }] = useUtils();
+
+    const styles = StyleSheet.create({
+        maxContainer: {
+            flexDirection: 'row',
+            justifyContent: 'space-between'
+        }
+    });
+
+    const parseValue = (option: number) => {
+        return filter === 'max_distance'
+            ? `${option / 1000} ${t('KM', 'Km')}`
+            : filter === 'max_eta'
+                ? `${option} ${t('MIN', 'min')}`
+                : parsePrice(option)
+    }
+    return (
+        <View style={{ marginBottom: 20 }}>
+            <OText weight='bold' mBottom={10} size={16}>
+                {title}
+            </OText>
+            <ProgressContentWrapper>
+                <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
+            </ProgressContentWrapper>
+            <View style={styles.maxContainer}>
+                {options.map((option: any, i: number) => (
+                    <TouchableOpacity
+                        onPress={() => handleChangeFilters(filter, option)}
+                        key={option}
+                    >
+                        <OText
+                            size={12}
+                            weight={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter])) ? 'bold' : '500'}
+                        >
+                            {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
+                        </OText>
+                    </TouchableOpacity>
+                ))}
+            </View>
+        </View>
+    )
+}

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

@@ -0,0 +1,13 @@
+import styled from 'styled-components/native';
+
+export const ProgressBar = styled.View`
+  height: 4px;
+  background: ${(props: any) => props.theme.colors.textNormal};
+`
+
+export const ProgressContentWrapper = styled.View`
+  height: 4px;
+  background: #F8F9FA;
+  margin-bottom: 10px;
+  flex: 1;
+`

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

@@ -3,7 +3,7 @@ import { useLanguage, BusinessSearchList, useOrder, useUtils, showToast, ToastTy
 import { ScrollView, StyleSheet, TouchableOpacity, Platform, View, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native'
-import { OButton, OIcon, OModal, OText } from '../shared'
+import { OButton, OModal, OText } from '../shared'
 import { SearchBar } from '../SearchBar';
 import { BusinessController } from '../BusinessController'
 import { NotFoundSource } from '../NotFoundSource'
@@ -19,14 +19,13 @@ import {
   Metadata,
   SingleBusinessContainer,
   LoadMoreBusinessContainer,
-  ProgressContentWrapper,
-  ProgressBar,
   TagsContainer,
   SortContainer,
   BrandContainer,
   BrandItem,
   PriceFilterWrapper,
-  OptionTitle
+  OptionTitle,
+  BContainer
 } from './styles'
 import FastImage from 'react-native-fast-image'
 import { convertHoursToMinutes } from '../../utils'
@@ -34,8 +33,8 @@ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessSearchParams } from '../../types'
 import { MyOrders } from '../MyOrders'
 import { useIsFocused } from '@react-navigation/native';
-
-
+import { MaxSectionItem } from './MaxSectionItem'
+import { BusinessControllerSkeletons } from './BusinessControllerSkeletons'
 export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   const {
     navigation,
@@ -101,10 +100,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     productsContainer: {
       marginTop: 20
     },
-    maxContainer: {
-      flexDirection: 'row',
-      justifyContent: 'space-between'
-    },
     businessTypesContainer: {
       width: '100%',
       flexDirection: 'row',
@@ -220,115 +215,15 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     handleSearchbusinessAndProducts(true)
   }, [])
 
-  
+
   useEffect(() => {
     handleChangeTermValue('')
   }, [isFocused])
 
-  const MaxSectionItem = ({ title, options, filter }: any) => {
-    const parseValue = (option: number) => {
-      return filter === 'max_distance'
-        ? `${option / 1000} ${t('KM', 'Km')}`
-        : filter === 'max_eta'
-          ? `${option} ${t('MIN', 'min')}`
-          : parsePrice(option)
-    }
-    return (
-      <View style={{ marginBottom: 20 }}>
-        <OText weight='bold' mBottom={10} size={16}>
-          {title}
-        </OText>
-        <ProgressContentWrapper>
-          <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
-        </ProgressContentWrapper>
-        <View style={styles.maxContainer}>
-          {options.map((option: any, i: number) => (
-            <TouchableOpacity
-              onPress={() => handleChangeFilters(filter, option)}
-              key={option}
-            >
-              <OText
-                size={12}
-                weight={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter])) ? 'bold' : '500'}
-              >
-                {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
-              </OText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </View>
-    )
-  }
-
-  const BusinessControllerSkeletons = () => {
-    return (
-      <>
-        {[
-          ...Array(
-            paginationProps.nextPageItems
-              ? paginationProps.nextPageItems
-              : 3,
-          ).keys(),
-        ].map((item, i) => (
-          <Placeholder
-            Animation={Fade}
-            key={i}
-            style={{ width: 320, marginRight: 20, marginTop: 20 }}>
-            <View style={{ width: 320 }}>
-              <PlaceholderLine
-                height={155}
-                style={{ marginBottom: 20, borderRadius: 25 }}
-              />
-              <View style={{ paddingHorizontal: 10 }}>
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                  }}>
-                  <PlaceholderLine
-                    height={25}
-                    width={40}
-                    style={{ marginBottom: 10 }}
-                  />
-                  <PlaceholderLine
-                    height={25}
-                    width={20}
-                    style={{ marginBottom: 10 }}
-                  />
-                </View>
-                <PlaceholderLine
-                  height={20}
-                  width={30}
-                  style={{ marginBottom: 10 }}
-                />
-                <PlaceholderLine
-                  height={20}
-                  width={80}
-                  style={{ marginBottom: 0 }}
-                />
-              </View>
-            </View>
-          </Placeholder>
-        ))}
-      </>
-    )
-  }
-
   return (
-    <ScrollView style={styles.container}>
-      <WrapHeader style={{ paddingTop: top + 20, marginVertical: 2 }}>
-        <OText
-          size={20}
-          mBottom={15}
-          weight='bold'
-          style={{ marginTop: 10 }}
-        >
-          {t('SEARCH', 'Search')}
-        </OText>
-      </WrapHeader>
+    <BContainer>
       <SearchWrapper>
         <SearchBar
-          autoFocus
           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')}`}
@@ -336,7 +231,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           value={termValue}
           iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
         />
-
       </SearchWrapper>
       {
         noResults && (
@@ -347,12 +241,13 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           </View>
         )
       }
-      {businessesSearchList.businesses?.length > 0 && (
+      {businessesSearchList.businesses?.length > 0 && termValue?.length === 0 && (
         <MyOrders
           hideOrders
           businessesSearchList={businessesSearchList}
           onNavigationRedirect={onNavigationRedirect}
           BusinessControllerSkeletons={BusinessControllerSkeletons}
+          businessPaginationProps={paginationProps}
         />
       )}
 
@@ -386,7 +281,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           </LoadMoreBusinessContainer>
         )}
         {businessesSearchList.loading && (
-          <BusinessControllerSkeletons />
+          <BusinessControllerSkeletons paginationProps={paginationProps} />
         )}
       </ScrollView>
       <ProductsList>
@@ -629,7 +524,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
           onClick={() => handleApplyFilters()}
         />
       </OModal>
-    </ScrollView>
+    </BContainer>
   )
 }
 

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

@@ -1,5 +1,9 @@
 import styled, { css } from 'styled-components/native'
 
+export const BContainer = styled.View`
+  padding: 20px 40px;
+`
+
 export const WrapHeader = styled.View`
   width: 100%;
 	padding-vertical: 20px;
@@ -55,18 +59,6 @@ export const LoadMoreBusinessContainer = styled.View`
   margin-left: 20px;
 `
 
-export const ProgressBar = styled.View`
-  height: 4px;
-  background: ${(props: any) => props.theme.colors.textNormal};
-`
-
-export const ProgressContentWrapper = styled.View`
-  height: 4px;
-  background: #F8F9FA;
-  margin-bottom: 10px;
-  flex: 1;
-`
-
 export const TagsContainer = styled.View`
   padding-bottom: 10px;
 `

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

@@ -91,6 +91,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           navigation={navigation}
           handleUpdateProducts={handleUpdateProducts}
           currentCart={currentCart}
+          searchValue={searchValue}
         />
       )}
       {category.id &&

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

@@ -21,6 +21,8 @@ import { BusinessProductsCategories } from '../BusinessProductsCategories'
 import { BusinessProductsList } from '../BusinessProductsList'
 import { BusinessProductsListingParams } from '../../types'
 import { _retrieveStoreData, _removeStoreData } from '../../providers/StoreUtil';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+
 import {
 	TopHeader,
 	WrapSearchBar,
@@ -29,7 +31,8 @@ import {
 	ContainerSafeAreaView,
 	BackgroundGray,
 	ProfessionalFilterWrapper,
-	NearBusiness
+	NearBusiness,
+	TopActions
 } from './styles'
 import { FloatingButton } from '../FloatingButton'
 import { UpsellingRedirect } from './UpsellingRedirect'
@@ -248,16 +251,9 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					<TopHeader isIos={Platform.OS === 'ios'}>
 						{!isOpenSearchBar && (
 							<>
-								<View style={{ ...styles.headerItem, width: 175 }}>
-									<OButton
-										imgLeftSrc={theme.images.general.arrow_left}
-										imgRightSrc={null}
-										style={styles.btnBackArrow}
-										onClick={() => handleBackNavigation()}
-										imgLeftStyle={{ tintColor: theme.colors.textNormal, width: 30 }}
-									/>
-
-								</View>
+								<TopActions onPress={() => handleBackNavigation()}>
+									<IconAntDesign name='arrowleft' size={26} />
+								</TopActions>
 								{!errorQuantityProducts && (
 									<View style={{ ...styles.headerItem }}>
 										<TouchableOpacity

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

@@ -66,3 +66,10 @@ export const NearBusiness = styled.View`
   padding-left: 20px;
   max-height: 80px;
 `
+
+export const TopActions = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  padding-horizontal: 30px;
+  width: 100px;
+`;

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

@@ -22,6 +22,7 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
 import {
 	Search,
@@ -283,7 +284,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				style={{ paddingTop: top + 20 }}>
 				{!auth && (
 					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-						<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
+						<IconAntDesign name='arrowleft' size={26} />
 					</TouchableOpacity>
 				)}
 				<Search>

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

@@ -53,6 +53,7 @@ import { getTypesText, convertToRadian } from '../../../../utils';
 import { OrderProgress } from '../../../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
 const PIXELS_TO_SCROLL = 2000;
 
@@ -450,8 +451,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					resizeMode='cover'
 				>
 					{!auth && (
+
 						<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-							<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
+							<IconAntDesign name='arrowleft' size={26} />
 						</TouchableOpacity>
 					)}
 				</HeaderWrapper>

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

@@ -30,10 +30,10 @@ export const CartContent = (props: any) => {
 							{cart.products.length > 0 && (
 								<>
 									<Cart
-                    singleBusiness={props.singleBusiness}
-                    isFranchiseApp={props.isFranchiseApp}
+										singleBusiness={props.singleBusiness}
+										isFranchiseApp={props.isFranchiseApp}
 										cart={cart}
-                    cartuuid={cart.uuid}
+										cartuuid={cart.uuid}
 										onNavigationRedirect={props.onNavigationRedirect}
 										isCartsLoading={isCartsLoading}
 										setIsCartsLoading={setIsCartsLoading}

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

@@ -3,7 +3,8 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpAccountAndPaymentParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Content
@@ -38,10 +39,14 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
       <Content>
@@ -65,4 +70,4 @@ export const HelpAccountAndPayment = (props: HelpAccountAndPaymentParams) => {
       </Content>
     </>
   )
-}
+}

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

@@ -3,10 +3,11 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpGuideParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
 import {
   Content
 } from './styles'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 export const HelpGuide = (props: HelpGuideParams) => {
   const {
@@ -37,10 +38,14 @@ export const HelpGuide = (props: HelpGuideParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
       <Content>
@@ -64,4 +69,4 @@ export const HelpGuide = (props: HelpGuideParams) => {
       </Content>
     </>
   )
-}
+}

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

@@ -3,8 +3,9 @@ import { useLanguage } from 'ordering-components/native'
 import { HelpOrderParams } from '../../types'
 import { OText, OButton, OIcon } from '../shared'
 import { useTheme } from 'styled-components/native'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, TouchableOpacity } from 'react-native'
 import { WebView } from 'react-native-webview'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import {
   Content
@@ -42,10 +43,14 @@ export const HelpOrder = (props: HelpOrderParams) => {
   return (
     <>
       <OButton
-        imgLeftSrc={theme.images.general.arrow_left}
         imgRightSrc={null}
         style={styles.btnBackArrow}
         onClick={() => goToBack()}
+        icon={AntDesignIcon}
+        iconProps={{
+          name: 'arrowleft',
+          size: 26
+        }}
       />
       <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
       <Content>
@@ -76,4 +81,4 @@ export const HelpOrder = (props: HelpOrderParams) => {
       </Content>
     </>
   )
-}
+}