ordering-ui-react-native 0.17.84 → 0.17.86
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/business/src/components/ProductItemAccordion/index.tsx +21 -3
- package/themes/original/src/components/AddressForm/index.tsx +26 -22
- package/themes/original/src/components/BusinessBasicInformation/index.tsx +91 -70
- package/themes/original/src/components/BusinessController/index.tsx +71 -49
- package/themes/original/src/components/BusinessProductsListing/index.tsx +2 -2
- package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx +47 -29
- package/themes/original/src/components/Cart/index.tsx +34 -9
- package/themes/original/src/components/CartContent/index.tsx +5 -1
- package/themes/original/src/components/Checkout/index.tsx +39 -31
- package/themes/original/src/components/Messages/index.tsx +8 -7
- package/themes/original/src/components/MultiCheckout/index.tsx +15 -7
- package/themes/original/src/components/MyOrders/index.tsx +9 -7
- package/themes/original/src/components/OrderDetails/index.tsx +99 -73
- package/themes/original/src/components/OrderTypeSelector/index.tsx +6 -4
- package/themes/original/src/components/SingleOrderCard/index.tsx +44 -28
- package/themes/original/src/components/SingleProductCard/index.tsx +51 -21
- package/themes/original/src/components/SingleProductCard/styles.tsx +11 -1
- package/themes/original/src/components/UserProfile/index.tsx +82 -53
- package/themes/original/src/components/shared/OButton.tsx +5 -1
- package/themes/original/src/components/shared/OInput.tsx +8 -2
- package/themes/original/src/types/index.tsx +1 -0
- package/themes/original/src/utils/index.tsx +12 -0
|
@@ -123,7 +123,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
123
123
|
const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
|
|
124
124
|
const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
|
|
125
125
|
const isGiftCardOrder = !order?.business_id
|
|
126
|
-
|
|
126
|
+
const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
|
|
127
|
+
const hideDeliveryProgress = theme?.confirmation?.components?.order?.components?.progress?.hidden
|
|
128
|
+
const hideBusinessPhone = theme?.confirmation?.components?.business?.components?.phone?.hidden
|
|
129
|
+
const hideBusinessMessages = theme?.confirmation?.components?.business?.components?.messages?.hidden
|
|
130
|
+
const hideBusinessEmail = theme?.confirmation?.components?.business?.components?.email?.hidden
|
|
131
|
+
const hideBusinessAddress = theme?.confirmation?.components?.business?.components?.address?.hidden
|
|
132
|
+
const hideDriverName = theme?.confirmation?.components?.driver?.components?.name?.hidden
|
|
133
|
+
const hideDriverPhone = theme?.confirmation?.components?.driver?.components?.phone?.hidden
|
|
134
|
+
const hideDriverMessages = theme?.confirmation?.components?.driver?.components?.messages?.hidden
|
|
135
|
+
const hideCustomerPhone = theme?.confirmation?.components?.customer?.components?.phone?.hidden
|
|
136
|
+
const hideCustomerAddress = theme?.confirmation?.components?.customer?.components?.address?.hidden
|
|
127
137
|
const walletName: any = {
|
|
128
138
|
cash: {
|
|
129
139
|
name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
|
|
@@ -201,7 +211,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
201
211
|
) && !order.review && !isReviewed && handleClickOrderReview(order)
|
|
202
212
|
}
|
|
203
213
|
|
|
204
|
-
|
|
214
|
+
|
|
205
215
|
const resfreshOrder = () => {
|
|
206
216
|
getOrder()
|
|
207
217
|
}
|
|
@@ -326,7 +336,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
326
336
|
}, [driverLocation]);
|
|
327
337
|
|
|
328
338
|
return (
|
|
329
|
-
<OrderDetailsContainer
|
|
339
|
+
<OrderDetailsContainer
|
|
330
340
|
keyboardShouldPersistTaps="handled"
|
|
331
341
|
refreshControl={
|
|
332
342
|
<RefreshControl
|
|
@@ -399,13 +409,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
399
409
|
style={{ marginTop: Platform.OS === 'ios' ? 0 : 20 }}
|
|
400
410
|
titleWrapStyle={{ paddingHorizontal: 0 }}
|
|
401
411
|
titleStyle={{ marginRight: 0, marginLeft: 0 }}
|
|
402
|
-
subTitle={<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
|
|
412
|
+
subTitle={!hideDeliveryDate && <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
|
|
403
413
|
{
|
|
404
414
|
activeStatus.includes(order?.status)
|
|
405
415
|
? order?.eta_time + 'min'
|
|
406
416
|
: order?.delivery_datetime_utc
|
|
407
|
-
|
|
408
|
-
|
|
417
|
+
? parseDate(order?.delivery_datetime_utc)
|
|
418
|
+
: parseDate(order?.delivery_datetime, { utc: false })
|
|
409
419
|
}
|
|
410
420
|
</OText>}
|
|
411
421
|
/>
|
|
@@ -445,7 +455,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
445
455
|
activeOpacity={0.7}
|
|
446
456
|
style={{ marginTop: 6 }}
|
|
447
457
|
onPress={() => setIsOrderHistory(true)}
|
|
448
|
-
|
|
449
458
|
>
|
|
450
459
|
<OText
|
|
451
460
|
size={12}
|
|
@@ -457,26 +466,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
457
466
|
</OText>
|
|
458
467
|
</TouchableOpacity>
|
|
459
468
|
</View>
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
469
|
+
{!hideDeliveryProgress && (
|
|
470
|
+
<>
|
|
471
|
+
<StaturBar>
|
|
472
|
+
<LinearGradient
|
|
473
|
+
start={{ x: 0.0, y: 0.0 }}
|
|
474
|
+
end={{
|
|
475
|
+
x: getOrderStatus(order?.status)?.percentage || 0,
|
|
476
|
+
y: 0,
|
|
477
|
+
}}
|
|
478
|
+
locations={[0.9999, 0.9999]}
|
|
479
|
+
colors={[theme.colors.primary, theme.colors.backgroundGray100]}
|
|
480
|
+
style={styles.statusBar}
|
|
481
|
+
/>
|
|
482
|
+
</StaturBar>
|
|
483
|
+
<OText
|
|
484
|
+
size={16}
|
|
485
|
+
lineHeight={24}
|
|
486
|
+
weight={'600'}
|
|
487
|
+
color={theme.colors.textNormal}>
|
|
488
|
+
{getOrderStatus(order?.status)?.value}
|
|
489
|
+
</OText>
|
|
490
|
+
</>
|
|
491
|
+
)}
|
|
480
492
|
</OrderData>
|
|
481
493
|
<View
|
|
482
494
|
style={{
|
|
@@ -520,7 +532,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
520
532
|
{order?.business?.name}
|
|
521
533
|
</OText>
|
|
522
534
|
<Icons>
|
|
523
|
-
{!!order?.business?.cellphone && (
|
|
535
|
+
{!!order?.business?.cellphone && !hideBusinessPhone && (
|
|
524
536
|
<TouchableOpacity
|
|
525
537
|
onPress={() => order?.business?.cellphone &&
|
|
526
538
|
Linking.openURL(`tel:${order?.business?.cellphone}`)
|
|
@@ -534,25 +546,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
534
546
|
/>
|
|
535
547
|
</TouchableOpacity>
|
|
536
548
|
)}
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
549
|
+
{!hideBusinessMessages && (
|
|
550
|
+
<TouchableOpacity
|
|
551
|
+
style={{ paddingStart: 5 }}
|
|
552
|
+
onPress={() => handleGoToMessages('business')}>
|
|
553
|
+
<OIcon
|
|
554
|
+
src={theme.images.general.chat}
|
|
555
|
+
width={16}
|
|
556
|
+
color={theme.colors.disabled}
|
|
557
|
+
/>
|
|
558
|
+
</TouchableOpacity>
|
|
559
|
+
)}
|
|
546
560
|
</Icons>
|
|
547
561
|
</View>
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
562
|
+
{!hideBusinessEmail && (
|
|
563
|
+
<OText
|
|
564
|
+
size={12}
|
|
565
|
+
lineHeight={18}
|
|
566
|
+
color={theme.colors.textNormal}
|
|
567
|
+
mBottom={2}>
|
|
568
|
+
{order?.business?.email}
|
|
569
|
+
</OText>
|
|
570
|
+
)}
|
|
571
|
+
{!!order?.business?.cellphone && !hideBusinessPhone && (
|
|
556
572
|
<OText
|
|
557
573
|
size={12}
|
|
558
574
|
lineHeight={18}
|
|
@@ -561,9 +577,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
561
577
|
{order?.business?.cellphone}
|
|
562
578
|
</OText>
|
|
563
579
|
)}
|
|
564
|
-
|
|
565
|
-
{
|
|
566
|
-
|
|
580
|
+
{!hideBusinessAddress && (
|
|
581
|
+
<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
|
|
582
|
+
{order?.business?.address}
|
|
583
|
+
</OText>
|
|
584
|
+
)}
|
|
567
585
|
</View>
|
|
568
586
|
{directionTypes.includes(order?.delivery_type) && (
|
|
569
587
|
<OButton
|
|
@@ -587,7 +605,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
587
605
|
)}
|
|
588
606
|
</OrderBusiness>
|
|
589
607
|
)}
|
|
590
|
-
|
|
608
|
+
|
|
591
609
|
{!isGiftCardOrder && placeSpotTypes.includes(order?.delivery_type) && (
|
|
592
610
|
<PlaceSpotWrapper>
|
|
593
611
|
<PlaceSpot
|
|
@@ -625,14 +643,16 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
625
643
|
mBottom={2}>
|
|
626
644
|
{order?.customer?.name} {order?.customer?.lastname}
|
|
627
645
|
</OText>
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
646
|
+
{!hideCustomerAddress && (
|
|
647
|
+
<OText
|
|
648
|
+
size={12}
|
|
649
|
+
lineHeight={18}
|
|
650
|
+
color={theme.colors.textNormal}
|
|
651
|
+
mBottom={2}>
|
|
652
|
+
{order?.customer?.address}
|
|
653
|
+
</OText>
|
|
654
|
+
)}
|
|
655
|
+
{(!!order?.customer?.cellphone && !hideCustomerPhone) && (
|
|
636
656
|
<OText
|
|
637
657
|
size={12}
|
|
638
658
|
lineHeight={18}
|
|
@@ -700,23 +720,29 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
700
720
|
alignItems: 'center',
|
|
701
721
|
justifyContent: 'space-between',
|
|
702
722
|
}}>
|
|
703
|
-
|
|
704
|
-
{
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
723
|
+
{!hideDriverName && (
|
|
724
|
+
<OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2} style={{ flexGrow: 1, flexBasis: '80%' }}>
|
|
725
|
+
{order?.driver?.name} {order?.driver?.lastname}
|
|
726
|
+
</OText>
|
|
727
|
+
)}
|
|
728
|
+
{!hideDriverMessages && (
|
|
729
|
+
<Icons>
|
|
730
|
+
<TouchableOpacity
|
|
731
|
+
onPress={() => handleGoToMessages('driver')}>
|
|
732
|
+
<OIcon
|
|
733
|
+
src={theme.images.general.chat}
|
|
734
|
+
width={16}
|
|
735
|
+
color={theme.colors.disabled}
|
|
736
|
+
/>
|
|
737
|
+
</TouchableOpacity>
|
|
738
|
+
</Icons>
|
|
739
|
+
)}
|
|
716
740
|
</View>
|
|
717
|
-
|
|
718
|
-
{
|
|
719
|
-
|
|
741
|
+
{!hideDriverPhone && (
|
|
742
|
+
<OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
|
|
743
|
+
{order?.driver?.cellphone}
|
|
744
|
+
</OText>
|
|
745
|
+
)}
|
|
720
746
|
</InfoBlock>
|
|
721
747
|
</Customer>
|
|
722
748
|
</OrderDriver>
|
|
@@ -31,12 +31,14 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
|
|
|
31
31
|
const [orderState] = useOrder();
|
|
32
32
|
const [, t] = useLanguage();
|
|
33
33
|
const _orderTypes = orderTypes.filter((type: any) => configTypes?.includes(type.value));
|
|
34
|
-
|
|
34
|
+
const orderTypeTitle = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.title
|
|
35
|
+
const orderTypeDescription = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.description
|
|
36
|
+
const orderTypeCallAction = (type : string) => theme?.header?.components?.order_types?.components?.[type]?.components?.call_to_action
|
|
35
37
|
const items = _orderTypes.map((type) => {
|
|
36
38
|
return {
|
|
37
39
|
value: type.value,
|
|
38
|
-
label: t(type.content, type.content),
|
|
39
|
-
description: t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
|
|
40
|
+
label: orderTypeTitle(type.value) || t(type.content, type.content),
|
|
41
|
+
description: orderTypeDescription(type.value) || t(type.description, 'Lorem ipsum dolor sit amet, consectetur.')
|
|
40
42
|
}
|
|
41
43
|
})
|
|
42
44
|
|
|
@@ -113,7 +115,7 @@ const OrderTypeSelectorUI = (props: OrderTypeSelectParams) => {
|
|
|
113
115
|
<OText size={12} lineHeight={18} color={theme.colors.white} weight={Platform.OS === 'android' ? 'bold' : '600'}>{item?.label}</OText>
|
|
114
116
|
<OText size={10} lineHeight={15} color={theme.colors.white}>{item?.description}</OText>
|
|
115
117
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
116
|
-
<OText size={10} lineHeight={15} color={theme.colors.white}>{t('START_MY_ORDER', 'Start my order')}</OText>
|
|
118
|
+
<OText size={10} lineHeight={15} color={theme.colors.white}>{orderTypeCallAction(item?.value) || t('START_MY_ORDER', 'Start my order')}</OText>
|
|
117
119
|
<AntDesignIcon name='arrowleft' size={26} color={theme.colors.white} style={{ transform: [{ rotate: '180deg' }], marginStart: 4 }} />
|
|
118
120
|
</View>
|
|
119
121
|
</MaskCont>
|
|
@@ -151,7 +151,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
|
|
|
151
151
|
order: {
|
|
152
152
|
id: order?.id,
|
|
153
153
|
business_id: order?.business_id,
|
|
154
|
-
logo: order?.business?.length > 1 ? order?.business?.map?.((business
|
|
154
|
+
logo: order?.business?.length > 1 ? order?.business?.map?.((business: any) => business?.logo) : order?.business?.logo,
|
|
155
155
|
driver: order?.driver,
|
|
156
156
|
products: order?.products,
|
|
157
157
|
review: order?.review,
|
|
@@ -174,7 +174,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
|
|
|
174
174
|
handleClickOrder(order?.uuid)
|
|
175
175
|
return
|
|
176
176
|
}
|
|
177
|
-
if (order?.cart_group_id){
|
|
177
|
+
if (order?.cart_group_id) {
|
|
178
178
|
onNavigationRedirect?.('MultiOrdersDetails', { orderId: order?.cart_group_id });
|
|
179
179
|
} else {
|
|
180
180
|
onNavigationRedirect?.('OrderDetails', { orderId: order?.uuid });
|
|
@@ -189,6 +189,15 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
|
|
|
189
189
|
setConfirm({ ...confirm, open: false, title: null })
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
+
const hideBusinessLogo = theme?.orders?.components?.business_logo?.hidden
|
|
193
|
+
const hideDate = theme?.orders?.components?.date?.hidden
|
|
194
|
+
const hideBusinessName = theme?.orders?.components?.business_name?.hidden
|
|
195
|
+
const hideOrderNumber = theme?.orders?.components?.order_number?.hidden
|
|
196
|
+
const hideReviewOrderButton = theme?.orders?.components?.review_order_button?.hidden
|
|
197
|
+
const hideReorderButton = theme?.orders?.components?.reorder_button?.hidden
|
|
198
|
+
const hideFavorite = theme?.orders?.components?.favorite?.hidden
|
|
199
|
+
const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
|
|
200
|
+
|
|
192
201
|
return (
|
|
193
202
|
<>
|
|
194
203
|
<CardAnimation
|
|
@@ -196,7 +205,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
|
|
|
196
205
|
style={[styles.container]}
|
|
197
206
|
>
|
|
198
207
|
<InnerContainer>
|
|
199
|
-
{(!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
|
|
208
|
+
{!hideBusinessLogo && (!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
|
|
200
209
|
<>
|
|
201
210
|
{order?.business?.length > 1 ? (
|
|
202
211
|
<MultiLogosContainer>
|
|
@@ -205,7 +214,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
|
|
|
205
214
|
{i > 1 ? (
|
|
206
215
|
<>
|
|
207
216
|
{console.log(order?.business?.length - 2)}
|
|
208
|
-
|
|
217
|
+
<OText mRight={3}> + {order?.business?.length - 2}</OText>
|
|
209
218
|
</>
|
|
210
219
|
) : (
|
|
211
220
|
<Logo style={styles.logoWrapper} isMulti>
|
|
@@ -232,11 +241,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
|
|
|
232
241
|
)}
|
|
233
242
|
<CardInfoWrapper>
|
|
234
243
|
<ContentHeader>
|
|
235
|
-
|
|
236
|
-
<
|
|
237
|
-
{
|
|
238
|
-
|
|
239
|
-
|
|
244
|
+
{(order?.business?.length > 1 && !hideOrderNumber) || (!order?.business?.length && !hideBusinessName) && (
|
|
245
|
+
<View style={{ flex: 1 }}>
|
|
246
|
+
<OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
|
|
247
|
+
{order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
|
|
248
|
+
</OText>
|
|
249
|
+
</View>
|
|
250
|
+
)}
|
|
240
251
|
{!!!pastOrders && (
|
|
241
252
|
<>
|
|
242
253
|
{isMessageView ? (
|
|
@@ -260,7 +271,8 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
|
|
|
260
271
|
)}
|
|
261
272
|
{!!pastOrders && (
|
|
262
273
|
<ButtonWrapper>
|
|
263
|
-
{
|
|
274
|
+
{!hideReviewOrderButton &&
|
|
275
|
+
allowedOrderStatus.includes(parseInt(order?.status)) &&
|
|
264
276
|
!order.review && (
|
|
265
277
|
<TouchableOpacity
|
|
266
278
|
onPress={() => handleClickOrderReview(order)}
|
|
@@ -270,7 +282,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
|
|
|
270
282
|
</OText>
|
|
271
283
|
</TouchableOpacity>
|
|
272
284
|
)}
|
|
273
|
-
{order.cart && (
|
|
285
|
+
{order.cart && !hideReorderButton && (
|
|
274
286
|
<OButton
|
|
275
287
|
text={t('REORDER', 'Reorder')}
|
|
276
288
|
imgRightSrc={''}
|
|
@@ -290,7 +302,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
|
|
|
290
302
|
<ContentFooter>
|
|
291
303
|
<View style={{ flex: 1 }}>
|
|
292
304
|
<View style={styles.infoText}>
|
|
293
|
-
{(!!!pastOrders || order?.business?.length > 1) && (
|
|
305
|
+
{(!!!pastOrders || order?.business?.length > 1) && !hideOrderNumber && (
|
|
294
306
|
<>
|
|
295
307
|
<OText
|
|
296
308
|
size={10}
|
|
@@ -313,28 +325,32 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
|
|
|
313
325
|
</OText>
|
|
314
326
|
</>
|
|
315
327
|
)}
|
|
328
|
+
{!hideDate && (
|
|
329
|
+
<OText
|
|
330
|
+
size={10}
|
|
331
|
+
lineHeight={15}
|
|
332
|
+
color={theme.colors.textSecondary}
|
|
333
|
+
style={{ marginVertical: 3 }}
|
|
334
|
+
numberOfLines={1}>
|
|
335
|
+
{
|
|
336
|
+
pastOrders
|
|
337
|
+
? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
|
|
338
|
+
: order?.eta_time + 'min'
|
|
339
|
+
}
|
|
340
|
+
</OText>
|
|
341
|
+
)}
|
|
342
|
+
</View>
|
|
343
|
+
{!hideOrderStatus && (
|
|
316
344
|
<OText
|
|
345
|
+
color={theme.colors.primary}
|
|
317
346
|
size={10}
|
|
318
347
|
lineHeight={15}
|
|
319
|
-
color={theme.colors.textSecondary}
|
|
320
|
-
style={{ marginVertical: 3 }}
|
|
321
348
|
numberOfLines={1}>
|
|
322
|
-
{
|
|
323
|
-
pastOrders
|
|
324
|
-
? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
|
|
325
|
-
: order?.eta_time + 'min'
|
|
326
|
-
}
|
|
349
|
+
{getOrderStatus(order.status)?.value}
|
|
327
350
|
</OText>
|
|
328
|
-
|
|
329
|
-
<OText
|
|
330
|
-
color={theme.colors.primary}
|
|
331
|
-
size={10}
|
|
332
|
-
lineHeight={15}
|
|
333
|
-
numberOfLines={1}>
|
|
334
|
-
{getOrderStatus(order.status)?.value}
|
|
335
|
-
</OText>
|
|
351
|
+
)}
|
|
336
352
|
</View>
|
|
337
|
-
{!isMessageView && !order?.business?.length && (
|
|
353
|
+
{!isMessageView && !order?.business?.length && !hideFavorite && (
|
|
338
354
|
<LottieAnimation
|
|
339
355
|
type='favorite'
|
|
340
356
|
onClick={handleChangeFavorite}
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
} from 'ordering-components/native';
|
|
12
12
|
import { useTheme } from 'styled-components/native';
|
|
13
13
|
import { SingleProductCardParams } from '../../types';
|
|
14
|
-
import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper } from './styles';
|
|
14
|
+
import { CardInfo, SoldOut, QuantityContainer, PricesContainer, RibbonBox, LogoWrapper, WrapTags, TagsContainer } from './styles';
|
|
15
15
|
import { StyleSheet, View } from 'react-native';
|
|
16
16
|
import { InView } from 'react-native-intersection-observer'
|
|
17
17
|
import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
|
|
@@ -39,14 +39,19 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
|
|
|
39
39
|
enableIntersection,
|
|
40
40
|
navigation,
|
|
41
41
|
businessId,
|
|
42
|
-
isPreviously
|
|
42
|
+
isPreviously,
|
|
43
|
+
viewString
|
|
43
44
|
} = props;
|
|
44
45
|
|
|
45
46
|
const theme = useTheme();
|
|
46
47
|
const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
|
|
47
48
|
const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
|
|
48
|
-
|
|
49
|
+
const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
|
|
50
|
+
const hideProductLogo = viewString
|
|
51
|
+
? theme?.[viewString]?.components?.cart?.components?.products?.image?.hidden
|
|
52
|
+
: theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
|
|
49
53
|
const textSize = isChewLayout ? 12 : 10
|
|
54
|
+
const logoPosition = theme?.business_view?.components?.products?.components?.product?.components?.image?.position
|
|
50
55
|
|
|
51
56
|
const styles = StyleSheet.create({
|
|
52
57
|
container: {
|
|
@@ -100,6 +105,11 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
|
|
|
100
105
|
textDecorationLine: 'line-through',
|
|
101
106
|
marginLeft: 7,
|
|
102
107
|
marginRight: 7
|
|
108
|
+
},
|
|
109
|
+
productTagsStyle: {
|
|
110
|
+
width: 30,
|
|
111
|
+
height: 30,
|
|
112
|
+
marginRight: 5
|
|
103
113
|
}
|
|
104
114
|
});
|
|
105
115
|
|
|
@@ -168,7 +178,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
|
|
|
168
178
|
(style && { ...style })
|
|
169
179
|
]}
|
|
170
180
|
>
|
|
171
|
-
<View style={{ flexDirection: 'row' }}>
|
|
181
|
+
<View style={{ flexDirection: logoPosition === 'left' ? 'row-reverse' : 'row' }}>
|
|
172
182
|
{productAddedToCartLength > 0 && (
|
|
173
183
|
<QuantityContainer style={[styles.quantityContainer, {
|
|
174
184
|
transform: [{ translateX: 25 }, { translateY: -25 }],
|
|
@@ -205,15 +215,33 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
|
|
|
205
215
|
{product?.offer_price !== null && !!product?.in_offer && (
|
|
206
216
|
<OText style={styles.regularPriceStyle}>{product?.offer_price ? parsePrice(product?.offer_price) : ''}</OText>
|
|
207
217
|
)}
|
|
218
|
+
{product?.tags && product?.tags.length > 0 && (
|
|
219
|
+
<WrapTags>
|
|
220
|
+
{product?.tags.map((tag: any, i: any) => (
|
|
221
|
+
<TagsContainer key={i}>
|
|
222
|
+
<FastImage
|
|
223
|
+
style={styles.productTagsStyle}
|
|
224
|
+
source={tag.image ? {
|
|
225
|
+
uri: optimizeImage(tag.image, 'h_250,c_limit'),
|
|
226
|
+
priority: FastImage.priority.normal,
|
|
227
|
+
} : theme?.images?.dummies?.product}
|
|
228
|
+
resizeMode={FastImage.resizeMode.cover}
|
|
229
|
+
/>
|
|
230
|
+
</TagsContainer>
|
|
231
|
+
))}
|
|
232
|
+
</WrapTags>
|
|
233
|
+
)}
|
|
208
234
|
</PricesContainer>
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
235
|
+
{!hideProductDescription && (
|
|
236
|
+
<OText
|
|
237
|
+
size={textSize}
|
|
238
|
+
numberOfLines={!isPreviously ? 2 : 1}
|
|
239
|
+
ellipsizeMode="tail"
|
|
240
|
+
color={theme.colors.textSecondary}
|
|
241
|
+
style={styles.line15}>
|
|
242
|
+
{product?.description}
|
|
243
|
+
</OText>
|
|
244
|
+
)}
|
|
217
245
|
{isPreviously && (
|
|
218
246
|
<OText
|
|
219
247
|
size={textSize}
|
|
@@ -225,7 +253,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
|
|
|
225
253
|
</OText>
|
|
226
254
|
)}
|
|
227
255
|
</CardInfo>
|
|
228
|
-
<LogoWrapper>
|
|
256
|
+
<LogoWrapper logoPosition={logoPosition}>
|
|
229
257
|
{!!product?.ribbon?.enabled && (
|
|
230
258
|
<RibbonBox
|
|
231
259
|
bgColor={product?.ribbon?.color}
|
|
@@ -244,14 +272,16 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
|
|
|
244
272
|
</OText>
|
|
245
273
|
</RibbonBox>
|
|
246
274
|
)}
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
275
|
+
{!hideProductLogo && (
|
|
276
|
+
<FastImage
|
|
277
|
+
style={styles.productStyle}
|
|
278
|
+
source={product?.images ? {
|
|
279
|
+
uri: optimizeImage(product?.images, 'h_250,c_limit'),
|
|
280
|
+
priority: FastImage.priority.normal,
|
|
281
|
+
} : theme?.images?.dummies?.product}
|
|
282
|
+
resizeMode={FastImage.resizeMode.cover}
|
|
283
|
+
/>
|
|
284
|
+
)}
|
|
255
285
|
</LogoWrapper>
|
|
256
286
|
|
|
257
287
|
{(isSoldOut || maxProductQuantity <= 0) && (
|
|
@@ -27,7 +27,17 @@ export const PricesContainer = styled.View`
|
|
|
27
27
|
|
|
28
28
|
export const LogoWrapper = styled.View`
|
|
29
29
|
position: relative;
|
|
30
|
-
margin-left: 12px;
|
|
30
|
+
margin-left: ${(props) => !props.logoPosition || props.logoPosition === 'right' ? '12px' : '0px'};
|
|
31
|
+
margin-right: ${(props) => props.logoPosition === 'right' ? '0px' : '12px'};
|
|
32
|
+
`
|
|
33
|
+
export const WrapTags = styled.View`
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-direction: row;
|
|
36
|
+
margin-left: 10px;
|
|
37
|
+
`
|
|
38
|
+
export const TagsContainer = styled.View`
|
|
39
|
+
display: flex;
|
|
40
|
+
margin: auto;
|
|
31
41
|
`
|
|
32
42
|
|
|
33
43
|
export const RibbonBox = styled.View`
|