ordering-ui-react-native 0.14.21 → 0.14.23-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 -2
- package/src/components/ProductForm/index.tsx +27 -19
- package/themes/original/index.tsx +0 -4
- 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/OrderDetails/index.tsx +0 -54
- package/themes/original/src/components/OrderSummary/index.tsx +2 -58
- package/themes/original/src/components/ProductForm/index.tsx +24 -7
- package/themes/original/src/components/UserProfile/index.tsx +0 -5
- package/themes/original/src/types/index.tsx +2 -2
- 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
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ordering-ui-react-native",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.23-release",
|
|
4
4
|
"description": "Reusable components made in react native",
|
|
5
5
|
"main": "src/index.tsx",
|
|
6
6
|
"author": "ordering.inc",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@types/styled-components": "^5.1.3",
|
|
56
56
|
"axios": "^0.21.0",
|
|
57
57
|
"moment": "^2.29.1",
|
|
58
|
-
"ordering-components": "github:Ordering-Inc/ordering-components#
|
|
58
|
+
"ordering-components": "github:Ordering-Inc/ordering-components#release",
|
|
59
59
|
"patch-package": "^6.4.7",
|
|
60
60
|
"postinstall-postinstall": "^2.1.0",
|
|
61
61
|
"prop-types": "^15.7.2",
|
|
@@ -132,7 +132,18 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
132
132
|
) : (
|
|
133
133
|
<>
|
|
134
134
|
<View style={{ flexDirection: 'column', width: '100%' }}>
|
|
135
|
-
<
|
|
135
|
+
<View style={{ flexDirection: 'row', marginTop: 15 }}>
|
|
136
|
+
<OText size={20} style={{ flex: I18nManager.isRTL ? 0 : 1, marginBottom: 10 }}>{product?.name || productCart.name}{' '}</OText>
|
|
137
|
+
{product?.calories && (
|
|
138
|
+
<OText size={16} style={styles.caloriesStyle}>{product?.calories} cal</OText>
|
|
139
|
+
)}
|
|
140
|
+
</View>
|
|
141
|
+
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
|
|
142
|
+
<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
|
|
143
|
+
{product?.offer_price && (
|
|
144
|
+
<OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
|
|
145
|
+
)}
|
|
146
|
+
</View>
|
|
136
147
|
{(product?.estimated_person || (product?.sku && product?.sku !== '-1' && product?.sku !== '1')) && (
|
|
137
148
|
<OText size={14} style={{ flex: I18nManager.isRTL ? 1 : 0, marginBottom: 10 }} color={'#909BA9'}>
|
|
138
149
|
{
|
|
@@ -147,12 +158,6 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
147
158
|
}
|
|
148
159
|
</OText>
|
|
149
160
|
)}
|
|
150
|
-
<View style={{ flexDirection: 'row', marginBottom: 10}}>
|
|
151
|
-
<OText size={16} style={{ flex: I18nManager.isRTL ? 1 : 0 }} color={theme.colors.primary}>{productCart.price ? parsePrice(productCart.price) : ''}</OText>
|
|
152
|
-
{product?.offer_price && (
|
|
153
|
-
<OText style={styles.regularPriceStyle}>{parsePrice(product?.offer_price)}</OText>
|
|
154
|
-
)}
|
|
155
|
-
</View>
|
|
156
161
|
</View>
|
|
157
162
|
</>
|
|
158
163
|
)}
|
|
@@ -162,17 +167,17 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
162
167
|
</ProductDescription>
|
|
163
168
|
{loading && !product ? (
|
|
164
169
|
<>
|
|
165
|
-
{[...Array(2)].map((item,i) => (
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
170
|
+
{[...Array(2)].map((item, i) => (
|
|
171
|
+
<Placeholder key={i} style={{ marginBottom: 20 }} Animation={Fade}>
|
|
172
|
+
<PlaceholderLine height={40} style={{ flex: 1, marginTop: 10 }} />
|
|
173
|
+
{[...Array(3)].map((item, i) => (
|
|
174
|
+
<View key={i} style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
|
|
175
|
+
<PlaceholderLine height={30} width={10} style={{ marginBottom: 20 }} />
|
|
176
|
+
<PlaceholderLine height={30} width={50} style={{ marginBottom: 20 }} />
|
|
177
|
+
<PlaceholderLine height={30} width={30} style={{ marginBottom: 20 }} />
|
|
178
|
+
</View>
|
|
179
|
+
))}
|
|
180
|
+
</Placeholder>
|
|
176
181
|
))}
|
|
177
182
|
</>
|
|
178
183
|
) : (
|
|
@@ -221,7 +226,7 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
221
226
|
state={currentState}
|
|
222
227
|
disabled={isSoldOut || maxProductQuantity <= 0}
|
|
223
228
|
/>
|
|
224
|
-
): null
|
|
229
|
+
) : null
|
|
225
230
|
})
|
|
226
231
|
}
|
|
227
232
|
</WrapperSubOption>
|
|
@@ -381,6 +386,9 @@ const styles = StyleSheet.create({
|
|
|
381
386
|
textDecorationLine: 'line-through',
|
|
382
387
|
marginLeft: 7,
|
|
383
388
|
marginRight: 7
|
|
389
|
+
},
|
|
390
|
+
caloriesStyle: {
|
|
391
|
+
color: '#808080'
|
|
384
392
|
}
|
|
385
393
|
})
|
|
386
394
|
|
|
@@ -28,8 +28,6 @@ import { HelpGuide } from './src/components/HelpGuide';
|
|
|
28
28
|
import { HelpOrder } from './src/components/HelpOrder';
|
|
29
29
|
import { NotFoundSource } from './src/components/NotFoundSource';
|
|
30
30
|
import { OrderTypeSelector } from './src/components/OrderTypeSelector';
|
|
31
|
-
import { Wallets } from './src/components/Wallets';
|
|
32
|
-
import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
|
|
33
31
|
|
|
34
32
|
import { Toast } from './src/components/shared/OToast';
|
|
35
33
|
import {
|
|
@@ -88,8 +86,6 @@ export {
|
|
|
88
86
|
HelpOrder,
|
|
89
87
|
NotFoundSource,
|
|
90
88
|
OrderTypeSelector,
|
|
91
|
-
Wallets,
|
|
92
|
-
PaymentOptionWallet,
|
|
93
89
|
|
|
94
90
|
// OComponents
|
|
95
91
|
Toast,
|
|
@@ -23,7 +23,6 @@ import { PaymentOptions } from '../PaymentOptions';
|
|
|
23
23
|
import { DriverTips } from '../DriverTips';
|
|
24
24
|
import { NotFoundSource } from '../NotFoundSource';
|
|
25
25
|
import { UserDetails } from '../UserDetails';
|
|
26
|
-
import { PaymentOptionWallet } from '../PaymentOptionWallet';
|
|
27
26
|
|
|
28
27
|
import {
|
|
29
28
|
ChContainer,
|
|
@@ -38,8 +37,7 @@ import {
|
|
|
38
37
|
ChUserDetails,
|
|
39
38
|
ChCart,
|
|
40
39
|
DeliveryOptionsContainer,
|
|
41
|
-
DeliveryOptionItem
|
|
42
|
-
WalletPaymentOptionContainer
|
|
40
|
+
DeliveryOptionItem
|
|
43
41
|
} from './styles';
|
|
44
42
|
import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
|
|
45
43
|
|
|
@@ -506,15 +504,6 @@ const CheckoutUI = (props: any) => {
|
|
|
506
504
|
</ChSection>
|
|
507
505
|
)}
|
|
508
506
|
|
|
509
|
-
{!cartState.loading && cart && (
|
|
510
|
-
<WalletPaymentOptionContainer>
|
|
511
|
-
<PaymentOptionWallet
|
|
512
|
-
cart={cart}
|
|
513
|
-
/>
|
|
514
|
-
</WalletPaymentOptionContainer>
|
|
515
|
-
)}
|
|
516
|
-
|
|
517
|
-
|
|
518
507
|
{!cartState.loading && cart && (
|
|
519
508
|
<ChSection>
|
|
520
509
|
<ChCart>
|
|
@@ -554,8 +543,8 @@ const CheckoutUI = (props: any) => {
|
|
|
554
543
|
)}
|
|
555
544
|
|
|
556
545
|
{!cartState.loading && cart && (
|
|
557
|
-
|
|
558
|
-
<ChErrors
|
|
546
|
+
<ChSection style={{ paddingTop: 0, paddingBottom: 20, paddingHorizontal: 20 }}>
|
|
547
|
+
<ChErrors>
|
|
559
548
|
{!cart?.valid_address && cart?.status !== 2 && (
|
|
560
549
|
<OText
|
|
561
550
|
color={theme.colors.error}
|
|
@@ -583,7 +572,7 @@ const CheckoutUI = (props: any) => {
|
|
|
583
572
|
</OText>
|
|
584
573
|
)}
|
|
585
574
|
</ChErrors>
|
|
586
|
-
</
|
|
575
|
+
</ChSection>
|
|
587
576
|
)}
|
|
588
577
|
<OModal
|
|
589
578
|
open={openChangeStore && props.isFranchiseApp}
|
|
@@ -74,10 +74,6 @@ export const ChDriverTips = styled(ChPaymethods)``
|
|
|
74
74
|
|
|
75
75
|
export const ChCart = styled(ChPaymethods)``
|
|
76
76
|
|
|
77
|
-
export const WalletPaymentOptionContainer = styled(ChPaymethods)`
|
|
78
|
-
padding-bottom: 0;
|
|
79
|
-
`
|
|
80
|
-
|
|
81
77
|
export const ChPlaceOrderBtn = styled.View`
|
|
82
78
|
width: 100%;
|
|
83
79
|
display: flex;
|
|
@@ -103,4 +99,4 @@ export const DeliveryOptionItem = styled.View`
|
|
|
103
99
|
align-items: center;
|
|
104
100
|
flex-direction: row;
|
|
105
101
|
background-color: ${(props : any) => props?.backgroundColor ?? '#fff'};
|
|
106
|
-
`;
|
|
102
|
+
`;
|
|
@@ -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
|
</>
|
|
@@ -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>
|
|
@@ -214,8 +205,7 @@ const OrderSummaryUI = (props: any) => {
|
|
|
214
205
|
height: 100,
|
|
215
206
|
borderColor: theme.colors.border,
|
|
216
207
|
paddingRight: 50,
|
|
217
|
-
marginTop: 10
|
|
218
|
-
borderRadius: 8
|
|
208
|
+
marginTop: 10
|
|
219
209
|
}}
|
|
220
210
|
multiline
|
|
221
211
|
/>
|
|
@@ -232,52 +222,6 @@ const OrderSummaryUI = (props: any) => {
|
|
|
232
222
|
</View>
|
|
233
223
|
</OSTable>
|
|
234
224
|
)}
|
|
235
|
-
{cart?.payment_events?.length > 0 && (
|
|
236
|
-
<View
|
|
237
|
-
style={{
|
|
238
|
-
width: '100%',
|
|
239
|
-
marginTop: 20
|
|
240
|
-
}}
|
|
241
|
-
>
|
|
242
|
-
{cart?.payment_events?.map((event: any) => (
|
|
243
|
-
<View
|
|
244
|
-
key={event.id}
|
|
245
|
-
style={{
|
|
246
|
-
display: 'flex',
|
|
247
|
-
flexDirection: 'row',
|
|
248
|
-
justifyContent: 'space-between',
|
|
249
|
-
marginBottom: 10
|
|
250
|
-
}}
|
|
251
|
-
>
|
|
252
|
-
<OText>
|
|
253
|
-
{walletName[cart?.wallets?.find((wallet: any) => wallet.id === event.wallet_id)?.type]?.name}
|
|
254
|
-
</OText>
|
|
255
|
-
<OText>
|
|
256
|
-
-{parsePrice(event.amount)}
|
|
257
|
-
</OText>
|
|
258
|
-
</View>
|
|
259
|
-
))}
|
|
260
|
-
<View
|
|
261
|
-
style={{
|
|
262
|
-
display: 'flex',
|
|
263
|
-
flexDirection: 'row',
|
|
264
|
-
justifyContent: 'space-between',
|
|
265
|
-
marginBottom: 10
|
|
266
|
-
}}
|
|
267
|
-
>
|
|
268
|
-
<OText
|
|
269
|
-
weight={'bold'}
|
|
270
|
-
>
|
|
271
|
-
{t('TOTAL_TO_PAY', 'Total to pay')}
|
|
272
|
-
</OText>
|
|
273
|
-
<OText
|
|
274
|
-
weight={'bold'}
|
|
275
|
-
>
|
|
276
|
-
{parsePrice(cart?.balance)}
|
|
277
|
-
</OText>
|
|
278
|
-
</View>
|
|
279
|
-
</View>
|
|
280
|
-
)}
|
|
281
225
|
</OSBill>
|
|
282
226
|
)}
|
|
283
227
|
<OModal
|
|
@@ -380,13 +380,30 @@ export const ProductOptionsUI = (props: any) => {
|
|
|
380
380
|
</Placeholder>
|
|
381
381
|
) : (
|
|
382
382
|
<>
|
|
383
|
-
<
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
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>
|
|
@@ -344,8 +344,8 @@ export interface MessagesParams {
|
|
|
344
344
|
onClose?: () => void,
|
|
345
345
|
isMeesageListing?: boolean,
|
|
346
346
|
setCanRead?: any,
|
|
347
|
-
business
|
|
348
|
-
driver
|
|
347
|
+
business: boolean,
|
|
348
|
+
driver: boolean,
|
|
349
349
|
onMessages?: any
|
|
350
350
|
}
|
|
351
351
|
export interface ViewInterface {
|
|
@@ -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
|
-
`;
|