ordering-ui-react-native 0.22.7-release → 0.22.8-release

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/themes/original/src/components/BusinessListingSearch/BusinessSearchFooter.tsx +102 -90
  3. package/themes/original/src/components/BusinessListingSearch/BusinessSearchHeader.tsx +7 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.22.7-release",
3
+ "version": "0.22.8-release",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/original/src/components/BusinessListingSearch/BusinessSearchFooter.tsx CHANGED
@@ -1,5 +1,5 @@
1
- import React, { useState } from 'react'
2
- import { useLanguage, useOrder } from 'ordering-components/native'
1
+ import React from 'react'
2
+ import { useLanguage, useOrder, useConfig } from 'ordering-components/native'
3
3
  import { ScrollView, StyleSheet, TouchableOpacity, View, Dimensions } from 'react-native'
4
4
  import { useTheme } from 'styled-components/native'
5
5
  import { OButton, OModal, OText } from '../shared'
@@ -38,6 +38,7 @@ export const BusinessSearchFooter = (props: any) => {
38
38
  const [orderState] = useOrder()
39
39
 
40
40
  const [, t] = useLanguage()
41
+ const [{ configs }] = useConfig()
41
42
 
42
43
  const maxDeliveryFeeOptions = [15, 25, 35, 'default']
43
44
  // const maxProductPriceOptions = [5, 10, 15, 'default']
@@ -57,6 +58,8 @@ export const BusinessSearchFooter = (props: any) => {
57
58
  { level: '5', content: '$$$$$' }
58
59
  ]
59
60
 
61
+ const filterOptionsEnabled = configs?.filter_search_options?.value?.split('|') || []
62
+
60
63
  const styles = StyleSheet.create({
61
64
  container: {
62
65
  paddingHorizontal: 40,
@@ -165,90 +168,97 @@ export const BusinessSearchFooter = (props: any) => {
165
168
  >
166
169
  {t('FILTER', 'Filter')}
167
170
  </OText>
168
- <SortContainer>
169
- <OText weight='bold' mBottom={7} size={16}>
170
- {t('SORT', 'Sort')}
171
- </OText>
172
- {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
173
- <TouchableOpacity
174
- key={item?.value}
175
- onPress={() => handleChangeFilters('orderBy', item?.value)}
176
- style={{ marginBottom: 7 }}
171
+ {filterOptionsEnabled.includes('sort') && (
172
+ <SortContainer>
173
+ <OText weight='bold' mBottom={7} size={16}>
174
+ {t('SORT', 'Sort')}
175
+ </OText>
176
+ {sortItems?.filter(item => !(orderState?.options?.type === 1 && item?.value === 'pickup_time') && !(orderState?.options?.type === 2 && item?.value === 'delivery_time'))?.map(item => (
177
+ <TouchableOpacity
178
+ key={item?.value}
179
+ onPress={() => handleChangeFilters('orderBy', item?.value)}
180
+ style={{ marginBottom: 7 }}
181
+ >
182
+ <OText
183
+ weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
184
+ mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
185
+ >
186
+ {item?.text} {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <AntDesignIcon name='caretup' /> : <AntDesignIcon name='caretdown' />}</>}
187
+ </OText>
188
+ </TouchableOpacity>
189
+ ))}
190
+ </SortContainer>
191
+ )}
192
+ {filterOptionsEnabled.includes('brands') && (
193
+
194
+ <BrandContainer>
195
+ <OText
196
+ size={16}
197
+ weight='bold'
198
+ lineHeight={24}
199
+ style={{ marginBottom: 10 }}
177
200
  >
178
- <OText
179
- weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
180
- mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
201
+ {t('BRANDS', 'Brands')}
202
+ </OText>
203
+ {!brandList?.loading && !brandList?.error && brandList?.brands?.length > 0 && (
204
+ <ScrollView
205
+ style={{ maxHeight: 300, marginBottom: 10 }}
206
+ showsVerticalScrollIndicator={true}
207
+ nestedScrollEnabled={true}
181
208
  >
182
- {item?.text} {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <AntDesignIcon name='caretup' /> : <AntDesignIcon name='caretdown' />}</>}
183
- </OText>
184
- </TouchableOpacity>
185
- ))}
186
- </SortContainer>
187
- <BrandContainer>
188
- <OText
189
- size={16}
190
- weight='bold'
191
- lineHeight={24}
192
- style={{ marginBottom: 10 }}
193
- >
194
- {t('BRANDS', 'Brands')}
195
- </OText>
196
- {!brandList?.loading && !brandList?.error && brandList?.brands?.length > 0 && (
197
- <ScrollView
198
- style={{ maxHeight: 300, marginBottom: 10 }}
199
- showsVerticalScrollIndicator={true}
200
- nestedScrollEnabled={true}
209
+ {brandList?.brands.map((brand: any, i: number) => brand?.enabled && (
210
+ <BrandItem
211
+ key={i}
212
+ onPress={() => handleChangeBrandFilter(brand?.id)}
213
+ >
214
+ <OText
215
+ size={14}
216
+ weight={'400'}
217
+ lineHeight={24}
218
+ >
219
+ {brand?.name}
220
+ </OText>
221
+ {filters?.franchise_ids?.includes(brand?.id) && (
222
+ <AntDesignIcon
223
+ name='check'
224
+ color={theme.colors.success500}
225
+ size={16}
226
+ />
227
+ )}
228
+ </BrandItem>
229
+ ))}
230
+ </ScrollView>
231
+ )}
232
+ {!brandList?.loading && ((brandList?.brands?.filter((brand: any) => brand?.enabled))?.length === 0) && (
233
+ <OText size={14} weight='400'>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
234
+ )}
235
+ </BrandContainer>
236
+ )}
237
+ {filterOptionsEnabled.includes('price_range') && (
238
+ <PriceFilterWrapper>
239
+ <OText
240
+ size={16}
241
+ weight='bold'
242
+ lineHeight={24}
243
+ style={{ marginBottom: 5 }}
201
244
  >
202
- {brandList?.brands.map((brand: any, i: number) => brand?.enabled && (
203
- <BrandItem
245
+ {t('PRICE_RANGE', 'Price range')}
246
+ </OText>
247
+ <View style={styles.priceContainer}>
248
+ {priceList.map((price: any, i: number) => (
249
+ <OButton
204
250
  key={i}
205
- onPress={() => handleChangeBrandFilter(brand?.id)}
206
- >
207
- <OText
208
- size={14}
209
- weight={'400'}
210
- lineHeight={24}
211
- >
212
- {brand?.name}
213
- </OText>
214
- {filters?.franchise_ids?.includes(brand?.id) && (
215
- <AntDesignIcon
216
- name='check'
217
- color={theme.colors.success500}
218
- size={16}
219
- />
220
- )}
221
- </BrandItem>
251
+ bgColor={(filters?.price_level === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
252
+ onClick={() => handleChangePriceRange(price?.level)}
253
+ text={`${price.content} ${(filters?.price_level === price?.level) ? ' X' : ''}`}
254
+ style={styles.priceItem}
255
+ textStyle={{ fontSize: 10, color: (filters?.price_level === price?.level) ? theme.colors.white : theme.colors.textNormal }}
256
+ />
222
257
  ))}
223
- </ScrollView>
224
- )}
225
- {!brandList?.loading && ((brandList?.brands?.filter((brand: any) => brand?.enabled))?.length === 0) && (
226
- <OText size={14} weight='400'>{t('NO_RESULTS_FOUND', 'Sorry, no results found')}</OText>
227
- )}
228
- </BrandContainer>
229
- <PriceFilterWrapper>
230
- <OText
231
- size={16}
232
- weight='bold'
233
- lineHeight={24}
234
- style={{ marginBottom: 5 }}
235
- >
236
- {t('PRICE_RANGE', 'Price range')}
237
- </OText>
238
- <View style={styles.priceContainer}>
239
- {priceList.map((price: any, i: number) => (
240
- <OButton
241
- key={i}
242
- bgColor={(filters?.price_level === price?.level) ? theme.colors.primary : theme.colors.backgroundGray200}
243
- onClick={() => handleChangePriceRange(price?.level)}
244
- text={`${price.content} ${(filters?.price_level === price?.level) ? ' X' : ''}`}
245
- style={styles.priceItem}
246
- textStyle={{ fontSize: 10, color: (filters?.price_level === price?.level) ? theme.colors.white : theme.colors.textNormal }}
247
- />
248
- ))}
249
- </View>
250
- </PriceFilterWrapper>
251
- {orderState?.options?.type === 1 && (
258
+ </View>
259
+ </PriceFilterWrapper>
260
+ )}
261
+ {orderState?.options?.type === 1 && filterOptionsEnabled.includes('max_delivery_fee') && (
252
262
  <MaxSectionItem
253
263
  filters={filters}
254
264
  title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
@@ -257,7 +267,7 @@ export const BusinessSearchFooter = (props: any) => {
257
267
  handleChangeFilters={handleChangeFilters}
258
268
  />
259
269
  )}
260
- {[1, 2].includes(orderState?.options?.type) && (
270
+ {[1, 2].includes(orderState?.options?.type) && filterOptionsEnabled.includes('max_delivery_time') && (
261
271
  <MaxSectionItem
262
272
  filters={filters}
263
273
  title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
@@ -266,14 +276,16 @@ export const BusinessSearchFooter = (props: any) => {
266
276
  handleChangeFilters={handleChangeFilters}
267
277
  />
268
278
  )}
269
- <MaxSectionItem
270
- filters={filters}
271
- title={t('MAX_DISTANCE', 'Max distance')}
272
- options={maxDistanceOptions}
273
- filter='max_distance'
274
- handleChangeFilters={handleChangeFilters}
275
- />
276
- {businessTypes?.length > 0 && (
279
+ {filterOptionsEnabled.includes('max_distance') && (
280
+ <MaxSectionItem
281
+ filters={filters}
282
+ title={t('MAX_DISTANCE', 'Max distance')}
283
+ options={maxDistanceOptions}
284
+ filter='max_distance'
285
+ handleChangeFilters={handleChangeFilters}
286
+ />
287
+ )}
288
+ {businessTypes?.length > 0 && filterOptionsEnabled.includes('business_categories') && (
277
289
  <TagsContainer>
278
290
  <OText weight='bold' mBottom={7} size={16}>{t('BUSINESS_CATEGORIES', 'Business categories')}</OText>
279
291
  <View style={styles.businessTypesContainer}>
package/themes/original/src/components/BusinessListingSearch/BusinessSearchHeader.tsx CHANGED
@@ -1,5 +1,5 @@
1
- import React, { useEffect, useState } from 'react'
2
- import { useLanguage } from 'ordering-components/native'
1
+ import React from 'react'
2
+ import { useLanguage, useConfig } from 'ordering-components/native'
3
3
  import { View, Platform, StyleSheet, Dimensions } from 'react-native'
4
4
  import { HeaderTitle, OButton, OText } from '../shared'
5
5
  import { SearchBar } from '../SearchBar';
@@ -20,6 +20,8 @@ export const BusinessSearchHeader = (props: any) => {
20
20
  } = props
21
21
  const theme = useTheme()
22
22
  const [, t] = useLanguage()
23
+ const [{ configs }] = useConfig()
24
+
23
25
  const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
24
26
  const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
25
27
  const hideBrowse = theme?.bar_menu?.components?.browse?.hidden
@@ -61,7 +63,9 @@ export const BusinessSearchHeader = (props: any) => {
61
63
  />
62
64
  )}
63
65
  <HeaderTitle ph={20} text={t('SEARCH', 'Search')} />
64
- <AntDesignIcon name='filter' size={18} style={{ marginLeft: 'auto', marginTop: Platform.OS === 'ios' ? 35 : 55, paddingHorizontal: 20 }} onPress={() => handleOpenfilters()} />
66
+ {configs?.filter_search_options?.value !== '' && (
67
+ <AntDesignIcon name='filter' size={18} style={{ marginLeft: 'auto', marginTop: Platform.OS === 'ios' ? 35 : 55, paddingHorizontal: 20 }} onPress={() => handleOpenfilters()} />
68
+ )}
65
69
  </View>
66
70
  <BContainer
67
71
  style={{ paddingHorizontal: 20 }}