ordering-ui-react-native 0.15.32 → 0.15.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 (16) hide show
  1. package/package.json +1 -1
  2. package/themes/kiosk/src/components/Cart/index.tsx +1 -1
  3. package/themes/kiosk/src/components/CartBottomSheet/index.tsx +1 -1
  4. package/themes/kiosk/src/components/CartBottomSheet/styles.tsx +1 -1
  5. package/themes/kiosk/src/components/CartContent/index.tsx +13 -3
  6. package/themes/kiosk/src/components/CartItem/index.tsx +20 -8
  7. package/themes/kiosk/src/components/CustomerName/index.tsx +7 -2
  8. package/themes/kiosk/src/components/Intro/index.tsx +13 -13
  9. package/themes/kiosk/src/components/OrderDetails/index.tsx +2 -2
  10. package/themes/kiosk/src/components/OrderSummary/index.tsx +1 -1
  11. package/themes/kiosk/src/components/ProductForm/index.tsx +172 -123
  12. package/themes/kiosk/src/components/ProductForm/styles.tsx +1 -1
  13. package/themes/kiosk/src/components/ProductOption/index.tsx +1 -0
  14. package/themes/kiosk/src/components/ProductOption/styles.tsx +1 -0
  15. package/themes/kiosk/src/components/UpsellingProducts/index.tsx +48 -34
  16. package/themes/single-business/src/components/OrderTypeSelector/index.tsx +5 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.15.32",
3
+ "version": "0.15.35",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/kiosk/src/components/Cart/index.tsx CHANGED
@@ -379,7 +379,7 @@ const CartUI = (props: any) => {
379
379
  <ProductForm
380
380
  productCart={curProduct}
381
381
  businessSlug={cart?.business?.slug}
382
- businessId={curProduct?.business_id}
382
+ businessId={cart?.business_id}
383
383
  categoryId={curProduct?.category_id}
384
384
  productId={curProduct?.id}
385
385
  onSave={handlerProductAction}
package/themes/kiosk/src/components/CartBottomSheet/index.tsx CHANGED
@@ -179,7 +179,7 @@ const CartBottomSheetUI = (props: CartBottomSheetUIProps): React.ReactElement |
179
179
  <ProductForm
180
180
  productCart={curProduct}
181
181
  businessSlug={cart?.business?.slug}
182
- businessId={curProduct?.business_id}
182
+ businessId={cart?.business_id}
183
183
  categoryId={curProduct?.category_id}
184
184
  productId={curProduct?.id}
185
185
  onSave={handlerProductAction}
package/themes/kiosk/src/components/CartBottomSheet/styles.tsx CHANGED
@@ -5,7 +5,7 @@ export const StyledContainer = styled.ScrollView`
5
5
  zIndex: 1000;
6
6
  width: 100%;
7
7
  background-color: #fff;
8
- padding: 20px 20px 20px 0px;
8
+ padding: 20px 0 0;
9
9
  bottom: 0;
10
10
  shadow-color: #000;
11
11
  shadow-opacity: 0.4;
package/themes/kiosk/src/components/CartContent/index.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { useLanguage } from 'ordering-components/native';
3
-
3
+ import { useCartBottomSheet } from '../../providers/CartBottomSheetProvider';
4
4
  import { CCNotCarts } from './styles';
5
5
 
6
6
  import { Cart } from '../Cart';
@@ -22,6 +22,7 @@ export const CartContent = (props: any) => {
22
22
 
23
23
  const [, t] = useLanguage()
24
24
  const [isCartsLoading, setIsCartsLoading] = useState(false)
25
+ const [, { hideCartBottomSheet }] = useCartBottomSheet();
25
26
 
26
27
  const cartProps = {
27
28
  navigation,
@@ -33,6 +34,15 @@ export const CartContent = (props: any) => {
33
34
  resetInactivityTimeout,
34
35
  }
35
36
 
37
+ useEffect(() => {
38
+ if (!cart && showNotFound) {
39
+ navigation?.canGoBack()
40
+ ? navigation.goBack()
41
+ : props.onNavigationRedirect && props.onNavigationRedirect('Business')
42
+ hideCartBottomSheet()
43
+ }
44
+ }, [cart])
45
+
36
46
  const content = (
37
47
  <>
38
48
  {(isOrderStateCarts && cart) && (
@@ -46,13 +56,13 @@ export const CartContent = (props: any) => {
46
56
  }
47
57
  </>
48
58
  )}
49
- {(!cart && showNotFound) && (
59
+ {/* {(!cart && showNotFound) && (
50
60
  <CCNotCarts>
51
61
  <OText size={24} style={{ textAlign: 'center' }}>
52
62
  {t('CARTS_NOT_FOUND', 'You don\'t have carts available')}
53
63
  </OText>
54
64
  </CCNotCarts>
55
- )}
65
+ )} */}
56
66
  <Spinner visible={isCartsLoading} />
57
67
  </>
58
68
  )
package/themes/kiosk/src/components/CartItem/index.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useState } from 'react';
2
- import { View, Animated, TouchableOpacity } from 'react-native';
2
+ import { View, Animated, TouchableOpacity, ImageBackground } from 'react-native';
3
3
  import { useLanguage, useUtils } from 'ordering-components/native';
4
+ import FastImage from 'react-native-fast-image'
4
5
 
5
6
  import {
6
7
  StyledCartItem,
@@ -70,13 +71,24 @@ const CartItem = (props: CartItemProps) => {
70
71
  >
71
72
  <StyledCartItem>
72
73
  <View style={{ flexDirection: 'row' }}>
73
- <OImage
74
- source={{ uri: product?.images || '' }}
75
- height={60}
76
- width={60}
77
- resizeMode="cover"
78
- borderRadius={6}
79
- />
74
+ {product?.images ? (
75
+ <FastImage
76
+ style={{ height: 60, width: 80, borderRadius: 6 }}
77
+ source={{
78
+ uri: product?.images,
79
+ priority: FastImage.priority.normal,
80
+ // cache:FastImage.cacheControl.web
81
+ }}
82
+ resizeMode={FastImage.resizeMode.cover}
83
+ />
84
+ ) : (
85
+ <ImageBackground
86
+ style={{ height: 60, width: 80, borderRadius: 6 }}
87
+ source={theme.images.dummies.product}
88
+ imageStyle={{ borderRadius: 6 }}
89
+ resizeMode='cover'
90
+ />
91
+ )}
80
92
 
81
93
  <View style={{ flexDirection: 'column', justifyContent: 'space-evenly', marginHorizontal: 15, marginTop: 10 }}>
82
94
  <View>
package/themes/kiosk/src/components/CustomerName/index.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { useEffect } from 'react';
2
2
  import { useLanguage, ToastType, useToast } from 'ordering-components/native';
3
- import { _setStoreData } from '../../../../../src/providers/StoreUtil';
3
+ import { _setStoreData, _removeStoreData } from '../../../../../src/providers/StoreUtil';
4
4
 
5
5
  import { OButton, OInput, OText } from '../shared';
6
6
  import { useForm, Controller } from 'react-hook-form';
@@ -28,6 +28,11 @@ const CustomerName = (props: Props): React.ReactElement => {
28
28
  onProceedToPay()
29
29
  };
30
30
 
31
+ const onSkip = () => {
32
+ _removeStoreData('customer_name')
33
+ onProceedToPay()
34
+ }
35
+
31
36
  const styles = StyleSheet.create({
32
37
  inputStyle: {
33
38
  borderRadius: 4,
@@ -75,7 +80,7 @@ const CustomerName = (props: Props): React.ReactElement => {
75
80
  <View style={{ flex: 1, alignItems: 'center' }}>
76
81
  <OButton
77
82
  text={t('SKIP', 'Skip')}
78
- onClick={onProceedToPay}
83
+ onClick={onSkip}
79
84
  textStyle={{ color: theme.colors.primary, fontSize: 20 }}
80
85
  parentStyle={{
81
86
  height: orientationState?.orientation === PORTRAIT
package/themes/kiosk/src/components/Intro/index.tsx CHANGED
@@ -32,17 +32,17 @@ const Intro = (props: any): React.ReactElement => {
32
32
  };
33
33
 
34
34
  return (
35
- <ScrollView
36
- scrollEnabled={false}
37
- refreshControl={
38
- <RefreshControl
39
- refreshing={showLogoutPopup ? false : refreshing}
40
- onRefresh={() => setShowLogoutPopup(true)}
41
- />
42
- }
43
- >
35
+ // <ScrollView
36
+ // scrollEnabled={false}
37
+ // refreshControl={
38
+ // <RefreshControl
39
+ // refreshing={showLogoutPopup ? false : refreshing}
40
+ // onRefresh={() => setShowLogoutPopup(true)}
41
+ // />
42
+ // }
43
+ // >
44
44
  <Pressable onPress={goBusiness}>
45
- <Container nopadding={orientationState.orientation === LANDSCAPE}>
45
+ <View style={{ height: orientationState?.dimensions?.height }}>
46
46
  {orientationState.orientation === PORTRAIT ? (
47
47
  <View
48
48
  style={{
@@ -132,15 +132,15 @@ const Intro = (props: any): React.ReactElement => {
132
132
  open={showLogoutPopup}
133
133
  onClose={() => setShowLogoutPopup(false)}
134
134
  />
135
- </Container>
135
+ </View>
136
136
  </Pressable>
137
- </ScrollView>
137
+ // </ScrollView>
138
138
  );
139
139
  };
140
140
 
141
141
  const styles = StyleSheet.create({
142
142
  buttonLandStyle: {
143
- width: 290,
143
+ minWidth: 130,
144
144
  marginBottom: 16
145
145
  }
146
146
  });
package/themes/kiosk/src/components/OrderDetails/index.tsx CHANGED
@@ -212,7 +212,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
212
212
  setCustomerName(name)
213
213
  } catch (e) {
214
214
  if (e) {
215
- setCustomerName('')
215
+ setCustomerName(null)
216
216
  }
217
217
  }
218
218
  }
@@ -553,7 +553,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
553
553
  size={orientationState?.dimensions?.width * 0.048}
554
554
  weight="700"
555
555
  >
556
- {`${t('HUNGRY', 'hungry')}, ${customerName}`}
556
+ {t('HUNGRY', 'hungry')}{!!customerName && `, ${customerName}`}
557
557
  </OText>
558
558
  </OText>
559
559
 
package/themes/kiosk/src/components/OrderSummary/index.tsx CHANGED
@@ -169,7 +169,7 @@ const OrderSummaryUI = (props: any) => {
169
169
  isCartProduct
170
170
  productCart={curProduct}
171
171
  businessSlug={cart?.business?.slug}
172
- businessId={curProduct?.business_id}
172
+ businessId={cart?.business_id}
173
173
  categoryId={curProduct?.category_id}
174
174
  productId={curProduct?.id}
175
175
  onSave={handlerProductAction}
package/themes/kiosk/src/components/ProductForm/index.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useState } from 'react'
2
+ import FastImage from 'react-native-fast-image'
2
3
  import {
3
4
  View,
4
5
  TouchableOpacity,
@@ -69,7 +70,7 @@ export const ProductOptionsUI = (props: any) => {
69
70
 
70
71
  const { product, loading, error } = productObject;
71
72
 
72
- const HEADER_EXPANDED_HEIGHT = Platform.OS === 'ios' ? orientationState?.dimensions?.height * 0.65 : orientationState?.dimensions?.height * 0.4;
73
+ const HEADER_EXPANDED_HEIGHT = orientationState?.dimensions?.height * 0.4;
73
74
  const HEADER_COLLAPSED_HEIGHT = orientationState?.dimensions?.height * 0.2;
74
75
 
75
76
  const isError = (id: number) => {
@@ -203,7 +204,6 @@ export const ProductOptionsUI = (props: any) => {
203
204
  },
204
205
  scrollContainer: {
205
206
  padding: 16,
206
- paddingTop: HEADER_EXPANDED_HEIGHT
207
207
  },
208
208
  header: {
209
209
  backgroundColor: '#fff',
@@ -225,6 +225,10 @@ export const ProductOptionsUI = (props: any) => {
225
225
  shadowOpacity: 0.4,
226
226
  shadowRadius: 3,
227
227
  elevation: 5,
228
+ },
229
+ imageStyle: {
230
+ width: '100%',
231
+ height: HEADER_EXPANDED_HEIGHT,
228
232
  }
229
233
  });
230
234
 
@@ -232,118 +236,173 @@ export const ProductOptionsUI = (props: any) => {
232
236
  <>
233
237
  <ScrollView
234
238
  style={styles.mainContainer}
235
- contentContainerStyle={styles.scrollContainer}
236
239
  onScroll={Animated.event(
237
240
  [{ nativeEvent: { contentOffset: { y: scrollY } } }],
238
241
  { useNativeDriver: false })
239
242
  }
240
243
  scrollEventThrottle={16}
241
244
  >
242
- <Animated.View style={[styles.header, { height: headerHeight }]}>
243
- {!isDrawer && (<Animated.View style={{ opacity: navBar1ContainerOpacity }}>
244
- <NavBar
245
- {...navBarProps}
246
- titleColor={theme.colors.white}
247
- btnStyle={{
248
- width: 55,
249
- height: 55,
250
- overflow: 'scroll',
251
- backgroundColor: 'black',
252
- borderRadius: 100,
253
- color: 'white',
254
- opacity: 0.8,
255
- left: 20,
256
- }}
257
- />
258
- </Animated.View>
259
- )}
260
- <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
261
- <NavBar
262
- {...navBarProps}
263
- btnStyle={{
264
- width: 55,
265
- height: 55,
266
- backgroundColor: 'transparent',
267
- borderRadius: 100,
268
- left: 20,
269
- }}
270
- />
271
- </Animated.View>
245
+ {!isDrawer ? (
246
+ <Animated.View style={[styles.header, { height: headerHeight }]}>
247
+ {!isDrawer && (
248
+ <Animated.View style={{ opacity: navBar1ContainerOpacity }}>
249
+ <NavBar
250
+ {...navBarProps}
251
+ titleColor={theme.colors.white}
252
+ btnStyle={{
253
+ width: 55,
254
+ height: 55,
255
+ overflow: 'scroll',
256
+ backgroundColor: 'black',
257
+ borderRadius: 100,
258
+ color: 'white',
259
+ opacity: 0.8,
260
+ left: 20,
261
+ }}
262
+ />
263
+ </Animated.View>
264
+ )}
265
+ <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
266
+ <NavBar
267
+ {...navBarProps}
268
+ btnStyle={{
269
+ width: 55,
270
+ height: 55,
271
+ backgroundColor: 'transparent',
272
+ borderRadius: 100,
273
+ left: 20,
274
+ }}
275
+ />
276
+ </Animated.View>
272
277
 
273
- <Animated.View style={{
274
- backgroundColor: 'white',
275
- width: orientationState?.dimensions?.width,
276
- opacity: collapsedBarContainerOpacity,
277
- }}>
278
- <View
279
- style={{
280
- flexDirection: 'row',
281
- alignItems: 'center',
282
- padding: 20,
283
- paddingTop: 0,
284
- paddingBottom: 10
285
- }}
286
- >
287
- <OImage
288
- source={{ uri: product?.images }}
289
- width={70}
290
- height={70}
291
- resizeMode="cover"
292
- borderRadius={6}
278
+ <Animated.View style={{
279
+ backgroundColor: 'white',
280
+ width: orientationState?.dimensions?.width,
281
+ opacity: collapsedBarContainerOpacity,
282
+ }}>
283
+ <View
284
+ style={{
285
+ flexDirection: 'row',
286
+ alignItems: 'center',
287
+ padding: 20,
288
+ paddingTop: 0,
289
+ paddingBottom: 10
290
+ }}
291
+ >
292
+ {product?.images ? (
293
+ <FastImage
294
+ style={{ height: 70, width: 70, borderRadius: 6 }}
295
+ source={{
296
+ uri: product?.images,
297
+ priority: FastImage.priority.normal,
298
+ // cache:FastImage.cacheControl.web
299
+ }}
300
+ resizeMode={FastImage.resizeMode.cover}
301
+ />
302
+ ) : (
303
+ <ImageBackground
304
+ style={{ height: 70, width: 70, borderRadius: 6 }}
305
+ source={theme.images.dummies.product}
306
+ imageStyle={{ borderRadius: 6 }}
307
+ resizeMode='cover'
308
+ />
309
+ )}
310
+ <OText
311
+ size={orientationState?.dimensions?.width * 0.025}
312
+ weight="bold"
313
+ mLeft={20}
314
+ numberOfLines={2}
315
+ >
316
+ {product?.name}
317
+ </OText>
318
+ </View>
319
+ <View
320
+ style={{
321
+ position: 'absolute',
322
+ bottom: -2,
323
+ height: 1,
324
+ backgroundColor: 'white',
325
+ width: orientationState?.dimensions?.width,
326
+ ...styles.shadow,
327
+ }}
293
328
  />
294
- <OText
295
- size={orientationState?.dimensions?.width * 0.025}
296
- weight="bold"
297
- mLeft={20}
298
- numberOfLines={2}
329
+ </Animated.View>
330
+
331
+ <Animated.View style={{
332
+ opacity: heroContainerOpacity,
333
+ position: 'absolute',
334
+ zIndex: -100,
335
+ transform: [{ translateY: heroTranslateY }],
336
+ }}>
337
+ <View
338
+ style={{
339
+ width: orientationState?.dimensions?.width,
340
+ height: HEADER_EXPANDED_HEIGHT,
341
+ position: 'absolute',
342
+ zIndex: 1,
343
+ backgroundColor: 'rgba(24, 28, 50, 0.4)',
344
+ }}
299
345
  >
300
- {product?.name}
301
- </OText>
302
- </View>
303
- <View
304
- style={{
305
- position: 'absolute',
306
- bottom: -2,
307
- height: 1,
308
- backgroundColor: 'white',
309
- width: orientationState?.dimensions?.width,
310
- ...styles.shadow,
311
- }}
312
- />
346
+ {product?.images ? (
347
+ <FastImage
348
+ style={{ flex: 1, justifyContent: 'center' }}
349
+ source={{
350
+ uri: product?.images,
351
+ priority: FastImage.priority.normal,
352
+ // cache:FastImage.cacheControl.web
353
+ }}
354
+ resizeMode={FastImage.resizeMode.cover}
355
+ />
356
+ ) : (
357
+ <ImageBackground
358
+ style={{ flex: 1, justifyContent: 'center' }}
359
+ source={theme.images.dummies.product}
360
+ resizeMode='cover'
361
+ />
362
+ )}
363
+ </View>
364
+ </Animated.View>
313
365
  </Animated.View>
314
-
315
- <Animated.View style={{
316
- opacity: heroContainerOpacity,
317
- position: 'absolute',
318
- zIndex: -100,
319
- transform: [{ translateY: heroTranslateY }],
320
- }}>
321
- <View
366
+ ) : (
367
+ <View style={{...styles.imageStyle}}>
368
+ <Animated.View
322
369
  style={{
323
- width: orientationState?.dimensions?.width,
324
- height: HEADER_EXPANDED_HEIGHT,
370
+ ...styles.imageStyle,
371
+ opacity: heroContainerOpacity,
325
372
  position: 'absolute',
326
- zIndex: 1,
327
- backgroundColor: 'rgba(24, 28, 50, 0.4)',
373
+ zIndex: -100,
374
+ transform: [{ translateY: heroTranslateY }],
328
375
  }}
329
376
  >
330
- <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex: 1, justifyContent: 'center' }} />
377
+ <View style={styles.imageStyle}>
378
+ {product?.images ? (
379
+ <FastImage
380
+ style={{ flex: 1 }}
381
+ source={{
382
+ uri: product?.images,
383
+ priority: FastImage.priority.normal,
384
+ // cache:FastImage.cacheControl.web
385
+ }}
386
+ resizeMode={FastImage.resizeMode.cover}
387
+ />
388
+ ) : (
389
+ <ImageBackground
390
+ style={{ flex: 1, justifyContent: 'center' }}
391
+ source={theme.images.dummies.product}
392
+ resizeMode='cover'
393
+ />
394
+ )}
395
+ </View>
396
+ </Animated.View>
397
+ </View>
398
+ )}
331
399
 
332
- </View>
333
400
 
334
- <Animated.View
335
- style={{
336
- transform: [{ translateY: heroTranslateY }],
337
- width: orientationState?.dimensions?.width * 0.75,
338
- height: HEADER_EXPANDED_HEIGHT / 2,
339
- position: 'relative',
340
- top: HEADER_EXPANDED_HEIGHT / 3,
341
- zIndex: 100,
342
- padding: 20,
343
- }}
344
- >
401
+ {!loading && !error && product && (
402
+ <View style={{ paddingTop: isDrawer ? 20 : HEADER_EXPANDED_HEIGHT, paddingBottom: 80, paddingHorizontal: 16 }}>
403
+ <WrapContent isDrawer={isDrawer}>
345
404
  <OText
346
- color={theme.colors.white}
405
+ style={{ marginTop: 20 }}
347
406
  size={orientationState?.dimensions?.width * 0.038}
348
407
  weight="bold"
349
408
  mBottom={10}
@@ -352,33 +411,23 @@ export const ProductOptionsUI = (props: any) => {
352
411
  {product?.name || productCart?.name}
353
412
  </OText>
354
413
 
355
- <OText
356
- color={theme.colors.white}
357
- numberOfLines={4}
358
- >
359
- {product?.description || productCart?.description}
360
- </OText>
361
- </Animated.View>
362
- </Animated.View>
363
- </Animated.View>
414
+ {(product?.description || productCart?.description) && (
415
+ <OText
416
+ numberOfLines={4}
417
+ >
418
+ {product?.description || productCart?.description}
419
+ </OText>
420
+ )}
421
+
422
+ {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
423
+ (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
424
+ ) && (
425
+ <ProductDescription>
426
+ <OText size={20}>{t('SKU', 'Sku')}</OText>
427
+ <OText>{product?.sku || productCart?.sku}</OText>
428
+ </ProductDescription>
429
+ )}
364
430
 
365
- {/* {!isFromCheckout && (
366
- <Spinner visible={loading} />
367
- )} */}
368
- {!loading && !error && product && (
369
- <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}>
370
- <WrapContent isDrawer={isDrawer}>
371
- <ProductDescription>
372
- {(
373
- (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
374
- (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
375
- ) && (
376
- <>
377
- <OText size={20}>{t('SKU', 'Sku')}</OText>
378
- <OText>{product?.sku || productCart?.sku}</OText>
379
- </>
380
- )}
381
- </ProductDescription>
382
431
  <ProductEditions>
383
432
  {product?.ingredients.length > 0 && (
384
433
  <View style={styles.optionContainer}>
package/themes/kiosk/src/components/ProductForm/styles.tsx CHANGED
@@ -40,7 +40,7 @@ export const ProductTitle = styled.View`
40
40
  `
41
41
 
42
42
  export const ProductDescription = styled.View`
43
- margin-bottom: 30px;
43
+ margin-top: 10px;
44
44
  `
45
45
 
46
46
  export const ProductEditions = styled.View`
package/themes/kiosk/src/components/ProductOption/index.tsx CHANGED
@@ -32,6 +32,7 @@ const ProductOptionUI = (props: any) => {
32
32
  <OText
33
33
  size={26}
34
34
  weight="bold"
35
+ style={{ width: '80%' }}
35
36
  >
36
37
  {option.name}
37
38
  </OText>
package/themes/kiosk/src/components/ProductOption/styles.tsx CHANGED
@@ -12,4 +12,5 @@ export const WrapHeader = styled.View`
12
12
  background-color: ${(props: any) => props.theme.colors.paleGray};
13
13
  border-top-left-radius: 10px;
14
14
  border-top-right-radius: 10px;
15
+ width: 100%;
15
16
  `
package/themes/kiosk/src/components/UpsellingProducts/index.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React,{ useState, useEffect } from 'react'
2
2
  import Spinner from 'react-native-loading-spinner-overlay';
3
- import { StyleSheet, View, Platform } from 'react-native'
3
+ import { StyleSheet, View, Platform, ImageBackground } from 'react-native'
4
4
  import {
5
5
  UpsellingPage as UpsellingPageController,
6
6
  useUtils,
@@ -20,6 +20,7 @@ import { Container } from '../../layouts/Container';
20
20
  import GridContainer from '../../layouts/GridContainer';
21
21
  import { PORTRAIT, useDeviceOrientation } from "../../../../../src/hooks/DeviceOrientation";
22
22
  import { useTheme } from 'styled-components/native';
23
+ import FastImage from 'react-native-fast-image';
23
24
 
24
25
  const UpsellingProductsUI = (props: UpsellingProductsParams) => {
25
26
  const {
@@ -114,7 +115,24 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
114
115
  {
115
116
  !upsellingProducts.error ? upsellingProducts.products.map((product: any) => (
116
117
  <Item key={product.id}>
117
- <OImage source={{ uri: product.images }} style={styles.imageStyle} />
118
+ {product?.images ? (
119
+ <FastImage
120
+ style={styles.imageStyle}
121
+ source={{
122
+ uri: product?.images,
123
+ priority: FastImage.priority.normal,
124
+ // cache:FastImage.cacheControl.web
125
+ }}
126
+ resizeMode={FastImage.resizeMode.cover}
127
+ />
128
+ ) : (
129
+ <ImageBackground
130
+ style={styles.imageStyle}
131
+ source={theme.images.dummies.product}
132
+ imageStyle={{ borderRadius: 10 }}
133
+ resizeMode='cover'
134
+ />
135
+ )}
118
136
  <Details>
119
137
  <OText
120
138
  weight="500"
@@ -125,24 +143,22 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
125
143
  {product.name}
126
144
  </OText>
127
145
 
128
- {!!product?.price && (
129
- <OText>
130
- <OText
131
- color={theme.colors.primary}
132
- weight="500"
133
- >
134
- {parsePrice(product.price)}
135
- </OText>
146
+ <OText>
147
+ <OText
148
+ color={theme.colors.primary}
149
+ weight="500"
150
+ >
151
+ {parsePrice(product.price)}
152
+ </OText>
136
153
 
137
- <OText
138
- color={theme.colors.mediumGray}
139
- size={12}
140
- style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
141
- >
142
- {product?.offer_price ? ` ${parsePrice(product?.offer_price)} ` : ''}
143
- </OText>
154
+ <OText
155
+ color={theme.colors.mediumGray}
156
+ size={12}
157
+ style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
158
+ >
159
+ {product?.offer_price ? ` ${parsePrice(product?.offer_price)} ` : ''}
144
160
  </OText>
145
- )}
161
+ </OText>
146
162
  </Details>
147
163
 
148
164
  <OButton
@@ -200,24 +216,22 @@ const UpsellingProductsUI = (props: UpsellingProductsParams) => {
200
216
  {product.name}
201
217
  </OText>
202
218
 
203
- {!!product?.price && (
204
- <OText>
205
- <OText
206
- color={theme.colors.primary}
207
- weight="500"
208
- >
209
- {parsePrice(product.price)}
210
- </OText>
219
+ <OText>
220
+ <OText
221
+ color={theme.colors.primary}
222
+ weight="500"
223
+ >
224
+ {parsePrice(product.price)}
225
+ </OText>
211
226
 
212
- <OText
213
- color={theme.colors.mediumGray}
214
- size={12}
215
- style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
216
- >
217
- {product?.offer_price ? parsePrice(product?.offer_price) : ''}
218
- </OText>
227
+ <OText
228
+ color={theme.colors.mediumGray}
229
+ size={12}
230
+ style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}
231
+ >
232
+ {product?.offer_price ? parsePrice(product?.offer_price) : ''}
219
233
  </OText>
220
- )}
234
+ </OText>
221
235
  </Details>
222
236
  <OButton
223
237
  text={t('ADD_PRODUCT', 'add product')}
package/themes/single-business/src/components/OrderTypeSelector/index.tsx CHANGED
@@ -97,27 +97,27 @@ export const OrderTypeSelector = (props: any) => {
97
97
  {
98
98
  value: 1,
99
99
  content: t('DELIVERY', 'Delivery'),
100
- description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Lorem ipsum dolor sit amet, consectetur.')
100
+ description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description')
101
101
  },
102
102
  {
103
103
  value: 2,
104
104
  content: t('PICKUP', 'Pickup'),
105
- description: t('ORDERTYPE_DESCRIPTION_PICKUP', 'Lorem ipsum dolor sit amet, consectetur.')
105
+ description: t('ORDERTYPE_DESCRIPTION_PICKUP', 'Pickup description')
106
106
  },
107
107
  {
108
108
  value: 3,
109
109
  content: t('EAT_IN', 'Eat in'),
110
- description: t('ORDERTYPE_DESCRIPTION_EATIN', 'Lorem ipsum dolor sit amet, consectetur.')
110
+ description: t('ORDERTYPE_DESCRIPTION_EATIN', 'Eat in description')
111
111
  },
112
112
  {
113
113
  value: 4,
114
114
  content: t('CURBSIDE', 'Curbside'),
115
- description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', 'Lorem ipsum dolor sit amet, consectetur.')
115
+ description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', 'Curbside description')
116
116
  },
117
117
  {
118
118
  value: 5,
119
119
  content: t('DRIVE_THRU', 'Drive thru'),
120
- description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Lorem ipsum dolor sit amet, consectetur.')
120
+ description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Drive Thru description')
121
121
  }
122
122
  ]
123
123
  }