ordering-ui-react-native 0.14.33 → 0.14.34
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/src/components/ProductForm/index.tsx +41 -2
- package/src/components/ProductForm/styles.tsx +1 -1
- package/themes/doordash/src/components/ProductForm/index.tsx +41 -2
- package/themes/doordash/src/components/ProductForm/styles.tsx +1 -1
- package/themes/instacart/src/components/ProductForm/index.tsx +40 -1
- package/themes/instacart/src/components/ProductForm/styles.tsx +1 -1
- package/themes/original/src/components/Checkout/styles.tsx +1 -0
- package/themes/original/src/components/LoginForm/index.tsx +50 -49
- package/themes/original/src/components/PaymentOptionWallet/index.tsx +4 -4
- package/themes/original/src/components/PaymentOptionWallet/styles.tsx +1 -0
- package/themes/original/src/components/ProductForm/index.tsx +39 -0
- package/themes/original/src/components/ProductForm/styles.tsx +1 -1
- package/themes/uber-eats/src/components/ProductForm/index.tsx +43 -2
package/package.json
CHANGED
|
@@ -27,7 +27,7 @@ import {
|
|
|
27
27
|
ProductComment,
|
|
28
28
|
ProductActions
|
|
29
29
|
} from './styles'
|
|
30
|
-
import { OButton, OInput, OText } from '../shared'
|
|
30
|
+
import { OButton, OIcon, OInput, OText } from '../shared'
|
|
31
31
|
import { ProductOptionSubOption } from '../ProductOptionSubOption'
|
|
32
32
|
import { NotFoundSource } from '../NotFoundSource'
|
|
33
33
|
import { Placeholder,PlaceholderLine,Fade } from 'rn-placeholder'
|
|
@@ -58,7 +58,7 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
58
58
|
|
|
59
59
|
const theme = useTheme();
|
|
60
60
|
|
|
61
|
-
const [{ parsePrice }] = useUtils()
|
|
61
|
+
const [{ optimizeImage, parsePrice }] = useUtils()
|
|
62
62
|
const [, t] = useLanguage()
|
|
63
63
|
const [orderState] = useOrder()
|
|
64
64
|
const [{ auth }] = useSession()
|
|
@@ -165,6 +165,31 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
165
165
|
<ProductDescription>
|
|
166
166
|
<OText>{product?.description || productCart?.description}</OText>
|
|
167
167
|
</ProductDescription>
|
|
168
|
+
<ScrollView
|
|
169
|
+
horizontal
|
|
170
|
+
showsHorizontalScrollIndicator={false}
|
|
171
|
+
contentContainerStyle={{ paddingBottom: 20 }}
|
|
172
|
+
>
|
|
173
|
+
{product?.tags?.map((tag: any) => (
|
|
174
|
+
<View
|
|
175
|
+
key={tag.id}
|
|
176
|
+
style={styles.productTagWrapper}
|
|
177
|
+
>
|
|
178
|
+
{tag?.image ? (
|
|
179
|
+
<OIcon
|
|
180
|
+
url={optimizeImage(tag?.image, 'h_40,c_limit')}
|
|
181
|
+
style={styles.productTagImageStyle}
|
|
182
|
+
/>
|
|
183
|
+
) : (
|
|
184
|
+
<OIcon
|
|
185
|
+
src={theme.images?.dummies?.product}
|
|
186
|
+
style={styles.productTagImageStyle}
|
|
187
|
+
/>
|
|
188
|
+
)}
|
|
189
|
+
<OText size={14} style={styles.productTagNameStyle}>{tag.name}</OText>
|
|
190
|
+
</View>
|
|
191
|
+
))}
|
|
192
|
+
</ScrollView>
|
|
168
193
|
{loading && !product ? (
|
|
169
194
|
<>
|
|
170
195
|
{[...Array(2)].map((item, i) => (
|
|
@@ -391,6 +416,20 @@ const styles = StyleSheet.create({
|
|
|
391
416
|
},
|
|
392
417
|
caloriesStyle: {
|
|
393
418
|
color: '#808080'
|
|
419
|
+
},
|
|
420
|
+
productTagWrapper: {
|
|
421
|
+
flexDirection: 'row',
|
|
422
|
+
alignItems: 'center'
|
|
423
|
+
},
|
|
424
|
+
productTagImageStyle: {
|
|
425
|
+
width: 32,
|
|
426
|
+
height: 32,
|
|
427
|
+
borderRadius: 8,
|
|
428
|
+
resizeMode: 'cover'
|
|
429
|
+
},
|
|
430
|
+
productTagNameStyle: {
|
|
431
|
+
paddingHorizontal: 6,
|
|
432
|
+
marginRight: 5
|
|
394
433
|
}
|
|
395
434
|
})
|
|
396
435
|
|
|
@@ -100,9 +100,23 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
100
100
|
zIndex: 0
|
|
101
101
|
},
|
|
102
102
|
closeButton: { width: 11, height: 32, backgroundColor: theme.colors.white, alignItems: 'center', justifyContent: 'center' },
|
|
103
|
-
quantityWrap: { width: 40, height: 24, alignItems: 'center', justifyContent: 'center', borderRadius: 7.6, backgroundColor: theme.colors.inputDisabled }
|
|
103
|
+
quantityWrap: { width: 40, height: 24, alignItems: 'center', justifyContent: 'center', borderRadius: 7.6, backgroundColor: theme.colors.inputDisabled },
|
|
104
|
+
productTagWrapper: {
|
|
105
|
+
flexDirection: 'row',
|
|
106
|
+
alignItems: 'center'
|
|
107
|
+
},
|
|
108
|
+
productTagImageStyle: {
|
|
109
|
+
width: 32,
|
|
110
|
+
height: 32,
|
|
111
|
+
borderRadius: 8,
|
|
112
|
+
resizeMode: 'cover'
|
|
113
|
+
},
|
|
114
|
+
productTagNameStyle: {
|
|
115
|
+
paddingHorizontal: 6,
|
|
116
|
+
marginRight: 5
|
|
117
|
+
}
|
|
104
118
|
})
|
|
105
|
-
const [{ parsePrice }] = useUtils()
|
|
119
|
+
const [{ optimizeImage, parsePrice }] = useUtils()
|
|
106
120
|
const [, t] = useLanguage()
|
|
107
121
|
const [orderState] = useOrder()
|
|
108
122
|
const [{ auth }] = useSession()
|
|
@@ -215,6 +229,31 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
215
229
|
<OText color={theme.colors.textSecondary}>{product?.description || productCart?.description}</OText>
|
|
216
230
|
</ProductDescription>
|
|
217
231
|
)}
|
|
232
|
+
<ScrollView
|
|
233
|
+
horizontal
|
|
234
|
+
showsHorizontalScrollIndicator={false}
|
|
235
|
+
contentContainerStyle={{ paddingBottom: 20 }}
|
|
236
|
+
>
|
|
237
|
+
{product?.tags?.map((tag: any) => (
|
|
238
|
+
<View
|
|
239
|
+
key={tag.id}
|
|
240
|
+
style={styles.productTagWrapper}
|
|
241
|
+
>
|
|
242
|
+
{tag?.image ? (
|
|
243
|
+
<OIcon
|
|
244
|
+
url={optimizeImage(tag?.image, 'h_40,c_limit')}
|
|
245
|
+
style={styles.productTagImageStyle}
|
|
246
|
+
/>
|
|
247
|
+
) : (
|
|
248
|
+
<OIcon
|
|
249
|
+
src={theme.images?.dummies?.product}
|
|
250
|
+
style={styles.productTagImageStyle}
|
|
251
|
+
/>
|
|
252
|
+
)}
|
|
253
|
+
<OText color={theme.colors.textSecondary} style={styles.productTagNameStyle}>{tag.name}</OText>
|
|
254
|
+
</View>
|
|
255
|
+
))}
|
|
256
|
+
</ScrollView>
|
|
218
257
|
{loading && !product ? (
|
|
219
258
|
<>
|
|
220
259
|
{[...Array(2)].map((item, i) => (
|
|
@@ -59,7 +59,7 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
59
59
|
|
|
60
60
|
const theme = useTheme();
|
|
61
61
|
|
|
62
|
-
const [{ parsePrice }] = useUtils()
|
|
62
|
+
const [{ optimizeImage, parsePrice }] = useUtils()
|
|
63
63
|
const [, t] = useLanguage()
|
|
64
64
|
const [orderState] = useOrder()
|
|
65
65
|
const [{ auth }] = useSession()
|
|
@@ -162,6 +162,31 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
162
162
|
<OText mBottom={7} style={{ ...theme.labels.small }} color={theme.colors.textSecondary}>{product?.description?.trim() || productCart?.description?.trim()}</OText>
|
|
163
163
|
</ProductDescription>
|
|
164
164
|
)}
|
|
165
|
+
<ScrollView
|
|
166
|
+
horizontal
|
|
167
|
+
showsHorizontalScrollIndicator={false}
|
|
168
|
+
contentContainerStyle={{ paddingBottom: 20 }}
|
|
169
|
+
>
|
|
170
|
+
{product?.tags?.map((tag: any) => (
|
|
171
|
+
<View
|
|
172
|
+
key={tag.id}
|
|
173
|
+
style={styles.productTagWrapper}
|
|
174
|
+
>
|
|
175
|
+
{tag?.image ? (
|
|
176
|
+
<OIcon
|
|
177
|
+
url={optimizeImage(tag?.image, 'h_40,c_limit')}
|
|
178
|
+
style={styles.productTagImageStyle}
|
|
179
|
+
/>
|
|
180
|
+
) : (
|
|
181
|
+
<OIcon
|
|
182
|
+
src={theme.images?.dummies?.product}
|
|
183
|
+
style={styles.productTagImageStyle}
|
|
184
|
+
/>
|
|
185
|
+
)}
|
|
186
|
+
<OText color={theme.colors.textSecondary} style={{ ...styles.productTagNameStyle, ...theme.labels.small}}>{tag.name}</OText>
|
|
187
|
+
</View>
|
|
188
|
+
))}
|
|
189
|
+
</ScrollView>
|
|
165
190
|
<View style={{ height: 16, backgroundColor: theme.colors.secundary, marginHorizontal: -40, marginBottom: 20 }} />
|
|
166
191
|
{loading && !product ? (
|
|
167
192
|
<>
|
|
@@ -392,6 +417,20 @@ const styles = StyleSheet.create({
|
|
|
392
417
|
paddingStart: 4,
|
|
393
418
|
paddingEnd: 4,
|
|
394
419
|
borderWidth: 1
|
|
420
|
+
},
|
|
421
|
+
productTagWrapper: {
|
|
422
|
+
flexDirection: 'row',
|
|
423
|
+
alignItems: 'center'
|
|
424
|
+
},
|
|
425
|
+
productTagImageStyle: {
|
|
426
|
+
width: 32,
|
|
427
|
+
height: 32,
|
|
428
|
+
borderRadius: 8,
|
|
429
|
+
resizeMode: 'cover'
|
|
430
|
+
},
|
|
431
|
+
productTagNameStyle: {
|
|
432
|
+
paddingHorizontal: 6,
|
|
433
|
+
marginRight: 5
|
|
395
434
|
}
|
|
396
435
|
})
|
|
397
436
|
|
|
@@ -436,59 +436,60 @@ const LoginFormUI = (props: LoginParams) => {
|
|
|
436
436
|
</>
|
|
437
437
|
)}
|
|
438
438
|
|
|
439
|
-
<View
|
|
440
|
-
style={{
|
|
441
|
-
flexDirection: 'row',
|
|
442
|
-
width: '100%',
|
|
443
|
-
justifyContent: 'space-between',
|
|
444
|
-
alignItems: 'center',
|
|
445
|
-
marginVertical: 15
|
|
446
|
-
}}>
|
|
447
|
-
<View style={loginStyle.line} />
|
|
448
|
-
<OText
|
|
449
|
-
size={14}
|
|
450
|
-
mBottom={10}
|
|
451
|
-
style={{ paddingHorizontal: 19 }}
|
|
452
|
-
color={theme.colors.disabled}>
|
|
453
|
-
{t('OR', 'or')}
|
|
454
|
-
</OText>
|
|
455
|
-
<View style={loginStyle.line} />
|
|
456
|
-
</View>
|
|
457
|
-
|
|
458
439
|
{configs && Object.keys(configs).length > 0 ? (
|
|
459
440
|
(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
|
|
460
441
|
(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
|
|
461
442
|
(
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
443
|
+
<>
|
|
444
|
+
<View
|
|
445
|
+
style={{
|
|
446
|
+
flexDirection: 'row',
|
|
447
|
+
width: '100%',
|
|
448
|
+
justifyContent: 'space-between',
|
|
449
|
+
alignItems: 'center',
|
|
450
|
+
marginVertical: 15
|
|
451
|
+
}}>
|
|
452
|
+
<View style={loginStyle.line} />
|
|
453
|
+
<OText
|
|
454
|
+
size={14}
|
|
455
|
+
mBottom={10}
|
|
456
|
+
style={{ paddingHorizontal: 19 }}
|
|
457
|
+
color={theme.colors.disabled}>
|
|
458
|
+
{t('OR', 'or')}
|
|
459
|
+
</OText>
|
|
460
|
+
<View style={loginStyle.line} />
|
|
461
|
+
</View>
|
|
462
|
+
<ButtonsWrapper>
|
|
463
|
+
<SocialButtons>
|
|
464
|
+
{(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
|
|
465
|
+
configs?.facebook_id?.value && (
|
|
466
|
+
<FacebookLogin
|
|
467
|
+
notificationState={notificationState}
|
|
468
|
+
handleErrors={(err: any) => showToast(ToastType.Error, err)}
|
|
469
|
+
handleLoading={(val: boolean) => setIsFBLoading(val)}
|
|
470
|
+
handleSuccessFacebookLogin={handleSuccessFacebook}
|
|
471
|
+
/>
|
|
472
|
+
)}
|
|
473
|
+
{(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
|
|
474
|
+
<GoogleLogin
|
|
475
|
+
notificationState={notificationState}
|
|
476
|
+
webClientId={configs?.google_login_client_id?.value}
|
|
477
|
+
handleErrors={(err: any) => showToast(ToastType.Error, err)}
|
|
478
|
+
handleLoading={(val: boolean) => setIsFBLoading(val)}
|
|
479
|
+
handleSuccessGoogleLogin={handleSuccessFacebook}
|
|
480
|
+
/>
|
|
481
|
+
)}
|
|
482
|
+
{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
|
|
483
|
+
<AppleLogin
|
|
484
|
+
notificationState={notificationState}
|
|
485
|
+
handleErrors={(err: any) => showToast(ToastType.Error, err)}
|
|
486
|
+
handleLoading={(val: boolean) => setIsFBLoading(val)}
|
|
487
|
+
handleSuccessAppleLogin={handleSuccessFacebook}
|
|
488
|
+
/>
|
|
489
|
+
)}
|
|
490
|
+
</SocialButtons>
|
|
491
|
+
</ButtonsWrapper>
|
|
492
|
+
</>
|
|
492
493
|
)
|
|
493
494
|
) : (
|
|
494
495
|
<SkeletonWrapper>
|
|
@@ -65,9 +65,9 @@ const PaymentOptionWalletUI = (props: any) => {
|
|
|
65
65
|
};
|
|
66
66
|
|
|
67
67
|
useEffect(() => {
|
|
68
|
-
if (!walletsState.loading) {
|
|
68
|
+
if (!walletsState.loading && walletsState.result?.length) {
|
|
69
69
|
setCheckedState(
|
|
70
|
-
walletsState.result
|
|
70
|
+
walletsState.result?.map((wallet: any) => {
|
|
71
71
|
return !!cart?.wallets?.find((w: any) => w.id === wallet.id)
|
|
72
72
|
})
|
|
73
73
|
)
|
|
@@ -101,7 +101,7 @@ const PaymentOptionWalletUI = (props: any) => {
|
|
|
101
101
|
onTintColor={theme.colors.primary}
|
|
102
102
|
style={Platform.OS === 'ios' && styles.checkBoxStyle}
|
|
103
103
|
/>
|
|
104
|
-
<View style={{ alignItems: 'baseline' }}>
|
|
104
|
+
<View style={{ alignItems: 'baseline', marginLeft: 5 }}>
|
|
105
105
|
<View>
|
|
106
106
|
<OText
|
|
107
107
|
style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
|
|
@@ -114,7 +114,7 @@ const PaymentOptionWalletUI = (props: any) => {
|
|
|
114
114
|
</View>
|
|
115
115
|
</SectionLeft>
|
|
116
116
|
|
|
117
|
-
<View style={{maxWidth: '
|
|
117
|
+
<View style={{maxWidth: '35%', alignItems: 'flex-end' }}>
|
|
118
118
|
{wallet.type === 'cash' && (
|
|
119
119
|
<OText>
|
|
120
120
|
{parsePrice(wallet?.balance)}
|
|
@@ -135,6 +135,20 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
135
135
|
},
|
|
136
136
|
unitItem: {
|
|
137
137
|
fontSize: 12
|
|
138
|
+
},
|
|
139
|
+
productTagWrapper: {
|
|
140
|
+
flexDirection: 'row',
|
|
141
|
+
alignItems: 'center'
|
|
142
|
+
},
|
|
143
|
+
productTagImageStyle: {
|
|
144
|
+
width: 32,
|
|
145
|
+
height: 32,
|
|
146
|
+
borderRadius: 8,
|
|
147
|
+
resizeMode: 'cover'
|
|
148
|
+
},
|
|
149
|
+
productTagNameStyle: {
|
|
150
|
+
paddingHorizontal: 6,
|
|
151
|
+
marginRight: 5
|
|
138
152
|
}
|
|
139
153
|
});
|
|
140
154
|
|
|
@@ -461,6 +475,31 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
461
475
|
{product?.description || productCart?.description}
|
|
462
476
|
</OText>
|
|
463
477
|
</ProductDescription>
|
|
478
|
+
<ScrollView
|
|
479
|
+
horizontal
|
|
480
|
+
showsHorizontalScrollIndicator={false}
|
|
481
|
+
contentContainerStyle={{ paddingBottom: 30 }}
|
|
482
|
+
>
|
|
483
|
+
{product?.tags?.map((tag: any) => (
|
|
484
|
+
<View
|
|
485
|
+
key={tag.id}
|
|
486
|
+
style={styles.productTagWrapper}
|
|
487
|
+
>
|
|
488
|
+
{tag?.image ? (
|
|
489
|
+
<OIcon
|
|
490
|
+
url={optimizeImage(tag?.image, 'h_40,c_limit')}
|
|
491
|
+
style={styles.productTagImageStyle}
|
|
492
|
+
/>
|
|
493
|
+
) : (
|
|
494
|
+
<OIcon
|
|
495
|
+
src={theme.images?.dummies?.product}
|
|
496
|
+
style={styles.productTagImageStyle}
|
|
497
|
+
/>
|
|
498
|
+
)}
|
|
499
|
+
<OText color={theme.colors.textSecondary} size={12} style={styles.productTagNameStyle}>{tag.name}</OText>
|
|
500
|
+
</View>
|
|
501
|
+
))}
|
|
502
|
+
</ScrollView>
|
|
464
503
|
{loading && !product ? (
|
|
465
504
|
<>
|
|
466
505
|
{[...Array(2)].map((item, i) => (
|
|
@@ -29,7 +29,7 @@ import {
|
|
|
29
29
|
WrapperArrowIcon
|
|
30
30
|
|
|
31
31
|
} from './styles'
|
|
32
|
-
import { OButton, OInput, OText } from '../shared'
|
|
32
|
+
import { OButton, OInput, OText, OIcon } from '../shared'
|
|
33
33
|
import { ProductOptionSubOption } from '../ProductOptionSubOption'
|
|
34
34
|
import { NotFoundSource } from '../NotFoundSource'
|
|
35
35
|
import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
|
|
@@ -119,10 +119,24 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
119
119
|
backgroundColor: theme.colors.lightGray,
|
|
120
120
|
padding: 2,
|
|
121
121
|
borderRadius: 20
|
|
122
|
+
},
|
|
123
|
+
productTagWrapper: {
|
|
124
|
+
flexDirection: 'row',
|
|
125
|
+
alignItems: 'center'
|
|
126
|
+
},
|
|
127
|
+
productTagImageStyle: {
|
|
128
|
+
width: 32,
|
|
129
|
+
height: 32,
|
|
130
|
+
borderRadius: 8,
|
|
131
|
+
resizeMode: 'cover'
|
|
132
|
+
},
|
|
133
|
+
productTagNameStyle: {
|
|
134
|
+
paddingHorizontal: 6,
|
|
135
|
+
marginRight: 5
|
|
122
136
|
}
|
|
123
137
|
})
|
|
124
138
|
|
|
125
|
-
const [{ parsePrice }] = useUtils()
|
|
139
|
+
const [{ optimizeImage, parsePrice }] = useUtils()
|
|
126
140
|
const [, t] = useLanguage()
|
|
127
141
|
const [orderState] = useOrder()
|
|
128
142
|
const [{ auth }] = useSession()
|
|
@@ -242,6 +256,33 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
242
256
|
<OText color={theme.colors.gray} style={{ textAlign: 'left', marginBottom: 10 }}>{product?.description || productCart?.description}</OText>
|
|
243
257
|
</ProductDescription>
|
|
244
258
|
)}
|
|
259
|
+
<View style={{ marginHorizontal: 30 }}>
|
|
260
|
+
<ScrollView
|
|
261
|
+
horizontal
|
|
262
|
+
showsHorizontalScrollIndicator={false}
|
|
263
|
+
contentContainerStyle={{ paddingBottom: 20 }}
|
|
264
|
+
>
|
|
265
|
+
{product?.tags?.map((tag: any) => (
|
|
266
|
+
<View
|
|
267
|
+
key={tag.id}
|
|
268
|
+
style={styles.productTagWrapper}
|
|
269
|
+
>
|
|
270
|
+
{tag?.image ? (
|
|
271
|
+
<OIcon
|
|
272
|
+
url={optimizeImage(tag?.image, 'h_40,c_limit')}
|
|
273
|
+
style={styles.productTagImageStyle}
|
|
274
|
+
/>
|
|
275
|
+
) : (
|
|
276
|
+
<OIcon
|
|
277
|
+
src={theme.images?.dummies?.product}
|
|
278
|
+
style={styles.productTagImageStyle}
|
|
279
|
+
/>
|
|
280
|
+
)}
|
|
281
|
+
<OText size={14} style={styles.productTagNameStyle}>{tag.name}</OText>
|
|
282
|
+
</View>
|
|
283
|
+
))}
|
|
284
|
+
</ScrollView>
|
|
285
|
+
</View>
|
|
245
286
|
{loading && !product ? (
|
|
246
287
|
<>
|
|
247
288
|
{[...Array(2)].map((item, i) => (
|