ordering-ui-react-native 0.11.27 → 0.11.31
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.
- package/package.json +1 -1
- package/themes/kiosk/src/components/BusinessMenu/index.tsx +1 -1
- package/themes/kiosk/src/components/Cart/index.tsx +7 -2
- package/themes/kiosk/src/components/CartItem/index.tsx +144 -57
- package/themes/kiosk/src/components/CartItem/styles.tsx +24 -0
- package/themes/kiosk/src/components/CategoriesMenu/index.tsx +1 -1
- package/themes/kiosk/src/components/CustomerName/index.tsx +3 -3
- package/themes/kiosk/src/components/OrderDetails/index.tsx +1 -0
- package/themes/kiosk/src/components/PaymentOptions/index.tsx +1 -1
- package/themes/kiosk/src/types/index.d.ts +3 -0
package/package.json
CHANGED
|
@@ -74,7 +74,7 @@ const BusinessMenu = (props:any): React.ReactElement => {
|
|
|
74
74
|
<Container nopadding nestedScrollEnabled>
|
|
75
75
|
<View style={{ paddingTop: 20 }}>
|
|
76
76
|
<NavBar
|
|
77
|
-
title={t('
|
|
77
|
+
title={t('MENU_V21', 'Menu')}
|
|
78
78
|
onActionLeft={goToBack}
|
|
79
79
|
includeOrderTypeSelector
|
|
80
80
|
rightComponent={cart && (
|
|
@@ -97,6 +97,7 @@ const CartUI = (props: any) => {
|
|
|
97
97
|
title={t('CONFIRM_YOUR_ORDER', 'Confirm your order')}
|
|
98
98
|
onActionLeft={goToBack}
|
|
99
99
|
style={{ height: orientationState?.dimensions?.height * 0.08 }}
|
|
100
|
+
btnStyle={{paddingLeft: 0}}
|
|
100
101
|
rightComponent={(
|
|
101
102
|
<OButton
|
|
102
103
|
text={t('CANCEL_ORDER', 'Cancel order')}
|
|
@@ -138,8 +139,12 @@ const CartUI = (props: any) => {
|
|
|
138
139
|
showsVerticalScrollIndicator={false}
|
|
139
140
|
showsHorizontalScrollIndicator={false}
|
|
140
141
|
style={{
|
|
141
|
-
minHeight: orientationState?.
|
|
142
|
-
|
|
142
|
+
minHeight: orientationState?.orientation == PORTRAIT
|
|
143
|
+
? orientationState?.dimensions?.height * 0.5
|
|
144
|
+
: orientationState?.dimensions?.height * 0.35,
|
|
145
|
+
maxHeight: orientationState?.orientation == PORTRAIT
|
|
146
|
+
? orientationState?.dimensions?.height * 0.5
|
|
147
|
+
: orientationState?.dimensions?.height * 0.35,
|
|
143
148
|
}}
|
|
144
149
|
>
|
|
145
150
|
<View
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { View } from 'react-native';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { View, Animated, TouchableOpacity } from 'react-native';
|
|
3
3
|
import { useLanguage, useUtils } from 'ordering-components/native';
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import {
|
|
6
|
+
StyledCartItem,
|
|
7
|
+
AccordionContent,
|
|
8
|
+
ProductOptionsList,
|
|
9
|
+
ProductOption,
|
|
10
|
+
ProductSubOption,
|
|
11
|
+
ProductComment
|
|
12
|
+
} from './styles';
|
|
6
13
|
import { OButton, OImage, OText } from '../shared';
|
|
7
14
|
import { Product } from '../../types';
|
|
8
15
|
import QuantityControl from '../QuantityControl';
|
|
@@ -15,6 +22,8 @@ const CartItem = (props: CartItemProps) => {
|
|
|
15
22
|
const [orientationState] = useDeviceOrientation();
|
|
16
23
|
const [{ parsePrice }] = useUtils();
|
|
17
24
|
|
|
25
|
+
const [isActive, setActiveState] = useState(false);
|
|
26
|
+
|
|
18
27
|
const {
|
|
19
28
|
isCartPending,
|
|
20
29
|
isCartProduct,
|
|
@@ -26,66 +35,144 @@ const CartItem = (props: CartItemProps) => {
|
|
|
26
35
|
isFromCheckout,
|
|
27
36
|
} = props
|
|
28
37
|
|
|
38
|
+
const productInfo = () => {
|
|
39
|
+
if (isCartProduct) {
|
|
40
|
+
const ingredients = JSON.parse(JSON.stringify(Object.values(product?.ingredients ?? {})))
|
|
41
|
+
let options = JSON.parse(JSON.stringify(Object.values(product?.options ?? {})))
|
|
42
|
+
|
|
43
|
+
options = options.map((option: any) => {
|
|
44
|
+
option.suboptions = Object.values(option.suboptions ?? {})
|
|
45
|
+
return option
|
|
46
|
+
})
|
|
47
|
+
return {
|
|
48
|
+
...productInfo,
|
|
49
|
+
ingredients,
|
|
50
|
+
options
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
return product
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const getFormattedSubOptionName = ({ quantity, name, position, price }: { quantity: number, name: string, position: string, price: number }) => {
|
|
57
|
+
const pos = position ? `(${position})` : ''
|
|
58
|
+
return `${quantity} x ${name} ${pos} +${price}`
|
|
59
|
+
}
|
|
60
|
+
|
|
29
61
|
return (
|
|
30
|
-
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
62
|
+
<>
|
|
63
|
+
<TouchableOpacity
|
|
64
|
+
onPress={() => (!product?.valid_menu && isCartProduct)
|
|
65
|
+
? {}
|
|
66
|
+
: setActiveState(!isActive)}
|
|
67
|
+
activeOpacity={1}
|
|
68
|
+
>
|
|
69
|
+
<StyledCartItem>
|
|
70
|
+
<View style={{ flexDirection: 'row' }}>
|
|
71
|
+
<OImage
|
|
72
|
+
source={{ uri: product?.images || '' }}
|
|
73
|
+
height={60}
|
|
74
|
+
width={60}
|
|
75
|
+
resizeMode="cover"
|
|
76
|
+
borderRadius={6}
|
|
77
|
+
/>
|
|
39
78
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
79
|
+
<View style={{ flexDirection: 'column', justifyContent: 'space-evenly', marginHorizontal: 15, marginTop: 10 }}>
|
|
80
|
+
<View>
|
|
81
|
+
<OText
|
|
82
|
+
style={{
|
|
83
|
+
maxWidth: orientationState?.orientation === LANDSCAPE
|
|
84
|
+
? orientationState.dimensions.width * 0.2
|
|
85
|
+
: orientationState.dimensions.width * 0.5
|
|
86
|
+
}}
|
|
87
|
+
numberOfLines={2}
|
|
88
|
+
size={18}
|
|
89
|
+
weight="700"
|
|
90
|
+
>
|
|
91
|
+
{product?.name || ''}
|
|
92
|
+
</OText>
|
|
93
|
+
</View>
|
|
53
94
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
95
|
+
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
|
|
96
|
+
<OButton
|
|
97
|
+
bgColor="transparent"
|
|
98
|
+
borderColor="transparent"
|
|
99
|
+
imgLeftSrc={theme.images.general.edit}
|
|
100
|
+
text={t('EDIT', 'Edit')}
|
|
101
|
+
style={{ justifyContent: 'flex-start', paddingLeft: 0, maxWidth: 80 }}
|
|
102
|
+
textStyle={{
|
|
103
|
+
color: theme.colors.primary,
|
|
104
|
+
marginLeft: 6,
|
|
105
|
+
}}
|
|
106
|
+
onClick={() => { onEditProduct ? onEditProduct(product) : null }}
|
|
107
|
+
/>
|
|
108
|
+
</View>
|
|
109
|
+
</View>
|
|
110
|
+
</View>
|
|
111
|
+
|
|
112
|
+
<View style={{ alignItems: "flex-end" }} >
|
|
113
|
+
<OText
|
|
114
|
+
size={18}
|
|
115
|
+
weight="700"
|
|
116
|
+
color={theme.colors.primary}
|
|
117
|
+
>
|
|
118
|
+
{parsePrice(product?.total || product?.price)}
|
|
119
|
+
</OText>
|
|
68
120
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
121
|
+
<QuantityControl
|
|
122
|
+
val={product?.quantity || 0}
|
|
123
|
+
onDecremet={(product?.quantity || 0 > 1)
|
|
124
|
+
? (() => { changeQuantity && changeQuantity(product, (product?.quantity || 0) - 1) })
|
|
125
|
+
: undefined
|
|
126
|
+
}
|
|
127
|
+
onIncrement={changeQuantity && (() => { changeQuantity(product, (product?.quantity || 0) + 1) })}
|
|
128
|
+
onDelete={onDeleteProduct && (() => { onDeleteProduct(product) })}
|
|
129
|
+
/>
|
|
130
|
+
</View>
|
|
131
|
+
</StyledCartItem>
|
|
132
|
+
</TouchableOpacity>
|
|
77
133
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
134
|
+
<View style={{ display: isActive ? 'flex' : 'none' }}>
|
|
135
|
+
<Animated.View>
|
|
136
|
+
<AccordionContent>
|
|
137
|
+
{productInfo()?.ingredients.length > 0 && productInfo()?.ingredients.some((ingredient: any) => !ingredient.selected) && (
|
|
138
|
+
<ProductOptionsList>
|
|
139
|
+
<OText size={16}>{t('INGREDIENTS', 'Ingredients')}</OText>
|
|
140
|
+
{productInfo()?.ingredients.map((ingredient: any) => !ingredient.selected && (
|
|
141
|
+
<OText size={16} key={ingredient.id} style={{ marginLeft: 10 }}>{t('NO', 'No')} {ingredient.name}</OText>
|
|
142
|
+
))}
|
|
143
|
+
</ProductOptionsList>
|
|
144
|
+
)}
|
|
145
|
+
{productInfo()?.options.length > 0 && (
|
|
146
|
+
<ProductOptionsList>
|
|
147
|
+
{productInfo()?.options.map((option: any, i: number) => (
|
|
148
|
+
<ProductOption key={option.id + i}>
|
|
149
|
+
<OText size={16}>{option.name}</OText>
|
|
150
|
+
{option.suboptions.map((suboption: any) => (
|
|
151
|
+
<ProductSubOption key={suboption.id}>
|
|
152
|
+
<OText size={16}>
|
|
153
|
+
{getFormattedSubOptionName({
|
|
154
|
+
quantity: suboption.quantity,
|
|
155
|
+
name: suboption.name,
|
|
156
|
+
position: (suboption.position !== 'whole') ? t(suboption.position.toUpperCase(), suboption.position) : '',
|
|
157
|
+
price: parsePrice(suboption.price)
|
|
158
|
+
})}
|
|
159
|
+
</OText>
|
|
160
|
+
</ProductSubOption>
|
|
161
|
+
))}
|
|
162
|
+
</ProductOption>
|
|
163
|
+
))}
|
|
164
|
+
</ProductOptionsList>
|
|
165
|
+
)}
|
|
166
|
+
{product && product?.comment && (
|
|
167
|
+
<ProductComment>
|
|
168
|
+
<OText size={16}>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
|
|
169
|
+
<OText size={16}>{product.comment}</OText>
|
|
170
|
+
</ProductComment>
|
|
171
|
+
)}
|
|
172
|
+
</AccordionContent>
|
|
173
|
+
</Animated.View>
|
|
87
174
|
</View>
|
|
88
|
-
|
|
175
|
+
</>
|
|
89
176
|
);
|
|
90
177
|
}
|
|
91
178
|
|
|
@@ -7,3 +7,27 @@ export const StyledCartItem = styled.View`
|
|
|
7
7
|
justify-content: space-between;
|
|
8
8
|
margin-bottom: 14px;
|
|
9
9
|
`
|
|
10
|
+
|
|
11
|
+
export const AccordionContent = styled.View`
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
align-items: flex-start;
|
|
14
|
+
`
|
|
15
|
+
|
|
16
|
+
export const ProductOptionsList = styled.View`
|
|
17
|
+
margin-left: 20px;
|
|
18
|
+
margin-bottom: 10px;
|
|
19
|
+
align-items: flex-start;
|
|
20
|
+
`
|
|
21
|
+
|
|
22
|
+
export const ProductOption = styled.View`
|
|
23
|
+
align-items: flex-start;
|
|
24
|
+
`
|
|
25
|
+
|
|
26
|
+
export const ProductSubOption = styled.View`
|
|
27
|
+
align-items: flex-start;
|
|
28
|
+
margin-left: 10px;
|
|
29
|
+
`
|
|
30
|
+
|
|
31
|
+
export const ProductComment = styled.View`
|
|
32
|
+
align-items: flex-start;
|
|
33
|
+
`
|
|
@@ -90,7 +90,7 @@ const CategoriesMenu = (props: any): React.ReactElement => {
|
|
|
90
90
|
<Container nopadding nestedScrollEnabled>
|
|
91
91
|
<View style={{ paddingTop: 20 }}>
|
|
92
92
|
<NavBar
|
|
93
|
-
title={t('
|
|
93
|
+
title={t('CATEGORY_X_ID', 'Category')}
|
|
94
94
|
onActionLeft={goToBack}
|
|
95
95
|
rightComponent={cart && (
|
|
96
96
|
<TouchableOpacity
|
|
@@ -110,13 +110,13 @@ const CustomerName = (props: Props): React.ReactElement => {
|
|
|
110
110
|
name="name"
|
|
111
111
|
rules={{
|
|
112
112
|
required: t(
|
|
113
|
-
'
|
|
113
|
+
'VALIDATION_ERROR_REQUIRED',
|
|
114
114
|
'The field Customer Name is required',
|
|
115
|
-
).replace('_attribute_', t('
|
|
115
|
+
).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
|
|
116
116
|
pattern: {
|
|
117
117
|
value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
|
|
118
118
|
message: t(
|
|
119
|
-
'
|
|
119
|
+
'INVALID_ERROR',
|
|
120
120
|
'Invalid name',
|
|
121
121
|
).replace('_attribute_', t('NAME', 'Name')),
|
|
122
122
|
}
|
|
@@ -391,6 +391,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
391
391
|
<OText
|
|
392
392
|
color={theme.colors.primary}
|
|
393
393
|
weight="bold"
|
|
394
|
+
mRight={30}
|
|
394
395
|
>
|
|
395
396
|
{parsePrice((order?.summary?.total || order?.total) - (order?.summary?.discount || order?.discount))}
|
|
396
397
|
</OText>
|
|
@@ -160,7 +160,7 @@ const PaymentOptionsUI = (props: any) => {
|
|
|
160
160
|
),
|
|
161
161
|
bgImage: theme.images.general.carddelivery,
|
|
162
162
|
icon: theme.images.general.pushPin,
|
|
163
|
-
callToActionText: t("
|
|
163
|
+
callToActionText: t("LETS_GO", "Let's go"),
|
|
164
164
|
onClick: () => onSelectPaymethod(supportedMethods[cardOnDeliveryIndex], false),
|
|
165
165
|
...supportedMethods[cardOnDeliveryIndex],
|
|
166
166
|
}
|