ordering-ui-react-native 0.16.54 → 0.16.55

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 (12) hide show
  1. package/package.json +1 -1
  2. package/themes/business/src/components/DriverSchedule/index.tsx +36 -19
  3. package/themes/business/src/components/ScheduleBlocked/index.tsx +2 -2
  4. package/themes/original/src/components/AddressForm/index.tsx +6 -5
  5. package/themes/original/src/components/BusinessController/index.tsx +116 -78
  6. package/themes/original/src/components/BusinessListingSearch/index.tsx +9 -3
  7. package/themes/original/src/components/BusinessProductsListing/index.tsx +9 -6
  8. package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx +26 -28
  9. package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx +26 -29
  10. package/themes/original/src/components/ProductForm/index.tsx +1 -1
  11. package/themes/original/src/components/ProductForm/styles.tsx +1 -1
  12. package/themes/original/src/components/SingleProductCard/index.tsx +16 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.16.54",
3
+ "version": "0.16.55",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/business/src/components/DriverSchedule/index.tsx CHANGED
@@ -1,13 +1,15 @@
1
- import React from 'react'
2
- import { View } from 'react-native'
1
+ import React, { useState } from 'react'
2
+ import { RefreshControl, ScrollView, View } from 'react-native'
3
3
  import { OText } from '../shared'
4
- import { useLanguage } from 'ordering-components/native'
4
+ import { useLanguage, useSession } from 'ordering-components/native'
5
5
  import { DayContainer } from './styles'
6
6
  import { useTheme } from 'styled-components/native'
7
- export const DriverSchedule = (props : any) => {
7
+ export const DriverSchedule = (props: any) => {
8
8
  const { schedule } = props
9
9
  const [, t] = useLanguage()
10
10
  const theme = useTheme()
11
+ const [, { refreshUserInfo }] = useSession()
12
+ const [refreshing] = useState(false);
11
13
 
12
14
  const daysOfWeek = [
13
15
  t('SUNDAY_ABBREVIATION', 'Sun'),
@@ -25,30 +27,45 @@ export const DriverSchedule = (props : any) => {
25
27
  }
26
28
 
27
29
  return (
28
- <View >
29
- <OText size={24} style={{paddingLeft: 30}}>
30
+ <ScrollView
31
+ refreshControl={<RefreshControl
32
+ refreshing={refreshing}
33
+ onRefresh={() => refreshUserInfo()}
34
+ />}
35
+ >
36
+ <OText size={24} style={{ paddingLeft: 30 }}>
30
37
  {t('SCHEDULE', 'Schedule')}
31
38
  </OText>
32
- <View style={{padding: 30}}>
39
+ <View style={{ padding: 30 }}>
33
40
  {schedule.map((item: any, i: number) => (
34
41
  <DayContainer key={daysOfWeek[i]}>
35
- <OText style={{width: '20%'}} size={22} weight={700}>{daysOfWeek[i]}</OText>
36
- <View style={{width: '80%', alignItems: 'center'}}>
42
+ <OText style={{ width: '20%' }} size={22} weight={700}>{daysOfWeek[i]}</OText>
43
+ <View style={{ width: '80%', alignItems: 'center' }}>
37
44
  <>
38
- {item?.enabled ? (
39
- <>
40
- {item?.lapses.map((lapse: any, i: number) => (
41
- <OText size={18} style={{marginTop: 3, marginBottom: 20}} key={`${daysOfWeek[i]}_${i}`}>{scheduleFormatted(lapse.open)} - {scheduleFormatted(lapse.close)}</OText>
42
- ))}
43
- </>
44
- ) : (
45
- <OText size={18} style={{marginTop: 3, marginBottom: 10}} color={theme.colors.red}>{t('NOT_AVAILABLE', 'Not available')}</OText>
46
- )}
45
+ {item?.enabled ? (
46
+ <View>
47
+ {item?.lapses.map((lapse: any, i: number) => (
48
+ <View key={`${daysOfWeek[i]}_${i}`} style={{ marginTop: 3, marginBottom: 20, flexDirection: 'row', justifyContent: 'space-between' }}>
49
+ <OText size={18} style={{ width: '30%' }}>
50
+ {scheduleFormatted(lapse.open)}
51
+ </OText>
52
+ <OText size={18} style={{ width: 15 }}>
53
+ -
54
+ </OText>
55
+ <OText size={18} style={{ width: '30%' }}>
56
+ {scheduleFormatted(lapse.close)}
57
+ </OText>
58
+ </View>
59
+ ))}
60
+ </View>
61
+ ) : (
62
+ <OText size={18} style={{ marginTop: 3, marginBottom: 10 }} color={theme.colors.red}>{t('NOT_AVAILABLE', 'Not available')}</OText>
63
+ )}
47
64
  </>
48
65
  </View>
49
66
  </DayContainer>
50
67
  ))}
51
68
  </View>
52
- </View>
69
+ </ScrollView>
53
70
  )
54
71
  }
package/themes/business/src/components/ScheduleBlocked/index.tsx CHANGED
@@ -12,13 +12,13 @@ export const ScheduleBlocked = (props : any) => {
12
12
  const deviceWidth = Dimensions.get('screen').width
13
13
 
14
14
  const daysOfWeek = [
15
+ t('SUNDAY', 'Sunday'),
15
16
  t('MONDAY', 'Monday'),
16
17
  t('TUESDAY', 'Tuesday'),
17
18
  t('WEDNESDAY', 'Wednesday'),
18
19
  t('THURSDAY', 'Thurday'),
19
20
  t('FRIDAY', 'Friday'),
20
21
  t('SATURDAY', 'Saturday'),
21
- t('SUNDAY', 'Sunday')
22
22
  ]
23
23
 
24
24
  const scheduleFormatted = ({ hour, minute }: any) => {
@@ -41,7 +41,7 @@ export const ScheduleBlocked = (props : any) => {
41
41
  <OText>{t('OUTSIDE_ESTABLISHED_SCHEDULE', 'You are outside the established schedule')}</OText>
42
42
  <View style={{ flexDirection: 'row', marginBottom: 20 }}>
43
43
  <OText color={theme.colors.primary}>{t('NEXT_TIME', 'Next time')}: </OText>
44
- <OText>{daysOfWeek[nextSchedule?.day - 1]} {scheduleFormatted(nextSchedule?.schedule?.open)}</OText>
44
+ <OText>{daysOfWeek[nextSchedule?.day]} {scheduleFormatted(nextSchedule?.schedule?.open)}</OText>
45
45
  </View>
46
46
  <OButton
47
47
  text={t('GO_BACK', 'Go back')}
package/themes/original/src/components/AddressForm/index.tsx CHANGED
@@ -109,8 +109,8 @@ const AddressFormUI = (props: AddressFormParams) => {
109
109
  zIndex: 1002,
110
110
  },
111
111
  wrapperNavbar: Platform.OS === 'ios'
112
- ? { paddingVertical: 0, paddingHorizontal: 40 }
113
- : { paddingVertical: 20, paddingHorizontal: 40 }
112
+ ? { paddingVertical: 0, paddingHorizontal: 40 }
113
+ : { paddingVertical: 20, paddingHorizontal: 40 }
114
114
  });
115
115
 
116
116
  const [, t] = useLanguage();
@@ -156,7 +156,7 @@ const AddressFormUI = (props: AddressFormParams) => {
156
156
  const maxLimitLocation =
157
157
  configState?.configs?.meters_to_change_address?.value;
158
158
 
159
- const continueAsGuest = () => navigation.navigate('BusinessList');
159
+ const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
160
160
  const goToBack = () => navigation?.canGoBack() && navigation.goBack();
161
161
 
162
162
  const getAddressFormatted = (address: any) => {
@@ -203,6 +203,7 @@ const AddressFormUI = (props: AddressFormParams) => {
203
203
  saveAddress(data.address);
204
204
  if (isGuestUser) {
205
205
  continueAsGuest();
206
+ return;
206
207
  }
207
208
  if (!isGuestUser && !auth) {
208
209
  !isFromProductsList
@@ -600,13 +601,13 @@ const AddressFormUI = (props: AddressFormParams) => {
600
601
  />
601
602
  {hasEditing ? (
602
603
  <View style={styles.pinIcon}>
603
- <GPSButton
604
+ <GPSButton
604
605
  apiKey={googleMapsApiKey}
605
606
  handleGPS={(data: any, detail: any) => {
606
607
  handleChangeAddress(data, detail);
607
608
  setValue(data.address);
608
609
  if (googleInput?.current) {
609
- googleInput?.current?.setAddressText( data.address );
610
+ googleInput?.current?.setAddressText(data.address);
610
611
  }
611
612
  }}
612
613
  IconButton={<OIcon src={theme.images.general.pin} width={16} />}
package/themes/original/src/components/BusinessController/index.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useState } from 'react';
2
+ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
2
3
  import {
3
4
  BusinessController as BusinessSingleCard,
4
5
  useUtils,
@@ -138,27 +139,27 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
138
139
  }
139
140
 
140
141
  return (
141
- <InView triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
142
- <Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
143
- {business?.ribbon?.enabled && (
144
- <RibbonBox
145
- bgColor={business?.ribbon?.color}
146
- isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
147
- isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
148
- >
149
- <OText
150
- size={10}
151
- weight={'400'}
152
- color={theme.colors.white}
153
- numberOfLines={2}
154
- ellipsizeMode='tail'
155
- lineHeight={13}
142
+ <InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
143
+ {isIntersectionObserver ? (
144
+ <Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
145
+ {business?.ribbon?.enabled && (
146
+ <RibbonBox
147
+ bgColor={business?.ribbon?.color}
148
+ isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
149
+ isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
156
150
  >
157
- {business?.ribbon?.text}
158
- </OText>
159
- </RibbonBox>
160
- )}
161
- {isIntersectionObserver && (
151
+ <OText
152
+ size={10}
153
+ weight={'400'}
154
+ color={theme.colors.white}
155
+ numberOfLines={2}
156
+ ellipsizeMode='tail'
157
+ lineHeight={13}
158
+ >
159
+ {business?.ribbon?.text}
160
+ </OText>
161
+ </RibbonBox>
162
+ )}
162
163
  <BusinessHero>
163
164
  <FastImage
164
165
  style={{ height: 120 }}
@@ -186,10 +187,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
186
187
  )}
187
188
  </BusinessState>
188
189
  </BusinessHero>
189
- )}
190
- <BusinessContent>
191
- <BusinessInfo>
192
- {isIntersectionObserver && (
190
+ <BusinessContent>
191
+ <BusinessInfo>
193
192
  <BusinessLogo style={styles.businessLogo}>
194
193
  <FastImage
195
194
  style={{ width: 56, height: 56 }}
@@ -200,64 +199,103 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
200
199
  resizeMode={FastImage.resizeMode.cover}
201
200
  />
202
201
  </BusinessLogo>
203
- )}
204
- <ReviewAndFavorite>
205
- {(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
206
- <Reviews>
207
- <OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
208
- <OText size={10} style={{ lineHeight: 15 }}>
209
- {parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
210
- </OText>
211
- </Reviews>
212
- )}
213
- <TouchableOpacity
214
- onPress={handleChangeFavorite}
215
- >
216
- <IconAntDesign
217
- name={business?.favorite ? 'heart' : 'hearto'}
218
- color={theme.colors.danger5}
219
- size={18}
220
- />
221
- </TouchableOpacity>
222
- </ReviewAndFavorite>
223
- </BusinessInfo>
224
- <OText
225
- size={12}
226
- style={{ lineHeight: 18, marginBottom: 6 }}
227
- weight={'500'}>
228
- {business?.name}
229
- </OText>
230
- <OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
231
- {business?.address}
232
- </OText>
233
- {/* <BusinessCategory>
202
+ <ReviewAndFavorite>
203
+ {(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
204
+ <Reviews>
205
+ <OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
206
+ <OText size={10} style={{ lineHeight: 15 }}>
207
+ {parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
208
+ </OText>
209
+ </Reviews>
210
+ )}
211
+ <TouchableOpacity
212
+ onPress={handleChangeFavorite}
213
+ >
214
+ <IconAntDesign
215
+ name={business?.favorite ? 'heart' : 'hearto'}
216
+ color={theme.colors.danger5}
217
+ size={18}
218
+ />
219
+ </TouchableOpacity>
220
+ </ReviewAndFavorite>
221
+ </BusinessInfo>
222
+ <OText
223
+ size={12}
224
+ style={{ lineHeight: 18, marginBottom: 6 }}
225
+ weight={'500'}>
226
+ {business?.name}
227
+ </OText>
228
+ <OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
229
+ {business?.address}
230
+ </OText>
231
+ {/* <BusinessCategory>
234
232
  <OText>{getBusinessType()}</OText>
235
233
  </BusinessCategory> */}
236
- <Metadata>
237
- {!isBusinessOpen ? (
238
- <View style={styles.closed}>
239
- <OText size={10} color={theme.colors.red}>
240
- {t('CLOSED', 'Closed')}
241
- </OText>
242
- </View>
243
- ) : (
244
- <View style={styles.bullet}>
245
- {orderState?.options?.type === 1 && (
246
- <OText size={10} color={theme.colors.textSecondary}>
247
- {`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
234
+ <Metadata>
235
+ {!isBusinessOpen ? (
236
+ <View style={styles.closed}>
237
+ <OText size={10} color={theme.colors.red}>
238
+ {t('CLOSED', 'Closed')}
248
239
  </OText>
249
- )}
250
- <OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
251
- orderState?.options?.type === 1
252
- ? (businessDeliveryTime ?? business?.delivery_time)
253
- : (businessPickupTime ?? business?.pickup_time),
254
- )} \u2022 `}</OText>
255
- <OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
240
+ </View>
241
+ ) : (
242
+ <View style={styles.bullet}>
243
+ {orderState?.options?.type === 1 && (
244
+ <OText size={10} color={theme.colors.textSecondary}>
245
+ {`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
246
+ </OText>
247
+ )}
248
+ <OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
249
+ orderState?.options?.type === 1
250
+ ? (businessDeliveryTime ?? business?.delivery_time)
251
+ : (businessPickupTime ?? business?.pickup_time),
252
+ )} \u2022 `}</OText>
253
+ <OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
254
+ </View>
255
+ )}
256
+ </Metadata>
257
+ </BusinessContent>
258
+ </Card>
259
+ ) : (
260
+ <Placeholder
261
+ Animation={Fade}
262
+ style={{ marginBottom: 20 }}>
263
+ <View style={{ width: '100%' }}>
264
+ <PlaceholderLine
265
+ height={200}
266
+ style={{ marginBottom: 20, borderRadius: 25 }}
267
+ />
268
+ <View style={{ paddingHorizontal: 10 }}>
269
+ <View
270
+ style={{
271
+ flexDirection: 'row',
272
+ justifyContent: 'space-between',
273
+ }}>
274
+ <PlaceholderLine
275
+ height={25}
276
+ width={40}
277
+ style={{ marginBottom: 10 }}
278
+ />
279
+ <PlaceholderLine
280
+ height={25}
281
+ width={20}
282
+ style={{ marginBottom: 10 }}
283
+ />
256
284
  </View>
257
- )}
258
- </Metadata>
259
- </BusinessContent>
260
- </Card>
285
+ <PlaceholderLine
286
+ height={20}
287
+ width={30}
288
+ style={{ marginBottom: 10 }}
289
+ />
290
+ <PlaceholderLine
291
+ height={20}
292
+ width={80}
293
+ style={{ marginBottom: 10 }}
294
+ />
295
+ </View>
296
+ </View>
297
+ </Placeholder>
298
+ )}
261
299
  </InView>
262
300
  );
263
301
  };
package/themes/original/src/components/BusinessListingSearch/index.tsx CHANGED
@@ -33,6 +33,7 @@ import { convertHoursToMinutes } from '../../utils'
33
33
  import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
34
34
  import { BusinessSearchParams } from '../../types'
35
35
  import { MyOrders } from '../MyOrders'
36
+ import { useIsFocused } from '@react-navigation/native';
36
37
 
37
38
 
38
39
  export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
@@ -82,6 +83,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
82
83
  { level: '5', content: '$$$$$' }
83
84
  ]
84
85
 
86
+ const isFocused = useIsFocused();
87
+
85
88
  const styles = StyleSheet.create({
86
89
  container: {
87
90
  paddingHorizontal: 40,
@@ -217,6 +220,11 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
217
220
  handleSearchbusinessAndProducts(true)
218
221
  }, [])
219
222
 
223
+
224
+ useEffect(() => {
225
+ handleChangeTermValue('')
226
+ }, [isFocused])
227
+
220
228
  const MaxSectionItem = ({ title, options, filter }: any) => {
221
229
  const parseValue = (option: number) => {
222
230
  return filter === 'max_distance'
@@ -309,9 +317,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
309
317
  return (
310
318
  <ScrollView style={styles.container}>
311
319
  <WrapHeader style={{ paddingTop: top + 20, marginVertical: 2 }}>
312
- <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', paddingVertical: 20 }}>
313
- <OIcon src={theme.images.general.arrow_left} width={20} />
314
- </TouchableOpacity>
315
320
  <OText
316
321
  size={20}
317
322
  mBottom={15}
@@ -323,6 +328,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
323
328
  </WrapHeader>
324
329
  <SearchWrapper>
325
330
  <SearchBar
331
+ autoFocus
326
332
  lazyLoad
327
333
  inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
328
334
  placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
package/themes/original/src/components/BusinessProductsListing/index.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useCallback, useEffect, useRef, useState } from 'react'
2
2
  import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
3
+ import { IOScrollView } from 'react-native-intersection-observer'
3
4
  import { useTheme } from 'styled-components/native';
4
5
  import {
5
6
  BusinessAndProductList,
@@ -24,7 +25,6 @@ import {
24
25
  TopHeader,
25
26
  WrapSearchBar,
26
27
  WrapContent,
27
- BusinessProductsListingContainer,
28
28
  FiltProductsContainer,
29
29
  ContainerSafeAreaView,
30
30
  BackgroundGray,
@@ -81,7 +81,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
81
81
 
82
82
  const styles = StyleSheet.create({
83
83
  mainContainer: {
84
- flex: 1,
84
+ flex: 1
85
85
  },
86
86
  BackIcon: {
87
87
  paddingRight: 20,
@@ -331,11 +331,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
331
331
  {isOpenFiltProducts && (
332
332
  <BackgroundGray />
333
333
  )}
334
- <BusinessProductsListingContainer
334
+ <IOScrollView
335
335
  stickyHeaderIndices={[2]}
336
- style={styles.mainContainer}
336
+ style={{
337
+ ...styles.mainContainer,
338
+ marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?
339
+ 50 : 0
340
+ }}
337
341
  ref={scrollViewRef}
338
- isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
339
342
  onScroll={handlePageScroll}
340
343
  onScrollBeginDrag={handleTouchDrag}
341
344
  scrollEventThrottle={16}
@@ -448,7 +451,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
448
451
  </WrapContent>
449
452
  </>
450
453
  )}
451
- </BusinessProductsListingContainer>
454
+ </IOScrollView>
452
455
  {!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
453
456
  <FloatingButton
454
457
  btnText={
package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx CHANGED
@@ -270,7 +270,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
270
270
  }, [businessesList?.businesses?.length])
271
271
 
272
272
  return (
273
- <ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
273
+ <IOScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
274
274
  refreshControl={
275
275
  <RefreshControl
276
276
  refreshing={refreshing}
@@ -469,32 +469,30 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
469
469
  )}
470
470
  />
471
471
  )}
472
- <IOScrollView>
473
- {businessesList.businesses?.map(
474
- (business: any, i: number) => (
475
- <BusinessController
476
- key={`${business.id}_` + i}
477
- enableIntersection
478
- business={business}
479
- isBusinessOpen={business.open}
480
- handleCustomClick={handleBusinessClick}
481
- orderType={orderState?.options?.type}
482
- navigation={navigation}
483
- businessHeader={business?.header}
484
- businessFeatured={business?.featured}
485
- businessLogo={business?.logo}
486
- businessReviews={business?.reviews}
487
- businessDeliveryPrice={business?.delivery_price}
488
- businessDeliveryTime={business?.delivery_time}
489
- businessPickupTime={business?.pickup_time}
490
- businessDistance={business?.distance}
491
- handleUpdateBusinessList={handleUpdateBusinessList}
492
- favoriteIds={favoriteIds}
493
- setFavoriteIds={setFavoriteIds}
494
- />
495
- )
496
- )}
497
- </IOScrollView>
472
+ {businessesList.businesses?.map(
473
+ (business: any, i: number) => (
474
+ <BusinessController
475
+ key={`${business.id}_` + i}
476
+ enableIntersection
477
+ business={business}
478
+ isBusinessOpen={business.open}
479
+ handleCustomClick={handleBusinessClick}
480
+ orderType={orderState?.options?.type}
481
+ navigation={navigation}
482
+ businessHeader={business?.header}
483
+ businessFeatured={business?.featured}
484
+ businessLogo={business?.logo}
485
+ businessReviews={business?.reviews}
486
+ businessDeliveryPrice={business?.delivery_price}
487
+ businessDeliveryTime={business?.delivery_time}
488
+ businessPickupTime={business?.pickup_time}
489
+ businessDistance={business?.distance}
490
+ handleUpdateBusinessList={handleUpdateBusinessList}
491
+ favoriteIds={favoriteIds}
492
+ setFavoriteIds={setFavoriteIds}
493
+ />
494
+ )
495
+ )}
498
496
  {businessesList.loading && (
499
497
  <>
500
498
  {[
@@ -547,7 +545,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
547
545
  </>
548
546
  )}
549
547
  </ListWrapper>
550
- </ScrollView>
548
+ </IOScrollView>
551
549
  );
552
550
  };
553
551
 
package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx CHANGED
@@ -316,7 +316,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
316
316
  }
317
317
 
318
318
  return (
319
- <ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
319
+ <IOScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
320
320
  refreshControl={
321
321
  <RefreshControl
322
322
  refreshing={refreshing}
@@ -553,33 +553,30 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
553
553
  )}
554
554
  />
555
555
  )}
556
- <IOScrollView>
557
-
558
- {businessesList.businesses?.map(
559
- (business: any, i: number) => (
560
- <BusinessController
561
- key={`${business.id}_` + i}
562
- enableIntersection
563
- business={business}
564
- isBusinessOpen={business.open}
565
- handleCustomClick={handleBusinessClick}
566
- orderType={orderState?.options?.type}
567
- navigation={navigation}
568
- businessHeader={business?.header}
569
- businessFeatured={business?.featured}
570
- businessLogo={business?.logo}
571
- businessReviews={business?.reviews}
572
- businessDeliveryPrice={business?.delivery_price}
573
- businessDeliveryTime={business?.delivery_time}
574
- businessPickupTime={business?.pickup_time}
575
- businessDistance={business?.distance}
576
- handleUpdateBusinessList={handleUpdateBusinessList}
577
- favoriteIds={favoriteIds}
578
- setFavoriteIds={setFavoriteIds}
579
- />
580
- )
581
- )}
582
- </IOScrollView>
556
+ {businessesList.businesses?.map(
557
+ (business: any, i: number) => (
558
+ <BusinessController
559
+ key={`${business.id}_` + i}
560
+ enableIntersection
561
+ business={business}
562
+ isBusinessOpen={business.open}
563
+ handleCustomClick={handleBusinessClick}
564
+ orderType={orderState?.options?.type}
565
+ navigation={navigation}
566
+ businessHeader={business?.header}
567
+ businessFeatured={business?.featured}
568
+ businessLogo={business?.logo}
569
+ businessReviews={business?.reviews}
570
+ businessDeliveryPrice={business?.delivery_price}
571
+ businessDeliveryTime={business?.delivery_time}
572
+ businessPickupTime={business?.pickup_time}
573
+ businessDistance={business?.distance}
574
+ handleUpdateBusinessList={handleUpdateBusinessList}
575
+ favoriteIds={favoriteIds}
576
+ setFavoriteIds={setFavoriteIds}
577
+ />
578
+ )
579
+ )}
583
580
  {businessesList.loading && (
584
581
  <>
585
582
  {[
@@ -657,7 +654,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
657
654
  ))}
658
655
  </View>
659
656
  </OModal>
660
- </ScrollView>
657
+ </IOScrollView>
661
658
  );
662
659
  };
663
660
 
package/themes/original/src/components/ProductForm/index.tsx CHANGED
@@ -598,7 +598,7 @@ export const ProductOptionsUI = (props: any) => {
598
598
  horizontal
599
599
  showsHorizontalScrollIndicator={false}
600
600
  style={{ marginBottom: 20 }}
601
- contentContainerStyle={{ marginHorizontal: 40, paddingHorizontal: 33, backgroundColor: theme.colors.white }}
601
+ contentContainerStyle={{ paddingHorizontal: 33, backgroundColor: theme.colors.white }}
602
602
  >
603
603
  <TouchableOpacity
604
604
  key={`eopt_all_0`}
package/themes/original/src/components/ProductForm/styles.tsx CHANGED
@@ -84,7 +84,7 @@ export const ProductActions = styled.View`
84
84
  border-top-color: ${(props: any) => props.theme.colors.border};
85
85
  `
86
86
  export const ExtraOptionWrap = styled.ScrollView`
87
- margin-horizontal: -40px;
87
+ margin-horizontal: 30px;
88
88
  `;
89
89
 
90
90
  export const WeightUnitSwitch = styled.View`
package/themes/original/src/components/SingleProductCard/index.tsx CHANGED
@@ -122,8 +122,8 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
122
122
  }
123
123
 
124
124
  return (
125
- <InView style={{ minHeight: 140 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
126
- {isIntersectionObserver && (
125
+ <InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
126
+ {isIntersectionObserver ? (
127
127
  <CardContainer
128
128
  showAddButton={showAddButton}
129
129
  style={[
@@ -240,6 +240,20 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
240
240
  />
241
241
  )}
242
242
  </CardContainer>
243
+ ) : (
244
+ <Placeholder style={{ padding: 5 }} Animation={Fade}>
245
+ <View style={{ flexDirection: 'row' }}>
246
+ <PlaceholderLine
247
+ width={24}
248
+ height={70}
249
+ style={{ marginRight: 10, marginBottom: 10 }}
250
+ />
251
+ <Placeholder style={{ paddingVertical: 10 }}>
252
+ <PlaceholderLine width={60} style={{ marginBottom: 25 }} />
253
+ <PlaceholderLine width={20} />
254
+ </Placeholder>
255
+ </View>
256
+ </Placeholder>
243
257
  )}
244
258
  </InView>
245
259
  );