ordering-ui-react-native 0.15.92 → 0.15.93

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 (11) hide show
  1. package/package.json +1 -1
  2. package/src/components/SingleProductCard/index.tsx +16 -4
  3. package/themes/kiosk/src/components/BusinessMenu/index.tsx +23 -25
  4. package/themes/kiosk/src/components/BusinessesListing/index.tsx +2 -3
  5. package/themes/kiosk/src/components/Cart/index.tsx +10 -11
  6. package/themes/kiosk/src/components/CategoriesMenu/index.tsx +36 -30
  7. package/themes/kiosk/src/components/Checkout/index.tsx +22 -19
  8. package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx +1 -1
  9. package/themes/kiosk/src/components/PaymentOptions/index.tsx +54 -52
  10. package/themes/kiosk/src/components/ProductOptionSubOption/index.tsx +3 -1
  11. package/themes/original/src/components/DriverTips/index.tsx +6 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.15.92",
3
+ "version": "0.15.93",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/src/components/SingleProductCard/index.tsx CHANGED
@@ -10,6 +10,7 @@ import {
10
10
  import { StyleSheet } from 'react-native'
11
11
  import { OText, OIcon } from '../shared'
12
12
  import { useTheme } from 'styled-components/native'
13
+ import FastImage from 'react-native-fast-image'
13
14
 
14
15
  export const SingleProductCard = (props: SingleProductCardParams) => {
15
16
  const {
@@ -77,10 +78,21 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
77
78
  activeOpacity={1}
78
79
  onPress={() => onProductClick?.(product)}
79
80
  >
80
- <OIcon
81
- url={optimizeImage(product?.images, 'h_200,c_limit')}
82
- style={styles.productStyle}
83
- />
81
+ {product?.images ? (
82
+ <FastImage
83
+ style={styles.productStyle}
84
+ source={{
85
+ uri: optimizeImage(product?.images, 'h_250,c_limit'),
86
+ priority: FastImage.priority.normal,
87
+ }}
88
+ resizeMode={FastImage.resizeMode.cover}
89
+ />
90
+ ) : (
91
+ <OIcon
92
+ src={theme?.images?.dummies?.product}
93
+ style={styles.productStyle}
94
+ />
95
+ )}
84
96
  <CardInfo>
85
97
  <OText numberOfLines={1} ellipsizeMode='tail' style={styles.textStyle}>{product?.name}</OText>
86
98
  <OText size={12} numberOfLines={2} ellipsizeMode='tail' style={styles.textStyle}>{product?.description}</OText>
package/themes/kiosk/src/components/BusinessMenu/index.tsx CHANGED
@@ -120,32 +120,30 @@ const BusinessMenu = (props:any): React.ReactElement => {
120
120
  }}
121
121
  >
122
122
  <Container nopadding nestedScrollEnabled>
123
- <View style={{ paddingTop: 20 }}>
124
- <NavBar
125
- title={t('MENU_V21', 'Menu')}
126
- onActionLeft={goToBack}
127
- includeOrderTypeSelector
128
- onClickTypes={handleRedirect}
129
- rightComponent={cart && (
130
- <TouchableOpacity
131
- style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
132
- onPress={onToggleCart}
123
+ <NavBar
124
+ title={t('MENU_V21', 'Menu')}
125
+ onActionLeft={goToBack}
126
+ includeOrderTypeSelector
127
+ onClickTypes={handleRedirect}
128
+ rightComponent={cart && (
129
+ <TouchableOpacity
130
+ style={{ flexDirection: 'row', alignItems: 'center' }}
131
+ onPress={onToggleCart}
132
+ >
133
+ <OText
134
+ color={theme.colors.mediumGray}
133
135
  >
134
- <OText
135
- color={theme.colors.mediumGray}
136
- >
137
- {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
138
- </OText>
139
-
140
- <MaterialIcon
141
- name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
142
- color={theme.colors.primary}
143
- size={30}
144
- />
145
- </TouchableOpacity>
146
- )}
147
- />
148
- </View>
136
+ {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
137
+ </OText>
138
+
139
+ <MaterialIcon
140
+ name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
141
+ color={theme.colors.primary}
142
+ size={30}
143
+ />
144
+ </TouchableOpacity>
145
+ )}
146
+ />
149
147
 
150
148
  <BusinessProductsListing
151
149
  { ...businessProductsListingProps }
package/themes/kiosk/src/components/BusinessesListing/index.tsx CHANGED
@@ -1,5 +1,5 @@
1
- import React, { useEffect, useState } from 'react';
2
- import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
1
+ import React from 'react';
2
+ import { PlaceholderLine } from 'rn-placeholder';
3
3
  import { View, ScrollView, Platform } from 'react-native';
4
4
  import { useTheme } from 'styled-components/native';
5
5
  import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
@@ -21,7 +21,6 @@ const BusinessesListingUI = (props: any) => {
21
21
  navigation,
22
22
  businessesList,
23
23
  handleBusinessClick,
24
- paginationProps,
25
24
  } = props;
26
25
 
27
26
  const theme = useTheme();
package/themes/kiosk/src/components/Cart/index.tsx CHANGED
@@ -110,7 +110,6 @@ const CartUI = (props: any) => {
110
110
  <NavBar
111
111
  title={t('CONFIRM_YOUR_ORDER', 'Confirm your order')}
112
112
  onActionLeft={goToBack}
113
- style={{ height: orientationState?.dimensions?.height * 0.08 }}
114
113
  btnStyle={{ paddingLeft: 0 }}
115
114
  rightComponent={(
116
115
  <OButton
@@ -238,8 +237,8 @@ const CartUI = (props: any) => {
238
237
  </OSTable>
239
238
  )}
240
239
  {
241
- cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any) => (
242
- <OSTable key={offer.id}>
240
+ cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 1)?.map((offer: any, i: number) => (
241
+ <OSTable key={`${offer?.id}_${i}`}>
243
242
  <OSRow>
244
243
  <OText>{offer.name}</OText>
245
244
  {offer.rate_type === 1 && (
@@ -263,8 +262,8 @@ const CartUI = (props: any) => {
263
262
  </OSTable>
264
263
  )}
265
264
  {
266
- cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any) => (
267
- <OSTable key={tax.id}>
265
+ cart.taxes?.length > 0 && cart.taxes.filter((tax: any) => tax.type === 2 && tax?.rate !== 0).map((tax: any, i: number) => (
266
+ <OSTable key={`${tax?.id}_${i}`}>
268
267
  <OSRow>
269
268
  <OText>
270
269
  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -276,8 +275,8 @@ const CartUI = (props: any) => {
276
275
  ))
277
276
  }
278
277
  {
279
- cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any) => (
280
- <OSTable key={fee?.id}>
278
+ cart?.fees?.length > 0 && cart?.fees?.filter((fee: any) => !(fee.fixed === 0 && fee.percentage === 0)).map((fee: any, i: number) => (
279
+ <OSTable key={`${fee?.id}_${i}`}>
281
280
  <OSRow>
282
281
  <OText>
283
282
  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}{' '}
@@ -289,8 +288,8 @@ const CartUI = (props: any) => {
289
288
  ))
290
289
  }
291
290
  {
292
- cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any) => (
293
- <OSTable key={offer.id}>
291
+ cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 3)?.map((offer: any, i: number) => (
292
+ <OSTable key={`${offer?.id}_${i}`}>
294
293
  <OSRow>
295
294
  <OText>{offer.name}</OText>
296
295
  {offer.rate_type === 1 && (
@@ -310,8 +309,8 @@ const CartUI = (props: any) => {
310
309
  </OSTable>
311
310
  )}
312
311
  {
313
- cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any) => (
314
- <OSTable key={offer.id}>
312
+ cart?.offers?.length > 0 && cart?.offers?.filter((offer: any) => offer?.target === 2)?.map((offer: any, i: number) => (
313
+ <OSTable key={`${offer?.id}_${i}`}>
315
314
  <OSRow>
316
315
  <OText>{offer.name}</OText>
317
316
  {offer.rate_type === 1 && (
package/themes/kiosk/src/components/CategoriesMenu/index.tsx CHANGED
@@ -12,6 +12,7 @@ import {
12
12
  OText
13
13
  } from '../../components/shared';
14
14
  import { CartBottomSheet } from '../../components/CartBottomSheet';
15
+ import { NotFoundSource } from '../NotFoundSource';
15
16
  import { Category } from '../../types';
16
17
  import { CartContent } from '../../components/CartContent';
17
18
  import { TouchableOpacity } from 'react-native-gesture-handler';
@@ -112,37 +113,36 @@ const CategoriesMenu = (props: any): React.ReactElement => {
112
113
  }}
113
114
  >
114
115
  <Container nopadding nestedScrollEnabled>
115
- <View style={{ paddingTop: 20 }}>
116
- <NavBar
117
- title={categories[curIndexCateg].name}
118
- onActionLeft={goToBack}
119
- rightComponent={cart && (
120
- <TouchableOpacity
121
- style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
122
- onPress={onToggleCart}
116
+ <NavBar
117
+ title={categories[curIndexCateg].name}
118
+ onActionLeft={goToBack}
119
+ rightComponent={cart && (
120
+ <TouchableOpacity
121
+ style={{ paddingHorizontal: 20, flexDirection: 'row', alignItems: 'center' }}
122
+ onPress={onToggleCart}
123
+ >
124
+ <OText
125
+ color={theme.colors.mediumGray}
123
126
  >
124
- <OText
125
- color={theme.colors.mediumGray}
126
- >
127
- {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
128
- </OText>
129
-
130
- <MaterialIcon
131
- name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
132
- color={theme.colors.primary}
133
- size={30}
134
- />
135
- </TouchableOpacity>
136
- )}
137
- />
138
- <OSegment
139
- items={categories.map((category) => ({
140
- text: category.name
141
- }))}
142
- selectedIdx={curIndexCateg}
143
- onSelectItem={onChangeTabs}
144
- />
145
- </View>
127
+ {`${cart?.products?.length || 0} ${t('ITEMS', 'items')}`} {parsePrice(cart?.total || 0)} {' '}
128
+ </OText>
129
+
130
+ <MaterialIcon
131
+ name={bottomSheetVisibility ? "cart-off" : "cart-outline"}
132
+ color={theme.colors.primary}
133
+ size={30}
134
+ />
135
+ </TouchableOpacity>
136
+ )}
137
+ />
138
+
139
+ <OSegment
140
+ items={categories.map((category) => ({
141
+ text: category.name
142
+ }))}
143
+ selectedIdx={curIndexCateg}
144
+ onSelectItem={onChangeTabs}
145
+ />
146
146
 
147
147
  <GridContainer
148
148
  style={{
@@ -182,6 +182,12 @@ const CategoriesMenu = (props: any): React.ReactElement => {
182
182
  }}
183
183
  />
184
184
  ))}
185
+
186
+ {categories[curIndexCateg].products.length === 0 && (
187
+ <NotFoundSource
188
+ content={t('ERROR_NOT_FOUND_PRODUCTS_TIME', 'No products found at this time')}
189
+ />
190
+ )}
185
191
  </GridContainer>
186
192
  </Container>
187
193
  </View>
package/themes/kiosk/src/components/Checkout/index.tsx CHANGED
@@ -36,27 +36,30 @@ const CheckoutUI = (props: any) => {
36
36
 
37
37
  const [errorCash, setErrorCash] = useState(false);
38
38
 
39
+ useEffect(() => {
40
+ if (!cartState.loading && cart && !cart?.valid && cart?.status === 2) {
41
+ navigation?.canGoBack() && navigation.goBack()
42
+ }
43
+ }, [cart])
44
+
39
45
  return (
40
46
  <>
41
- {!cartState.loading && cart && cart?.status !== 2 && cart?.valid && (
42
- <PaymentOptions
43
- navigation={navigation}
44
- cart={cart}
45
- errors={errors}
46
- onPaymentChange={handlePaymethodChange}
47
- onNavigationRedirect={onNavigationRedirect}
48
- paySelected={paymethodSelected}
49
- handlerClickPlaceOrder={handlerClickPlaceOrder}
50
- placing={placing}
51
-
52
- errorCash={errorCash}
53
- isDisabled={cart?.status === 2}
54
- businessId={businessDetails?.business?.id}
55
- isLoading={businessDetails.loading}
56
- paymethods={businessDetails?.business?.paymethods}
57
- setErrorCash={setErrorCash}
58
- />
59
- )}
47
+ <PaymentOptions
48
+ navigation={navigation}
49
+ cart={cart}
50
+ errors={errors}
51
+ onPaymentChange={handlePaymethodChange}
52
+ onNavigationRedirect={onNavigationRedirect}
53
+ paySelected={paymethodSelected}
54
+ handlerClickPlaceOrder={handlerClickPlaceOrder}
55
+ placing={placing}
56
+ errorCash={errorCash}
57
+ isDisabled={cart?.status === 2}
58
+ businessId={businessDetails?.business?.id}
59
+ isLoading={cartState.loading || businessDetails.loading}
60
+ paymethods={businessDetails?.business?.paymethods}
61
+ setErrorCash={setErrorCash}
62
+ />
60
63
  </>
61
64
  )
62
65
  }
package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx CHANGED
@@ -59,7 +59,7 @@ const OrderTypeSelectorCardUI = (props: OrderTypeSelectParams) => {
59
59
  <Container>
60
60
  <NavBar
61
61
  title={t('ORDER_TYPE_X_ID', 'Order type')}
62
- {...(goBack && { onActionLeft: goBack })}
62
+ onActionLeft={goBack}
63
63
  btnStyle={{ paddingLeft: 0 }}
64
64
  />
65
65
 
package/themes/kiosk/src/components/PaymentOptions/index.tsx CHANGED
@@ -192,64 +192,66 @@ const PaymentOptionsUI = (props: any) => {
192
192
  <Spinner visible={isLoading || placing || paymethodsList?.loading} />
193
193
 
194
194
  <Container nestedScrollEnabled>
195
- <NavBar
196
- title={t('PAYMENT_METHODS', 'Payment methods')}
197
- onActionLeft={goToBack}
198
- btnStyle={{ paddingLeft: 0 }}
199
- />
200
-
201
- <View
202
- style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
203
- <OText size={orientationState?.dimensions?.width * 0.048}>
204
- {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
205
- <OText
206
- size={orientationState?.dimensions?.width * 0.048}
207
- weight={'700'}>
208
- {`${t('LIKE_TO_PAY', 'like to pay')}?`}
209
- </OText>
210
- </OText>
211
- </View>
212
-
213
195
  {supportedMethods?.length > 0 && (
214
- <GridContainer style={{ justifyContent: 'space-between' }}>
215
- {propsOfItems.CARD_ON_DELIVERY_ID && (
216
- <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
217
- <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
218
- </View>
219
- )}
196
+ <>
197
+ <NavBar
198
+ title={t('PAYMENT_METHODS', 'Payment methods')}
199
+ onActionLeft={goToBack}
200
+ btnStyle={{ paddingLeft: 0 }}
201
+ />
220
202
 
221
203
  <View
222
- style={{
223
- width:
224
- orientationState?.orientation === LANDSCAPE
225
- ? orientationState?.dimensions?.width * 0.0016
226
- : 1,
227
- height:
228
- orientationState?.orientation === PORTRAIT
229
- ? orientationState?.dimensions?.height * 0.018
230
- : 1,
231
- }}
232
- />
204
+ style={{ marginVertical: orientationState?.dimensions?.height * 0.03 }}>
205
+ <OText size={orientationState?.dimensions?.width * 0.048}>
206
+ {t('HOW_WOULD_YOU', 'How would you')} {'\n'}
207
+ <OText
208
+ size={orientationState?.dimensions?.width * 0.048}
209
+ weight={'700'}>
210
+ {`${t('LIKE_TO_PAY', 'like to pay')}?`}
211
+ </OText>
212
+ </OText>
213
+ </View>
233
214
 
234
- {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
215
+ <GridContainer style={{ justifyContent: 'space-between' }}>
216
+ {propsOfItems.CARD_ON_DELIVERY_ID && (
217
+ <View style={{ marginBottom: orientationState?.orientation === LANDSCAPE ? 20 : 0 }}>
218
+ <OptionCard {...propsOfItems?.CARD_ON_DELIVERY_ID} styke />
219
+ </View>
220
+ )}
235
221
 
236
- <View
237
- style={{
238
- width:
239
- orientationState?.orientation === LANDSCAPE
240
- ? orientationState?.dimensions?.width * 0.0016
241
- : 1,
242
- height:
243
- orientationState?.orientation === PORTRAIT
244
- ? orientationState?.dimensions?.height * 0.018
245
- : 1,
246
- }}
247
- />
222
+ <View
223
+ style={{
224
+ width:
225
+ orientationState?.orientation === LANDSCAPE
226
+ ? orientationState?.dimensions?.width * 0.0016
227
+ : 1,
228
+ height:
229
+ orientationState?.orientation === PORTRAIT
230
+ ? orientationState?.dimensions?.height * 0.018
231
+ : 1,
232
+ }}
233
+ />
234
+
235
+ {propsOfItems?.CASH_ID && <OptionCard {...propsOfItems?.CASH_ID} />}
236
+
237
+ <View
238
+ style={{
239
+ width:
240
+ orientationState?.orientation === LANDSCAPE
241
+ ? orientationState?.dimensions?.width * 0.0016
242
+ : 1,
243
+ height:
244
+ orientationState?.orientation === PORTRAIT
245
+ ? orientationState?.dimensions?.height * 0.018
246
+ : 1,
247
+ }}
248
+ />
248
249
 
249
- {propsOfItems.STRIPE && (
250
- <OptionCard {...propsOfItems?.STRIPE} />
251
- )}
252
- </GridContainer>
250
+ {propsOfItems.STRIPE && (
251
+ <OptionCard {...propsOfItems?.STRIPE} />
252
+ )}
253
+ </GridContainer>
254
+ </>
253
255
  )}
254
256
  <View style={{ height: orientationState?.dimensions?.height * 0.05 }} />
255
257
  <OModal
package/themes/kiosk/src/components/ProductOptionSubOption/index.tsx CHANGED
@@ -144,13 +144,15 @@ export const ProductOptionSubOptionUI = (props: any) => {
144
144
  </PositionControl>
145
145
  )
146
146
  }
147
+ {price > 0 && (
147
148
  <OText
148
149
  color="#909BA9"
149
150
  size={16}
150
151
  weight="bold"
151
152
  >
152
- {price > 0 && '+'} {parsePrice(price)}
153
+ + {parsePrice(price)}
153
154
  </OText>
155
+ )}
154
156
  </RightSide>
155
157
  </Container>
156
158
  )
package/themes/original/src/components/DriverTips/index.tsx CHANGED
@@ -59,11 +59,14 @@ const DriverTipsUI = (props: any) => {
59
59
  tip = isNaN(tip) ? 0 : tip
60
60
  setvalue(tip)
61
61
  }
62
-
62
+
63
63
  return (
64
64
  <DTContainer>
65
+ <DTLabel>
66
+ {t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
67
+ </DTLabel>
65
68
  <DTWrapperTips>
66
- {driverTipsOptions.map((option: any, i: number) => (
69
+ {!isDriverTipUseCustom && driverTipsOptions.map((option: any, i: number) => (
67
70
  <TouchableOpacity
68
71
  key={i}
69
72
  onPress={() => handlerChangeOption(option)}
@@ -79,7 +82,7 @@ const DriverTipsUI = (props: any) => {
79
82
  </TouchableOpacity>
80
83
  ))}
81
84
  </DTWrapperTips>
82
- {!driverTipsOptions.includes(driverTip) && driverTip > 0 && (
85
+ {(!isDriverTipUseCustom && !driverTipsOptions.includes(driverTip) && driverTip > 0) && (
83
86
  <OText
84
87
  color={theme.colors.error}
85
88
  size={16}
@@ -90,9 +93,6 @@ const DriverTipsUI = (props: any) => {
90
93
  )}
91
94
  {isDriverTipUseCustom && (
92
95
  <DTForm>
93
- <DTLabel>
94
- {t('CUSTOM_DRIVER_TIP_MESSAGE', '100% of these tips go directly to your driver')}
95
- </DTLabel>
96
96
  <DTWrapperInput>
97
97
  <OInput
98
98
  placeholder={placeholderCurrency}