ordering-ui-react-native 0.17.72 → 0.17.74
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/AcceptOrRejectOrder/index.tsx +1 -0
- package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +2 -0
- package/themes/business/src/components/PreviousOrders/index.tsx +115 -8
- package/themes/business/src/components/PreviousOrders/styles.tsx +1 -1
- package/themes/business/src/components/shared/OLink.tsx +3 -2
- package/themes/original/src/components/Cart/index.tsx +1 -0
- package/themes/original/src/components/Checkout/index.tsx +95 -83
- package/themes/original/src/components/GiftCard/GiftCardUI/index.tsx +96 -0
- package/themes/original/src/components/GiftCard/GiftCardUI/styles.tsx +5 -0
- package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx +96 -0
- package/themes/original/src/components/GiftCard/PurchaseGiftCard/styles.tsx +6 -0
- package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx +178 -0
- package/themes/original/src/components/GiftCard/RedeemGiftCard/styles.tsx +8 -0
- package/themes/original/src/components/GiftCard/SendGiftCard/index.tsx +165 -0
- package/themes/original/src/components/GiftCard/SendGiftCard/styles.tsx +9 -0
- package/themes/original/src/components/OrderDetails/index.tsx +175 -149
- package/themes/original/src/components/OrderSummary/index.tsx +6 -3
- package/themes/original/src/components/PaymentOptions/index.tsx +1 -1
- package/themes/original/src/components/ProductItemAccordion/index.tsx +4 -3
- package/themes/original/src/components/Wallets/index.tsx +13 -0
- package/themes/original/src/types/index.tsx +2 -1
package/package.json
CHANGED
|
@@ -519,6 +519,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
|
|
|
519
519
|
style={{ borderRadius: 7, height: 45 }}
|
|
520
520
|
parentStyle={{ width: '100%' }}
|
|
521
521
|
textStyle={{color: '#FFF', fontSize: 18 }}
|
|
522
|
+
isDisabled={!rejectReason && showTextArea}
|
|
522
523
|
onClick={() => handleAcceptOrReject()}
|
|
523
524
|
/>
|
|
524
525
|
</View>
|
|
@@ -180,6 +180,7 @@ export const OrderContentComponent = (props: OrderContent) => {
|
|
|
180
180
|
ios: `maps:0,0?q=${order?.business?.address}`,
|
|
181
181
|
android: `geo:0,0?q=${order?.business?.address}`,
|
|
182
182
|
})}
|
|
183
|
+
numberOfLines={2}
|
|
183
184
|
shorcut={order?.business?.address}
|
|
184
185
|
TextStyle={styles.textLink}
|
|
185
186
|
/>
|
|
@@ -304,6 +305,7 @@ export const OrderContentComponent = (props: OrderContent) => {
|
|
|
304
305
|
ios: `maps:0,0?q=${order?.customer?.address}`,
|
|
305
306
|
android: `geo:0,0?q=${order?.customer?.address}`,
|
|
306
307
|
})}
|
|
308
|
+
numberOfLines={2}
|
|
307
309
|
shorcut={order?.customer?.address}
|
|
308
310
|
TextStyle={styles.textLink}
|
|
309
311
|
/>
|
|
@@ -39,6 +39,8 @@ export const PreviousOrders = (props: any) => {
|
|
|
39
39
|
|
|
40
40
|
const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
|
|
41
41
|
const viewMapStatus = [9, 18, 19, 23]
|
|
42
|
+
const deliveryPickupBtn = props.appTitle?.text?.includes('Delivery') && [3, 8, 18]
|
|
43
|
+
const deliveryStatusCompleteBtn = props.appTitle?.text?.includes('Delivery') && [9, 19, 23]
|
|
42
44
|
|
|
43
45
|
const handlePressOrder = (order: any) => {
|
|
44
46
|
if (order?.locked && isLogisticOrder) return
|
|
@@ -242,8 +244,8 @@ export const PreviousOrders = (props: any) => {
|
|
|
242
244
|
/>
|
|
243
245
|
</AcceptOrRejectOrderStyle>
|
|
244
246
|
)}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
+
{_ordersGrouped[k][0]?.status === 7 && (
|
|
248
|
+
<View>
|
|
247
249
|
<OButton
|
|
248
250
|
text={t('READY_FOR_PICKUP', 'Ready for pickup')}
|
|
249
251
|
bgColor={theme.colors.primaryLight}
|
|
@@ -257,10 +259,51 @@ export const PreviousOrders = (props: any) => {
|
|
|
257
259
|
_ordersGrouped[k].map((o: any) => o.id),
|
|
258
260
|
)}
|
|
259
261
|
/>
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
262
|
+
</View>
|
|
263
|
+
)}
|
|
264
|
+
{(_ordersGrouped[k][0]?.status === 8 || _ordersGrouped[k][0]?.status === 18) &&
|
|
265
|
+
_ordersGrouped[k][0]?.delivery_type === 1 &&
|
|
266
|
+
(
|
|
267
|
+
<AcceptOrRejectOrderStyle>
|
|
268
|
+
<OButton
|
|
269
|
+
text={t('ARRIVED_TO_BUSINESS', 'Arrived to bussiness')}
|
|
270
|
+
bgColor={theme.colors.btnBGWhite}
|
|
271
|
+
borderColor={theme.colors.btnBGWhite}
|
|
272
|
+
imgRightSrc={null}
|
|
273
|
+
style={{ borderRadius: 7, height: 40 }}
|
|
274
|
+
parentStyle={{ width: '100%' }}
|
|
275
|
+
textStyle={{ color: theme.colors.primary, fontSize: 12 }}
|
|
276
|
+
onClick={() => handleChangeOrderStatus(
|
|
277
|
+
3,
|
|
278
|
+
_ordersGrouped[k].map((o: any) => o.id),
|
|
279
|
+
)}
|
|
280
|
+
/>
|
|
281
|
+
</AcceptOrRejectOrderStyle>
|
|
282
|
+
)}
|
|
283
|
+
{_ordersGrouped[k][0]?.status === 3 && _ordersGrouped[k][0]?.delivery_type === 1 &&
|
|
284
|
+
(
|
|
285
|
+
<AcceptOrRejectOrderStyle>
|
|
286
|
+
<OButton
|
|
287
|
+
text={t('ORDER_NOT_READY', 'Order not ready')}
|
|
288
|
+
bgColor={theme.colors.red}
|
|
289
|
+
borderColor={theme.colors.red}
|
|
290
|
+
imgRightSrc={null}
|
|
291
|
+
style={{ borderRadius: 7, height: 40 }}
|
|
292
|
+
parentStyle={{ width: '100%' }}
|
|
293
|
+
textStyle={{ color: theme.colors.white, fontSize: 12 }}
|
|
294
|
+
onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
|
|
295
|
+
action: 'notReady',
|
|
296
|
+
order: _ordersGrouped[k][0],
|
|
297
|
+
ids: _ordersGrouped[k].map((o: any) => o.id),
|
|
298
|
+
handleChangeOrderStatus
|
|
299
|
+
})}
|
|
300
|
+
/>
|
|
301
|
+
</AcceptOrRejectOrderStyle>
|
|
302
|
+
)}
|
|
303
|
+
{viewMapStatus.includes(_ordersGrouped[k][0]?.status) &&
|
|
304
|
+
props.appTitle?.text?.includes('Business') &&
|
|
305
|
+
(
|
|
306
|
+
<View>
|
|
264
307
|
<OButton
|
|
265
308
|
text={t('TRACK_REAL_TIME_POSITION', 'Track real time position')}
|
|
266
309
|
bgColor={theme.colors.primaryLight}
|
|
@@ -271,8 +314,8 @@ export const PreviousOrders = (props: any) => {
|
|
|
271
314
|
textStyle={{ color: theme.colors.primary, fontSize: 12 }}
|
|
272
315
|
onClick={() => handleOpenMapView({ orders: _ordersGrouped[k] })}
|
|
273
316
|
/>
|
|
274
|
-
|
|
275
|
-
|
|
317
|
+
</View>
|
|
318
|
+
)}
|
|
276
319
|
{_ordersGrouped[k][0]?.status === 4 &&
|
|
277
320
|
![1].includes(_ordersGrouped[k][0]?.delivery_type) &&
|
|
278
321
|
(
|
|
@@ -323,6 +366,70 @@ export const PreviousOrders = (props: any) => {
|
|
|
323
366
|
})}
|
|
324
367
|
/>
|
|
325
368
|
)}
|
|
369
|
+
{deliveryPickupBtn && deliveryPickupBtn?.includes(_ordersGrouped[k][0]?.status) && (
|
|
370
|
+
<AcceptOrRejectOrderStyle>
|
|
371
|
+
<OButton
|
|
372
|
+
text={t('PICKUP_FAILED', 'Pickup failed')}
|
|
373
|
+
bgColor={theme.colors.danger100}
|
|
374
|
+
borderColor={theme.colors.danger100}
|
|
375
|
+
imgRightSrc={null}
|
|
376
|
+
style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
|
|
377
|
+
parentStyle={{ width: '45%' }}
|
|
378
|
+
textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
|
|
379
|
+
onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
|
|
380
|
+
action: 'pickupFailed',
|
|
381
|
+
order: _ordersGrouped[k][0],
|
|
382
|
+
ids: _ordersGrouped[k].map((o: any) => o.id),
|
|
383
|
+
handleChangeOrderStatus
|
|
384
|
+
})}
|
|
385
|
+
/>
|
|
386
|
+
<OButton
|
|
387
|
+
text={t('PICKUP_COMPLETE', 'Pickup complete')}
|
|
388
|
+
bgColor={theme.colors.success100}
|
|
389
|
+
borderColor={theme.colors.success100}
|
|
390
|
+
imgRightSrc={null}
|
|
391
|
+
style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
|
|
392
|
+
parentStyle={{ width: '45%' }}
|
|
393
|
+
textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
|
|
394
|
+
onClick={() => handleChangeOrderStatus(
|
|
395
|
+
9,
|
|
396
|
+
_ordersGrouped[k].map((o: any) => o.id),
|
|
397
|
+
)}
|
|
398
|
+
/>
|
|
399
|
+
</AcceptOrRejectOrderStyle>
|
|
400
|
+
)}
|
|
401
|
+
{deliveryStatusCompleteBtn && deliveryStatusCompleteBtn.includes(_ordersGrouped[k][0]?.status) && (
|
|
402
|
+
<AcceptOrRejectOrderStyle>
|
|
403
|
+
<OButton
|
|
404
|
+
text={t('DELIVERY_FAILED', 'Delivery Failed')}
|
|
405
|
+
bgColor={theme.colors.danger100}
|
|
406
|
+
borderColor={theme.colors.danger100}
|
|
407
|
+
imgRightSrc={null}
|
|
408
|
+
style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
|
|
409
|
+
parentStyle={{ width: '45%' }}
|
|
410
|
+
textStyle={{ color: theme.colors.danger500, fontSize: 12, textAlign: 'center' }}
|
|
411
|
+
onClick={() => onNavigationRedirect('AcceptOrRejectOrder', {
|
|
412
|
+
action: 'deliveryFailed',
|
|
413
|
+
order: _ordersGrouped[k][0],
|
|
414
|
+
ids: _ordersGrouped[k].map((o: any) => o.id),
|
|
415
|
+
handleChangeOrderStatus
|
|
416
|
+
})}
|
|
417
|
+
/>
|
|
418
|
+
<OButton
|
|
419
|
+
text={t('DELIVERY_COMPLETE', 'Delivery complete')}
|
|
420
|
+
bgColor={theme.colors.success100}
|
|
421
|
+
borderColor={theme.colors.success100}
|
|
422
|
+
imgRightSrc={null}
|
|
423
|
+
style={{ borderRadius: 7, height: 40, paddingLeft: 10, paddingRight: 10 }}
|
|
424
|
+
parentStyle={{ width: '45%' }}
|
|
425
|
+
textStyle={{ color: theme.colors.success500, fontSize: 12, textAlign: 'center' }}
|
|
426
|
+
onClick={() => handleChangeOrderStatus(
|
|
427
|
+
11,
|
|
428
|
+
_ordersGrouped[k].map((o: any) => o.id),
|
|
429
|
+
)}
|
|
430
|
+
/>
|
|
431
|
+
</AcceptOrRejectOrderStyle>
|
|
432
|
+
)}
|
|
326
433
|
</OrdersGroupedItem>
|
|
327
434
|
))}
|
|
328
435
|
</View>
|
|
@@ -33,7 +33,7 @@ export const NotificationIcon = styled.View`
|
|
|
33
33
|
export const AcceptOrRejectOrder = styled.View`
|
|
34
34
|
flex-direction: row;
|
|
35
35
|
justify-content: space-between;
|
|
36
|
-
margin:
|
|
36
|
+
margin: ${(props: any) => props.m ?? 10}px;
|
|
37
37
|
`
|
|
38
38
|
export const Timestatus = styled.View`
|
|
39
39
|
position: relative;;
|
|
@@ -12,10 +12,11 @@ interface Props {
|
|
|
12
12
|
TextStyle?: TextStyle;
|
|
13
13
|
type?: string;
|
|
14
14
|
hasButton?: boolean;
|
|
15
|
+
numberOfLines?: number;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
const OLink = (props: Props): React.ReactElement => {
|
|
18
|
-
const { url, shorcut, color, PressStyle, TextStyle, type, hasButton } = props;
|
|
19
|
+
const { url, shorcut, color, PressStyle, TextStyle, type, hasButton, numberOfLines } = props;
|
|
19
20
|
const [, t] = useLanguage();
|
|
20
21
|
|
|
21
22
|
const handleAlert = () =>
|
|
@@ -75,7 +76,7 @@ const OLink = (props: Props): React.ReactElement => {
|
|
|
75
76
|
) : (
|
|
76
77
|
<OText
|
|
77
78
|
style={TextStyle}
|
|
78
|
-
numberOfLines={1}
|
|
79
|
+
numberOfLines={numberOfLines ?? 1}
|
|
79
80
|
ellipsizeMode="tail"
|
|
80
81
|
color={color}>
|
|
81
82
|
{shorcut}
|
|
@@ -148,6 +148,7 @@ const CheckoutUI = (props: any) => {
|
|
|
148
148
|
|
|
149
149
|
const placeSpotTypes = [3, 4, 5]
|
|
150
150
|
const placeSpotsEnabled = placeSpotTypes.includes(options?.type)
|
|
151
|
+
const isGiftCardCart = !cart?.business_id
|
|
151
152
|
const businessConfigs = businessDetails?.business?.configs ?? []
|
|
152
153
|
const isWalletCashEnabled = businessConfigs.find((config: any) => config.key === 'wallet_cash_enabled')?.value === '1'
|
|
153
154
|
const isWalletCreditPointsEnabled = businessConfigs.find((config: any) => config.key === 'wallet_credit_point_enabled')?.value === '1'
|
|
@@ -270,7 +271,11 @@ const CheckoutUI = (props: any) => {
|
|
|
270
271
|
|
|
271
272
|
useEffect(() => {
|
|
272
273
|
if (cart?.products?.length === 0) {
|
|
273
|
-
|
|
274
|
+
if (cart?.business?.slug) {
|
|
275
|
+
onNavigationRedirect('Business', { store: cart?.business?.slug, header: null, logo: null })
|
|
276
|
+
} else {
|
|
277
|
+
onNavigationRedirect('Wallets')
|
|
278
|
+
}
|
|
274
279
|
}
|
|
275
280
|
}, [cart?.products])
|
|
276
281
|
|
|
@@ -347,53 +352,55 @@ const CheckoutUI = (props: any) => {
|
|
|
347
352
|
<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 18, marginHorizontal: -40 }} />
|
|
348
353
|
</ChSection>
|
|
349
354
|
|
|
350
|
-
|
|
351
|
-
<
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
<
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
355
|
+
{!isGiftCardCart && (
|
|
356
|
+
<ChSection>
|
|
357
|
+
<ChBusinessDetails>
|
|
358
|
+
{
|
|
359
|
+
(businessDetails?.loading || cartState.loading || !businessDetails?.business || Object.values(businessDetails?.business).length === 0) &&
|
|
360
|
+
!businessDetails?.error &&
|
|
361
|
+
(
|
|
362
|
+
<Placeholder Animation={Fade}>
|
|
363
|
+
<PlaceholderLine height={20} />
|
|
364
|
+
<PlaceholderLine height={12} />
|
|
365
|
+
<PlaceholderLine height={12} />
|
|
366
|
+
<PlaceholderLine height={12} style={{ marginBottom: 20 }} />
|
|
367
|
+
</Placeholder>
|
|
368
|
+
)}
|
|
369
|
+
{
|
|
370
|
+
!cartState.loading &&
|
|
371
|
+
businessDetails?.business &&
|
|
372
|
+
Object.values(businessDetails?.business).length > 0 &&
|
|
373
|
+
(
|
|
374
|
+
<>
|
|
375
|
+
<HeaderTitle text={t('BUSINESS_DETAILS', 'Business Details')} />
|
|
376
|
+
<View>
|
|
377
|
+
<OText size={12} lineHeight={18} weight={'400'}>
|
|
378
|
+
{businessDetails?.business?.name}
|
|
379
|
+
</OText>
|
|
380
|
+
<OText size={12} lineHeight={18} weight={'400'}>
|
|
381
|
+
{businessDetails?.business?.email}
|
|
382
|
+
</OText>
|
|
383
|
+
<OText size={12} lineHeight={18} weight={'400'}>
|
|
384
|
+
{businessDetails?.business?.cellphone}
|
|
385
|
+
</OText>
|
|
386
|
+
<OText size={12} lineHeight={18} weight={'400'}>
|
|
387
|
+
{businessDetails?.business?.address}
|
|
388
|
+
</OText>
|
|
389
|
+
</View>
|
|
390
|
+
</>
|
|
391
|
+
)}
|
|
392
|
+
{businessDetails?.error && businessDetails?.error?.length > 0 && (
|
|
393
|
+
<View>
|
|
369
394
|
<HeaderTitle text={t('BUSINESS_DETAILS', 'Business Details')} />
|
|
370
|
-
<
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
<OText size={12} lineHeight={18} weight={'400'}>
|
|
375
|
-
{businessDetails?.business?.email}
|
|
376
|
-
</OText>
|
|
377
|
-
<OText size={12} lineHeight={18} weight={'400'}>
|
|
378
|
-
{businessDetails?.business?.cellphone}
|
|
379
|
-
</OText>
|
|
380
|
-
<OText size={12} lineHeight={18} weight={'400'}>
|
|
381
|
-
{businessDetails?.business?.address}
|
|
382
|
-
</OText>
|
|
383
|
-
</View>
|
|
384
|
-
</>
|
|
395
|
+
<NotFoundSource
|
|
396
|
+
content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
|
|
397
|
+
/>
|
|
398
|
+
</View>
|
|
385
399
|
)}
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
content={businessDetails?.error[0]?.message || businessDetails?.error[0]}
|
|
391
|
-
/>
|
|
392
|
-
</View>
|
|
393
|
-
)}
|
|
394
|
-
</ChBusinessDetails>
|
|
395
|
-
<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
|
|
396
|
-
</ChSection>
|
|
400
|
+
</ChBusinessDetails>
|
|
401
|
+
<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
|
|
402
|
+
</ChSection>
|
|
403
|
+
)}
|
|
397
404
|
|
|
398
405
|
<ChSection>
|
|
399
406
|
<ChUserDetails>
|
|
@@ -422,7 +429,7 @@ const CheckoutUI = (props: any) => {
|
|
|
422
429
|
<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
|
|
423
430
|
</ChSection>
|
|
424
431
|
|
|
425
|
-
{options?.type === 1 && (
|
|
432
|
+
{options?.type === 1 && !isGiftCardCart && (
|
|
426
433
|
<DeliveryOptionsContainer>
|
|
427
434
|
{cartState.loading || deliveryOptionSelected === undefined ? (
|
|
428
435
|
<View style={{ height: 110 }}>
|
|
@@ -501,28 +508,30 @@ const CheckoutUI = (props: any) => {
|
|
|
501
508
|
</ChSection>
|
|
502
509
|
)}
|
|
503
510
|
|
|
504
|
-
|
|
505
|
-
<
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
<
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
511
|
+
{!isGiftCardCart && (
|
|
512
|
+
<ChSection>
|
|
513
|
+
<ChAddress>
|
|
514
|
+
{(businessDetails?.loading || cartState.loading) ? (
|
|
515
|
+
<Placeholder Animation={Fade}>
|
|
516
|
+
<PlaceholderLine height={20} style={{ marginBottom: 50 }} />
|
|
517
|
+
<PlaceholderLine height={100} />
|
|
518
|
+
</Placeholder>
|
|
519
|
+
) : (
|
|
520
|
+
<AddressDetails
|
|
521
|
+
navigation={navigation}
|
|
522
|
+
location={businessDetails?.business?.location}
|
|
523
|
+
businessLogo={businessDetails?.business?.logo}
|
|
524
|
+
isCartPending={cart?.status === 2}
|
|
525
|
+
uuid={cartUuid}
|
|
526
|
+
apiKey={configs?.google_maps_api_key?.value}
|
|
527
|
+
mapConfigs={mapConfigs}
|
|
528
|
+
HeaderTitle={<HeaderTitle text={t('DELIVERY_ADDRESS', 'Delivery address')} mb={0} />}
|
|
529
|
+
/>
|
|
530
|
+
)}
|
|
531
|
+
</ChAddress>
|
|
532
|
+
<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
|
|
533
|
+
</ChSection>
|
|
534
|
+
)}
|
|
526
535
|
|
|
527
536
|
{!cartState.loading &&
|
|
528
537
|
cart &&
|
|
@@ -531,6 +540,7 @@ const CheckoutUI = (props: any) => {
|
|
|
531
540
|
cart?.status !== 2 &&
|
|
532
541
|
validationFields?.fields?.checkout?.driver_tip?.enabled &&
|
|
533
542
|
driverTipsOptions && driverTipsOptions?.length > 0 &&
|
|
543
|
+
!isGiftCardCart &&
|
|
534
544
|
(
|
|
535
545
|
<ChSection>
|
|
536
546
|
<ChDriverTips>
|
|
@@ -566,8 +576,8 @@ const CheckoutUI = (props: any) => {
|
|
|
566
576
|
<PaymentOptions
|
|
567
577
|
cart={cart}
|
|
568
578
|
isDisabled={cart?.status === 2}
|
|
569
|
-
businessId={businessDetails?.business?.id}
|
|
570
|
-
|
|
579
|
+
businessId={!isGiftCardCart ? businessDetails?.business?.id : -1}
|
|
580
|
+
isLoading={!isGiftCardCart ? businessDetails.loading : false}
|
|
571
581
|
paymethods={businessDetails?.business?.paymethods}
|
|
572
582
|
onPaymentChange={handlePaymethodChange}
|
|
573
583
|
errorCash={errorCash}
|
|
@@ -593,7 +603,7 @@ const CheckoutUI = (props: any) => {
|
|
|
593
603
|
)}
|
|
594
604
|
|
|
595
605
|
|
|
596
|
-
{!cartState.loading && placeSpotsEnabled && (
|
|
606
|
+
{!cartState.loading && placeSpotsEnabled && !isGiftCardCart && (
|
|
597
607
|
<>
|
|
598
608
|
<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 30, marginHorizontal: -40 }} />
|
|
599
609
|
<PlaceSpot
|
|
@@ -620,18 +630,20 @@ const CheckoutUI = (props: any) => {
|
|
|
620
630
|
<>
|
|
621
631
|
<CartHeader>
|
|
622
632
|
<HeaderTitle text={t('MOBILE_FRONT_YOUR_ORDER', 'Your order')} mb={0} />
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
<OText
|
|
627
|
-
size={12}
|
|
628
|
-
lineHeight={15}
|
|
629
|
-
color={theme.colors.primary}
|
|
630
|
-
style={{ textDecorationLine: 'underline' }}
|
|
633
|
+
{!isGiftCardCart && (
|
|
634
|
+
<TouchableOpacity
|
|
635
|
+
onPress={() => onNavigationRedirect('Business', { store: cart?.business?.slug })}
|
|
631
636
|
>
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
637
|
+
<OText
|
|
638
|
+
size={12}
|
|
639
|
+
lineHeight={15}
|
|
640
|
+
color={theme.colors.primary}
|
|
641
|
+
style={{ textDecorationLine: 'underline' }}
|
|
642
|
+
>
|
|
643
|
+
{t('ADD_PRODUCTS', 'Add products')}
|
|
644
|
+
</OText>
|
|
645
|
+
</TouchableOpacity>
|
|
646
|
+
)}
|
|
635
647
|
</CartHeader>
|
|
636
648
|
{isBusinessChangeEnabled && (
|
|
637
649
|
<TouchableOpacity
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { StyleSheet, View } from 'react-native';
|
|
3
|
+
import { useLanguage } from 'ordering-components/native';
|
|
4
|
+
import Feather from 'react-native-vector-icons/Feather'
|
|
5
|
+
import { useTheme } from 'styled-components/native';
|
|
6
|
+
import { OText, OButton } from '../../shared';
|
|
7
|
+
import { OModal } from '../../../../../../src/components/shared';
|
|
8
|
+
import { PurchaseGiftCard } from '../PurchaseGiftCard'
|
|
9
|
+
import { RedeemGiftCard } from '../RedeemGiftCard'
|
|
10
|
+
|
|
11
|
+
import {
|
|
12
|
+
Container
|
|
13
|
+
} from './styles'
|
|
14
|
+
|
|
15
|
+
export const GiftCardUI = React.memo((props: any) => {
|
|
16
|
+
const {
|
|
17
|
+
navigation
|
|
18
|
+
} = props
|
|
19
|
+
const [, t] = useLanguage()
|
|
20
|
+
const theme = useTheme()
|
|
21
|
+
const [openModal, setOpenModal] = useState<any>(null)
|
|
22
|
+
|
|
23
|
+
const style = StyleSheet.create({
|
|
24
|
+
title: {
|
|
25
|
+
flexDirection: 'row',
|
|
26
|
+
alignItems: 'center'
|
|
27
|
+
},
|
|
28
|
+
actionWrapper: {
|
|
29
|
+
flexDirection: 'row',
|
|
30
|
+
alignItems: 'center',
|
|
31
|
+
marginTop: 10
|
|
32
|
+
},
|
|
33
|
+
btnStyle: {
|
|
34
|
+
borderRadius: 7.6,
|
|
35
|
+
paddingLeft: 0,
|
|
36
|
+
paddingRight: 0,
|
|
37
|
+
height: 44
|
|
38
|
+
}
|
|
39
|
+
})
|
|
40
|
+
|
|
41
|
+
const handleCustomGoToCheckout = (uuid: any) => {
|
|
42
|
+
setOpenModal(null)
|
|
43
|
+
navigation.navigate('CheckoutNavigator', {
|
|
44
|
+
screen: 'CheckoutPage',
|
|
45
|
+
cartUuid: uuid
|
|
46
|
+
})
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<Container>
|
|
51
|
+
<View style={style.title}>
|
|
52
|
+
<OText size={16} color={theme.colors.textNormal} weight='bold' mBottom={0} mRight={12}>{t('GIFT_CARD', 'Gift card')}</OText>
|
|
53
|
+
<Feather name='gift' color={theme.colors.textNormal} size={16} />
|
|
54
|
+
</View>
|
|
55
|
+
|
|
56
|
+
<View style={style.actionWrapper}>
|
|
57
|
+
<OButton
|
|
58
|
+
onClick={() => setOpenModal('purchase')}
|
|
59
|
+
text={t('PURCHASE_GIFT_CARD', 'Purchase gift card')}
|
|
60
|
+
bgColor={theme.colors.primary}
|
|
61
|
+
borderColor={theme.colors.primary}
|
|
62
|
+
textStyle={{ color: 'white', fontSize: 13 }}
|
|
63
|
+
imgRightSrc={null}
|
|
64
|
+
style={{ ...style.btnStyle, marginRight: 14 }}
|
|
65
|
+
/>
|
|
66
|
+
|
|
67
|
+
<OButton
|
|
68
|
+
onClick={() => setOpenModal('redeem')}
|
|
69
|
+
text={t('REDEEM_GIFT_CARD', 'Redeem gift card')}
|
|
70
|
+
bgColor={theme.colors.lightPrimary}
|
|
71
|
+
borderColor={theme.colors.lightPrimary}
|
|
72
|
+
textStyle={{ color: theme.colors.primary, fontSize: 13 }}
|
|
73
|
+
imgRightSrc={null}
|
|
74
|
+
style={style.btnStyle}
|
|
75
|
+
/>
|
|
76
|
+
</View>
|
|
77
|
+
|
|
78
|
+
<OModal
|
|
79
|
+
open={openModal === 'purchase'}
|
|
80
|
+
onClose={() => setOpenModal(null)}
|
|
81
|
+
entireModal
|
|
82
|
+
>
|
|
83
|
+
<PurchaseGiftCard handleCustomGoToCheckout={handleCustomGoToCheckout} />
|
|
84
|
+
</OModal>
|
|
85
|
+
<OModal
|
|
86
|
+
open={openModal === 'redeem'}
|
|
87
|
+
onClose={() => setOpenModal(null)}
|
|
88
|
+
entireModal
|
|
89
|
+
>
|
|
90
|
+
<RedeemGiftCard
|
|
91
|
+
onClose={() => setOpenModal(null)}
|
|
92
|
+
/>
|
|
93
|
+
</OModal>
|
|
94
|
+
</Container>
|
|
95
|
+
)
|
|
96
|
+
})
|