ordering-ui-react-native 0.12.34 → 0.12.35

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/single-business/src/components/BusinessBasicInformation/index.tsx +1 -1
  3. package/themes/single-business/src/components/BusinessProductsListing/index.tsx +9 -8
  4. package/themes/single-business/src/components/BusinessesListing/index.tsx +307 -296
  5. package/themes/single-business/src/components/BusinessesListing/styles.tsx +41 -14
  6. package/themes/single-business/src/components/HelpAccountAndPayment/index.tsx +7 -6
  7. package/themes/single-business/src/components/HelpGuide/index.tsx +7 -6
  8. package/themes/single-business/src/components/HelpOrder/index.tsx +7 -6
  9. package/themes/single-business/src/components/LoginForm/index.tsx +2 -2
  10. package/themes/single-business/src/components/OrderDetails/index.tsx +7 -7
  11. package/themes/single-business/src/components/shared/OIconButton.tsx +2 -2
  12. package/themes/single-business/src/types/index.tsx +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.12.34",
3
+ "version": "0.12.35",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/single-business/src/components/BusinessBasicInformation/index.tsx CHANGED
@@ -79,7 +79,7 @@ export const BusinessBasicInformation = (
79
79
  onPress={() => auth
80
80
  ? navigation.navigate('AddressList', { isGoBack: true, isFromProductsList: true })
81
81
  : navigation.navigate('AddressForm', { address: orderState.options?.address })}
82
- style={{marginTop: !auth ? 36 : top > 0 ? 0 : 20}}
82
+ style={{marginTop: (!auth || props.isFranchiseApp) ? 36 : top > 0 ? 0 : 20}}
83
83
  activeOpacity={0.8}
84
84
  >
85
85
  <OIcon src={theme.images.general.pin} width={16} color={theme.colors.textSecondary} />
package/themes/single-business/src/components/BusinessProductsListing/index.tsx CHANGED
@@ -28,6 +28,7 @@ import { ProductForm } from '../ProductForm'
28
28
  // import { UpsellingProducts } from '../UpsellingProducts'
29
29
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
30
30
  import { _setStoreData } from '../../providers/StoreUtil';
31
+ import NavBar from '../NavBar';
31
32
 
32
33
  const PIXELS_TO_SCROLL = 1000
33
34
 
@@ -180,15 +181,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
180
181
  scrollEventThrottle={16}
181
182
  >
182
183
  <WrapHeader>
183
- {!auth &&
184
+ {(!auth || props.isFranchiseApp) && !loading &&
184
185
  <TopHeader style={{top: top}}>
185
- <OButton
186
- imgLeftSrc={theme.images.general.arrow_left}
187
- imgRightSrc={null}
188
- style={styles.btnBackArrow}
189
- onClick={() => navigation?.canGoBack() && navigation.goBack()}
190
- imgLeftStyle={{ tintColor: theme.colors.white }}
191
- />
186
+ <NavBar
187
+ style={{ paddingBottom: 0, marginLeft: 20, backgroundColor: 'transparent' }}
188
+ btnStyle={{ backgroundColor: 'transparent' }}
189
+ leftImageStyle={{ tintColor: theme.colors.white }}
190
+ onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
191
+ />
192
192
  </TopHeader>
193
193
  }
194
194
  <BusinessBasicInformation
@@ -197,6 +197,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
197
197
  openBusinessInformation={openBusinessInformation}
198
198
  header={header}
199
199
  logo={logo}
200
+ isFranchiseApp={props.isFranchiseApp}
200
201
  />
201
202
  </WrapHeader>
202
203
  <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
package/themes/single-business/src/components/BusinessesListing/index.tsx CHANGED
@@ -1,34 +1,37 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
3
3
  import {
4
- View,
5
- StyleSheet,
6
- ScrollView,
7
- Platform,
8
- TouchableOpacity,
4
+ View,
5
+ StyleSheet,
6
+ ScrollView,
7
+ Platform,
8
+ TouchableOpacity,
9
9
  } from 'react-native';
10
10
  import {
11
- BusinessList as BusinessesListingController,
12
- useLanguage,
13
- useSession,
14
- useOrder,
15
- useConfig,
16
- useUtils,
11
+ BusinessList as BusinessesListingController,
12
+ useLanguage,
13
+ useSession,
14
+ useOrder,
15
+ useConfig,
16
+ useUtils,
17
17
  } from 'ordering-components/native';
18
18
  import { useTheme } from 'styled-components/native';
19
19
 
20
20
  import {
21
- Search,
22
- OrderControlContainer,
23
- AddressInput,
24
- WrapMomentOption,
25
- HeaderWrapper,
26
- ListWrapper,
27
- FeaturedWrapper,
21
+ Search,
22
+ OrderControlContainer,
23
+ AddressInput,
24
+ WrapMomentOption,
25
+ HeaderWrapper,
26
+ ListWrapper,
27
+ FeaturedWrapper,
28
+ TopHeader,
29
+ DropOptionButton,
30
+ WrapSearchBar,
28
31
  } from './styles';
29
32
 
30
33
  import { SearchBar } from '../SearchBar';
31
- import { OIcon, OText } from '../shared';
34
+ import { OButton, OIcon, OText } from '../shared';
32
35
  import { BusinessesListingParams } from '../../types';
33
36
  import { NotFoundSource } from '../NotFoundSource';
34
37
  import { BusinessTypeFilter } from '../BusinessTypeFilter';
@@ -36,302 +39,310 @@ import { BusinessController } from '../BusinessController';
36
39
  import { OrderTypeSelector } from '../OrderTypeSelector';
37
40
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
38
41
  import { BusinessFeaturedController } from '../BusinessFeaturedController';
42
+ import { getTypesText } from '../../utils';
43
+ import NavBar from '../NavBar';
39
44
 
40
45
  const PIXELS_TO_SCROLL = 1000;
41
46
 
42
47
  const BusinessesListingUI = (props: BusinessesListingParams) => {
43
- const {
44
- navigation,
45
- businessesList,
46
- searchValue,
47
- getBusinesses,
48
- handleChangeBusinessType,
49
- handleBusinessClick,
50
- paginationProps,
51
- handleChangeSearch,
52
- } = props;
48
+ const {
49
+ navigation,
50
+ businessesList,
51
+ searchValue,
52
+ getBusinesses,
53
+ handleChangeBusinessType,
54
+ handleBusinessClick,
55
+ paginationProps,
56
+ handleChangeSearch,
57
+ } = props;
53
58
 
54
- const theme = useTheme();
59
+ const theme = useTheme();
55
60
 
56
61
 
57
- const styles = StyleSheet.create({
58
- container: {
59
- marginBottom: 0,
60
- },
61
- welcome: {
62
- flex: 1,
63
- flexDirection: 'row',
64
- },
65
- inputStyle: {
66
- backgroundColor: theme.colors.inputDisabled,
67
- flex: 1,
68
- },
69
- wrapperOrderOptions: {
70
- width: '100%',
71
- flexDirection: 'row',
72
- justifyContent: 'space-between',
73
- marginBottom: 10,
74
- zIndex: 100,
75
- },
76
- borderStyle: {
77
- borderColor: theme.colors.backgroundGray,
78
- borderWidth: 1,
79
- borderRadius: 10,
80
- },
81
- searchInput: {
82
- fontSize: 12,
83
- }
84
- });
62
+ const styles = StyleSheet.create({
63
+ container: {
64
+ marginBottom: 0,
65
+ },
66
+ welcome: {
67
+ flex: 1,
68
+ flexDirection: 'row',
69
+ },
70
+ inputStyle: {
71
+ backgroundColor: theme.colors.inputDisabled,
72
+ flex: 1,
73
+ },
74
+ wrapperOrderOptions: {
75
+ width: '100%',
76
+ flexDirection: 'row',
77
+ justifyContent: 'flex-start',
78
+ marginBottom: 10,
79
+ zIndex: 100,
80
+ },
81
+ borderStyle: {
82
+ borderColor: theme.colors.backgroundGray,
83
+ borderWidth: 1,
84
+ borderRadius: 10,
85
+ },
86
+ searchInput: {
87
+ fontSize: 12,
88
+ },
89
+ btnBackArrow: {
90
+ borderWidth: 0,
91
+ backgroundColor: theme.colors.clear,
92
+ shadowColor: theme.colors.clear,
93
+ paddingLeft: 40,
94
+ paddingRight: 40
95
+ },
96
+ headerStyle: {
97
+ height: 260,
98
+ paddingHorizontal: 40
99
+ },
100
+ });
85
101
 
86
102
 
87
- const [, t] = useLanguage();
88
- const [{ user, auth }] = useSession();
89
- const [orderState] = useOrder();
90
- const [{ configs }] = useConfig();
91
- const [{ parseDate }] = useUtils();
103
+ const [, t] = useLanguage();
104
+ const [{ user, auth }] = useSession();
105
+ const [orderState] = useOrder();
106
+ const [{ configs }] = useConfig();
107
+ const [{ parseDate }] = useUtils();
92
108
 
93
- const { top } = useSafeAreaInsets();
109
+ const { top } = useSafeAreaInsets();
94
110
 
95
- const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
111
+ const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
96
112
 
97
- // const timerId = useRef<any>(false)
98
- // const panResponder = useRef(
99
- // PanResponder.create({
100
- // onMoveShouldSetPanResponder: (e, gestureState) => {
101
- // const {dx, dy} = gestureState;
102
- // resetInactivityTimeout()
103
- // return (Math.abs(dx) > 20) || (Math.abs(dy) > 20);
104
- // },
105
- // })
106
- // ).current
113
+ const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || [];
107
114
 
108
- const configTypes =
109
- configs?.order_types_allowed?.value
110
- .split('|')
111
- .map((value: any) => Number(value)) || [];
115
+ const handleScroll = ({ nativeEvent }: any) => {
116
+ const y = nativeEvent.contentOffset.y;
117
+ const height = nativeEvent.contentSize.height;
118
+ const hasMore = !(
119
+ paginationProps.totalPages === paginationProps.currentPage
120
+ );
112
121
 
113
- const handleScroll = ({ nativeEvent }: any) => {
114
- const y = nativeEvent.contentOffset.y;
115
- const height = nativeEvent.contentSize.height;
116
- const hasMore = !(
117
- paginationProps.totalPages === paginationProps.currentPage
118
- );
122
+ if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
123
+ getBusinesses();
124
+ }
125
+ };
119
126
 
120
- if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
121
- getBusinesses();
122
- }
123
- };
127
+ useEffect(() => {
128
+ if (businessesList.businesses.length > 0) {
129
+ const fb = businessesList.businesses.filter((b) => b.featured == true);
130
+ const ary = [];
131
+ while (fb.length > 0) {
132
+ ary.push(fb.splice(0, 2));
133
+ }
134
+ setFeaturedBusinesses(ary);
135
+ }
136
+ }, [businessesList.businesses]);
124
137
 
125
- useEffect(() => {
126
- if (businessesList.businesses.length > 0) {
127
- const fb = businessesList.businesses.filter((b) => b.featured == true);
128
- const ary = [];
129
- while (fb.length > 0) {
130
- ary.push(fb.splice(0, 2));
131
- }
132
- setFeaturedBusinesses(ary);
133
- }
134
- }, [businessesList.businesses]);
135
- // const resetInactivityTimeout = () => {
136
- // clearTimeout(timerId.current)
137
- // timerId.current = setInterval(() => {
138
- // getBusinesses(true)
139
- // }, 600000)
140
- // }
138
+ return (
139
+ <ScrollView
140
+ style={styles.container}
141
+ onScroll={(e) => handleScroll(e)}
142
+ showsVerticalScrollIndicator={false}
143
+ >
144
+ <HeaderWrapper
145
+ source={theme.images.backgrounds.business_list_header}
146
+ >
147
+ {!auth && (
148
+ <TopHeader style={{ top: top }}>
149
+ <NavBar
150
+ style={{ paddingBottom: 0, marginLeft: 20, backgroundColor: 'transparent' }}
151
+ btnStyle={{ backgroundColor: 'transparent' }}
152
+ leftImageStyle={{ tintColor: theme.colors.white }}
153
+ onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
154
+ />
155
+ </TopHeader>
156
+ )}
141
157
 
142
- // useEffect(() => {
143
- // resetInactivityTimeout()
144
- // }, [])
145
-
146
- return (
147
- <ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}>
148
- <HeaderWrapper
149
- source={theme.images.backgrounds.business_list_header}
150
- style={{ paddingTop: top + 20 }}>
151
- {!auth && (
152
- <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
153
- <OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
154
- </TouchableOpacity>
155
- )}
156
-
157
- <Search>
158
- <AddressInput
159
- onPress={() =>
160
- auth
161
- ? navigation.navigate('AddressList', { isFromBusinesses: true })
162
- : navigation.navigate('AddressForm', {
163
- address: orderState.options?.address,
164
- isFromBusinesses: true,
165
- })
166
- }>
167
- <OIcon
168
- src={theme.images.general.pin}
169
- color={theme.colors.disabled}
170
- width={16}
171
- style={{ marginRight: 10 }}
172
- />
173
- <OText size={12} numberOfLines={1} style={{ width: '90%' }}>
174
- {orderState?.options?.address?.address}
175
- </OText>
176
- </AddressInput>
177
- </Search>
178
- <OrderControlContainer>
179
- <View style={styles.wrapperOrderOptions}>
180
- <OrderTypeSelector configTypes={configTypes} />
181
- <WrapMomentOption
182
- onPress={() => navigation.navigate('MomentOption')}>
183
- <OText
184
- size={12}
185
- numberOfLines={1}
186
- ellipsizeMode="tail"
187
- color={theme.colors.textSecondary}>
188
- {orderState.options?.moment
189
- ? parseDate(orderState.options?.moment, {
190
- outputFormat:
191
- configs?.format_time?.value === '12'
192
- ? 'MM/DD hh:mma'
193
- : 'MM/DD HH:mm',
194
- })
195
- : t('ASAP_ABBREVIATION', 'ASAP')}
196
- </OText>
197
- <OIcon
198
- src={theme.images.general.arrow_down}
199
- width={10}
200
- style={{ marginStart: 8 }}
201
- />
202
- </WrapMomentOption>
203
-
204
- <SearchBar
205
- onSearch={handleChangeSearch}
206
- searchValue={searchValue}
207
- lazyLoad
208
- isCancelXButtonShow={!!searchValue}
209
- borderStyle={styles.borderStyle}
210
- onCancel={() => handleChangeSearch('')}
211
- placeholder={t('SEARCH', 'Search')}
212
- height={26}
213
- inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
214
- />
215
- </View>
216
- </OrderControlContainer>
217
- </HeaderWrapper>
218
- {featuredBusiness && featuredBusiness.length > 0 && (
219
- <FeaturedWrapper>
220
- <OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
221
- <ScrollView
222
- showsHorizontalScrollIndicator={false}
223
- nestedScrollEnabled
224
- horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
225
- {featuredBusiness.map((bAry: any, idx) => (
226
- <View key={'f-listing_' + idx}>
227
- <BusinessFeaturedController
228
- key={bAry[0].id}
229
- business={bAry[0]}
230
- handleCustomClick={handleBusinessClick}
231
- orderType={orderState?.options?.type}
232
- />
233
- {bAry.length > 1 && (
234
- <BusinessFeaturedController
235
- key={bAry[1].id}
236
- business={bAry[1]}
237
- handleCustomClick={handleBusinessClick}
238
- orderType={orderState?.options?.type}
239
- />
240
- )}
241
- </View>
242
- ))}
243
- </ScrollView>
244
- </FeaturedWrapper>
245
- )}
246
- <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
247
- <ListWrapper>
248
- <BusinessTypeFilter
249
- images={props.images}
250
- businessTypes={props.businessTypes}
251
- defaultBusinessType={props.defaultBusinessType}
252
- handleChangeBusinessType={handleChangeBusinessType}
253
- />
254
- {!businessesList.loading && businessesList.businesses.length === 0 && (
255
- <NotFoundSource
256
- content={t(
257
- 'NOT_FOUND_BUSINESSES',
258
- 'No businesses to delivery / pick up at this address, please change filters or change address.',
259
- )}
260
- />
261
- )}
262
- {businessesList.businesses?.map(
263
- (business: any) =>
264
- !business.featured && (
265
- <BusinessController
266
- key={business.id}
267
- business={business}
268
- handleCustomClick={handleBusinessClick}
269
- orderType={orderState?.options?.type}
270
- />
271
- ),
272
- )}
273
- {businessesList.loading && (
274
- <>
275
- {[
276
- ...Array(
277
- paginationProps.nextPageItems
278
- ? paginationProps.nextPageItems
279
- : 8,
280
- ).keys(),
281
- ].map((item, i) => (
282
- <Placeholder
283
- Animation={Fade}
284
- key={i}
285
- style={{ marginBottom: 20 }}>
286
- <View style={{ width: '100%' }}>
287
- <PlaceholderLine
288
- height={200}
289
- style={{ marginBottom: 20, borderRadius: 25 }}
290
- />
291
- <View style={{ paddingHorizontal: 10 }}>
292
- <View
293
- style={{
294
- flexDirection: 'row',
295
- justifyContent: 'space-between',
296
- }}>
297
- <PlaceholderLine
298
- height={25}
299
- width={40}
300
- style={{ marginBottom: 10 }}
301
- />
302
- <PlaceholderLine
303
- height={25}
304
- width={20}
305
- style={{ marginBottom: 10 }}
306
- />
307
- </View>
308
- <PlaceholderLine
309
- height={20}
310
- width={30}
311
- style={{ marginBottom: 10 }}
312
- />
313
- <PlaceholderLine
314
- height={20}
315
- width={80}
316
- style={{ marginBottom: 10 }}
317
- />
318
- </View>
319
- </View>
320
- </Placeholder>
321
- ))}
322
- </>
323
- )}
324
- </ListWrapper>
325
- </ScrollView>
326
- );
158
+ <AddressInput
159
+ onPress={() => auth
160
+ ? navigation.navigate('AddressList', { isFromBusinesses: true })
161
+ : navigation.navigate('AddressForm', {
162
+ address: orderState.options?.address,
163
+ isFromBusinesses: true,
164
+ })
165
+ }
166
+ style={{ marginTop: !auth ? 36 : top > 0 ? 0 : 20 }}
167
+ activeOpacity={0.8}
168
+ >
169
+ <OIcon src={theme.images.general.pin} width={16} color={theme.colors.textSecondary} />
170
+ <OText color={theme.colors.textPrimary} numberOfLines={1} lineHeight={20} weight={Platform.OS === 'android' ? 'bold' : '600'} style={{ paddingStart: 10, flexBasis: '90%' }}>
171
+ {orderState?.options?.address?.address}
172
+ </OText>
173
+ </AddressInput>
174
+ <OrderControlContainer>
175
+ <View style={styles.wrapperOrderOptions}>
176
+ <DropOptionButton
177
+ activeOpacity={0.7}
178
+ onPress={() => navigation.navigate('OrderTypes', { configTypes: configTypes })}
179
+ >
180
+ <OText
181
+ size={12}
182
+ numberOfLines={1}
183
+ ellipsizeMode={'tail'}
184
+ color={theme.colors.textSecondary}
185
+ >
186
+ {t(getTypesText(orderState?.options?.type || 1), 'Delivery')}
187
+ </OText>
188
+ <OIcon
189
+ src={theme.images.general.arrow_down}
190
+ width={10}
191
+ style={{ marginStart: 8 }}
192
+ />
193
+ </DropOptionButton>
194
+ <DropOptionButton
195
+ onPress={() => navigation.navigate('MomentOption')}>
196
+ <OText
197
+ size={12}
198
+ numberOfLines={1}
199
+ ellipsizeMode="tail"
200
+ color={theme.colors.textSecondary}>
201
+ {orderState.options?.moment
202
+ ? parseDate(orderState.options?.moment, {
203
+ outputFormat:
204
+ configs?.format_time?.value === '12'
205
+ ? 'MM/DD hh:mma'
206
+ : 'MM/DD HH:mm',
207
+ })
208
+ : t('ASAP_ABBREVIATION', 'ASAP')}
209
+ </OText>
210
+ <OIcon
211
+ src={theme.images.general.arrow_down}
212
+ width={10}
213
+ style={{ marginStart: 8 }}
214
+ />
215
+ </DropOptionButton>
216
+ </View>
217
+ </OrderControlContainer>
218
+ </HeaderWrapper>
219
+ <WrapSearchBar>
220
+ <SearchBar
221
+ onSearch={handleChangeSearch}
222
+ isCancelXButtonShow
223
+ noBorderShow
224
+ placeholder={t('SEARCH', 'Search')}
225
+ lazyLoad
226
+ />
227
+ </WrapSearchBar>
228
+ <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
229
+ {featuredBusiness && featuredBusiness.length > 0 && (
230
+ <FeaturedWrapper>
231
+ <OText size={16} style={{ marginLeft: 40 }} weight={Platform.OS === 'ios' ? '600' : 'bold'}>{t('FEATURED_BUSINESS', 'Featured business')}</OText>
232
+ <ScrollView
233
+ showsHorizontalScrollIndicator={false}
234
+ nestedScrollEnabled
235
+ horizontal contentContainerStyle={{ paddingHorizontal: 40 }}>
236
+ {featuredBusiness.map((bAry: any, idx) => (
237
+ <View key={'f-listing_' + idx}>
238
+ <BusinessFeaturedController
239
+ key={bAry[0].id}
240
+ business={bAry[0]}
241
+ handleCustomClick={handleBusinessClick}
242
+ orderType={orderState?.options?.type}
243
+ />
244
+ {bAry.length > 1 && (
245
+ <BusinessFeaturedController
246
+ key={bAry[1].id}
247
+ business={bAry[1]}
248
+ handleCustomClick={handleBusinessClick}
249
+ orderType={orderState?.options?.type}
250
+ />
251
+ )}
252
+ </View>
253
+ ))}
254
+ </ScrollView>
255
+ </FeaturedWrapper>
256
+ )}
257
+ <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
258
+ <ListWrapper>
259
+ <BusinessTypeFilter
260
+ images={props.images}
261
+ businessTypes={props.businessTypes}
262
+ defaultBusinessType={props.defaultBusinessType}
263
+ handleChangeBusinessType={handleChangeBusinessType}
264
+ />
265
+ {!businessesList.loading && businessesList.businesses.length === 0 && (
266
+ <NotFoundSource
267
+ content={t(
268
+ 'NOT_FOUND_BUSINESSES',
269
+ 'No businesses to delivery / pick up at this address, please change filters or change address.',
270
+ )}
271
+ />
272
+ )}
273
+ {businessesList.businesses?.map(
274
+ (business: any) =>
275
+ !business.featured && (
276
+ <BusinessController
277
+ key={business.id}
278
+ business={business}
279
+ handleCustomClick={handleBusinessClick}
280
+ orderType={orderState?.options?.type}
281
+ />
282
+ ),
283
+ )}
284
+ {businessesList.loading && (
285
+ <>
286
+ {[
287
+ ...Array(
288
+ paginationProps.nextPageItems
289
+ ? paginationProps.nextPageItems
290
+ : 8,
291
+ ).keys(),
292
+ ].map((item, i) => (
293
+ <Placeholder
294
+ Animation={Fade}
295
+ key={i}
296
+ style={{ marginBottom: 20 }}>
297
+ <View style={{ width: '100%' }}>
298
+ <PlaceholderLine
299
+ height={200}
300
+ style={{ marginBottom: 20, borderRadius: 25 }}
301
+ />
302
+ <View style={{ paddingHorizontal: 10 }}>
303
+ <View
304
+ style={{
305
+ flexDirection: 'row',
306
+ justifyContent: 'space-between',
307
+ }}>
308
+ <PlaceholderLine
309
+ height={25}
310
+ width={40}
311
+ style={{ marginBottom: 10 }}
312
+ />
313
+ <PlaceholderLine
314
+ height={25}
315
+ width={20}
316
+ style={{ marginBottom: 10 }}
317
+ />
318
+ </View>
319
+ <PlaceholderLine
320
+ height={20}
321
+ width={30}
322
+ style={{ marginBottom: 10 }}
323
+ />
324
+ <PlaceholderLine
325
+ height={20}
326
+ width={80}
327
+ style={{ marginBottom: 10 }}
328
+ />
329
+ </View>
330
+ </View>
331
+ </Placeholder>
332
+ ))}
333
+ </>
334
+ )}
335
+ </ListWrapper>
336
+ </ScrollView>
337
+ );
327
338
  };
328
339
 
329
340
  export const BusinessesListing = (props: BusinessesListingParams) => {
330
- const BusinessesListingProps = {
331
- ...props,
332
- isForceSearch: Platform.OS === 'ios',
333
- UIComponent: BusinessesListingUI,
334
- };
341
+ const BusinessesListingProps = {
342
+ ...props,
343
+ isForceSearch: Platform.OS === 'ios',
344
+ UIComponent: BusinessesListingUI,
345
+ };
335
346
 
336
- return <BusinessesListingController {...BusinessesListingProps} />;
347
+ return <BusinessesListingController {...BusinessesListingProps} />;
337
348
  };
package/themes/single-business/src/components/BusinessesListing/styles.tsx CHANGED
@@ -19,22 +19,19 @@ export const Search = styled.View`
19
19
 
20
20
  export const AddressInput = styled.TouchableOpacity`
21
21
  flex-direction: row;
22
- background-color: ${(props: any) => props.theme.colors.white};
23
- border-radius: 22px;
24
- padding-horizontal: 20px;
25
22
  align-items: center;
26
- width: 100%;
23
+ justify-content: flex-start;
24
+ background-color: white;
25
+ padding-horizontal: 15px;
26
+ border-radius: 24px;
27
27
  height: 44px;
28
- max-height: 44px;
28
+ min-height: 44px;
29
29
  `
30
30
 
31
31
  export const OrderControlContainer = styled.View`
32
32
  width: 100%;
33
- flex-direction: column;
34
- align-items: center;
35
- justify-content: space-between;
36
33
  z-index: 10;
37
- padding-bottom: 20px;
34
+ padding-top: 20px;
38
35
  flex: 1;
39
36
  `
40
37
 
@@ -53,8 +50,8 @@ export const WrapMomentOption = styled.TouchableOpacity`
53
50
 
54
51
  export const HeaderWrapper = styled.ImageBackground`
55
52
  width: 100%;
56
- height: 370px;
57
- padding: 20px 40px;
53
+ height: 200px;
54
+ padding: 0px 40px 20px;
58
55
  background-color: transparent;
59
56
  `;
60
57
 
@@ -65,6 +62,36 @@ export const ListWrapper = styled.View`
65
62
 
66
63
  export const FeaturedWrapper = styled.View`
67
64
  background-color: ${(props: any) => props.theme.colors.backgroundLight};
68
- height: 220px;
69
- paddingVertical: 30px;
70
- `;
65
+ max-height: 220px;
66
+ paddingVertical: 20px;
67
+ `;
68
+
69
+ export const TopHeader = styled.View`
70
+ position: absolute;
71
+ flex-direction: row;
72
+ align-items: center;
73
+ justify-content: space-between;
74
+ z-index: 1;
75
+ height: 34px;
76
+ min-height: 34px;
77
+ `
78
+
79
+ export const DropOptionButton = styled.TouchableOpacity`
80
+ background-color: ${(props: any) => props.theme.colors.backgroundGray100};
81
+ border-radius: 7.6px;
82
+ font-size: 12px;
83
+ max-width: 240px;
84
+ height: 26px;
85
+ align-items: center;
86
+ justify-content: center;
87
+ padding-horizontal: 8px;
88
+ flex-direction: row;
89
+ margin-end: 12px;
90
+ `
91
+
92
+ export const WrapSearchBar = styled.View`
93
+ padding: 10px 30px;
94
+ margin-bottom: 10px;
95
+ background-color: ${(props: any) => props.theme.colors.white};
96
+ flex: 1;
97
+ `
package/themes/single-business/src/components/HelpAccountAndPayment/index.tsx CHANGED
@@ -8,6 +8,7 @@ import { StyleSheet } from 'react-native'
8
8
  import {
9
9
  Content
10
10
  } from './styles'
11
+ import NavBar from '../NavBar'
11
12
 
12
13
  export const HelpAccountAndPayment = (props: HelpParams) => {
13
14
  const {
@@ -37,11 +38,11 @@ export const HelpAccountAndPayment = (props: HelpParams) => {
37
38
 
38
39
  return (
39
40
  <>
40
- <OButton
41
- imgLeftSrc={theme.images.general.arrow_left}
42
- imgRightSrc={null}
43
- style={styles.btnBackArrow}
44
- onClick={() => goToBack()}
41
+ <NavBar
42
+ style={{ paddingBottom: 0, marginLeft:-20, backgroundColor: 'transparent' }}
43
+ btnStyle={{ backgroundColor: 'transparent' }}
44
+ leftImageStyle={{ tintColor: theme.colors.textThird }}
45
+ onActionLeft={() => goToBack()}
45
46
  />
46
47
  <OText size={22} weight={600}>{t('ACCOUNT_PAYMENT_OPTIONS', 'Account and Payment Options')}</OText>
47
48
  <Content>
@@ -65,4 +66,4 @@ export const HelpAccountAndPayment = (props: HelpParams) => {
65
66
  </Content>
66
67
  </>
67
68
  )
68
- }
69
+ }
package/themes/single-business/src/components/HelpGuide/index.tsx CHANGED
@@ -7,6 +7,7 @@ import { StyleSheet } from 'react-native'
7
7
  import {
8
8
  Content
9
9
  } from './styles'
10
+ import NavBar from '../NavBar'
10
11
 
11
12
  export const HelpGuide = (props: HelpParams) => {
12
13
  const {
@@ -36,11 +37,11 @@ export const HelpGuide = (props: HelpParams) => {
36
37
 
37
38
  return (
38
39
  <>
39
- <OButton
40
- imgLeftSrc={theme.images.general.arrow_left}
41
- imgRightSrc={null}
42
- style={styles.btnBackArrow}
43
- onClick={() => goToBack()}
40
+ <NavBar
41
+ style={{ paddingBottom: 0, marginLeft:-20, backgroundColor: 'transparent' }}
42
+ btnStyle={{ backgroundColor: 'transparent' }}
43
+ leftImageStyle={{ tintColor: theme.colors.textThird }}
44
+ onActionLeft={() => goToBack()}
44
45
  />
45
46
  <OText size={22} weight={600}>{t('GUIDE_TO_ORDERING', 'Guide to Ordering')}</OText>
46
47
  <Content>
@@ -64,4 +65,4 @@ export const HelpGuide = (props: HelpParams) => {
64
65
  </Content>
65
66
  </>
66
67
  )
67
- }
68
+ }
package/themes/single-business/src/components/HelpOrder/index.tsx CHANGED
@@ -9,6 +9,7 @@ import { WebView } from 'react-native-webview'
9
9
  import {
10
10
  Content
11
11
  } from './styles'
12
+ import NavBar from '../NavBar'
12
13
 
13
14
  export const HelpOrder = (props: HelpParams) => {
14
15
  const {
@@ -41,11 +42,11 @@ export const HelpOrder = (props: HelpParams) => {
41
42
 
42
43
  return (
43
44
  <>
44
- <OButton
45
- imgLeftSrc={theme.images.general.arrow_left}
46
- imgRightSrc={null}
47
- style={styles.btnBackArrow}
48
- onClick={() => goToBack()}
45
+ <NavBar
46
+ style={{ paddingBottom: 0, marginLeft:-20, backgroundColor: 'transparent' }}
47
+ btnStyle={{ backgroundColor: 'transparent' }}
48
+ leftImageStyle={{ tintColor: theme.colors.textThird }}
49
+ onActionLeft={() => goToBack()}
49
50
  />
50
51
  <OText size={22} weight={600}>{t('HELP_WITH_ORDER', 'Help with an order')}</OText>
51
52
  <Content>
@@ -76,4 +77,4 @@ export const HelpOrder = (props: HelpParams) => {
76
77
  </Content>
77
78
  </>
78
79
  )
79
- }
80
+ }
package/themes/single-business/src/components/LoginForm/index.tsx CHANGED
@@ -534,7 +534,7 @@ const LoginFormUI = (props: LoginParams) => {
534
534
  handleLoading={(val: boolean) => setIsFBLoading(val)}
535
535
  handleSuccessFacebookLogin={handleSuccessFacebook}
536
536
  />
537
- <GoogleLogin
537
+ {/* <GoogleLogin
538
538
  handleErrors={(err: any) => showToast(ToastType.Error, err)}
539
539
  handleLoading={(val: boolean) => setIsFBLoading(val)}
540
540
  handleSuccessFacebookLogin={handleSuccessFacebook}
@@ -543,7 +543,7 @@ const LoginFormUI = (props: LoginParams) => {
543
543
  handleErrors={(err: any) => showToast(ToastType.Error, err)}
544
544
  handleLoading={(val: boolean) => setIsFBLoading(val)}
545
545
  handleSuccessFacebookLogin={handleSuccessFacebook}
546
- />
546
+ /> */}
547
547
  </SocialButtons>
548
548
  </ButtonsWrapper>
549
549
  </>
package/themes/single-business/src/components/OrderDetails/index.tsx CHANGED
@@ -43,6 +43,7 @@ import { OrderDetailsParams } from '../../types';
43
43
  import { USER_TYPE } from '../../config/constants';
44
44
  import { GoogleMap } from '../GoogleMap';
45
45
  import { verifyDecimals } from '../../utils';
46
+ import NavBar from '../NavBar';
46
47
 
47
48
  export const OrderDetailsUI = (props: OrderDetailsParams) => {
48
49
  const {
@@ -375,13 +376,12 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
375
376
  {order && Object.keys(order).length > 0 && (
376
377
  <>
377
378
  <Header>
378
- <OButton
379
- imgLeftSrc={theme.images.general.arrow_left}
380
- imgRightSrc={null}
381
- style={styles.btnBackArrow}
382
- onClick={() => handleArrowBack()}
383
- imgLeftStyle={{ tintColor: theme.colors.disabled, width: 20 }}
384
- />
379
+ <NavBar
380
+ style={{ paddingBottom: 0, marginLeft: -20, backgroundColor: 'transparent' }}
381
+ btnStyle={{ backgroundColor: 'transparent' }}
382
+ leftImageStyle={{ tintColor: theme.colors.textThird }}
383
+ onActionLeft={() => handleArrowBack()}
384
+ />
385
385
  <OrderInfo>
386
386
  <OrderData>
387
387
  <OText
package/themes/single-business/src/components/shared/OIconButton.tsx CHANGED
@@ -21,8 +21,8 @@ const DisabledWrapper = styled.View`
21
21
  justify-content: center;
22
22
  `
23
23
  const Icon = styled.Image`
24
- width: 22px;
25
- height: 22px;
24
+ width: 20px;
25
+ height: 20px;
26
26
  `
27
27
  const Title = styled.Text`
28
28
  font-size: 16px;
package/themes/single-business/src/types/index.tsx CHANGED
@@ -160,6 +160,7 @@ export interface BusinessProductsListingParams {
160
160
  categorySelected: any;
161
161
  handleSearchRedirect: any;
162
162
  errorQuantityProducts?: boolean;
163
+ isFranchiseApp?: boolean;
163
164
  header?: any;
164
165
  logo?: any;
165
166
  getNextProducts?: any;
@@ -173,6 +174,7 @@ export interface BusinessBasicInformationParams {
173
174
  businessState?: any;
174
175
  openBusinessInformation?: any;
175
176
  isBusinessInfoShow?: boolean;
177
+ isFranchiseApp?: boolean;
176
178
  header?: any;
177
179
  logo?: any;
178
180
  }