ordering-ui-react-native 0.14.29 → 0.14.30-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 (34) hide show
  1. package/package.json +2 -3
  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 +31 -50
  10. package/themes/original/src/components/BusinessItemAccordion/styles.tsx +0 -7
  11. package/themes/original/src/components/BusinessProductsList/index.tsx +3 -3
  12. package/themes/original/src/components/BusinessesListing/index.tsx +19 -25
  13. package/themes/original/src/components/Cart/index.tsx +9 -29
  14. package/themes/original/src/components/CartContent/index.tsx +0 -1
  15. package/themes/original/src/components/Checkout/index.tsx +4 -15
  16. package/themes/original/src/components/Checkout/styles.tsx +1 -5
  17. package/themes/original/src/components/FacebookLogin/index.tsx +20 -5
  18. package/themes/original/src/components/Help/index.tsx +2 -2
  19. package/themes/original/src/components/Home/index.tsx +5 -3
  20. package/themes/original/src/components/OrderDetails/index.tsx +3 -55
  21. package/themes/original/src/components/OrderProgress/index.tsx +2 -2
  22. package/themes/original/src/components/OrderSummary/index.tsx +3 -21
  23. package/themes/original/src/components/ProductForm/index.tsx +63 -103
  24. package/themes/original/src/components/ProductForm/styles.tsx +0 -12
  25. package/themes/original/src/components/ProductIngredient/index.tsx +4 -5
  26. package/themes/original/src/components/ProductOptionSubOption/index.tsx +9 -9
  27. package/themes/original/src/components/UserProfile/index.tsx +0 -5
  28. package/themes/original/src/types/index.tsx +2 -4
  29. package/themes/original/src/components/PaymentOptionWallet/index.tsx +0 -163
  30. package/themes/original/src/components/PaymentOptionWallet/styles.tsx +0 -38
  31. package/themes/original/src/components/WalletTransactionItem/index.tsx +0 -68
  32. package/themes/original/src/components/WalletTransactionItem/styles.tsx +0 -37
  33. package/themes/original/src/components/Wallets/index.tsx +0 -204
  34. package/themes/original/src/components/Wallets/styles.tsx +0 -43
@@ -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
- `
@@ -1,204 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Pressable, View } from 'react-native';
3
- import { useTheme } from 'styled-components/native'
4
- import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
5
- import {
6
- WalletList,
7
- useLanguage,
8
- useUtils,
9
- useConfig
10
- } from 'ordering-components/native'
11
-
12
- import {
13
- Container,
14
- BalanceElement,
15
- TransactionsWrapper,
16
- OTabs,
17
- OTab,
18
- SectionContent
19
- } from './styles'
20
-
21
- import NavBar from '../NavBar'
22
- import { OIcon, OText } from '../shared';
23
- import { NotFoundSource } from '../NotFoundSource';
24
- import { WalletTransactionItem } from '../WalletTransactionItem'
25
-
26
- const WalletsUI = (props: any) => {
27
- const {
28
- navigation,
29
- walletList,
30
- transactionsList,
31
- setWalletSelected
32
- } = props
33
-
34
- const [, t] = useLanguage()
35
- const theme = useTheme()
36
- const [{ parsePrice, parseDate }] = useUtils()
37
- const [{ configs }] = useConfig()
38
-
39
- const [tabSelected, setTabSelected] = useState('cash')
40
-
41
- const currentWalletSelected = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === tabSelected)) ?? null
42
-
43
- const walletName: any = {
44
- cash: {
45
- name: t('CASH_WALLET', 'Cash Wallet'),
46
- value: 0
47
- },
48
- credit_point: {
49
- name: t('CREDITS_POINTS_WALLET', 'Credit Points Wallet'),
50
- value: 1
51
- }
52
- }
53
-
54
- const handleChangeTab = (wallet: any) => {
55
- setTabSelected(wallet.type)
56
- setWalletSelected(wallet.id)
57
- }
58
-
59
- const goToBack = () => {
60
- navigation?.canGoBack() && navigation.goBack()
61
- }
62
-
63
- return (
64
- <Container>
65
- <NavBar
66
- title={t('WALLETS', 'Wallets')}
67
- titleAlign={'center'}
68
- onActionLeft={goToBack}
69
- showCall={false}
70
- paddingTop={10}
71
- btnStyle={{ paddingLeft: 0 }}
72
- />
73
-
74
- {!walletList.loading &&
75
- !walletList.error &&
76
- walletList.wallets?.length > 0 &&
77
- (
78
- <>
79
- <OTabs>
80
- {walletList.wallets?.map((wallet: any) =>(
81
- <Pressable
82
- key={wallet.id}
83
- onPress={() => handleChangeTab(wallet)}
84
- >
85
- <OTab>
86
- <OText size={18} color={tabSelected === wallet.type ? theme.colors.primary : theme.colors.disabled}>
87
- {walletName[wallet.type]?.name}
88
- </OText>
89
- </OTab>
90
- </Pressable>
91
- ))}
92
- </OTabs>
93
-
94
- <SectionContent>
95
- <BalanceElement>
96
- <OText size={20} style={{fontWeight: '600'}}>
97
- {currentWalletSelected?.type === 'cash'
98
- ? parsePrice(currentWalletSelected?.balance)
99
- : currentWalletSelected?.balance
100
- }
101
- </OText>
102
- <OText style={{ paddingLeft: 5 }}>
103
- {currentWalletSelected?.type === 'cash'
104
- ? configs?.stripe_currency?.value
105
- : t('POINTS', 'Points')}
106
- </OText>
107
- </BalanceElement>
108
- {console.log(transactionsList)}
109
-
110
- <View style={{ marginTop: 20, width: '100%', paddingHorizontal: 1, paddingBottom: 40 }}>
111
- {!transactionsList?.loading &&
112
- !transactionsList?.error &&
113
- transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length > 0 &&
114
- (
115
- <>
116
- <OText style={{fontSize: 20}}>
117
- {t('TRANSACTIONS_HISTORY', 'Transactions history')}
118
- </OText>
119
- <TransactionsWrapper>
120
- {transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.map((transaction: any, i: number) =>(
121
- <WalletTransactionItem
122
- idx={i}
123
- type={currentWalletSelected?.type}
124
- key={transaction.id}
125
- item={transaction}
126
- />
127
- ))}
128
- </TransactionsWrapper>
129
- </>
130
- )}
131
-
132
- {(transactionsList?.loading || !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]) && (
133
- <View>
134
- {[...Array(4).keys()].map(i => (
135
- <View style={{ marginBottom: 10 }} key={i}>
136
- <Placeholder Animation={Fade}>
137
- <PlaceholderLine width={100} height={100} style={{ marginBottom: 0, borderRadius: 8 }} />
138
- </Placeholder>
139
- </View>
140
- ))}
141
- </View>
142
- )}
143
-
144
- {!(transactionsList?.loading && transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]) &&
145
- (transactionsList?.error ||
146
- !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
147
- (
148
- <NotFoundSource
149
- content={transactionsList?.error
150
- ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
151
- : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
152
- }
153
- />
154
- )}
155
- </View>
156
- </SectionContent>
157
- </>
158
- )}
159
-
160
- {walletList?.loading && (
161
- <>
162
- <View>
163
- <Placeholder Animation={Fade}>
164
- <PlaceholderLine width={100} height={40} style={{ marginBottom: 0 }} />
165
- </Placeholder>
166
- </View>
167
- <View style={{ marginTop: 10, marginBottom: 20 }}>
168
- <Placeholder Animation={Fade}>
169
- <PlaceholderLine width={100} height={40} style={{ marginBottom: 0 }} />
170
- </Placeholder>
171
- </View>
172
- <View>
173
- {[...Array(4).keys()].map(i => (
174
- <View style={{ marginBottom: 10 }} key={i}>
175
- <Placeholder Animation={Fade}>
176
- <PlaceholderLine width={100} height={60} style={{ marginBottom: 0 }} />
177
- </Placeholder>
178
- </View>
179
- ))}
180
- </View>
181
- </>
182
- )}
183
-
184
- {!walletList?.loading && (walletList?.error || !walletList?.wallets?.length) && (
185
- <NotFoundSource
186
- content={walletList?.error
187
- ? t('ERROR_NOT_FOUND_WALLETS', 'Sorry, an error has occurred')
188
- : t('NOT_FOUND_WALLETS', 'No wallets to show at this time.')
189
- }
190
- />
191
- )}
192
- </Container>
193
- )
194
- }
195
-
196
- export const Wallets = (props: any) => {
197
- const walletsProps = {
198
- ...props,
199
- UIComponent: WalletsUI
200
- }
201
- return (
202
- <WalletList {...walletsProps} />
203
- )
204
- }
@@ -1,43 +0,0 @@
1
- import styled from 'styled-components/native'
2
-
3
- export const Container = styled.View`
4
- display: flex;
5
- flex-direction: column;
6
- `
7
-
8
- export const SectionContent = styled.View`
9
- width: 100%;
10
- display: flex;
11
- flex-direction: column;
12
- align-items: center;
13
- justify-content: center;
14
- margin-top: 20px;
15
- `
16
-
17
- export const TransactionsWrapper = styled.View`
18
- display: flex;
19
- flex-direction: column;
20
- border-left-width: 2px;
21
- border-left-color: ${(props: any) => props.theme.colors.disabled};
22
- `
23
-
24
- export const BalanceElement = styled.View`
25
- width: 100%;
26
- padding: 10px 0;
27
- display: flex;
28
- flex-direction: row;
29
- justify-content: center;
30
- align-items: flex-end;
31
- background-color: ${(props: any) => props.theme.colors.backgroundGray100};
32
- border-radius: 8px;
33
- `
34
-
35
- export const OTabs = styled.View`
36
- flex-direction: row;
37
- width: 100%;
38
- flex-wrap: wrap;
39
- `;
40
-
41
- export const OTab = styled.View`
42
- padding-horizontal: 10px;
43
- `;