ordering-ui-react-native 0.17.85 → 0.17.87

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.
Files changed (33) hide show
  1. package/package.json +1 -1
  2. package/themes/business/src/components/MapView/index.tsx +2 -2
  3. package/themes/business/src/components/ProductItemAccordion/index.tsx +21 -3
  4. package/themes/original/src/components/AddressForm/index.tsx +26 -22
  5. package/themes/original/src/components/BusinessBasicInformation/index.tsx +91 -70
  6. package/themes/original/src/components/BusinessController/index.tsx +71 -49
  7. package/themes/original/src/components/BusinessProductsListing/index.tsx +32 -44
  8. package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx +48 -30
  9. package/themes/original/src/components/Cart/index.tsx +36 -71
  10. package/themes/original/src/components/CartContent/index.tsx +47 -2
  11. package/themes/original/src/components/CartContent/styles.tsx +10 -0
  12. package/themes/original/src/components/Checkout/index.tsx +40 -32
  13. package/themes/original/src/components/Messages/index.tsx +8 -7
  14. package/themes/original/src/components/MultiCart/index.tsx +41 -54
  15. package/themes/original/src/components/MultiCheckout/index.tsx +2 -7
  16. package/themes/original/src/components/MyOrders/index.tsx +9 -7
  17. package/themes/original/src/components/OrderDetails/index.tsx +99 -73
  18. package/themes/original/src/components/OrderTypeSelector/index.tsx +6 -4
  19. package/themes/original/src/components/PageBanner/index.tsx +60 -33
  20. package/themes/original/src/components/PageBanner/styles.tsx +0 -7
  21. package/themes/original/src/components/PaymentOptionStripe/styles.tsx +1 -1
  22. package/themes/original/src/components/ProductForm/index.tsx +2 -2
  23. package/themes/original/src/components/SingleOrderCard/index.tsx +58 -44
  24. package/themes/original/src/components/SingleProductCard/index.tsx +51 -21
  25. package/themes/original/src/components/SingleProductCard/styles.tsx +11 -1
  26. package/themes/original/src/components/StripeCardsList/index.tsx +1 -1
  27. package/themes/original/src/components/UpsellingProducts/index.tsx +243 -216
  28. package/themes/original/src/components/UpsellingProducts/styles.tsx +12 -1
  29. package/themes/original/src/components/UserProfile/index.tsx +82 -53
  30. package/themes/original/src/components/shared/OButton.tsx +5 -1
  31. package/themes/original/src/components/shared/OInput.tsx +8 -2
  32. package/themes/original/src/types/index.tsx +3 -0
  33. package/themes/original/src/utils/index.tsx +11 -0
package/themes/original/src/components/MultiCart/index.tsx CHANGED
@@ -1,63 +1,50 @@
1
1
  import React from 'react'
2
- import { ChAddress, ChContainer, ChSection, ChUserDetails, DeliveryOptionsContainer } from '../Checkout/styles'
2
+ import { View } from 'react-native'
3
3
  import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder'
4
- import { Container } from '../../layouts/Container';
5
- import { View, StyleSheet } from 'react-native'
6
4
  import { useTheme } from 'styled-components/native';
7
5
  import { MultiCartCreate } from 'ordering-components/native'
8
6
 
9
- export const MultiCartUI = () => {
10
- const theme = useTheme();
11
-
12
- const styles = StyleSheet.create({
13
- pagePadding: {
14
- paddingHorizontal: 40
15
- }
16
- })
17
-
18
- return (
19
- <>
20
- <Container noPadding>
21
- <ChContainer style={styles.pagePadding}>
22
- <ChSection>
23
- <ChUserDetails>
24
- <Placeholder Animation={Fade}>
25
- <PlaceholderLine height={20} />
26
- <PlaceholderLine height={12} />
27
- <PlaceholderLine height={12} />
28
- <PlaceholderLine height={12} style={{ marginBottom: 20 }} />
29
- </Placeholder>
30
- </ChUserDetails>
31
- <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40 }} />
32
- </ChSection>
33
- <DeliveryOptionsContainer>
34
- <View style={{ height: 110 }}>
35
- <Placeholder Animation={Fade}>
36
- <PlaceholderLine height={20} />
37
- <PlaceholderLine height={40} />
38
- </Placeholder>
39
- </View>
40
- </DeliveryOptionsContainer>
41
- <ChSection>
42
- <ChAddress>
43
- <Placeholder Animation={Fade}>
44
- <PlaceholderLine height={20} style={{ marginBottom: 50 }} />
45
- <PlaceholderLine height={100} />
46
- </Placeholder>
47
- </ChAddress>
48
- <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
49
- </ChSection>
50
- </ChContainer>
51
- </Container>
7
+ import { Container } from '../../layouts/Container';
8
+ import { ChContainer, ChSection, ChUserDetails } from '../Checkout/styles'
52
9
 
53
- </>
54
- )
10
+ export const MultiCartUI = () => {
11
+ const theme = useTheme();
12
+ return (
13
+ <Container noPadding>
14
+ <ChContainer style={{ paddingHorizontal: 40 }}>
15
+ <ChSection>
16
+ <ChUserDetails>
17
+ <Placeholder Animation={Fade}>
18
+ <PlaceholderLine height={20} />
19
+ <PlaceholderLine height={20} />
20
+ <PlaceholderLine height={20} />
21
+ <PlaceholderLine height={20} style={{ marginBottom: 20 }} />
22
+ </Placeholder>
23
+ <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 20 }} />
24
+ <Placeholder Animation={Fade}>
25
+ <PlaceholderLine height={20} />
26
+ <PlaceholderLine height={20} />
27
+ <PlaceholderLine height={20} />
28
+ <PlaceholderLine height={20} style={{ marginBottom: 20 }} />
29
+ </Placeholder>
30
+ <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginHorizontal: -40, marginBottom: 20 }} />
31
+ <Placeholder Animation={Fade}>
32
+ <PlaceholderLine height={20} />
33
+ <PlaceholderLine height={120} style={{ marginBottom: 20, borderRadius: 8 }} />
34
+ <PlaceholderLine height={20} />
35
+ <PlaceholderLine height={20} />
36
+ </Placeholder>
37
+ </ChUserDetails>
38
+ </ChSection>
39
+ </ChContainer>
40
+ </Container>
41
+ )
55
42
  }
56
43
 
57
- export const MultiCart = (props : any) => {
58
- const mulcartProps = {
59
- ...props,
60
- UIComponent: MultiCartUI
61
- }
62
- return <MultiCartCreate {...mulcartProps} />
44
+ export const MultiCart = (props: any) => {
45
+ const mulcartProps = {
46
+ ...props,
47
+ UIComponent: MultiCartUI
48
+ }
49
+ return <MultiCartCreate {...mulcartProps} />
63
50
  }
package/themes/original/src/components/MultiCheckout/index.tsx CHANGED
@@ -65,9 +65,7 @@ const MultiCheckoutUI = (props: any) => {
65
65
  paddingLeft: 40,
66
66
  paddingRight: 40
67
67
  },
68
- wrapperNavbar: Platform.OS === 'ios'
69
- ? { paddingVertical: 0, paddingHorizontal: 40 }
70
- : { paddingVertical: 20, paddingHorizontal: 40 }
68
+ wrapperNavbar: { paddingHorizontal: 40 }
71
69
  })
72
70
 
73
71
  const [, { showToast }] = useToast();
@@ -150,15 +148,12 @@ const MultiCheckoutUI = (props: any) => {
150
148
  <Container noPadding>
151
149
  <View style={styles.wrapperNavbar}>
152
150
  <NavBar
153
- isVertical
154
151
  title={t('CHECKOUT', 'Checkout')}
155
152
  titleAlign={'center'}
156
153
  onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
157
154
  showCall={false}
155
+ paddingTop={Platform.OS === 'ios' ? 0 : 4}
158
156
  btnStyle={{ paddingLeft: 0 }}
159
- style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
160
- titleWrapStyle={{ paddingHorizontal: 0 }}
161
- titleStyle={{ marginRight: 0, marginLeft: 0 }}
162
157
  />
163
158
  </View>
164
159
  <ChContainer style={styles.pagePadding}>
package/themes/original/src/components/MyOrders/index.tsx CHANGED
@@ -30,15 +30,17 @@ export const MyOrders = (props: any) => {
30
30
 
31
31
  const notOrderOptions = ['business', 'products']
32
32
  const allEmpty = (ordersLength?.activeOrdersLength === 0 && ordersLength?.previousOrdersLength === 0) || ((isEmptyBusinesses || businessOrderIds?.length === 0) && hideOrders)
33
- const MyOrdersMenu = [
34
- { key: 'orders', value: t('ORDERS', 'Orders') },
35
- { key: 'business', value: t('BUSINESS', 'Business') },
36
- { key: 'products', value: t('PRODUCTS', 'Products') }
37
- ]
33
+
38
34
  const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
39
35
  const showNavbar = theme?.bar_menu?.components?.orders?.hidden
40
36
  const hideOrdersTheme = theme?.bar_menu?.components?.orders?.hidden
41
-
37
+ const hideProductsTab = theme?.orders?.components?.products_tab?.hidden
38
+ const hideBusinessTab = theme?.orders?.components?.business_tab?.hidden
39
+ const MyOrdersMenu = [
40
+ { key: 'orders', value: t('ORDERS', 'Orders'), disabled: false },
41
+ { key: 'business', value: t('BUSINESS', 'Business'), disabled: hideBusinessTab },
42
+ { key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab }
43
+ ]
42
44
  const goToBack = () => navigation?.canGoBack() && navigation.goBack()
43
45
 
44
46
  const handleOnRefresh = () => {
@@ -125,7 +127,7 @@ export const MyOrders = (props: any) => {
125
127
  showsHorizontalScrollIndicator={false}
126
128
  scrollEventThrottle={16}
127
129
  >
128
- {MyOrdersMenu.filter(option => !hideOrders || option.key !== 'orders').map(option => (
130
+ {MyOrdersMenu.filter(option => (!hideOrders || option.key !== 'orders') && !option.disabled).map(option => (
129
131
  <Tab
130
132
  key={option.key}
131
133
  onPress={() => setSelectedOption(option.key)}
package/themes/original/src/components/OrderDetails/index.tsx CHANGED
@@ -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
- ? parseDate(order?.delivery_datetime_utc)
408
- : parseDate(order?.delivery_datetime, { utc: false })
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
- <StaturBar>
462
- <LinearGradient
463
- start={{ x: 0.0, y: 0.0 }}
464
- end={{
465
- x: getOrderStatus(order?.status)?.percentage || 0,
466
- y: 0,
467
- }}
468
- locations={[0.9999, 0.9999]}
469
- colors={[theme.colors.primary, theme.colors.backgroundGray100]}
470
- style={styles.statusBar}
471
- />
472
- </StaturBar>
473
- <OText
474
- size={16}
475
- lineHeight={24}
476
- weight={'600'}
477
- color={theme.colors.textNormal}>
478
- {getOrderStatus(order?.status)?.value}
479
- </OText>
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
- <TouchableOpacity
538
- style={{ paddingStart: 5 }}
539
- onPress={() => handleGoToMessages('business')}>
540
- <OIcon
541
- src={theme.images.general.chat}
542
- width={16}
543
- color={theme.colors.disabled}
544
- />
545
- </TouchableOpacity>
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
- <OText
549
- size={12}
550
- lineHeight={18}
551
- color={theme.colors.textNormal}
552
- mBottom={2}>
553
- {order?.business?.email}
554
- </OText>
555
- {!!order?.business?.cellphone && (
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
- <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
565
- {order?.business?.address}
566
- </OText>
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
- <OText
629
- size={12}
630
- lineHeight={18}
631
- color={theme.colors.textNormal}
632
- mBottom={2}>
633
- {order?.customer?.address}
634
- </OText>
635
- {(!!order?.customer?.cellphone) && (
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
- <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2} style={{ flexGrow: 1, flexBasis: '80%' }}>
704
- {order?.driver?.name} {order?.driver?.lastname}
705
- </OText>
706
- <Icons>
707
- <TouchableOpacity
708
- onPress={() => handleGoToMessages('driver')}>
709
- <OIcon
710
- src={theme.images.general.chat}
711
- width={16}
712
- color={theme.colors.disabled}
713
- />
714
- </TouchableOpacity>
715
- </Icons>
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
- <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
718
- {order?.driver?.cellphone}
719
- </OText>
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>
package/themes/original/src/components/OrderTypeSelector/index.tsx CHANGED
@@ -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>
package/themes/original/src/components/PageBanner/index.tsx CHANGED
@@ -1,17 +1,17 @@
1
1
  import React, { useRef } from 'react'
2
2
  import { useUtils, PageBanner as PageBannerController } from 'ordering-components/native'
3
-
4
3
  import { View, StyleSheet, Dimensions, TouchableOpacity } from 'react-native'
5
4
  import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
6
5
  import Carousel from 'react-native-snap-carousel'
7
6
  import FastImage from 'react-native-fast-image';
8
7
  import IconAntDesign from 'react-native-vector-icons/AntDesign';
9
8
  import { useTheme } from 'styled-components/native';
10
- import { PageBannerWrapper, ArrowButtonsContainer } from './styles'
9
+ import { PageBannerWrapper } from './styles'
11
10
 
12
11
  const PageBannerUI = (props: any) => {
13
12
  const {
14
- pageBannerState
13
+ pageBannerState,
14
+ navigation
15
15
  } = props
16
16
 
17
17
  const theme = useTheme();
@@ -25,7 +25,8 @@ const PageBannerUI = (props: any) => {
25
25
  height: 300,
26
26
  },
27
27
  swiperButton: {
28
- marginHorizontal: 25,
28
+ position: 'absolute',
29
+ zIndex: 100,
29
30
  alignItems: 'center',
30
31
  justifyContent: 'center',
31
32
  width: 32,
@@ -39,15 +40,43 @@ const PageBannerUI = (props: any) => {
39
40
  }
40
41
  })
41
42
 
43
+ const onRedirect = (route: string, params?: any) => {
44
+ navigation.navigate(route, params)
45
+ }
46
+
47
+ const handleGoToPage = (action: any) => {
48
+ if (!action?.url) return
49
+ let slug
50
+ if (action.type === 'business') {
51
+ slug = action.url.split('store/')[1]
52
+ onRedirect('Business', {
53
+ store: slug
54
+ })
55
+ }
56
+ if (action.type === 'product') {
57
+ slug = action.url.split('store/')[1]?.split('?')[0]
58
+ onRedirect('ProductDetails', {
59
+ businessSlug: slug,
60
+ businessId: action.business_id,
61
+ categoryId: action.category_id,
62
+ productId: action.product_id
63
+ })
64
+ }
65
+ }
66
+
42
67
  const renderItem = ({ item, index }) => {
43
68
  return (
44
- <View style={styles.sliderWrapper}>
45
- <FastImage
46
- style={{ height: '100%', width: '100%' }}
47
- resizeMode='cover'
48
- source={{ uri: optimizeImage(item.url, 'h_300,c_limit') }}
49
- />
50
- </View>
69
+ <TouchableOpacity
70
+ onPress={() => handleGoToPage(item.action)}
71
+ >
72
+ <View style={styles.sliderWrapper}>
73
+ <FastImage
74
+ style={{ height: '100%', width: '100%' }}
75
+ resizeMode='cover'
76
+ source={{ uri: optimizeImage(item.url, 'h_300,c_limit') }}
77
+ />
78
+ </View>
79
+ </TouchableOpacity>
51
80
  )
52
81
  }
53
82
 
@@ -68,28 +97,26 @@ const PageBannerUI = (props: any) => {
68
97
  <>
69
98
  {pageBannerState.banner?.items && pageBannerState.banner?.items.length > 0 && (
70
99
  <PageBannerWrapper>
71
- <ArrowButtonsContainer>
72
- <TouchableOpacity
73
- style={styles.swiperButton}
74
- onPress={() => carouselRef.current.snapToPrev()}
75
- >
76
- <IconAntDesign
77
- name="caretleft"
78
- color={theme.colors.white}
79
- size={13}
80
- />
81
- </TouchableOpacity>
82
- <TouchableOpacity
83
- style={styles.swiperButton}
84
- onPress={() => carouselRef.current.snapToNext()}
85
- >
86
- <IconAntDesign
87
- name="caretright"
88
- color={theme.colors.white}
89
- size={13}
90
- />
91
- </TouchableOpacity>
92
- </ArrowButtonsContainer>
100
+ <TouchableOpacity
101
+ style={[styles.swiperButton, { left: 25 }]}
102
+ onPress={() => carouselRef.current.snapToPrev()}
103
+ >
104
+ <IconAntDesign
105
+ name="caretleft"
106
+ color={theme.colors.white}
107
+ size={13}
108
+ />
109
+ </TouchableOpacity>
110
+ <TouchableOpacity
111
+ style={[styles.swiperButton, { right: 25 }]}
112
+ onPress={() => carouselRef.current.snapToNext()}
113
+ >
114
+ <IconAntDesign
115
+ name="caretright"
116
+ color={theme.colors.white}
117
+ size={13}
118
+ />
119
+ </TouchableOpacity>
93
120
  <Carousel
94
121
  ref={carouselRef}
95
122
  loop={pageBannerState.banner?.items.length > 1}
package/themes/original/src/components/PageBanner/styles.tsx CHANGED
@@ -9,10 +9,3 @@ export const PageBannerWrapper = styled.View`
9
9
  flex-direction: row;
10
10
  align-items: center;
11
11
  `
12
- export const ArrowButtonsContainer = styled.View`
13
- position: absolute;
14
- z-index: 100;
15
- flex-direction: row;
16
- justify-content: space-between;
17
- width: 100%;
18
- `
package/themes/original/src/components/PaymentOptionStripe/styles.tsx CHANGED
@@ -39,7 +39,7 @@ export const OSItem = styled.View`
39
39
  flex-direction: row;
40
40
  justify-content: space-between;
41
41
  align-items: center;
42
- padding: 20px 0px;
42
+ padding: 10px 0px;
43
43
  `;
44
44
 
45
45
  export const OSItemContent = styled.TouchableOpacity`
package/themes/original/src/components/ProductForm/index.tsx CHANGED
@@ -553,7 +553,7 @@ export const ProductOptionsUI = (props: any) => {
553
553
  >
554
554
  {(String(img).includes('http') || typeof img === 'number') ? (
555
555
  <FastImage
556
- style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 3 / 2 }}
556
+ style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1, aspectRatio: 16 / 9 }}
557
557
  source={typeof img !== 'number' ? {
558
558
  uri: optimizeImage(img, 'h_1024,c_limit'),
559
559
  priority: FastImage.priority.normal,
@@ -581,7 +581,7 @@ export const ProductOptionsUI = (props: any) => {
581
581
  paddingVertical: 15
582
582
  }}
583
583
  >
584
- {gallery?.length > 0 && gallery.map((img, index) => (
584
+ {gallery?.length > 1 && gallery.map((img, index) => (
585
585
  <TouchableOpacity
586
586
  key={index}
587
587
  onPress={() => handleClickThumb(index)}