ordering-ui-react-native 0.14.24 → 0.14.25-release

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 (32) hide show
  1. package/package.json +2 -2
  2. package/src/components/Messages/index.tsx +6 -1
  3. package/src/components/ProductForm/index.tsx +40 -34
  4. package/src/components/VerifyPhone/styles.tsx +1 -2
  5. package/themes/doordash/src/components/LoginForm/index.tsx +1 -2
  6. package/themes/doordash/src/components/ProductForm/index.tsx +14 -16
  7. package/themes/instacart/src/components/ProductForm/index.tsx +13 -15
  8. package/themes/kiosk/src/components/ProductForm/index.tsx +13 -15
  9. package/themes/original/index.tsx +0 -4
  10. package/themes/original/src/components/BusinessItemAccordion/index.tsx +1 -2
  11. package/themes/original/src/components/BusinessesListing/index.tsx +19 -25
  12. package/themes/original/src/components/Cart/index.tsx +9 -27
  13. package/themes/original/src/components/CartContent/index.tsx +0 -1
  14. package/themes/original/src/components/Checkout/index.tsx +4 -15
  15. package/themes/original/src/components/Checkout/styles.tsx +1 -5
  16. package/themes/original/src/components/FacebookLogin/index.tsx +20 -5
  17. package/themes/original/src/components/Help/index.tsx +2 -2
  18. package/themes/original/src/components/Messages/index.tsx +39 -59
  19. package/themes/original/src/components/OrderDetails/index.tsx +2 -54
  20. package/themes/original/src/components/OrderProgress/index.tsx +2 -2
  21. package/themes/original/src/components/OrderSummary/index.tsx +3 -21
  22. package/themes/original/src/components/ProductForm/index.tsx +43 -28
  23. package/themes/original/src/components/UserProfile/index.tsx +0 -5
  24. package/themes/original/src/types/index.tsx +2 -4
  25. package/themes/single-business/src/components/ProductForm/index.tsx +28 -29
  26. package/themes/uber-eats/src/components/ProductForm/index.tsx +13 -15
  27. package/themes/original/src/components/PaymentOptionWallet/index.tsx +0 -163
  28. package/themes/original/src/components/PaymentOptionWallet/styles.tsx +0 -38
  29. package/themes/original/src/components/WalletTransactionItem/index.tsx +0 -68
  30. package/themes/original/src/components/WalletTransactionItem/styles.tsx +0 -37
  31. package/themes/original/src/components/Wallets/index.tsx +0 -204
  32. package/themes/original/src/components/Wallets/styles.tsx +0 -43
@@ -12,6 +12,34 @@ import { MessagesParams } from '../../types'
12
12
  import { useWindowDimensions } from 'react-native'
13
13
  import { useSafeAreaInsets } from 'react-native-safe-area-context'
14
14
 
15
+ const ORDER_STATUS: any = {
16
+ 0: 'ORDER_STATUS_PENDING',
17
+ 1: 'ORDERS_COMPLETED',
18
+ 2: 'ORDER_REJECTED',
19
+ 3: 'ORDER_STATUS_IN_BUSINESS',
20
+ 4: 'ORDER_READY',
21
+ 5: 'ORDER_REJECTED_RESTAURANT',
22
+ 6: 'ORDER_STATUS_CANCELLEDBYDRIVER',
23
+ 7: 'ORDER_STATUS_ACCEPTEDBYRESTAURANT',
24
+ 8: 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER',
25
+ 9: 'ORDER_PICKUP_COMPLETED_BY_DRIVER',
26
+ 10: 'ORDER_PICKUP_FAILED_BY_DRIVER',
27
+ 11: 'ORDER_DELIVERY_COMPLETED_BY_DRIVER',
28
+ 12: 'ORDER_DELIVERY_FAILED_BY_DRIVER',
29
+ 13: 'PREORDER',
30
+ 14: 'ORDER_NOT_READY',
31
+ 15: 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER',
32
+ 16: 'ORDER_STATUS_CANCELLED_BY_CUSTOMER',
33
+ 17: 'ORDER_NOT_PICKEDUP_BY_CUSTOMER',
34
+ 18: 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS',
35
+ 19: 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER',
36
+ 20: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS',
37
+ 21: 'ORDER_CUSTOMER_ARRIVED_BUSINESS',
38
+ }
39
+
40
+ const filterSpecialStatus = ['prepared_in', 'delivered_in']
41
+
42
+
15
43
  const MessagesUI = (props: MessagesParams) => {
16
44
  const {
17
45
  type,
@@ -94,58 +122,6 @@ const MessagesUI = (props: MessagesParams) => {
94
122
  });
95
123
  };
96
124
 
97
- const getStatus = (status: number) => {
98
-
99
- switch (status) {
100
- case 0:
101
- return 'ORDER_STATUS_PENDING'
102
- case 1:
103
- return 'ORDERS_COMPLETED'
104
- case 2:
105
- return 'ORDER_REJECTED'
106
- case 3:
107
- return 'ORDER_STATUS_IN_BUSINESS'
108
- case 4:
109
- return 'ORDER_READY'
110
- case 5:
111
- return 'ORDER_REJECTED_RESTAURANT'
112
- case 6:
113
- return 'ORDER_STATUS_CANCELLEDBYDRIVER'
114
- case 7:
115
- return 'ORDER_STATUS_ACCEPTEDBYRESTAURANT'
116
- case 8:
117
- return 'ORDER_CONFIRMED_ACCEPTED_BY_DRIVER'
118
- case 9:
119
- return 'ORDER_PICKUP_COMPLETED_BY_DRIVER'
120
- case 10:
121
- return 'ORDER_PICKUP_FAILED_BY_DRIVER'
122
- case 11:
123
- return 'ORDER_DELIVERY_COMPLETED_BY_DRIVER'
124
- case 12:
125
- return 'ORDER_DELIVERY_FAILED_BY_DRIVER'
126
- case 13:
127
- return 'PREORDER'
128
- case 14:
129
- return 'ORDER_NOT_READY'
130
- case 15:
131
- return 'ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER'
132
- case 16:
133
- return 'ORDER_STATUS_CANCELLED_BY_CUSTOMER'
134
- case 17:
135
- return 'ORDER_NOT_PICKEDUP_BY_CUSTOMER'
136
- case 18:
137
- return 'ORDER_DRIVER_ALMOST_ARRIVED_BUSINESS'
138
- case 19:
139
- return 'ORDER_DRIVER_ALMOST_ARRIVED_CUSTOMER'
140
- case 20:
141
- return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS'
142
- case 21:
143
- return 'ORDER_CUSTOMER_ARRIVED_BUSINESS'
144
- default:
145
- return status
146
- }
147
- }
148
-
149
125
  const onSubmit = (values: any) => {
150
126
  handleSend && handleSend()
151
127
  setImage && setImage(null)
@@ -154,14 +130,18 @@ const MessagesUI = (props: MessagesParams) => {
154
130
 
155
131
  const messageConsole = (message: any) => {
156
132
  return message.change?.attribute !== 'driver_id'
133
+ ?
134
+ `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${
135
+ filterSpecialStatus.includes(message.change.attribute) ?
136
+ `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}` :
137
+ `${message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])} ${t('TO', 'to')} ${t(ORDER_STATUS[parseInt(message.change.new, 10)])}`
138
+ }`
139
+ : message.change.new
157
140
  ?
158
- `${t('ORDER', 'Order')} ${message.change.attribute} ${t('CHANGED_FROM', 'Changed from')} ${message.change.old !== null && t(getStatus(parseInt(message.change.old, 10)))} ${t('TO', 'to')} ${t(getStatus(parseInt(message.change.new, 10)))}`
159
- : message.change.new
160
- ?
161
- `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
162
- :
163
- `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
164
- }
141
+ `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
142
+ :
143
+ `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
144
+ }
165
145
 
166
146
  useEffect(() => {
167
147
  let newMessages: Array<any> = []
@@ -104,15 +104,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
104
104
 
105
105
  const { order, businessData } = props.order;
106
106
 
107
- const walletName: any = {
108
- cash: {
109
- name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
110
- },
111
- credit_point: {
112
- name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
113
- }
114
- }
115
-
116
107
  const getOrderStatus = (s: string) => {
117
108
  const status = parseInt(s);
118
109
  const orderStatus = [
@@ -835,51 +826,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
835
826
  </OText>
836
827
  </Table>
837
828
  </Total>
838
- {order?.payment_events?.length > 0 && (
839
- <View style={{marginTop: 10}}>
840
- <OText size={20} weight='bold' color={theme.colors.textNormal}>{t('PAYMENTS', 'Payments')}</OText>
841
- <View
842
- style={{
843
- width: '100%',
844
- marginTop: 10
845
- }}
846
- >
847
- {order?.payment_events?.map((event: any) => (
848
- <View
849
- key={event.id}
850
- style={{
851
- display: 'flex',
852
- flexDirection: 'row',
853
- justifyContent: 'space-between',
854
- alignItems: 'center',
855
- marginBottom: 10
856
- }}
857
- >
858
- <View
859
- style={{
860
- display: 'flex',
861
- flexDirection: 'column',
862
- }}
863
- >
864
- <OText>
865
- {event?.wallet_event
866
- ? walletName[event?.wallet_event?.wallet?.type]?.name
867
- : event?.paymethod?.name}
868
- </OText>
869
- {event?.data?.charge_id && (
870
- <OText>
871
- {`${t('CODE', 'Code')}: ${event?.data?.charge_id}`}
872
- </OText>
873
- )}
874
- </View>
875
- <OText>
876
- -{parsePrice(event.amount)}
877
- </OText>
878
- </View>
879
- ))}
880
- </View>
881
- </View>
882
- )}
883
829
  </OrderBill>
884
830
  </OrderContent>
885
831
  </>
@@ -894,6 +840,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
894
840
  orderId={order?.id}
895
841
  messages={messages}
896
842
  order={order}
843
+ business={openModalForBusiness}
844
+ driver={openModalForDriver}
897
845
  setMessages={setMessages}
898
846
  onClose={handleCloseModal}
899
847
  />
@@ -193,13 +193,13 @@ const OrderProgressUI = (props: any) => {
193
193
  </View>
194
194
  </View>
195
195
  )}
196
- {/* {!orderList?.loading && orderList?.orders?.length === 0 && (
196
+ {!orderList?.loading && orderList?.orders?.length === 0 && (
197
197
  <NotFoundSource
198
198
  image={imageFails}
199
199
  content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
200
200
  conditioned
201
201
  />
202
- )} */}
202
+ )}
203
203
  </>
204
204
  )
205
205
  }
@@ -28,6 +28,7 @@ import { TouchableOpacity } from 'react-native';
28
28
 
29
29
  const OrderSummaryUI = (props: any) => {
30
30
  const {
31
+ cart,
31
32
  changeQuantity,
32
33
  getProductMax,
33
34
  offsetDisabled,
@@ -75,16 +76,6 @@ const OrderSummaryUI = (props: any) => {
75
76
  }
76
77
  }
77
78
 
78
- const cart = orderState?.carts?.[`businessId:${props.cart.business_id}`]
79
-
80
- const walletName: any = {
81
- cash: {
82
- name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
83
- },
84
- credit_point: {
85
- name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
86
- }
87
- }
88
79
 
89
80
  return (
90
81
  <OSContainer>
@@ -177,14 +168,6 @@ const OrderSummaryUI = (props: any) => {
177
168
  <OText size={12}>{parsePrice(cart?.driver_tip)}</OText>
178
169
  </OSTable>
179
170
  )}
180
- {cart?.payment_events?.length > 0 && cart?.payment_events?.map((event: any) => (
181
- <OSTable key={event.id}>
182
- <OText size={12} numberOfLines={1}>
183
- {walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
184
- </OText>
185
- <OText size={12}>-{parsePrice(event.amount)}</OText>
186
- </OSTable>
187
- ))}
188
171
  {isCouponEnabled && !isCartPending && (
189
172
  <View>
190
173
  <View style={{ paddingVertical: 5 }}>
@@ -202,7 +185,7 @@ const OrderSummaryUI = (props: any) => {
202
185
  {t('TOTAL', 'Total')}
203
186
  </OText>
204
187
  <OText size={14} style={{ fontWeight: 'bold' }} >
205
- {parsePrice(cart?.balance ?? cart?.total)}
188
+ {parsePrice(cart?.total)}
206
189
  </OText>
207
190
  </OSTable>
208
191
  </View>
@@ -222,8 +205,7 @@ const OrderSummaryUI = (props: any) => {
222
205
  height: 100,
223
206
  borderColor: theme.colors.border,
224
207
  paddingRight: 50,
225
- marginTop: 10,
226
- borderRadius: 8
208
+ marginTop: 10
227
209
  }}
228
210
  multiline
229
211
  />
@@ -380,13 +380,30 @@ export const ProductOptionsUI = (props: any) => {
380
380
  </Placeholder>
381
381
  ) : (
382
382
  <>
383
- <OText
384
- size={20}
385
- lineHeight={30}
386
- weight={'600'}
387
- style={{ flex: 1, marginBottom: 5 }}>
388
- {product?.name || productCart.name}
389
- </OText>
383
+ <View style={{ flexDirection: 'row' }}>
384
+ <OText
385
+ size={20}
386
+ lineHeight={30}
387
+ weight={'600'}
388
+ style={{ flex: 1, marginBottom: 10 }}>
389
+ {product?.name || productCart.name}
390
+ </OText>
391
+ {product?.calories && (
392
+ <OText size={16} style={{ color: '#808080' }}>{product?.calories} cal
393
+ </OText>
394
+ )}
395
+ </View>
396
+ <View style={{ flexDirection: 'row', marginBottom: 10 }}>
397
+ <OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
398
+ {product?.offer_price && (
399
+ <OText style={{ fontSize: 14,
400
+ color: '#808080',
401
+ textDecorationLine: 'line-through',
402
+ marginLeft: 7,
403
+ marginRight: 7
404
+ }}>{parsePrice(product?.offer_price)}</OText>
405
+ )}
406
+ </View>
390
407
  {((product?.sku && product?.sku !== '-1' && product?.sku !== '1') || (product?.estimated_person)) && (
391
408
  <OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={'#909BA9'} mBottom={7}>
392
409
  {
@@ -663,27 +680,25 @@ export const ProductOptionsUI = (props: any) => {
663
680
  )}
664
681
  </>
665
682
  )}
666
- {!product?.hide_special_instructions && (
667
- <ProductComment>
668
- <SectionTitle>
669
- <OText size={16} weight={'600'} lineHeight={24}>
670
- {t('SPECIAL_COMMENT', 'Special comment')}
671
- </OText>
672
- </SectionTitle>
673
- <OInput
674
- multiline
675
- placeholder={t('SPECIAL_COMMENT', 'Special comment')}
676
- value={productCart.comment}
677
- onChange={(val: string) =>
678
- handleChangeCommentState({ target: { value: val } })
679
- }
680
- isDisabled={
681
- !(productCart && !isSoldOut && maxProductQuantity)
682
- }
683
- style={styles.comment}
684
- />
685
- </ProductComment>
686
- )}
683
+ <ProductComment>
684
+ <SectionTitle>
685
+ <OText size={16} weight={'600'} lineHeight={24}>
686
+ {t('SPECIAL_COMMENT', 'Special comment')}
687
+ </OText>
688
+ </SectionTitle>
689
+ <OInput
690
+ multiline
691
+ placeholder={t('SPECIAL_COMMENT', 'Special comment')}
692
+ value={productCart.comment}
693
+ onChange={(val: string) =>
694
+ handleChangeCommentState({ target: { value: val } })
695
+ }
696
+ isDisabled={
697
+ !(productCart && !isSoldOut && maxProductQuantity)
698
+ }
699
+ style={styles.comment}
700
+ />
701
+ </ProductComment>
687
702
  </ProductEditions>
688
703
  )}
689
704
  </WrapContent>
@@ -14,7 +14,6 @@ import { ProfileParams } from '../../types';
14
14
  import { LogoutButton } from '../LogoutButton'
15
15
  import { LanguageSelector } from '../LanguageSelector'
16
16
  import MessageCircle from 'react-native-vector-icons/AntDesign'
17
- import Ionicons from 'react-native-vector-icons/Ionicons'
18
17
 
19
18
  import {
20
19
  OIcon,
@@ -161,10 +160,6 @@ const ProfileListUI = (props: ProfileParams) => {
161
160
  <MessageCircle name='message1' style={styles.messageIconStyle} color={theme.colors.textNormal} />
162
161
  <OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MESSAGES', 'Messages')}</OText>
163
162
  </ListItem>
164
- <ListItem onPress={() => onRedirect('Wallets', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
165
- <Ionicons name='wallet-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
166
- <OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('WALLETS', 'Wallets')}</OText>
167
- </ListItem>
168
163
  <ListItem onPress={() => navigation.navigate('Help', {})} activeOpacity={0.7}>
169
164
  <OIcon src={theme.images.general.ic_help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
170
165
  <OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>
@@ -129,7 +129,6 @@ export interface BusinessesListingParams {
129
129
  businessTypes?: any;
130
130
  defaultBusinessType?: any;
131
131
  franchiseId?: any;
132
- businessId?: any;
133
132
  }
134
133
  export interface HighestRatedBusinessesParams {
135
134
  businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
@@ -345,8 +344,8 @@ export interface MessagesParams {
345
344
  onClose?: () => void,
346
345
  isMeesageListing?: boolean,
347
346
  setCanRead?: any,
348
- business?: boolean,
349
- driver?: boolean,
347
+ business: boolean,
348
+ driver: boolean,
350
349
  onMessages?: any
351
350
  }
352
351
  export interface ViewInterface {
@@ -456,7 +455,6 @@ export interface GoogleMapsParams {
456
455
 
457
456
  export interface HelpParams {
458
457
  navigation: any;
459
- businessId?: any;
460
458
  }
461
459
 
462
460
  export interface LastOrdersParams {
@@ -527,35 +527,34 @@ export const ProductOptionsUI = (props: any) => {
527
527
  );
528
528
  }))}
529
529
  </View>
530
- {!product?.hide_special_instructions && (
531
- <ProductComment>
532
- <SectionTitle>
533
- <OText size={16} weight={'600'} lineHeight={24}>
534
- {t('SPECIAL_COMMENT', 'Special comment')}
535
- </OText>
536
- </SectionTitle>
537
- <OInput
538
- multiline={true}
539
- numberOfLines={10}
540
- placeholder={t('SPECIAL_COMMENT', 'Special comment')}
541
- value={productCart.comment}
542
- onChange={(val: string) =>
543
- handleChangeCommentState({ target: { value: val } })
544
- }
545
- isDisabled={
546
- !(productCart && !isSoldOut && maxProductQuantity)
547
- }
548
- style={{
549
- height: 100,
550
- justifyContent: "flex-end",
551
- alignItems: 'flex-start',
552
- borderWidth: 1,
553
- borderRadius: 8,
554
- borderColor: theme.colors.border,
555
- }}
556
- />
557
- </ProductComment>
558
- )}
530
+
531
+ <ProductComment>
532
+ <SectionTitle>
533
+ <OText size={16} weight={'600'} lineHeight={24}>
534
+ {t('SPECIAL_COMMENT', 'Special comment')}
535
+ </OText>
536
+ </SectionTitle>
537
+ <OInput
538
+ multiline={true}
539
+ numberOfLines={10}
540
+ placeholder={t('SPECIAL_COMMENT', 'Special comment')}
541
+ value={productCart.comment}
542
+ onChange={(val: string) =>
543
+ handleChangeCommentState({ target: { value: val } })
544
+ }
545
+ isDisabled={
546
+ !(productCart && !isSoldOut && maxProductQuantity)
547
+ }
548
+ style={{
549
+ height: 100,
550
+ justifyContent: "flex-end",
551
+ alignItems: 'flex-start',
552
+ borderWidth: 1,
553
+ borderRadius: 8,
554
+ borderColor: theme.colors.border,
555
+ }}
556
+ />
557
+ </ProductComment>
559
558
  </ProductEditions>
560
559
  )}
561
560
  </WrapContent>
@@ -327,21 +327,19 @@ export const ProductOptionsUI = (props: any) => {
327
327
  </React.Fragment>
328
328
  )
329
329
  }))}
330
- {!product?.hide_special_instructions && (
331
- <ProductComment>
332
- <SectionTitle>
333
- <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
334
- </SectionTitle>
335
- <OInput
336
- multiline
337
- placeholder={t('SPECIAL_COMMENT', 'Special comment')}
338
- value={productCart.comment}
339
- onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
340
- isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
341
- style={styles.comment}
342
- />
343
- </ProductComment>
344
- )}
330
+ <ProductComment>
331
+ <SectionTitle>
332
+ <OText size={16}>{t('SPECIAL_COMMENT', 'Special comment')}</OText>
333
+ </SectionTitle>
334
+ <OInput
335
+ multiline
336
+ placeholder={t('SPECIAL_COMMENT', 'Special comment')}
337
+ value={productCart.comment}
338
+ onChange={(val: string) => handleChangeCommentState({ target: { value: val } })}
339
+ isDisabled={!(productCart && !isSoldOut && maxProductQuantity)}
340
+ style={styles.comment}
341
+ />
342
+ </ProductComment>
345
343
  </ProductEditions>
346
344
  )}
347
345
  </WrapContent>
@@ -1,163 +0,0 @@
1
- import React, { useState, useEffect } from 'react'
2
- import { Platform, StyleSheet, View } from 'react-native'
3
- import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
4
- import { useTheme } from 'styled-components/native'
5
- import CheckBox from '@react-native-community/checkbox';
6
- import {
7
- PaymentOptionWallet as PaymentOptionWalletController,
8
- useLanguage,
9
- useUtils,
10
- } from 'ordering-components/native'
11
-
12
- import {
13
- Container,
14
- SectionLeft,
15
- } from './styles'
16
-
17
- import { OText } from '../shared'
18
-
19
- const PaymentOptionWalletUI = (props: any) => {
20
- const {
21
- cart,
22
- walletsState,
23
- selectWallet,
24
- deletetWalletSelected
25
- } = props
26
-
27
- const theme = useTheme()
28
- const [, t] = useLanguage()
29
- const [{ parsePrice }] = useUtils()
30
-
31
- const styles = StyleSheet.create({
32
- checkBoxStyle: {
33
- width: 25,
34
- height: 25,
35
- }
36
- });
37
-
38
- const [checkedState, setCheckedState] = useState(
39
- new Array(walletsState.result?.length).fill(false)
40
- );
41
-
42
- const creditBalance = (wallet: any) => ` = ${parsePrice((wallet.balance * wallet.redemption_rate) / 100)}`
43
-
44
- const walletName: any = {
45
- cash: {
46
- name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
47
- },
48
- credit_point: {
49
- name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
50
- }
51
- }
52
-
53
- const handleOnChange = (position: any, wallet: any) => {
54
- const updatedCheckedState = checkedState.map((item, index) =>
55
- index === position ? !item : item
56
- );
57
-
58
- if (!checkedState[position]) {
59
- selectWallet(wallet)
60
- } else {
61
- deletetWalletSelected(wallet)
62
- }
63
-
64
- setCheckedState(updatedCheckedState);
65
- };
66
-
67
- useEffect(() => {
68
- if (!walletsState.loading) {
69
- setCheckedState(
70
- walletsState.result.map((wallet: any) => {
71
- return !!cart?.wallets?.find((w: any) => w.id === wallet.id)
72
- })
73
- )
74
- }
75
- }, [walletsState.result?.length])
76
-
77
- return (
78
- <>
79
- {!walletsState.loading &&
80
- !walletsState.error &&
81
- walletsState.result?.length > 0 &&
82
- (
83
- <>
84
- {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && (
85
- <Container
86
- key={wallet.id}
87
- isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}
88
- >
89
- <SectionLeft>
90
- <CheckBox
91
- value={checkedState[idx]}
92
- onValueChange={() => handleOnChange(idx, wallet)}
93
- disabled={(cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0 }
94
- boxType={'square'}
95
- tintColors={{
96
- true: theme.colors.primary,
97
- false: theme.colors.disabled
98
- }}
99
- tintColor={theme.colors.disabled}
100
- onCheckColor={theme.colors.primary}
101
- onTintColor={theme.colors.primary}
102
- style={Platform.OS === 'ios' && styles.checkBoxStyle}
103
- />
104
- <View style={{ alignItems: 'baseline' }}>
105
- <View>
106
- <OText
107
- style={((cart?.balance === 0 && !checkedState[idx]) || wallet.balance === 0) ?{
108
- color: theme.colors.disabled
109
- } : {}}
110
- >
111
- {walletName[wallet.type]?.name}
112
- </OText>
113
- </View>
114
- </View>
115
- </SectionLeft>
116
-
117
- <View style={{maxWidth: '40%', alignItems: 'flex-end' }}>
118
- {wallet.type === 'cash' && (
119
- <OText>
120
- {parsePrice(wallet?.balance)}
121
- </OText>
122
- )}
123
- {wallet.type === 'credit_point' && (
124
- <OText>
125
- <OText color={theme.colors.primary} weight='bold'>
126
- {`${wallet?.balance} ${t('POINTS', 'Points')}`}
127
- </OText>
128
- <OText>
129
- {`${wallet.balance > 0 && creditBalance(wallet)}`}
130
- </OText>
131
- </OText>
132
- )}
133
- </View>
134
- </Container>
135
- ))}
136
- </>
137
- )}
138
-
139
- {walletsState?.loading && (
140
- <View>
141
- {[...Array(2).keys()].map(i => (
142
- <View style={{ marginBottom: 10 }} key={i}>
143
- <Placeholder Animation={Fade}>
144
- <PlaceholderLine width={100} height={40} style={{ marginBottom: 0, borderRadius: 8 }} />
145
- </Placeholder>
146
- </View>
147
- ))}
148
- </View>
149
- )}
150
- </>
151
- )
152
- }
153
-
154
- export const PaymentOptionWallet = (props: any) => {
155
- const paymentWalletProps = {
156
- ...props,
157
- UIComponent: PaymentOptionWalletUI
158
- }
159
-
160
- return (
161
- <PaymentOptionWalletController {...paymentWalletProps} />
162
- )
163
- }