ordering-ui-react-native 0.14.27 → 0.14.29-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 (29) hide show
  1. package/package.json +2 -2
  2. package/src/components/ProductForm/index.tsx +27 -19
  3. package/src/components/VerifyPhone/styles.tsx +1 -2
  4. package/themes/doordash/src/components/LoginForm/index.tsx +1 -2
  5. package/themes/instacart/src/components/BusinessProductsList/styles.tsx +1 -1
  6. package/themes/instacart/src/components/SingleProductCard/index.tsx +19 -24
  7. package/themes/instacart/src/components/SingleProductCard/styles.tsx +6 -4
  8. package/themes/original/index.tsx +0 -4
  9. package/themes/original/src/components/BusinessItemAccordion/index.tsx +1 -2
  10. package/themes/original/src/components/BusinessesListing/index.tsx +19 -25
  11. package/themes/original/src/components/Cart/index.tsx +9 -27
  12. package/themes/original/src/components/CartContent/index.tsx +0 -1
  13. package/themes/original/src/components/Checkout/index.tsx +4 -15
  14. package/themes/original/src/components/Checkout/styles.tsx +1 -5
  15. package/themes/original/src/components/FacebookLogin/index.tsx +20 -5
  16. package/themes/original/src/components/Help/index.tsx +2 -2
  17. package/themes/original/src/components/Home/index.tsx +5 -3
  18. package/themes/original/src/components/OrderDetails/index.tsx +3 -55
  19. package/themes/original/src/components/OrderProgress/index.tsx +2 -2
  20. package/themes/original/src/components/OrderSummary/index.tsx +3 -21
  21. package/themes/original/src/components/ProductForm/index.tsx +24 -7
  22. package/themes/original/src/components/UserProfile/index.tsx +0 -5
  23. package/themes/original/src/types/index.tsx +2 -4
  24. package/themes/original/src/components/PaymentOptionWallet/index.tsx +0 -163
  25. package/themes/original/src/components/PaymentOptionWallet/styles.tsx +0 -38
  26. package/themes/original/src/components/WalletTransactionItem/index.tsx +0 -68
  27. package/themes/original/src/components/WalletTransactionItem/styles.tsx +0 -37
  28. package/themes/original/src/components/Wallets/index.tsx +0 -204
  29. package/themes/original/src/components/Wallets/styles.tsx +0 -43
@@ -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 = [
@@ -611,7 +602,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
611
602
  <OText size={16} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
612
603
  {t('DELIVERY_PREFERENCE', 'Delivery Preference')}
613
604
  </OText>
614
- <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>{order?.delivery_option?.name ?? t('EITHER_WAY', 'Either way')}</OText>
605
+ <OText size={12} style={{ textAlign: 'left' }} color={theme.colors.textNormal}>
606
+ {order?.delivery_option?.name ? t(order?.delivery_option?.name.toUpperCase().replace(/\s/g, '_')) : t('EITHER_WAY', 'Either way')}
607
+ </OText>
615
608
  </View>
616
609
  )}
617
610
  {order?.comment && (
@@ -835,51 +828,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
835
828
  </OText>
836
829
  </Table>
837
830
  </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
831
  </OrderBill>
884
832
  </OrderContent>
885
833
  </>
@@ -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
  {
@@ -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 {
@@ -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
- }
@@ -1,38 +0,0 @@
1
- import styled, { css } from 'styled-components/native'
2
-
3
- export const Container = styled.View`
4
- width: 100%;
5
- display: flex;
6
- padding: 20px 0;
7
- margin-top: 10px;
8
- flex-direction: row;
9
- justify-content: space-between;
10
- align-items: center;
11
- border-top-width: 1px;
12
- border-top-color: ${(props: any) => props.theme.colors.backgroundGray200};
13
- ${(props: any) => props.isBottomBorder && css`
14
- border-bottom-width: 1px;
15
- border-bottom-color: ${(props: any) => props.theme.colors.backgroundGray200};
16
- `}
17
- `
18
-
19
- export const SectionLeft = styled.View`
20
- max-width: 55%;
21
- display: flex;
22
- flex-direction: row;
23
- align-items: center;
24
- justify-content: center;
25
- `
26
-
27
- export const SectionLeftText = styled.View`
28
- alignSelf: flex-start;
29
- display: flex;
30
- flex-direction: column;
31
- flex-wrap: wrap;
32
- `
33
-
34
- export const SectionWrapper = styled.View`
35
- padding-top: 10px;
36
- display: flex;
37
- flex-direction: column;
38
- `
@@ -1,68 +0,0 @@
1
- import React from 'react'
2
- import { useTheme } from 'styled-components/native'
3
- import { useLanguage, useUtils } from 'ordering-components/native'
4
-
5
- import {
6
- Container,
7
- DateBlock,
8
- MessageBlock,
9
- DescriptionBlock,
10
- Dot
11
- } from './styles'
12
- import { OIcon, OText } from '../shared';
13
-
14
- export const WalletTransactionItem = (props: any) => {
15
- const {
16
- item,
17
- idx,
18
- type
19
- } = props
20
-
21
- const theme = useTheme()
22
- const [{ parsePrice, parseDate }] = useUtils()
23
- const [, t] = useLanguage()
24
-
25
- const LANG_EVENT_KEY = `WALLET_${type.toUpperCase()}_${item?.event.toUpperCase()}_${item?.event_type.toUpperCase()}_${item?.amount >= 0 ? 'POSITIVE': 'NEGATIVE'}`
26
- const lang_event_text = !!item?.event?.order_id
27
- ? `:author ${item?.amount >= 0 ? 'add' : 'reduce'} money in Order No. :order_id`
28
- : `:author ${item?.amount >= 0 ? 'add' : 'reduce'} money`
29
-
30
- return (
31
- <Container>
32
- <Dot isTop={idx === 0} />
33
- <DateBlock>
34
- <OText color={theme.colors.disabled}>{parseDate(item?.created_at)}</OText>
35
- <OText
36
- style={{
37
- color: item?.amount > 0 && theme.colors.primary,
38
- fontWeight: 'bold'
39
- }}
40
- >
41
- {item?.amount > 0 && '+ '}{parsePrice(item?.amount)}
42
- </OText>
43
- </DateBlock>
44
- <MessageBlock>
45
- <OText>
46
- {t(LANG_EVENT_KEY, lang_event_text)
47
- .replace(':author', item?.event?.author?.name ?? '')
48
- .replace(':order_id', item?.event?.order_id ?? '')}
49
- </OText>
50
- </MessageBlock>
51
- {!!item?.description && (
52
- <DescriptionBlock>
53
- <OText>{item?.description}</OText>
54
- </DescriptionBlock>
55
- )}
56
- {!!item?.code && (
57
- <DescriptionBlock>
58
- <OText weight={'bold'}>
59
- {t('CODE', 'Code')}
60
- <OText weight={'100'}>
61
- {': '}{item?.code}
62
- </OText>
63
- </OText>
64
- </DescriptionBlock>
65
- )}
66
- </Container>
67
- )
68
- }
@@ -1,37 +0,0 @@
1
- import styled from 'styled-components/native'
2
-
3
- export const Container = styled.View`
4
- display: flex;
5
- flex-direction: column;
6
- margin-bottom: 20px;
7
- position: relative;
8
- padding-left: 10px;
9
- `
10
-
11
- export const DateBlock = styled.View`
12
- display: flex;
13
- flex-direction: row;
14
- justify-content: space-between;
15
- align-items: center;
16
- `
17
-
18
- export const MessageBlock = styled.View`
19
- display: flex;
20
- font-size: 14px;
21
- `
22
-
23
- export const Dot = styled.View`
24
- position: absolute;
25
- top: ${(props: any) => props.isTop ? 0 : 6}px;
26
- left: -4px;
27
- width: 6px;
28
- height: 6px;
29
- border-radius: 50px;
30
- background-color: ${(props: any) => props.theme.colors.disabled};
31
- `
32
-
33
- export const DescriptionBlock = styled(MessageBlock)`
34
- display: flex;
35
- flex-direction: row;
36
- flex-wrap: wrap;
37
- `