ordering-ui-react-native 0.11.27 → 0.11.28
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
CHANGED
|
@@ -138,7 +138,7 @@ const CartUI = (props: any) => {
|
|
|
138
138
|
showsVerticalScrollIndicator={false}
|
|
139
139
|
showsHorizontalScrollIndicator={false}
|
|
140
140
|
style={{
|
|
141
|
-
minHeight: orientationState?.dimensions?.height * 0.
|
|
141
|
+
minHeight: orientationState?.dimensions?.height * 0.5,
|
|
142
142
|
maxHeight: orientationState?.dimensions?.height * 0.5,
|
|
143
143
|
}}
|
|
144
144
|
>
|
|
@@ -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>{t('INGREDIENTS', 'Ingredients')}</OText>
|
|
140
|
+
{productInfo()?.ingredients.map((ingredient: any) => !ingredient.selected && (
|
|
141
|
+
<OText 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>{option.name}</OText>
|
|
150
|
+
{option.suboptions.map((suboption: any) => (
|
|
151
|
+
<ProductSubOption key={suboption.id}>
|
|
152
|
+
<OText>
|
|
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>{t('SPECIAL_COMMENT', 'Special Comment')}</OText>
|
|
169
|
+
<OText>{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
|
+
`
|