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.
- package/package.json +2 -3
- package/src/components/ProductForm/index.tsx +27 -19
- package/src/components/VerifyPhone/styles.tsx +1 -2
- package/themes/doordash/src/components/LoginForm/index.tsx +1 -2
- package/themes/instacart/src/components/BusinessProductsList/styles.tsx +1 -1
- package/themes/instacart/src/components/SingleProductCard/index.tsx +19 -24
- package/themes/instacart/src/components/SingleProductCard/styles.tsx +6 -4
- package/themes/original/index.tsx +0 -4
- package/themes/original/src/components/BusinessItemAccordion/index.tsx +31 -50
- package/themes/original/src/components/BusinessItemAccordion/styles.tsx +0 -7
- package/themes/original/src/components/BusinessProductsList/index.tsx +3 -3
- package/themes/original/src/components/BusinessesListing/index.tsx +19 -25
- package/themes/original/src/components/Cart/index.tsx +9 -29
- package/themes/original/src/components/CartContent/index.tsx +0 -1
- package/themes/original/src/components/Checkout/index.tsx +4 -15
- package/themes/original/src/components/Checkout/styles.tsx +1 -5
- package/themes/original/src/components/FacebookLogin/index.tsx +20 -5
- package/themes/original/src/components/Help/index.tsx +2 -2
- package/themes/original/src/components/Home/index.tsx +5 -3
- package/themes/original/src/components/OrderDetails/index.tsx +3 -55
- package/themes/original/src/components/OrderProgress/index.tsx +2 -2
- package/themes/original/src/components/OrderSummary/index.tsx +3 -21
- package/themes/original/src/components/ProductForm/index.tsx +63 -103
- package/themes/original/src/components/ProductForm/styles.tsx +0 -12
- package/themes/original/src/components/ProductIngredient/index.tsx +4 -5
- package/themes/original/src/components/ProductOptionSubOption/index.tsx +9 -9
- package/themes/original/src/components/UserProfile/index.tsx +0 -5
- package/themes/original/src/types/index.tsx +2 -4
- package/themes/original/src/components/PaymentOptionWallet/index.tsx +0 -163
- package/themes/original/src/components/PaymentOptionWallet/styles.tsx +0 -38
- package/themes/original/src/components/WalletTransactionItem/index.tsx +0 -68
- package/themes/original/src/components/WalletTransactionItem/styles.tsx +0 -37
- package/themes/original/src/components/Wallets/index.tsx +0 -204
- 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
|
|
349
|
-
driver
|
|
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
|
-
`;
|